@charset "UTF-8";
/*! Ousia — Numenu (structure) */
/*!
 * The theme-agnostic numenu layout machine: positioning, the data-active panel
 * state machine, responsive mobile-sheet ↔ desktop-mega geometry, scroll
 * regions, icon geometry, and a NEUTRAL open/close transition. No colour, type,
 * radius, shadow, or decoration — that brand skin lives in the child
 * (myrvann/scss/numenu/) and wins by source order (child-style loads after).
 *
 * Compiled to numenu.css and enqueued only in numenu mode (ousia_nav_mode).
 */
/* =============================================================================
   PANEL SYSTEM — structure

   Layout, the data-active state machine, overlay/container/panel geometry, and
   a neutral open/close transition. Colour, radius, shadow, button material →
   child brand layer.
   ============================================================================= */
/* Lock mobile page scroll while a panel is open. Desktop stays scrollable. */
@media (max-width: 767px) {
  html.numenu-open,
  html.numenu-open body {
    overflow: hidden;
  }
}
:root {
  /* Structural dimensions (brand radii live in the child). */
  --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));
  --numenu-gutter: 32px; /* desktop content inset */
  --numenu-panel-pad: 16px; /* mobile panel content padding */
}

.numenu {
  /* Button primitives — box + a neutral fill so the CTA is usable without a
     brand layer; the child's material (gradient/shadow/radius) overrides it. */
}
.numenu .btn-primary {
  width: 100%;
  height: 52px;
  position: relative;
  overflow: hidden;
  background: var(--accent-color);
  color: var(--accent-contrast);
}
.numenu .btn-primary svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
  flex-shrink: 0;
}
.numenu .btn-outlined {
  width: 100%;
  height: 44px;
}
.numenu {
  /* Overlay — placement + a neutral scrim so the dim works standalone; the
     child overrides the tint + adds blur. */
}
.numenu .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: hsla(0, 0%, 0%, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease; /* neutral; brand overrides */
}
.numenu {
  /* Panels container — mobile: stack at bottom; desktop: mega grid below header. */
}
.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;
}
.numenu .panels[data-active]:not([data-active=""]) .overlay {
  opacity: 1;
  pointer-events: auto;
}
.numenu .panels {
  /* single data attr drives all reveal 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.2s ease, opacity 0.2s 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;
    z-index: 490;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .numenu .panels .overlay {
    position: fixed;
    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 {
  /* Panel base — invisible until activated; positioned offscreen. */
}
.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.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s; /* delay hide until motion 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/bar/scroller/proceed. Sheets carry a neutral
     opaque surface so panels are readable without a brand layer; the child
     overrides background/radius/shadow. */
}
.numenu .sheet {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow: hidden;
  background: var(--bg-color);
}
.numenu .handle { /* swipe affordance, mobile only */
  width: 36px;
  height: 4px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .numenu .handle {
    display: none;
  }
}
.numenu .bar { /* mobile only */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--numenu-panel-pad) 12px;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); /* neutral; child re-skins */
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .numenu .bar {
    display: none;
  }
}
.numenu .bar .close {
  width: 32px;
  height: 32px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.numenu .bar .close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor; /* neutral default so the close icon shows in raw */
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}
.numenu .scroller {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.numenu .proceed {
  flex-shrink: 0;
  padding: 12px var(--numenu-panel-pad);
  background: var(--bg-color);
  border-top: 1px solid hsla(0, 0%, 0%, 0.12); /* neutral; child re-skins */
}
@media (prefers-reduced-motion: reduce) {
  .numenu .panel,
  .numenu .overlay {
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   HEADERS — structure

   The numenu header skeleton: hidden sprite, mobile bar layout, desktop slab
   grid, nav capsule, ghost placement, and the pin-on-open behaviour. The grain
   texture, double-rule border, ritual badge, gradients, colour, type and the
   ghost's fill/opacity are all brand.
   ============================================================================= */
.numenu {
  /* Hidden SVG sprite — sourced by <use> elsewhere. */
}
.numenu > .mvn-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.numenu {
  /* MOBILE TOP BAR */
}
.numenu > .mobile-header {
  position: relative;
  height: var(--numenu-header-height);
  overflow: hidden;
  background: var(--bg-color); /* neutral opaque bar; child re-skins */
}
.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;
}
.numenu > .mobile-header #branding .mvn-mark {
  height: 2em;
  width: 2em;
}
.numenu > .mobile-header #branding .mvn-word {
  height: 2.2em;
  width: auto;
}
@media (min-width: 768px) {
  .numenu > .mobile-header {
    display: none;
  }
}
.numenu {
  /* DESKTOP HEADER */
}
.numenu > .header {
  display: none;
}
@media (min-width: 768px) {
  .numenu > .header {
    display: block;
    position: relative;
    top: 0;
    z-index: 500;
    overflow: hidden;
    background: var(--bg-color); /* neutral opaque bar; child re-skins (gradient) */
    /* Ghost watermark — placement only; fill/opacity are brand. */
  }
  .numenu > .header .header-ghost {
    position: absolute;
    top: 50%;
    left: -2.4em;
    width: 6.2em;
    height: 6.2em;
    transform: translateY(-50%) rotate(-8deg);
    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 .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;
  }
  .numenu > .header #branding .mvn-mark {
    height: 2.3em;
    width: 2.3em;
  }
  .numenu > .header #branding .mvn-word {
    height: 2.7em;
    width: auto;
  }
  .numenu > .header .nav {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-self: center;
    -webkit-tap-highlight-color: transparent;
  }
  .numenu > .header .nav .btn {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: none;
    user-select: none;
  }
  .numenu > .header .nav .divider {
    width: 1px;
    height: 12px;
    margin: 0 16px;
    flex-shrink: 0;
  }
  .numenu > .header .nav .chevron {
    width: 10px;
    height: 10px;
    stroke: currentColor; /* neutral default so the chevron shows in raw */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin-left: 10px;
    transition: transform 0.3s ease; /* neutral; brand overrides easing */
  }
  .numenu > .header .nav.active .chevron {
    transform: rotate(180deg); /* open-state indicator */
  }
  .numenu > .header .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .numenu {
    /* Pin the header while a panel is open. */
  }
  html.numenu-open .numenu {
    min-height: var(--numenu-header-height);
  }
  html.numenu-open .numenu > .header {
    position: fixed;
    left: 0;
    right: 0;
  }
}
.numenu {
  /* Narrower desktop — ghost placement (ritual collapse is brand). */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .numenu > .header .header-ghost {
    left: -2.8em;
    width: 5em;
    height: 5em;
  }
}

/* =============================================================================
   MENY PANEL (Utforsk) — structure

   Item rows, the accordion submenu mechanism, dividers. Type, colour and the
   bullet marker are brand.
   ============================================================================= */
.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; /* button reset */
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.numenu .meny-content .item .label {
  flex: 1;
}
.numenu .meny-content .item .arrow,
.numenu .meny-content .item .chevron {
  width: 16px;
  height: 16px;
  stroke: currentColor; /* neutral default so icons show in raw; child re-skins */
  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:hover .arrow {
  opacity: 1;
}
.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;
  margin: 0 4px;
}
.numenu .meny-content .submenu { /* accordion mechanism — grid-rows animates to natural height,
   so any length of submenu expands without clipping */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
  padding-left: 16px;
}
.numenu .meny-content .submenu.open {
  grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
  .numenu .meny-content .submenu {
    transition-duration: 0.01ms !important;
  }
}
.numenu .meny-content .submenu-inner { /* the single collapsing grid row */
  min-height: 0;
  overflow: hidden;
}
.numenu .meny-content .submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  cursor: pointer;
}
.numenu {
  /* Desktop — same expandable accordion as mobile, just tighter spacing.
     (No max-height override, chevron kept, so submenus collapse/expand here too.) */
}
@media (min-width: 768px) {
  .numenu .panel--meny .scroller {
    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; hover colour is brand */
  }
  .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 {
    padding-left: 20px;
  }
  .numenu .panel--meny {
    /* padding on the inner so it collapses with the row (not the container) */
  }
  .numenu .panel--meny .meny-content .submenu-inner {
    padding-bottom: 8px;
  }
}

/* =============================================================================
   STORE PANEL (Butikk) — structure

   CTA stack, nav links, category grid; the mobile→desktop layout flip. Surfaces,
   the dark desktop theme, the radial glow, pills and type are brand.
   ============================================================================= */
.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 {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* neutral surface so the pill reads standalone; child re-skins */
  background: var(--bg-color);
  border: 1px solid hsla(0, 0%, 0%, 0.12);
  color: var(--text-color);
}
.numenu .butikk-content .cat-label {
  margin: 0;
}
.numenu .butikk-content .cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.numenu .butikk-content .btn-cat {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* neutral surface so the pill reads standalone; child re-skins */
  background: var(--bg-color);
  border: 1px solid hsla(0, 0%, 0%, 0.12);
  color: var(--text-color);
}
.numenu {
  /* Desktop — layout flip; the dark theme + glow are brand. */
}
@media (min-width: 768px) {
  .numenu .panel--store .butikk-content {
    flex-direction: column; /* 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 .butikk-nav {
    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;
  }
  .numenu .panel--store .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   CART — structure

   Cart-item image sizing, desktop cart button + count badge box, and the
   desktop cart-panel breakout. Surfaces, colour and the badge skin are brand.
   ============================================================================= */
.numenu .scroller.lean-cart {
  padding-inline: 2em;
}
.numenu .scroller.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 */
}
@media (min-width: 768px) {
  .numenu .cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .numenu .cart-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor; /* neutral default so the cart icon shows in raw */
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
  }
}
.numenu {
  /* Empty cart — centred icon + message + a shop CTA (not checkout). */
}
.numenu .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 24px;
}
.numenu .cart-empty-icon {
  width: 44px;
  height: 44px;
  stroke: currentColor; /* neutral; child re-skins */
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}
.numenu .cart-empty-title {
  margin: 0;
}
.numenu .cart-empty .btn-outlined {
  width: auto;
  min-width: 60%;
  padding-inline: 24px;
}
.numenu {
  /* While the cart is empty, the checkout CTA has nothing to do — hide it so the
     empty state's shop link is the only action. */
}
.numenu .panel--cart .sheet:has([data-lean-cart=empty]:not([hidden])) .proceed {
  display: none;
}
.numenu .cart-count { /* badge box + neutral fill so the count reads; child re-skins */
  display: none;
}
@media (min-width: 768px) {
  .numenu .cart-count {
    display: flex;
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: var(--accent-color);
    color: var(--accent-contrast);
    border-radius: 8px;
  }
}
.numenu {
  /* Desktop — cart panel breaks out of the mega 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 */
    box-sizing: border-box;
  }
  .numenu .panel--cart .sheet {
    width: 380px;
  }
  .numenu .panel--cart .scroller {
    padding: 20px var(--numenu-gutter);
  }
  .numenu .panel--cart .proceed {
    padding: 16px var(--numenu-gutter);
  }
  .numenu {
    /* Only the sheet catches clicks; the empty area lets the overlay close. */
  }
  .numenu .panels[data-active=cart] .panel--cart {
    pointer-events: none;
  }
  .numenu .panels[data-active=cart] .panel--cart .sheet {
    pointer-events: auto;
  }
}

/* =============================================================================
   MOBILE BOTTOM NAV — structure

   Fixed bottom bar, tab layout, badge box, dividers. Hidden on desktop.
   Surfaces, colour, type and the badge/pip skin are brand.
   ============================================================================= */
.numenu .bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding-bottom: var(--numenu-safe-area-bottom); /* notch-safe */
  background: var(--bg-color); /* neutral opaque bar; child re-skins */
  border-top: 1px solid hsla(0, 0%, 0%, 0.12);
}
@media (min-width: 768px) {
  .numenu .bottomnav {
    display: none;
  }
}
.numenu .bottomnav .inner {
  display: flex;
  align-items: center;
  height: 56px;
}
.numenu .bottomnav .btn {
  font: inherit; /* reset UA button font so child em units resolve to body */
  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;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
.numenu .bottomnav .btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor; /* neutral default so tab icons show in raw */
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.numenu .bottomnav .label {
  pointer-events: none;
}
.numenu .bottomnav .divider {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
}
.numenu .bottomnav .badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.numenu .bottomnav .badge { /* badge box + neutral fill so the count reads; child re-skins */
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--accent-color);
  color: var(--accent-contrast);
  border-radius: 7px;
}

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