/* =====================================================================
   SOTA SITE MENU  --  site-menu.css
   Scoped under .menu-topnav so nothing leaks into the rest of the site.
   Design tokens from Figma (node 8129-1536 + expanded views).
   Fluid sizing via clamp(); breakpoints 1024 (layout) / 767 (mobile).
   ===================================================================== */

/* The page never zeroes the browser's default body margin (8px), which
   inset everything from the window on all sides -- showing as a gap on the
   left/right and, for the sticky header, a ~8px "jump" when it pinned to the
   viewport top. Zeroing the body margin removes both. */
body { margin: 0; }

/* Guard against horizontal overflow from full-bleed elements. A vertical
   scrollbar makes 100vw (and thus any calc(50% - 50vw) breakout) wider than
   the content area, so nested full-bleed elements (e.g. .page-wave, which
   must break out of padded sections) overhang by ~half the scrollbar width
   and trigger a horizontal scrollbar. clip (not hidden) stops that overflow
   without creating a scroll container, so it does NOT break the sticky menu
   or scroll-anchoring. Direct-child full-bleed elements (e.g. .site-footer)
   are fixed at the source in site-footer.css; this only backstops the nested
   cases that cannot be made scrollbar-exact in static CSS. */
html { overflow-x: clip; }

.menu-topnav {
  /* ---- tokens (scoped to the menu) ---- */
  --m-bg:        #fbfbfb;
  --m-text:      #555;          /* top-level labels  */
  --m-link:      #3b3b3b;       /* dropdown links    */
  --m-link-soft: rgba(59,59,59,.8);
  --m-accent:    #4792bc;       /* icons, hover rule */
  --m-green:     #92ca6a;       /* "Coming Soon" label (matches footer --sf-green / .sf-soon) */
  --m-border:    #e2e8e3;
  --m-white:     #fff;
  --m-radius:    24px;
  --m-shadow:    0 4px 2px rgba(0,0,0,.25);
  --m-panel-shadow: 0 8px 24px rgba(0,0,0,.12);

  /* fluid scale */
  --m-label:   clamp(15px, 1.05vw + 6px, 18px);
  --m-link-fs: clamp(15px, 1.05vw + 6px, 18px);
  --m-gap:     clamp(18px, 2.2vw, 32px);
  --m-pad-y:   10px;
  --m-pad-x:   clamp(14px, 2vw, 20px);
  --m-panel-pad: 21px;
  --m-item-gap: 20px;

  display: block;
  position: sticky;
  top: 0;
  background: var(--m-bg);
  box-shadow: var(--m-shadow);
  font-family: Roboto, Arial, sans-serif;
  z-index: 1000;
}
.menu-topnav *,
.menu-topnav *::before,
.menu-topnav *::after { box-sizing: border-box; }

/* ---------- top bar ---------- */
.menu-bar {
  /* Horizontal gutter matching the page body container (clamp 10px->30px).
     Below ~1340px viewport the bar previously ran edge-to-edge (padding:0)
     and touched the viewport sides. The max-width is 1280px of CONTENT
     (the Figma navbar width) PLUS the gutters, so at full desktop width the
     nav still spans 1280 and the padding only bites below that. */
  --menu-gutter: clamp(10px, 2.27vw + 0.9px, 30px);
  display: flex;
  align-items: center;
  gap: var(--m-gap);
  width: 100%;
  max-width: calc(1280px + 2 * var(--menu-gutter));
  height: 70px;
  margin: 0 auto;
  padding: 0 var(--menu-gutter);
}

.menu-logo-container { flex: 0 0 auto; }
.menu-logo { display: block; padding: 5px; flex: 0 0 auto; }
.menu-logo img { display: block; height: 60px; width: auto; object-fit: contain; }
.menu-logo--ph { height: 60px; width: 93px; background:
  linear-gradient(135deg,#cfe0ea,#eef4f7); border-radius: 8px; }

/* ---------- nav row ---------- */
.menu-nav-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--m-gap);
}

/* ---------- top-level item ---------- */
.menu-dropdown { position: relative; }

.menu-dropbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  font: 700 var(--m-label)/1.55 Roboto, Arial, sans-serif;
  color: var(--m-text);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.menu-text { display: inline-block; }

.menu-submenu-indicator {
  display: inline-flex;
  align-items: center;
  color: var(--m-text);
  transition: transform .25s ease, color .2s ease;   /* smooth spin + color fade (not an instant flip) */
}
.menu-caret { width: 12px; height: 10px; display: block; }   /* ico-menu-arrow viewBox 12x10 */
.menu-caret use, .menu-ico use { pointer-events: none; }

/* ---------- icon cluster ---------- */
.menu-icons {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}
.menu-dropbtn--icon {
  gap: 8px;
  padding: 2px;
  color: var(--m-accent);
}
.menu-ico { display: block; color: var(--m-accent); }
.menu-ico--login   { width: 25px; height: 25px; }
.menu-ico--cart    { width: 25px; height: 25px; }
.menu-ico--contact { width: 25px; height: 24px; }
.menu-ico--trash   { width: 13px; height: 13px; }

.menu-cart-count {
  font: 500 var(--m-label)/1 Roboto, Arial, sans-serif;
  color: var(--m-accent);
}
.menu-greeting {
  font: 700 var(--m-label)/1.2 Roboto, Arial, sans-serif;
  color: var(--m-accent);
  white-space: nowrap;
  text-transform: none;   /* keep "Hi, Russ!" mixed-case */
  display: none;          /* shown only when logged-in */
}

/* icon hover -> #555 (matches the -hover svg variants) */
.menu-dropbtn--icon:hover .menu-ico,
.menu-dropbtn--icon:focus-visible .menu-ico { color: var(--m-text); }

/* ---------- dropdown panels (desktop) ---------- */
.menu-dropdown-content {
  position: absolute;
  top: 100%;                 /* touches the trigger: physically no dead gap */
  left: 0;
  min-width: 200px;
  flex-direction: column;
  gap: var(--m-item-gap);
  /* 12px transparent top strip (hoverable) + normal panel padding below it */
  padding: calc(12px + var(--m-panel-pad)) var(--m-panel-pad) var(--m-panel-pad);
  z-index: 30;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .25s;
}
/* visible white card -- drawn behind content, starting 12px down so the
   transparent strip above stays an invisible (but hoverable) gap. Full
   border-radius so all four corners are rounded. */
.menu-dropdown-content::after {
  content: "";
  position: absolute;
  top: 12px; left: 0; right: 0; bottom: 0;
  background: var(--m-white);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-panel-shadow);
  z-index: -1;
}
/* icon panels are right-aligned so they don't run off screen */
.menu-dropdown--icon .menu-dropdown-content { left: auto; right: 0; }

/* open state -- JS hover-intent toggles .is-open (gap-independent).
   :focus-within kept for keyboard users. No bare :hover so the JS close
   delay is the single source of truth. */
@media (min-width: 768px) {
  .menu-dropdown.is-open > .menu-dropdown-content,
  .menu-dropdown:focus-within > .menu-dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
  }
  .menu-dropdown.is-open > .menu-dropbtn .menu-submenu-indicator,
  .menu-dropdown:focus-within > .menu-dropbtn .menu-submenu-indicator { transform: rotate(180deg); }
  /* hover/open: tint the caret the mobile blue accent. Covers pointer hover
     (before JS sets .is-open) plus the open/focus states so it stays blue while
     the panel is down. */
  .menu-dropdown--desk:hover > .menu-dropbtn .menu-submenu-indicator,
  .menu-dropdown--desk.is-open > .menu-dropbtn .menu-submenu-indicator,
  .menu-dropdown--desk:focus-within > .menu-dropbtn .menu-submenu-indicator { color: var(--m-accent); }
}

/* account state toggling */
.menu-dropdown[data-state="logged-out"] .menu-acct--in  { display: none !important; }
.menu-dropdown[data-state="logged-in"]  .menu-acct--out { display: none !important; }
.menu-dropdown[data-state="logged-in"] .menu-greeting   { display: inline; }
.menu-dropdown[data-state="logged-in"] .menu-ico--login { display: none; }

/* ---------- links inside panels ---------- */
.menu-link {
  font: 400 var(--m-link-fs)/1.12 Roboto, Arial, sans-serif;
  color: var(--m-link);
  text-decoration: none;
  white-space: nowrap;
}
.menu-link sub { font-size: .64em; }
.menu-link:hover,
.menu-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--m-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
/* non-interactive label that groups the indented child items below it
   (e.g. "Silver Pulsers", "Bio Tuners") -- no link, no hover */
.menu-grouphead {
  font: 400 var(--m-link-fs)/1.12 Roboto, Arial, sans-serif;
  color: var(--m-link);
  white-space: nowrap;
  cursor: default;
}
/* "Coming Soon" group label + its not-yet-live items (mirrors the footer's
   sf-soon / sf-link--soon treatment): green label, items greyed + struck. */
.menu-soon {
  display: block;
  font: 700 var(--m-link-fs)/1.12 Roboto, Arial, sans-serif;
  color: var(--m-green);
}
.menu-link--soon {
  color: #888;
  text-decoration: line-through;
}
.menu-link--soon:hover,
.menu-link--soon:focus-visible {
  color: #888;
  text-decoration: line-through;   /* keep struck on hover; no accent underline */
}
.menu-sublist {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 27px;
}
.menu-link--child {
  position: relative;
  color: var(--m-link-soft);
}
.menu-link--child::before {
  content: "";
  position: absolute;
  left: -16px; top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- account / cart / contact panel bits ---------- */
.menu-panel-title {
  margin: 0 0 4px;
  font: 700 var(--m-link-fs)/1.2 Roboto, Arial, sans-serif;
  color: var(--m-link);
}
.menu-panel-label {
  margin: 0;
  font: 700 var(--m-link-fs)/1.2 Roboto, Arial, sans-serif;
  color: var(--m-link);
}
.menu-panel-list {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 8px;
  font: 400 var(--m-link-fs)/1.2 Roboto, Arial, sans-serif;
  color: var(--m-link);
}
.menu-rule { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--m-border); }

.menu-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font: 700 var(--m-link-fs)/1 Roboto, Arial, sans-serif;
  padding: 12px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.menu-btn--solid { background: var(--m-accent); color: #fff; }
.menu-btn--solid:hover { background: #3a7fa6; }
.menu-btn--ghost { background: #fff; color: var(--m-accent); border: 1.5px solid var(--m-accent); }
.menu-btn--ghost:hover { background: var(--m-accent); color: #fff; }

/* cart rows */
.menu-cart { min-width: 300px; }
.menu-cart-items { display: flex; flex-direction: column; gap: 16px; }
.menu-cart-row { display: flex; align-items: center; gap: 12px; }
.menu-cart-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 6px;
  background: linear-gradient(135deg,#eef4f7,#dbe9f0);
}
.menu-cart-name { flex: 1 1 auto; font: 400 var(--m-link-fs)/1.2 Roboto, Arial, sans-serif; color: var(--m-link); white-space: nowrap; }
.menu-cart-remove { border: 0; background: transparent; cursor: pointer; color: var(--m-accent); padding: 4px; line-height: 0; }
.menu-cart-remove:hover { color: var(--m-text); }
.menu-cart-empty { display: none; margin: 0; font: 400 var(--m-link-fs)/1.2 Roboto, Arial, sans-serif; color: var(--m-link-soft); }
.menu-dropdown[data-cart-count="0"] .menu-cart-items { display: none; }
.menu-dropdown[data-cart-count="0"] .menu-cart-empty { display: block; }

/* contact rows */
.menu-contact { min-width: 280px; }
.menu-contact-row { margin: 0; font: 400 var(--m-link-fs)/1.3 Roboto, Arial, sans-serif; color: var(--m-link); }
.menu-contact-row a { color: var(--m-accent); text-decoration: none; }
.menu-contact-row a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* ---------- hamburger ---------- */
.menu-hamburger { display: none; }
.menu-close { display: none; }
.menu-backdrop { display: none; }

/* =====================================================================
   TABLET -- 1024: tighten spacing only (layout unchanged)
   ===================================================================== */
@media (max-width: 1024px) {
  .menu-topnav { --m-gap: 18px; }
}

/* Mobile-only hamburger content: present in the DOM but hidden on desktop.
   (Revealed inside the 767 query.) Desktop nav is the --desk sections only. */
.menu-dropdown--mob,
.menu-search,
.menu-row,
.menu-auth,
.menu-social { display: none; }

/* Mobile bottom nav bar + slide-up sheets: in the DOM, hidden on desktop. */
.menu-bottomnav,
.menu-sheet { display: none; }

/* =====================================================================
   MOBILE -- 767: hamburger + left slide-in panel + accordion submenus
   ===================================================================== */
@media (max-width: 767px) {
  .menu-bar { gap: 12px; justify-content: flex-start; position: relative; z-index: 1095; background: var(--m-bg); }
  .menu-logo-container { margin-right: auto; }   /* pushes icons+burger to the right */

  .menu-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    border: 0; background: transparent; cursor: pointer;
  }
  .menu-hamburger span { display: block; height: 3px; width: 100%; background: var(--m-text); border-radius: 2px; }

  /* full-screen panel -- full width, bounded BETWEEN the top bar (70px) and the
     bottom bar (56px + inset) so both bars stay visible as persistent chrome.
     Matches the bottom-bar sheets' treatment. Content scrolls inside if taller
     than the available space. */
  .menu-nav-main {
    position: fixed;
    top: 70px; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    width: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 0 8px;
    background: var(--m-white);
    box-shadow: var(--m-panel-shadow);
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* momentum scroll within the panel */
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1085;
  }
  .menu-topnav.is-mobile-open .menu-nav-main { transform: translateX(0); }

  /* Keep the top bar visible while any mobile panel is open. Both the hamburger
     panel and the bottom-bar sheets are viewport-fixed (top:70px), but the bar is
     only `position: sticky`, so if the page was scrolled the bar's in-flow origin
     sits above the viewport and page content (e.g. the hero banner) shows through
     the top 70px. Pinning the bar to the viewport top while any panel is open
     matches the fixed panels and keeps logo + icons + hamburger as persistent
     chrome. Covers the hamburger (.is-mobile-open) AND any open sheet
     (.menu-sheet.is-open, triggered by the bottom-bar tabs). z-index 1095 already
     sits above the panels (1085). */
  .menu-topnav.is-mobile-open .menu-bar,
  .menu-topnav:has(.menu-sheet.is-open) .menu-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 70px;
    max-width: none;
    padding: 0;
  }

  /* (panel header removed; the close control lives in the search row) */

  /* each nav section is a full-width row (icon dropdowns excluded) */
  .menu-dropdown:not(.menu-dropdown--icon) { border-bottom: 1px solid var(--m-border); }
  .menu-dropdown--icon { border-bottom: 0; }
  .menu-dropbtn {
    width: 100%; justify-content: space-between;
    padding: 18px 20px; text-transform: uppercase;
    font-size: 18px; color: var(--m-text);
  }
  .menu-dropbtn .menu-submenu-indicator { color: var(--m-accent); }

  /* accordion content (inline, pushes rows down) */
  .menu-dropdown-content {
    position: static; min-width: 0;
    display: none;
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: none;
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
    padding: 0 20px 14px 24px; gap: 18px;
  }
  .menu-dropdown-content::after { display: none; }
  .menu-dropdown--icon .menu-dropdown-content { right: auto; }
  .menu-dropdown.is-open > .menu-dropdown-content { display: flex; }
  .menu-dropdown.is-open > .menu-dropbtn .menu-submenu-indicator { transform: rotate(180deg); }

  /* hamburger sub-links: full 18/1.39 spec stated as longhands so this override
     is self-contained -- it does NOT depend on the base .menu-link `font:`
     shorthand (which sets 15px/1.12 via --m-link-fs). Stating weight + family
     here means a future edit to the base shorthand can't silently change these. */
  .menu-link {
    font-size: 18px;
    line-height: 1.39;
    font-weight: 400;
    font-family: Roboto, Arial, sans-serif;
    white-space: normal;
  }
  .menu-cart { min-width: 0; }
  .menu-cart-name { white-space: normal; }
  .menu-sublist { gap: 14px; }

  /* icon cluster stays in the BAR on mobile (does not slide with the nav) */
  .menu-icons {
    display: flex; flex-direction: row; align-items: center;
    gap: 14px; width: auto; margin-left: auto;
  }
  .menu-dropbtn--icon {
    width: auto; justify-content: center; gap: 4px;
    padding: 4px; color: var(--m-accent); text-transform: none;
  }
  .menu-dropbtn--icon::after { content: none; }  /* no text labels in the bar */

  /* Account is now handled by the bottom-bar Account tab (sheet), so the
     top-bar account dropdown is redundant on mobile -- hide it. Targets the
     account dropdown specifically (it carries data-state); the cart
     (data-cart-count) and contact icons are unaffected. Desktop keeps it. */
  .menu-dropdown--icon[data-state] { display: none; }

  /* logged-out: no greeting. logged-in: show "Hi, [name]!" + keep icon */
  .menu-greeting { display: none; }
  .menu-dropdown[data-state="logged-in"] .menu-greeting {
    display: inline; font-size: 15px; line-height: 1.1;
  }
  .menu-dropdown[data-state="logged-in"] .menu-ico--login { display: block; }

  /* icon dropdown panels still drop below the bar (absolute), like desktop */
  .menu-dropdown--icon { position: relative; }
  .menu-dropdown--icon .menu-dropdown-content {
    position: absolute; top: 100%; right: 0; left: auto;
    display: flex;
    visibility: hidden; opacity: 0; pointer-events: none;
    padding: calc(12px + var(--m-panel-pad)) var(--m-panel-pad) var(--m-panel-pad);
    min-width: 240px;
  }
  /* card hidden until open (prevents the border peeking as a line under icons) */
  .menu-dropdown--icon .menu-dropdown-content::after { display: none; }
  .menu-dropdown--icon.is-open > .menu-dropdown-content {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  .menu-dropdown--icon.is-open > .menu-dropdown-content::after {
    display: block; top: 12px; left: 0; right: 0; bottom: 0;
    background: var(--m-white); border: 1px solid var(--m-border);
    border-radius: var(--m-radius); box-shadow: var(--m-panel-shadow); z-index: -1;
  }

  /* (No hamburger backdrop: bars stay visible and nothing is dimmed. The panel
     is opaque; the page behind it remains scrollable, per design.) */
  /* (hamburger backdrop intentionally never shown -- bars stay visible, no dim) */

  /* ---------------------------------------------------------------
     MOBILE HAMBURGER = Figma list. Desktop sections + contact icon are
     hidden here; the --mob block is revealed. (Account + cart icons stay
     in the bar.)
     --------------------------------------------------------------- */
  .menu-dropdown--desk { display: none; }          /* About/HowItWorks/Shop/Learn -> desktop only */
  .menu-dropdown--deskicon { display: none; }      /* contact icon -> desktop bar only */

  /* reveal mobile content; sections reuse the existing accordion styles */
  .menu-dropdown--mob { display: block; }
  .menu-search { display: block; }
  .menu-auth   { display: block; }
  .menu-social { display: flex; }

  /* mobile section heads: mixed-case per Figma (desktop set stays uppercase).
     line-height:1.39 overrides the base .menu-dropbtn's 1.55 so a chevron head
     row computes the SAME height as a chevron-less plain row (.menu-row, which
     also uses 1.39) -- same 13.5px padding + same line box = equal height.
     18/1.39 matches the Shop sheet + Learn cards (25/18 = 1.39). */
  .menu-dropdown--mob > .menu-dropbtn { text-transform: none; line-height: 1.39; padding-top: 13.5px; padding-bottom: 13.5px; }
  /* mobile accordion caret matches the sitemap reveal: points DOWN when
     collapsed (natural arrow orientation) and flips UP via the shared
     .menu-submenu-indicator 180deg rotation when the section opens. No
     caret-specific rotation needed -- the indicator rule above handles it. */
  /* tighten sub-item spacing inside mobile sections by 25% (scoped to --mob
     so the bar icon panels (account/cart) keep their original spacing) */
  .menu-dropdown--mob > .menu-dropdown-content { gap: 13.5px; padding-bottom: 10.5px; }
  .menu-dropdown--mob .menu-sublist { gap: 10.5px; }

  /* SEARCH (Google CSE) + close X, top row of the panel */
  .menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--m-border);
  }
  .menu-search .gcse-search {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* the close X sits to the right of the field (replaces the old header close) */
  .menu-search .menu-close {
    flex: 0 0 auto;
    width: 32px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    font-size: 22px; line-height: 1; color: var(--m-text); cursor: pointer;
  }

  /* PLAIN ROWS (Newsroom / Contact Us / Sitemap): match a section head row,
     but the caret points right (link), not down (accordion) */
  .menu-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 13.5px 20px;
    line-height: 1.39;           /* explicit: locks height to the --mob heads (18/1.39) */
    border-bottom: 1px solid var(--m-border);
    font-size: 18px;
    font-weight: 700;            /* match the section heads (700, #555) */
    color: var(--m-text);
    text-decoration: none;
  }
  .menu-row .menu-submenu-indicator { color: var(--m-accent); }
  .menu-row .menu-caret { transform: rotate(-90deg); }   /* point right */

  /* SIGN IN / OUT button */
  .menu-auth { padding: 18px 20px; }
  .menu-auth__btn {
    display: flex; align-items: center; justify-content: center;
    height: 44px; border-radius: 50px;
    background: var(--m-accent); color: var(--m-white);
    font-size: 18px; font-weight: 900; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none;
    transition: background-color .2s ease;
  }
  .menu-auth__btn:hover, .menu-auth__btn:focus-visible { background: #3b7fa6; }

  /* "Soon" tag beside a struck item (Programs / Support) */
  .menu-link--soon {
    color: #888; text-decoration: line-through; text-decoration-color: #888;
  }
  .menu-soon-tag {
    color: var(--m-green); font-weight: 700; margin-left: 8px;
    text-decoration: none; display: inline-block;
  }

  /* SOCIAL (icons only) */
  .menu-social {
    align-items: center; justify-content: space-around;
    gap: 0; padding: 18px 20px 8px;
  }
  .menu-social__item { display: inline-flex; }
  .menu-social__ico { width: 32px; height: 32px; display: block; }

  /* ---------------------------------------------------------------
     BOTTOM NAV BAR -- app-style tab bar fixed to the viewport bottom.
     5 tabs: Home (link) + Learn/Shop/How it works/Account (sheets).
     --------------------------------------------------------------- */
  .menu-bottomnav {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--m-bg);
    /* Fixed 56px tall per Figma INCLUDING the 15px bottom padding (border-box).
       The safe-area inset is added on top of the 56px (background-only) so the
       bar sits flush to the screen bottom with no page peeking through on
       phones with a gesture bar. */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    padding: 0 10px calc(15px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 3px rgba(0,0,0,.08);
    z-index: 1090;
  }
  .menu-tab {
    flex: 1 1 0;
    max-width: 76.4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
    padding: 0;
    border: 0; background: transparent; cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-tab__ico {
    width: 22px; height: 22px; display: block;
    color: var(--m-text);                /* inactive: grey stroke (#555) */
  }
  .menu-tab__label {
    font: 400 12px/9px Roboto, Arial, sans-serif;
    color: var(--m-link);
    text-align: center;
    text-transform: none;
  }
  /* active tab: blue icon + a 49x1 rounded rule sitting above it (Figma:
     1px rule, 5px gap, then the icon/label tab). Applies to the current-page
     tab (.is-active) AND to any tab whose sheet is currently open. */
  .menu-tab.is-active .menu-tab__ico,
  .menu-tab[aria-expanded="true"] .menu-tab__ico { color: var(--m-accent); }
  .menu-tab.is-active .menu-tab__label,
  .menu-tab[aria-expanded="true"] .menu-tab__label { color: var(--m-accent); }
  .menu-tab.is-active::before,
  .menu-tab[aria-expanded="true"]::before {
    content: "";
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 49px; height: 1px;
    background: var(--m-accent);
    border-radius: 20px;
  }
  /* While a sheet is open, only the open sheet's tab (aria-expanded="true")
     should be blue. Suppress the page-active tab's highlight (e.g. Home) so it
     reverts to grey; it comes back when all sheets close. Scoped to is-active
     tabs that are NOT currently expanded, so the open tab keeps its colour. */
  .menu-bottomnav.has-sheet-open .menu-tab.is-active:not([aria-expanded="true"]) .menu-tab__ico { color: var(--m-text); }
  .menu-bottomnav.has-sheet-open .menu-tab.is-active:not([aria-expanded="true"]) .menu-tab__label { color: var(--m-link); }
  .menu-bottomnav.has-sheet-open .menu-tab.is-active:not([aria-expanded="true"])::before { display: none; }

  /* ---------------------------------------------------------------
     SLIDE-UP SHEETS -- full-height panels that animate up from the bar.
     Shared backdrop dims the page behind.
     --------------------------------------------------------------- */
  /* (No dimming backdrop: sheets are opaque and fill the space between the top
     and bottom bars, so there is no visible page behind them to dim. A backdrop
     here would sit over the bars and gray them out.) */

  .menu-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0;
    /* Sit BETWEEN the top bar and the bottom bar so both stay visible (per
       Figma). Top bar is 70px (sticky at viewport top); bottom bar is 56px plus
       the safe-area inset. The sheet fills the space between. */
    top: 70px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--m-white);
    z-index: 1085;
    /* Closed: pushed fully below the viewport. The sheet stops 56px (+inset)
       above the screen bottom, so it must travel its own height PLUS that offset
       to clear completely and not white-out the bottom bar beneath it. */
    transform: translateY(calc(100% + 56px + env(safe-area-inset-bottom, 0px)));
    transition: transform .3s ease;
    overflow: hidden;
  }
  .menu-sheet.is-open { transform: translateY(0); }

  .menu-sheet__head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 20px;
    padding: 20px 10px 10px;
  }
  .menu-sheet__back {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: .5px solid var(--m-white);
    border-radius: 9999px;
    background: rgba(212,212,212,.58);
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    cursor: pointer;
    padding: 0;
  }
  .menu-sheet__back-ico {
    width: 8px; height: 8px; display: block;
    color: var(--m-link);
    transform: rotate(90deg);   /* chevron-down -> points left (back) */
  }
  .menu-sheet__title {
    margin: 0;
    font: 700 20px/45px Roboto, Arial, sans-serif;
    color: var(--m-link);
  }

  .menu-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 16px;
  }
  /* card-style sheet body (Learn): tinted cards, 10px apart */
  .menu-sheet__body--cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 20px;
  }

  /* rows inside a sheet */
  .menu-mrow {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 12px 10px;
    border-bottom: 1px solid #f1f6fa;
    font: 500 18px/1.39 Roboto, Arial, sans-serif;   /* 18/25 (25/18 = 1.39) */
    color: var(--m-link);
    text-decoration: none;
    text-align: left;
  }
  .menu-mrow sub {
    font-size: .65em;
    vertical-align: -0.2em;
    line-height: 0;
  }
  /* group row is a button (chevron, collapsible) */
  .menu-mrow--group {
    border: 0; border-bottom: 1px solid #f1f6fa;
    background: transparent; cursor: pointer;
  }
  .menu-mrow__chev {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    color: rgba(59,59,59,.7);
  }
  .menu-mchev {
    width: 12px; height: 10px; display: block;   /* ico-menu-arrow viewBox 12x10 */
    transition: transform .2s ease;               /* collapsed: points down (like sitemap) */
  }
  /* indented child links (no chevron) */
  .menu-msub { display: none; }
  .menu-mrow--child {
    padding-left: 20px;
    font-weight: 400;            /* match hamburger sub-links (.menu-link is 400) */
    color: var(--m-link);        /* #3b3b3b full-opacity, matching hamburger sub-links */
  }
  /* expanded group: show children, rotate chevron down, drop the group's own
     border so the sub-list owns the bottom divider */
  .menu-mgroup.is-open .menu-msub { display: block; border-bottom: 1px solid #f1f6fa; }
  .menu-mgroup.is-open .menu-mrow--group { border-bottom: 0; }
  .menu-mgroup.is-open .menu-mchev { transform: rotate(180deg); }   /* expanded: points up (sitemap) */
  /* no internal divider lines while open: the group head + its children read as
     one block, closed by a single divider on the sub-list wrapper. */
  .menu-mgroup.is-open .menu-mrow--child { border-bottom: 0; }
  /* match the hamburger sub-link spacing: most hamburger sub-links are direct
     children of .menu-dropdown-content, whose gap is 13.5px (the nested
     .menu-sublist groups' 10.5px only applies between links inside one product
     group). The Shop children are individual rows, so the inter-item gap = each
     row's top+bottom padding. 6.75px top/bottom -> 13.5px between adjacent
     children, matching the burger. The group head keeps its own 12px padding so
     the head-to-first-child gap is unchanged; only child-to-child spacing shifts. */
  .menu-mrow--child { padding-top: 6.75px; padding-bottom: 6.75px; }

  /* ---------------------------------------------------------------
     ACCOUNT sheet -- user header + tinted cards + sign-out (logged in).
     Distinct from the list-style sheets: no title bar, leads with the
     user header. Closed by tapping the Account tab again (the bottom bar
     stays visible above the sheet).
     --------------------------------------------------------------- */
  .menu-acctsheet {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
    gap: 20px;
    padding: 30px 10px 20px;
  }
  /* header */
  .menu-acct-head { display: flex; align-items: center; gap: 16px; }
  .menu-acct-av {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 27px;
    background: rgba(71,146,188,.2);
    font: 700 24px/1 Roboto, Arial, sans-serif;
    color: var(--m-accent);
  }
  .menu-acct-hcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .menu-acct-name { margin: 0; font: 700 24px/1.4 Roboto, Arial, sans-serif; color: var(--m-link); }
  .menu-acct-email { margin: 0; font: 500 13px/1.4 Roboto, Arial, sans-serif; color: var(--m-accent); word-break: break-all; }
  /* cards */
  .menu-acct-cards { display: flex; flex-direction: column; gap: 10px; }
  .menu-acard {
    display: flex; align-items: center; gap: 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(26,43,28,.07);
    text-decoration: none;
  }
  .menu-acard--blue   { background: rgba(71,146,188,.3); }
  .menu-acard--green  { background: rgba(146,202,106,.3); }
  .menu-acard--teal   { background: rgba(89,175,178,.3); }
  .menu-acard--purple { background: rgba(161,148,199,.3); }
  .menu-acard__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .menu-acard__title { font: 700 18px/1.39 Roboto, Arial, sans-serif; color: var(--m-link); }  /* 18/25 (25/18 = 1.39) */
  .menu-acard__sub   { font: 400 15px/20px Roboto, Arial, sans-serif; color: var(--m-link); }
  .menu-acard__chev {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--m-white);
    border-radius: 9999px;
  }
  .menu-achev {
    width: 8px; height: 8px; display: block;
    color: var(--m-link);
    transform: rotate(-90deg);   /* chevron-down -> points right */
  }
  /* sign out */
  .menu-acct-signout {
    display: flex; align-items: center; justify-content: center;
    padding: 5px 20px; min-height: 37px;
    border-radius: 50px;
    background: var(--m-accent);
    color: var(--m-white);
    font: 900 18px/27px Roboto, Arial, sans-serif;
    letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none;
    transition: background-color .2s ease;
  }
  .menu-acct-signout:hover, .menu-acct-signout:focus-visible { background: #3b7fa6; }

  /* ---- Account sheet: LOGGED OUT (login form) ---- */
  .menu-acctsheet--out { gap: 20px; align-items: center; }
  .menu-acct-head--center { justify-content: center; width: 100%; }
  .menu-acct-hcol--center { align-items: center; text-align: center; }
  .menu-acct-welcome {
    margin: 0;
    font: 700 24px/33.6px Roboto, Arial, sans-serif;
    color: var(--m-link);
    text-align: center;
  }
  .menu-acct-sub {
    margin: 0;
    font: 500 15px/18.2px Roboto, Arial, sans-serif;
    color: var(--m-link);
    text-align: center;
  }

  /* ---- CART sheet (mobile) ---- */
  /* empty state: 78px circular badge with the cart glyph */
  .menu-cart-badge {
    width: 78px; height: 78px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50px;
    background: rgba(71,146,188,.2);
  }
  .menu-cart-badge-ico {
    width: 31px; height: 26px; display: block;
    color: var(--m-accent);
  }
  .menu-cart-emptytitle { font-size: 22px; line-height: 33.6px; }
  /* filled state: line items inside the sheet body, then a VIEW CART pill */
  .menu-cart-items--sheet { display: flex; flex-direction: column; }
  .menu-cart-items--sheet .menu-cart-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f6fa;
  }
  .menu-cart-items--sheet .menu-cart-thumb {
    width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto;
    border-radius: 8px; background: var(--m-white);
  }
  .menu-cart-items--sheet .menu-cart-name {
    font: 500 15px/20px Roboto, Arial, sans-serif;
    color: var(--m-link); text-decoration: none;
  }
  .menu-cart-viewbtn { margin-top: 20px; }

  .menu-login { width: 100%; display: flex; flex-direction: column; gap: 20px; }
  .menu-login-fields { display: flex; flex-direction: column; gap: 10px; }
  .menu-login-input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 10px 20px;
    border: 1px solid #d4d4d4;
    border-radius: 50px;
    background: var(--m-white);
    box-shadow: 0 2px 8.2px rgba(212,212,212,.82);
    font: 400 15px/20px Roboto, Arial, sans-serif;
    color: var(--m-text);
  }
  .menu-login-input::placeholder { color: var(--m-text); opacity: 1; }
  .menu-login-input:focus { outline: none; border-color: var(--m-accent); }
  .menu-login-error {
    margin: 0;
    color: #c0392b;
    font: 500 13px/1.4 Roboto, Arial, sans-serif;
    text-align: center;
  }
  /* SIGN IN / CREATE ACCOUNT: same pill as sign-out */
  .menu-login-btn {
    width: 100%;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    padding: 5px 20px; min-height: 37px;
    border: 0; border-radius: 50px;
    background: var(--m-accent);
    color: var(--m-white);
    font: 900 18px/27px Roboto, Arial, sans-serif;
    letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
  }
  .menu-login-btn:hover, .menu-login-btn:focus-visible { background: #3b7fa6; }
  .menu-login-btn--link { margin: 0; }   /* create account is an <a> */
  .menu-forgot { width: 100%; display: flex; justify-content: center; }
  .menu-login-forgot {
    border: 0; background: transparent; cursor: pointer;
    font: 500 15px/35px Roboto, Arial, sans-serif;
    color: var(--m-text);
    text-decoration: underline;
    text-underline-position: from-font;
  }

  /* when a sheet is open, lock the bottom bar beneath the backdrop visually
     (bar stays put; sheet covers it). nothing needed, but keep tab labels
     from being focus-scrolled */
}

/* body scroll lock while a sheet (or the hamburger) is open is handled in JS
   via overflow:hidden on <body>. */

@media (prefers-reduced-motion: reduce) {
  .menu-nav-main, .menu-backdrop, .menu-submenu-indicator, .menu-btn { transition: none; }
}