/* ==========================================================================
   NHV-40 — Mobile menu
   ==========================================================================
   Below 992px the category bar is hidden and a toggle opens a full-screen
   drawer: sign in / register (or account / sign out), every category with its
   subcategories, brands, Specials, the information pages, and the phone and
   WhatsApp links.

   Markup: common/menu.twig. Behaviour: catalog/view/javascript/nhv/mobile-menu.js.
   The drawer is position:fixed; nothing above it in the header sets transform,
   filter or contain, so it is not trapped inside the nav bar it is written in.
   ========================================================================== */

/* --- The toggle -----------------------------------------------------------
   Was a Bootstrap collapse trigger. It un-hid the desktop list inline inside
   the nav bar's flex row — a narrow column of names wedged between the toggle
   and the cart. It now opens the drawer instead. */

.nhv-menu-toggle {
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-nav);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nhv-cream-bright);
  background: transparent;
  border: 1px solid var(--nhv-cream);
  border-radius: var(--nhv-radius-sm);
  cursor: pointer;
}
.nhv-menu-toggle .fa { font-size: 16px; }
.nhv-menu-toggle:hover,
.nhv-menu-toggle[aria-expanded="true"] { background: var(--nhv-navy-light); }
.nhv-menu-toggle:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

@media (max-width: 991px) {
  /* nhv.css sets display:inline-block here; flex keeps the icon and the word
     on one baseline. */
  .nhv-menu-toggle { display: inline-flex; }
}

/* --- The drawer ----------------------------------------------------------- */

.nhv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Above the WhatsApp float (1040); below the cart modal (1050) and the
     toasts (1060), which answer something the shopper just did; far below the
     age gate (3000). */
  z-index: 1045;

  display: flex;
  flex-direction: column;
  color: var(--nhv-cream);
  background: var(--nhv-navy);
}

/* [hidden] alone loses to the display:flex above — the same trap the cart
   modal hit. */
.nhv-drawer[hidden] { display: none; }

/* The drawer is a mobile control. If a tablet is rotated past the breakpoint
   while it is open, the script closes it; this is the belt to that brace. */
@media (min-width: 992px) {
  .nhv-drawer { display: none; }
}

html.nhv-drawer-open,
body.nhv-drawer-open { overflow: hidden; }

.nhv-drawer:not([hidden]) { animation: nhv-drawer-in 180ms ease-out both; }
@keyframes nhv-drawer-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

.nhv-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 6px 0 20px;
  background: var(--nhv-navy-deep);
  border-bottom: 1px solid var(--nhv-navy-border);
  box-shadow: inset 0 -2px 0 var(--nhv-copper);
}

.nhv-drawer-title {
  margin: 0;
  font-family: var(--nhv-font-display);
  font-size: 18px;
  font-weight: var(--nhv-fw-bold);
  letter-spacing: .02em;
  color: var(--nhv-cream-bright);            /* 16+:1 on navy-deep */
}

.nhv-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: var(--nhv-cream-bright);
  background: transparent;
  border: 0;
  border-radius: var(--nhv-radius-sm);
  cursor: pointer;
}
.nhv-drawer-close:hover { background: var(--nhv-navy-light); }

/* Scrolls on its own. overscroll-behavior stops a flick at the end of the list
   from scrolling the page underneath, which on iOS otherwise shows through. */
.nhv-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .nhv-drawer-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* --- Account -------------------------------------------------------------- */

.nhv-drawer-account {
  padding: 20px;
  border-bottom: 1px solid var(--nhv-navy-border);
}

.nhv-drawer-hello {
  margin: 0 0 12px;
  font-size: var(--nhv-fs-base);
  color: var(--nhv-cream);
}
.nhv-drawer-hello b { color: var(--nhv-cream-bright); font-weight: var(--nhv-fw-semi); }

.nhv-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nhv-drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-cream-bright);            /* 12.50:1 */
  text-decoration: none;
  border: 1px solid var(--nhv-cream);
  border-radius: var(--nhv-radius-sm);
}
.nhv-drawer-btn:hover,
.nhv-drawer-btn:focus { color: var(--nhv-cream-bright); text-decoration: none; background: var(--nhv-navy-light); }

/* The primary action inverts to cream rather than taking the brand copper:
   cream text on copper is 3.79:1, under AA for a text button. Navy on cream
   is 13.68:1 and is the brightest thing on the drawer, which is the point. */
.nhv-drawer-btn.is-primary {
  color: var(--nhv-navy);
  background: var(--nhv-cream-bright);
  border-color: var(--nhv-cream-bright);
}
.nhv-drawer-btn.is-primary:hover,
.nhv-drawer-btn.is-primary:focus { color: var(--nhv-navy); background: var(--nhv-cream); }

/* --- Lists ---------------------------------------------------------------- */

.nhv-drawer-label {
  margin: 0;
  padding: 20px 20px 8px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-micro);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nhv-copper-text);             /* 4.80:1 */
}

.nhv-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--nhv-navy-border);
}

.nhv-drawer-list > li > a,
.nhv-drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-lead);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--nhv-cream);                   /* 12.50:1 */
  text-decoration: none;
  border-bottom: 1px solid var(--nhv-navy-border);
  cursor: pointer;
}
.nhv-drawer-list > li > a:hover,
.nhv-drawer-list > li > a:focus,
.nhv-drawer-group > summary:hover { color: var(--nhv-cream-bright); background: var(--nhv-navy-light); text-decoration: none; }

/* A chevron on every row that leads somewhere; it turns for the ones that
   open. Drawn with borders so it needs no icon font and inherits the colour. */
.nhv-drawer-list > li > a::after,
.nhv-drawer-group > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
}
.nhv-drawer-group > summary::after { transform: rotate(45deg); transition: transform 150ms ease; }
.nhv-drawer-group[open] > summary::after { transform: rotate(-135deg); }

/* The browser's own disclosure triangle, in both engines. */
.nhv-drawer-group > summary { list-style: none; }
.nhv-drawer-group > summary::-webkit-details-marker { display: none; }

.nhv-drawer-group[open] > summary { color: var(--nhv-cream-bright); background: var(--nhv-navy-deep); }

.nhv-drawer-sub {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--nhv-navy-deep);
  border-bottom: 1px solid var(--nhv-navy-border);
}
.nhv-drawer-sub a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px 0 36px;
  font-size: var(--nhv-fs-base);
  color: var(--nhv-cream);                   /* 14.66:1 on navy-deep */
  text-decoration: none;
}
.nhv-drawer-sub a:hover,
.nhv-drawer-sub a:focus { color: var(--nhv-cream-bright); background: var(--nhv-navy-light); text-decoration: none; }
.nhv-drawer-sub-all a {
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-copper-text);             /* 5.63:1 on navy-deep */
}

.nhv-drawer-list > li.is-featured > a { color: var(--nhv-gold); }   /* 8.58:1 */

/* Information pages: the same rows, set quieter so the shop reads first. */
.nhv-drawer-list.is-quiet > li > a {
  min-height: 48px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-normal);
  letter-spacing: 0;
  text-transform: none;
}

/* --- Contact -------------------------------------------------------------- */

.nhv-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 0;
}
.nhv-drawer-foot a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--nhv-fs-base);
  color: var(--nhv-cream);
  text-decoration: none;
}
.nhv-drawer-foot a:hover,
.nhv-drawer-foot a:focus { color: var(--nhv-cream-bright); text-decoration: underline; }
.nhv-drawer-foot .fa { width: 18px; font-size: 18px; text-align: center; color: var(--nhv-copper-text); }

/* --- Focus ---------------------------------------------------------------- */

.nhv-drawer a:focus-visible,
.nhv-drawer button:focus-visible,
.nhv-drawer summary:focus-visible {
  outline: 2px solid var(--nhv-copper);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .nhv-drawer:not([hidden]) { animation: none; }
  .nhv-drawer-group > summary::after { transition: none; }
}