@charset "UTF-8";
/**
 * Numenu - Menu System
 *
 * Single-markup architecture:
 * - Same panels work for mobile (bottom sheets) and desktop (mega-panel)
 * - Viewport determines presentation via CSS
 *
 * @package Myrvann
 * @since numenu
 */
/* =============================================================================
   PANEL SYSTEM

   Infrastructure: variables, shared button primitives, overlay, container,
   and base panel elements. Active states and mega-combined mode.
   ============================================================================= */
/* Lock mobile page scroll while a numenu panel is open. Desktop remains
   scrollable; _header.scss pins the header while panels are open. */
@media (max-width: 767px) {
  html.numenu-open,
  html.numenu-open body {
    overflow: hidden;
  }
}
:root {
  --numenu-header-height: 64px;
  --numenu-header-max-width: 1280px;
  --numenu-bottomnav-height: 56px;
  --numenu-safe-area-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 4px));
  /* radii */
  --numenu-radius: 8px; /* buttons, inputs, small elements */
  --numenu-sheet-radius: 20px; /* mobile bottom-sheet top corners */
  --numenu-sheet-radius-desktop: 12px; /* desktop panel bottom corners */
  /* spacing */
  --numenu-gutter: 32px; /* desktop content inset */
  --numenu-panel-pad: 16px; /* mobile panel content padding */
}

.numenu {
  /* ---------------------------------------------------------------------------
     Button Primitives — reused across panels
     Type comes from scss/_type-presets.scss; layout/colour stays local.
     --------------------------------------------------------------------------- */
}
.numenu .btn-primary {
  /* Default (desktop, Android): pressed-foil — shares the product CTA's
     material (gradient + --btn-edge-light) via the btn.primary mixin. The
     bespoke inset deco frame is deliberately omitted so numenu stays
     distinct from .single_add_to_cart_button. */
  font-family: var(--font-family-sans);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "STYL" 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0.5em;
  border-radius: var(--border-radius-soft);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.16s ease, box-shadow 0.18s ease, transform 0.1s ease;
  border: none;
  background: var(--gradient-button);
  color: var(--color-cream-100);
  box-shadow: var(--btn-edge-light);
}
.numenu .btn-primary:hover {
  background: var(--gradient-button-hover);
  color: var(--color-cream-100);
  box-shadow: var(--btn-edge-light);
}
.numenu .btn-primary:active {
  background: var(--gradient-button-active);
  box-shadow: var(--btn-edge-light-pressed);
  transform: scale(0.99);
}
.numenu .btn-primary {
  width: 100%;
  height: 52px;
  position: relative;
  overflow: hidden;
}
.numenu .btn-primary svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  flex-shrink: 0;
}
.numenu .btn-primary {
  /* iOS / iPadOS only — keep the blended raised-pill aesthetic that feels
     native on iOS. `-webkit-touch-callout` is supported only by Mobile Safari. */
}
@supports (-webkit-touch-callout: none) {
  .numenu .btn-primary {
    border-radius: var(--numenu-radius);
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 3px 14px hsla(24, 55%, 20%, 0.28), inset 0 1px 0 var(--glow-cream-strong), inset 0 -1px 0 var(--shadow-color-dark); /* bottom edge shadow */
  }
  .numenu .btn-primary:hover {
    background: var(--gradient-button);
    box-shadow: 0 3px 14px hsla(24, 55%, 20%, 0.28), inset 0 1px 0 var(--glow-cream-strong), inset 0 -1px 0 var(--shadow-color-dark);
  }
  .numenu .btn-primary:active {
    background: var(--gradient-button);
    transform: scale(0.97);
    opacity: 0.9;
    box-shadow: 0 3px 14px hsla(24, 55%, 20%, 0.28), inset 0 1px 0 var(--glow-cream-strong), inset 0 -1px 0 var(--shadow-color-dark);
  }
}
.numenu .btn-outlined {
  font-family: var(--font-family-sans);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variation-settings: "STYL" 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0.5em;
  border-radius: var(--border-radius-soft);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.16s ease, box-shadow 0.18s ease, transform 0.1s ease;
  border: 2px solid var(--border-color);
  background: transparent;
  color: var(--text-color-dark);
}
.numenu .btn-outlined:hover {
  background: var(--bg-color-light);
  border-color: var(--text-color-dark);
  color: var(--text-color-dark);
}
.numenu .btn-outlined:active {
  background: var(--color-cream-300);
  transform: scale(0.98);
}
.numenu .btn-outlined {
  width: 100%;
  height: 44px;
  /* Match .btn-primary's deliberate iOS exception so numenu stays
     internally consistent per-platform: native rounded on iOS, sharp
     family radius everywhere else. */
}
@supports (-webkit-touch-callout: none) {
  .numenu .btn-outlined {
    border-radius: var(--numenu-radius);
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Overlay — dim + blur behind active panel
     --------------------------------------------------------------------------- */
}
.numenu .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: hsla(22, 40%, 10%, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.numenu {
  /* ---------------------------------------------------------------------------
     Panels Container

     Mobile: sits above bottom nav, children slide up
     Desktop: hangs below header, children drop down
     --------------------------------------------------------------------------- */
}
.numenu .panels {
  position: fixed;
  inset: 0;
  bottom: calc(var(--numenu-bottomnav-height) + var(--numenu-safe-area-bottom));
  z-index: 500;
  pointer-events: none; /* pass-through until a panel opens */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* stack panels at bottom (mobile) */
  /* any panel active → show overlay */
}
.numenu .panels[data-active]:not([data-active=""]) .overlay {
  opacity: 1;
  pointer-events: auto;
}
.numenu .panels {
  /* reveal matching panel — single data attr drives all state */
}
.numenu .panels[data-active=meny] .panel--meny, .numenu .panels[data-active=store] .panel--store, .numenu .panels[data-active=cart] .panel--cart, .numenu .panels[data-active=mega] .panel--meny, .numenu .panels[data-active=mega] .panel--store {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, visibility 0s linear 0s; /* instant on open */
}
@media (min-width: 768px) {
  .numenu .panels {
    top: var(--numenu-header-height);
    bottom: 0;
    justify-content: flex-start; /* panels drop from top */
    z-index: 490; /* below header's 500 */
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* mega mode: side by side */
  }
  .numenu .panels .overlay {
    position: fixed; /* break out of grid to cover viewport */
    top: var(--numenu-header-height);
  }
  .numenu .panels[data-active=meny] .panel--meny, .numenu .panels[data-active=store] .panel--store, .numenu .panels[data-active=cart] .panel--cart, .numenu .panels[data-active=mega] .panel--meny, .numenu .panels[data-active=mega] .panel--store {
    transform: translateY(0);
  }
  .numenu .panels[data-active=mega] .panel--meny, .numenu .panels[data-active=mega] .panel--store {
    pointer-events: none;
  }
  .numenu .panels[data-active=mega] .panel--meny .sheet, .numenu .panels[data-active=mega] .panel--store .sheet {
    pointer-events: auto;
  }
  .numenu .panels {
    /* mega: meny left, store right — adjoining corners */
  }
  .numenu .panels[data-active=mega] .panel--meny .sheet {
    border-radius: 0 0 0 var(--numenu-sheet-radius-desktop);
    border-right: 1px solid var(--border-color-light);
  }
  .numenu .panels[data-active=mega] .panel--store .sheet {
    border-radius: 0 0 var(--numenu-sheet-radius-desktop) 0;
    border-left: 1px solid var(--border-color-light);
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Panel Base — invisible until activated by data-active
     --------------------------------------------------------------------------- */
}
.numenu .panel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  max-height: 85vh;
  pointer-events: none;
  visibility: hidden; /* visibility, not display — avoids layout thrash */
  opacity: 0;
  transform: translateY(100%); /* offscreen below (mobile) */
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, visibility 0s linear 0.32s; /* delay hide until animation ends */
}
@media (min-width: 768px) {
  .numenu .panel {
    position: relative;
    inset: 0 0 auto 0;
    max-height: calc(100vh - var(--numenu-header-height) - 40px);
    transform: translateY(-12px); /* slight lift for drop-down feel */
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Panel Elements — sheet, handle, header, body, footer
     --------------------------------------------------------------------------- */
}
.numenu .sheet {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background: var(--color-cream-100);
  border-radius: var(--numenu-sheet-radius) var(--numenu-sheet-radius) 0 0; /* mobile: top corners only */
  box-shadow: 0 -8px 40px hsla(24, 48%, 18%, 0.18);
  overflow: hidden;
}
@media (min-width: 768px) {
  .numenu .sheet {
    border-radius: 0 0 var(--numenu-sheet-radius-desktop) var(--numenu-sheet-radius-desktop); /* desktop: bottom corners */
    box-shadow: 0 16px 48px hsla(24, 48%, 18%, 0.16);
  }
}
.numenu .handle { /* swipe affordance, mobile only */
  width: 36px;
  height: 4px;
  margin: 10px auto 6px;
  background: var(--color-cream-400);
  border-radius: 2px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .numenu .handle {
    display: none;
  }
}
.numenu .panel-header { /* mobile only — desktop hides panels have no header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--numenu-panel-pad) 12px;
  border-bottom: 1px solid var(--border-color-light);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .numenu .panel-header {
    display: none;
  }
}
.numenu .panel-header .title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color-muted);
}
.numenu .panel-header .close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-cream-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.numenu .panel-header .close:active {
  background: var(--color-cream-400);
}
.numenu .panel-header .close svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-color);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}
.numenu .body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}
.numenu .footer {
  flex-shrink: 0;
  padding: 12px var(--numenu-panel-pad);
  border-top: 1px solid var(--border-color-light);
  background: var(--color-cream-100);
}
.numenu {
  /* ---------------------------------------------------------------------------
     Reduced Motion
     --------------------------------------------------------------------------- */
}
@media (prefers-reduced-motion: reduce) {
  .numenu .panel,
  .numenu .overlay {
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   MENY PANEL CONTENT (Utforsk)

   Navigation menu items, submenus, dividers.
   Desktop: submenus always open, chevrons hidden, hover effects.
   ============================================================================= */
.numenu .meny-content {
  padding: 8px var(--numenu-panel-pad) 20px;
}
.numenu .meny-content .item {
  display: flex;
  align-items: center;
  padding: 14px 4px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.numenu .meny-content .item:active {
  color: var(--text-color-dark);
}
.numenu .meny-content .item:hover .arrow {
  opacity: 1;
}
.numenu .meny-content .item .label {
  flex: 1;
  font-family: var(--font-family-sans);
  font-variation-settings: "STYL" 0;
  font-weight: 300;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-color-muted);
}
.numenu .meny-content .item .arrow,
.numenu .meny-content .item .chevron {
  width: 16px;
  height: 16px;
  stroke: var(--color-cream-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s;
}
.numenu .meny-content .item .arrow {
  opacity: 0.5;
}
.numenu .meny-content .item--parent .chevron {
  transition: transform 0.22s ease;
}
.numenu .meny-content .item--parent.expanded .chevron {
  transform: rotate(90deg);
}
.numenu .meny-content .divider {
  height: 1px;
  background: var(--border-color-light);
  margin: 0 4px;
}
.numenu .meny-content .submenu {
  overflow: hidden;
  max-height: 0; /* collapsed by default, JS toggles .open */
  transition: max-height 0.24s ease;
  padding-left: 16px;
}
.numenu .meny-content .submenu.open {
  max-height: 200px;
}
@media (prefers-reduced-motion: reduce) {
  .numenu .meny-content .submenu {
    transition-duration: 0.01ms !important;
  }
}
.numenu .meny-content .submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-size: 14px;
  color: var(--text-color-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}
.numenu .meny-content .submenu-item::before { /* bullet dot */
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brown-500);
  opacity: 0.4;
  flex-shrink: 0;
}
.numenu .meny-content .submenu-item:active {
  color: var(--text-color-dark);
}
.numenu {
  /* ---------------------------------------------------------------------------
     Desktop (768px+) — scoped to panel--meny
     --------------------------------------------------------------------------- */
}
@media (min-width: 768px) {
  .numenu .panel--meny .body {
    padding-inline: 1em;
  }
  .numenu .panel--meny .meny-content {
    padding: 0;
  }
  .numenu .panel--meny .meny-content .item {
    padding: 12px 0;
    border-bottom: 1px solid transparent; /* reserve space, reveal on hover */
  }
  .numenu .panel--meny .meny-content .item:hover {
    border-bottom-color: var(--border-color-light);
  }
  .numenu .panel--meny .meny-content .item:hover .arrow {
    opacity: 1;
    transform: translateX(4px);
  }
  .numenu .panel--meny .meny-content .divider {
    margin: 0;
  }
  .numenu .panel--meny .meny-content .submenu {
    max-height: none; /* always open on desktop */
    padding-left: 20px;
    padding-bottom: 8px;
  }
  .numenu .panel--meny .item--parent .chevron {
    display: none;
  }
  .numenu .panel--meny { /* no accordion on desktop */ }
}

/* =============================================================================
   STORE PANEL CONTENT (Butikk)

   Shop panel with CTAs, navigation links, and category grid.
   Desktop: dark-themed sheet with radial texture, light nav section below.
   ============================================================================= */
.numenu .butikk-content {
  display: flex;
  flex-direction: column-reverse; /* mobile: nav first, CTAs below */
  padding: var(--numenu-panel-pad);
  gap: var(--numenu-panel-pad);
}
.numenu .butikk-content .ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.numenu .butikk-content .butikk-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.numenu .butikk-content .links-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.numenu .butikk-content .btn-nav {
  font-family: var(--font-family-sans);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0;
  font-variation-settings: "STYL" 0;
  height: 40px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--numenu-radius);
  background: var(--color-cream-50);
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.numenu .butikk-content .btn-nav:active {
  background: var(--color-cream-200);
}
.numenu .butikk-content .cat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  margin: 0;
}
.numenu .butikk-content .cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.numenu .butikk-content .btn-cat {
  font-family: var(--font-family-sans);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0;
  font-variation-settings: "STYL" 0;
  height: 44px;
  background: var(--color-cream-200);
  border: 1px solid var(--border-color-light);
  border-radius: var(--numenu-radius);
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.numenu .butikk-content .btn-cat:active {
  background: var(--color-cream-300);
}
.numenu {
  /* ---------------------------------------------------------------------------
     Desktop (768px+) — dark theme transformation
     --------------------------------------------------------------------------- */
}
@media (min-width: 768px) {
  .numenu .panel--store .sheet {
    background: var(--color-brown-800);
    position: relative;
  }
  .numenu .panel--store .sheet::before { /* warm radial glow, top-right */
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, hsla(28, 50%, 35%, 0.22) 0%, transparent 70%);
    pointer-events: none;
  }
  .numenu .panel--store .body {
    position: relative;
    z-index: 1; /* above sheet pseudo-element */
  }
  .numenu .panel--store .butikk-content {
    flex-direction: column; /* desktop: natural order */
    padding: 0;
    gap: 24px;
  }
  .numenu .panel--store .ctas {
    margin: var(--numenu-gutter) var(--numenu-gutter) 0;
  }
  .numenu .panel--store .btn-primary {
    height: 50px;
  }
  .numenu .panel--store .btn-outlined {
    border-color: hsla(38, 80%, 88%, 0.5); /* light on dark */
    background-color: var(--color-cream-300);
  }
  .numenu .panel--store {
    /* nav section sits on light background below dark hero */
  }
  .numenu .panel--store .butikk-nav {
    background: var(--color-cream-100);
    padding: 24px var(--numenu-gutter);
    gap: 16px;
  }
  .numenu .panel--store .links-row {
    display: flex;
    gap: 8px;
  }
  .numenu .panel--store .btn-nav {
    width: auto;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px; /* pill shape on desktop */
  }
  .numenu .panel--store .btn-nav:hover {
    background: var(--color-cream-200);
  }
  .numenu .panel--store .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .numenu .panel--store .btn-cat {
    background: var(--color-cream-100);
  }
  .numenu .panel--store .btn-cat:hover {
    background: var(--color-cream-200);
  }
}

/* =============================================================================
   CART

   Cart panel positioning (desktop), lean-cart body padding,
   desktop cart icon button + count badge.
   ============================================================================= */
.numenu .body.lean-cart {
  padding-inline: 2em;
}
.numenu .body.lean-cart .cart-item-image img {
  width: 56px;
  height: auto;
  aspect-ratio: 2/3; /* portrait */
}
.numenu .cart-btn {
  display: none; /* mobile: cart lives in bottomnav instead */
}
@media (min-width: 768px) {
  .numenu .cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .numenu .cart-btn:hover {
    background: var(--color-cream-200);
  }
  .numenu .cart-btn.active {
    background: var(--color-cream-300);
  }
  .numenu .cart-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-color);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
  }
}
.numenu {
  /* TODO: extract shared badge base with .bottomnav .badge */
}
.numenu .cart-count {
  display: none;
}
@media (min-width: 768px) {
  .numenu .cart-count {
    display: flex;
    position: absolute;
    top: 0;
    right: -2px;
    background: var(--accent-color);
    color: var(--color-cream-100);
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-cream-100); /* cutout ring */
    pointer-events: none;
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Desktop (768px+) — cart panel breaks out of grid
     --------------------------------------------------------------------------- */
}
@media (min-width: 768px) {
  .numenu .panel--cart {
    position: fixed;
    top: var(--numenu-header-height);
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: var(--numenu-header-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* align dropdown under cart icon */
    /*       padding: 0 var(--numenu-gutter); */
    box-sizing: border-box;
  }
  .numenu .panel--cart .sheet {
    width: 380px;
  }
  .numenu .panel--cart .body {
    padding: 20px var(--numenu-gutter);
  }
  .numenu .panel--cart .footer {
    padding: 16px var(--numenu-gutter);
  }
  .numenu {
    /* Desktop cart: panel container spans full width but only the sheet
       should catch clicks. Otherwise the empty area beside the 380px sheet
       swallows clicks meant for the overlay (which is what closes the
       panel on outside-click). */
  }
  .numenu .panels[data-active=cart] .panel--cart {
    pointer-events: none;
  }
  .numenu .panels[data-active=cart] .panel--cart .sheet {
    pointer-events: auto;
  }
}

/* =============================================================================
   MOBILE BOTTOM NAV BAR

   Fixed bottom navigation for mobile. Hidden on desktop (768px+).
   ============================================================================= */
.numenu .bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--color-cream-100);
  border-top: 1px solid var(--border-color-light);
  padding-bottom: var(--numenu-safe-area-bottom); /* notch-safe */
  box-shadow: 0 -1px 0 var(--border-color-light), 0 -4px 20px var(--shadow-color);
}
@media (min-width: 768px) {
  .numenu .bottomnav {
    display: none;
  }
}
.numenu .bottomnav .inner {
  display: flex;
  align-items: center;
  height: 56px;
}
.numenu .bottomnav .btn {
  font: inherit;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-brown-400);
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
.numenu .bottomnav .btn:active {
  opacity: 0.65;
}
.numenu .bottomnav .btn.active {
  color: var(--accent-color);
}
.numenu .bottomnav .btn.active::before { /* top-edge indicator pip */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--accent-color);
  border-radius: 0 0 2px 2px;
  opacity: 0.65;
}
.numenu .bottomnav .btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.numenu .bottomnav .btn.active svg {
  stroke-width: 1.9;
}
.numenu .bottomnav .btn { /* bolder when selected */ }
.numenu .bottomnav .label {
  font-family: var(--font-family-sans);
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  font-variation-settings: "STYL" 0;
  pointer-events: none;
}
.numenu .bottomnav .divider {
  width: 1px;
  height: 20px;
  background: var(--border-color-light);
  flex-shrink: 0;
}
.numenu .bottomnav .badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.numenu .bottomnav {
  /* TODO: extract shared badge base with .cart-count */
}
.numenu .bottomnav .badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--accent-color);
  color: var(--color-cream-100);
  font-size: 8px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-cream-100); /* cutout ring */
  pointer-events: none;
}

/* =============================================================================
   HEADERS

   Mobile:  single bar — logo mark left, wordmark centered, ritual badge right.
   Desktop: ghost mark bleeding off the left edge, brand slab with ritual badge,
            nav capsule centered, cart right. Grain-textured, double-rule bottom.

   The SVG sprite in sprite.php defines #mvn-mark and #mvn-wordmark — branding.php
   references them with <use>, so we can restyle fill/size via CSS.
   ============================================================================= */
@property --numenu-grain {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.25;
}
@keyframes numenu-grain-breathe {
  0%, 100% {
    --numenu-grain: 0.22;
  }
  50% {
    --numenu-grain: 0.32;
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Shared sprite — kept invisible, sourced by <use> elsewhere
     --------------------------------------------------------------------------- */
}
.numenu > .mvn-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.numenu {
  /* ---------------------------------------------------------------------------
     Ritual badge — moon glyph + ISO week, sibling of the footer sigil
     --------------------------------------------------------------------------- */
}
.numenu .ritual-badge,
.numenu .brand-ritual {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: Roca, serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  white-space: nowrap;
}
.numenu .ritual-badge .ritual-moon,
.numenu .brand-ritual .ritual-moon {
  font-size: 1.5em;
  line-height: 1;
  filter: grayscale(1) sepia(0.6) hue-rotate(-15deg) brightness(0.95) contrast(1.1);
  letter-spacing: 0;
}
.numenu .ritual-badge .ritual-week,
.numenu .brand-ritual .ritual-week {
  position: relative;
  padding-left: 0.6em;
}
.numenu .ritual-badge .ritual-week::before,
.numenu .brand-ritual .ritual-week::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.35em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.numenu {
  /* ---------------------------------------------------------------------------
     MOBILE TOP BAR — bold, asymmetric, no longer a polite centered logo
     --------------------------------------------------------------------------- */
}
.numenu > .mobile-header {
  position: relative;
  height: var(--numenu-header-height);
  background: var(--color-cream-100);
  overflow: hidden;
  /* Grain overlay — echoes footer texture */
}
.numenu > .mobile-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: var(--numenu-grain);
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: numenu-grain-breathe 14s ease-in-out infinite;
}
.numenu > .mobile-header {
  /* Double-rule bottom border — 2px ink + hairline whisper */
}
.numenu > .mobile-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, transparent 1px, hsla(30, 20%, 40%, 0.3) 1px, hsla(30, 20%, 40%, 0.3) 2px, transparent 2px, transparent 4px, var(--text-color-dark) 4px, var(--text-color-dark) 5px);
}
.numenu > .mobile-header .mobile-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  gap: 12px;
}
.numenu > .mobile-header #branding {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--text-color-dark);
}
.numenu > .mobile-header #branding .mvn-mark {
  height: 2em;
  width: 2em;
  fill: currentColor;
}
.numenu > .mobile-header #branding .mvn-word {
  height: 2.2em;
  width: auto;
  fill: currentColor;
}
.numenu > .mobile-header .ritual-badge {
  font-size: 9px;
  letter-spacing: 0.22em;
}
@media (min-width: 768px) {
  .numenu > .mobile-header {
    display: none;
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     DESKTOP HEADER — hidden on mobile, dramatic slab on 768+
     --------------------------------------------------------------------------- */
}
.numenu > .header {
  display: none;
}
@media (min-width: 768px) {
  .numenu > .header {
    display: block;
    position: relative;
    top: 0;
    z-index: 500;
    background: linear-gradient(to right, var(--color-cream-200) 0%, var(--color-cream-100) 38%, var(--bg-color) 100%);
    overflow: hidden;
    /* Grain overlay — shared with #footer::before */
  }
  .numenu > .header::before, #footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: var(--numenu-grain);
    mix-blend-mode: color-dodge;
    pointer-events: none;
    animation: numenu-grain-breathe 14s ease-in-out infinite;
    z-index: 0;
  }
  .numenu > .header {
    /* Double-rule bottom border */
  }
  .numenu > .header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 0, transparent 1px, hsla(30, 20%, 40%, 0.25) 1px, hsla(30, 20%, 40%, 0.25) 2px, transparent 2px, transparent 4px, var(--text-color-dark) 4px, var(--text-color-dark) 5px);
  }
  .numenu > .header {
    /* Ghost mark — giant watermark bleeding off the left edge */
  }
  .numenu > .header .header-ghost {
    position: absolute;
    top: 50%;
    left: -2.4em;
    width: 6.2em;
    height: 6.2em;
    transform: translateY(-50%) rotate(-8deg);
    fill: var(--color-brown-700);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
  }
  .numenu > .header .inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--numenu-header-height);
    max-width: var(--numenu-header-max-width);
    margin: 0 auto;
    padding: 0 var(--numenu-gutter);
    gap: 24px;
  }
  .numenu > .header {
    /* ------- LEFT — brand slab ----------------------------------------- */
  }
  .numenu > .header .brand-slab {
    display: flex;
    align-items: center;
    gap: 1.25em;
    justify-self: start;
  }
  .numenu > .header #branding {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    color: var(--text-color-dark);
    transition: color 0.2s ease;
  }
  .numenu > .header #branding .mvn-mark {
    height: 2.3em;
    width: 2.3em;
    fill: currentColor;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .numenu > .header #branding .mvn-word {
    height: 2.7em;
    width: auto;
    fill: currentColor;
  }
  .numenu > .header #branding:hover .mvn-mark {
    transform: rotate(-6deg);
  }
  .numenu > .header .brand-ritual {
    padding-left: 1.1em;
    border-left: 1px solid hsla(30, 25%, 40%, 0.22);
  }
  .numenu > .header {
    /* ------- CENTER — nav capsule -------------------------------------- */
  }
  .numenu > .header .nav {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color-muted);
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    justify-self: center;
  }
  .numenu > .header .nav:hover {
    color: var(--text-color-dark);
  }
  .numenu > .header .nav.active {
    color: var(--text-color-dark);
  }
  .numenu > .header .nav .btn {
    font-family: var(--font-family-sans);
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-variation-settings: "STYL" 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    pointer-events: none;
    user-select: none;
  }
  .numenu > .header .nav .divider {
    width: 1px;
    height: 12px;
    background: currentColor;
    margin: 0 16px;
    opacity: 0.35;
    flex-shrink: 0;
  }
  .numenu > .header .nav .chevron {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left: 10px;
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
  }
  .numenu > .header .nav.active .chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
  .numenu > .header {
    /* ------- RIGHT — cart --------------------------------------------- */
  }
  .numenu > .header .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  html.numenu-open .numenu {
    min-height: var(--numenu-header-height);
  }
  html.numenu-open .numenu > .header {
    position: fixed;
    left: 0;
    right: 0;
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Narrower desktop — collapse ritual pill into just the moon glyph
     --------------------------------------------------------------------------- */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .numenu > .header .brand-ritual {
    padding-left: 0.8em;
  }
  .numenu > .header .brand-ritual .ritual-week {
    display: none;
  }
  .numenu > .header .brand-ritual .ritual-moon {
    font-size: 1.3em;
  }
  .numenu > .header .header-ghost {
    left: -2.8em;
    width: 5em;
    height: 5em;
  }
}
.numenu {
  /* ---------------------------------------------------------------------------
     Reduced motion — kill grain breathe, hold a static value
     --------------------------------------------------------------------------- */
}
@media (prefers-reduced-motion: reduce) {
  .numenu > .mobile-header::before,
  .numenu > .header::before {
    animation: none;
  }
}

/* =============================================================================
   DARK MODE

   Scoped token overrides for prefers-color-scheme: dark.
   Flips the cream/brown relationship — browns become surfaces, creams become text.
   Uses Myrvann's existing palette, no new colors introduced.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  .numenu {
    /* surfaces — deeper main bg, warm brown steps up from there */
    --color-cream-50: hsl(22, 48%, 14%);
    --color-cream-100: hsl(20, 52%, 9%); /* main bg — near-black cacao */
    --color-cream-200: hsl(22, 48%, 14%); /* hover */
    --color-cream-300: hsl(24, 46%, 19%); /* active/pressed */
    --color-cream-400: var(--color-brown-600); /* handles, subtle elements */
    --color-cream-500: var(--color-brown-500);
    --color-cream-600: var(--color-brown-400);
    /* text — soft creams, not stark white */
    --text-color: hsl(38, 35%, 75%); /* warm parchment */
    --text-color-dark: hsl(40, 50%, 88%); /* soft cream, not white */
    --text-color-muted: hsl(34, 22%, 52%); /* dusty brown */
    /* backgrounds — for lean-cart plugin tokens */
    --bg-color: hsl(20, 52%, 9%);
    --bg-color-light: hsl(22, 48%, 14%);
    /* borders — low-contrast on dark */
    --border-color-light: hsla(38, 30%, 50%, 0.18);
    --border-color: hsla(38, 30%, 50%, 0.4);
    /* shadows — deeper for dark surfaces */
    --shadow-color: hsla(0, 0%, 0%, 0.3);
    --shadow-color-dark: hsla(0, 0%, 0%, 0.5);
    /* accent — warmer, higher contrast on dark bg */
    --accent-color: hsl(28, 55%, 42%);
    /* button gradient — warm browns, subtler glow */
    --gradient-button: linear-gradient(145deg, hsl(28, 50%, 32%) 0%, hsl(24, 55%, 25%) 100%);
    --glow-cream-strong: hsla(42, 100%, 90%, 0.12);
    /* mobile bottom nav — bump contrast for tab labels */
    --color-brown-400: hsl(34, 22%, 52%); /* inactive tabs: warmer, lighter */
  }
}

/*# sourceMappingURL=menu.css.map */