/*
 * SnapGo Menu
 * Post-theme page system: connected chapters, replaceable product slots and
 * restrained interaction using the approved SnapGo palette.
 */

body[data-page="menu"]{
  --mn-coral:#e94a09;
  --mn-violet:#7b2d8b;
  --mn-peach:#eda197;
  --mn-mauve:#b23b66;
  --mn-red:#d04555;
  --mn-blush:#cb98bf;
  --mn-plum:#9d337a;
  --mn-orange:#e6503b;
  --mn-night:#3a1738;
  --mn-ink:#2b102e;
  --mn-copy:#6f566d;
  --mn-paper:#fffaf8;
  --mn-soft:#fff0ed;
  --mn-warm:#f7ded9;
  --mn-line:rgba(58,23,56,.14);
  --mn-hero-shell:1560px;
  --mn-content-shell:1240px;
  --mn-gutter:clamp(24px,4vw,64px);
  --mn-nav-height:104px;
  --mn-hero-title:clamp(3.35rem,5.4vw,5.85rem);
  --mn-section-title:clamp(2.4rem,4vw,4.15rem);
  --mn-card-title:clamp(1.25rem,1.65vw,1.62rem);
  --mn-body:clamp(.98rem,1.04vw,1.08rem);
  margin:0;
  background:var(--mn-night);
  color:var(--mn-ink);
}

body[data-page="menu"]::selection{
  background:var(--mn-peach);
  color:var(--mn-night);
}

/* Header alignment matches Home and Why. */
body[data-page="menu"] .site-header{
  min-height:var(--mn-nav-height);
  border:0!important;
  border-bottom:1px solid rgba(58,23,56,.1)!important;
  background:rgba(255,250,248,.91)!important;
  box-shadow:0 10px 34px rgba(37,16,61,.07);
  backdrop-filter:blur(18px) saturate(1.2);
}

body[data-page="menu"] .nav{
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
  align-items:center!important;
  width:100%;
  max-width:var(--mn-hero-shell)!important;
  min-height:var(--mn-nav-height)!important;
  margin-inline:auto!important;
  padding:7px var(--mn-gutter)!important;
  gap:clamp(22px,3vw,48px)!important;
}

body[data-page="menu"] .brand{
  justify-self:start;
  width:170px!important;
  height:90px;
  flex:0 0 170px!important;
  padding:0!important;
}

body[data-page="menu"] .brand img,
body[data-page="menu"] .brand .snapgo-logo-img{
  width:auto!important;
  height:86px!important;
  max-width:164px!important;
  object-fit:contain!important;
  transform:none!important;
}

body[data-page="menu"] .nav-links{
  justify-self:center;
  gap:clamp(20px,2.2vw,34px)!important;
}

body[data-page="menu"] .nav-link{
  padding:10px 1px!important;
  color:var(--mn-night)!important;
  font-size:clamp(.92rem,1.05vw,1.02rem)!important;
  line-height:1.1;
}

body[data-page="menu"] .nav-link::after{
  background:linear-gradient(90deg,var(--mn-orange),var(--mn-red),var(--mn-violet))!important;
}

body[data-page="menu"] .nav-link.active{
  color:var(--mn-violet)!important;
}

body[data-page="menu"] .nav-cta{
  justify-self:end;
}

body[data-page="menu"] .nav-cta .btn,
body[data-page="menu"] .mobile-menu .btn{
  min-height:50px;
  padding:12px 24px!important;
  border:2px solid var(--mn-night)!important;
  background:linear-gradient(115deg,var(--mn-orange),var(--mn-red))!important;
  color:#fff!important;
  font-size:.94rem!important;
  box-shadow:5px 6px 0 var(--mn-night)!important;
}

body[data-page="menu"] .site-footer{
  margin-top:0!important;
  border-top:1px solid rgba(237,161,151,.15);
  background:var(--mn-night)!important;
  background-image:none!important;
}

body[data-page="menu"] .site-footer a:focus-visible{
  outline:3px solid var(--mn-peach);
  outline-offset:4px;
}

#page-menu{
  position:relative;
  display:block;
  overflow:clip;
  background:var(--mn-warm)!important;
  color:var(--mn-ink);
}

#page-menu *,
#page-menu *::before,
#page-menu *::after{
  box-sizing:border-box;
}

#page-menu .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#page-menu .menu-shell,
#page-menu .menu-content-shell{
  position:relative;
  z-index:2;
  width:100%;
  margin-inline:auto!important;
  padding-inline:var(--mn-gutter)!important;
}

#page-menu .menu-shell{max-width:var(--mn-hero-shell)!important;}
#page-menu .menu-content-shell{max-width:var(--mn-content-shell)!important;}

#page-menu :is(a,button,input):focus-visible{
  outline:3px solid var(--mn-peach);
  outline-offset:4px;
}

#page-menu :is(h1,h2,h3){
  margin-top:0;
  color:inherit;
  font-family:var(--font-display);
  text-wrap:balance;
}

#page-menu p{text-wrap:pretty;}

#menu-explorer{scroll-margin-top:calc(var(--mn-nav-height) + 28px);}

#page-menu .menu-reveal{
  opacity:1;
  transform:none;
}

#page-menu.menu-motion-ready .menu-reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity .54s ease var(--menu-reveal-delay,0ms),
    transform .64s cubic-bezier(.2,.8,.2,1) var(--menu-reveal-delay,0ms);
}

#page-menu.menu-motion-ready .menu-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

#page-menu .menu-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  margin-bottom:15px;
  color:var(--mn-violet);
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.25;
  text-transform:uppercase;
}

#page-menu .menu-eyebrow i{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--mn-peach);
  box-shadow:0 0 0 6px rgba(237,161,151,.13),0 0 18px rgba(237,161,151,.48);
}

#page-menu .menu-eyebrow--light{
  color:#fff;
}

#page-menu .menu-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:14px 27px;
  border:2px solid var(--mn-night);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.98rem;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

#page-menu .menu-button--primary{
  background:linear-gradient(115deg,var(--mn-coral),var(--mn-red));
  color:#fff;
  box-shadow:5px 6px 0 var(--mn-night);
}

#page-menu .menu-button--ghost{
  border-color:rgba(255,255,255,.64);
  background:rgba(255,255,255,.92);
  color:var(--mn-violet);
  box-shadow:5px 6px 0 rgba(43,16,46,.55);
}

#page-menu .menu-button:hover{
  transform:translateY(-3px);
  box-shadow:7px 9px 0 var(--mn-night);
}

/* Connected hero chapter */
#page-menu .menu-hero-chapter{
  position:relative;
  isolation:isolate;
  min-height:clamp(720px,77vw,840px);
  padding:clamp(62px,6vw,92px) 0 110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 28%,rgba(237,161,151,.28) 0 1px,transparent 2px 100%),
    radial-gradient(ellipse at 75% 46%,rgba(203,152,191,.27),transparent 37%),
    linear-gradient(122deg,#3a1738 0%,#672467 43%,#9d337a 72%,#b23b66 100%);
  color:#fff;
}

#page-menu .menu-hero-chapter::before{
  content:"";
  position:absolute;
  inset:-18% -10%;
  z-index:-2;
  opacity:.38;
  background:
    repeating-radial-gradient(ellipse at 72% 50%,transparent 0 32px,rgba(237,161,151,.18) 33px 35px,transparent 36px 57px),
    linear-gradient(112deg,transparent 0 49%,rgba(255,255,255,.04) 49.4% 50.1%,transparent 50.4%);
  transform:rotate(-4deg) scale(1.05);
}

#page-menu .menu-hero-chapter::after{
  content:"SNACKGO";
  position:absolute;
  top:6%;
  right:-3%;
  z-index:-1;
  color:rgba(255,255,255,.045);
  font-family:var(--font-display);
  font-size:clamp(8rem,18vw,19rem);
  font-weight:800;
  letter-spacing:-.08em;
  line-height:.8;
  transform:rotate(90deg) translateX(44%);
  transform-origin:right top;
  pointer-events:none;
}

#page-menu .menu-ambient{
  position:absolute;
  z-index:-1;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  pointer-events:none;
}

#page-menu .menu-ambient--one{
  width:420px;
  aspect-ratio:1;
  top:9%;
  right:10%;
  box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.018);
}

#page-menu .menu-ambient--two{
  width:240px;
  aspect-ratio:1;
  left:-100px;
  bottom:4%;
  box-shadow:0 0 0 35px rgba(255,255,255,.03),0 0 0 70px rgba(255,255,255,.02);
}

#page-menu .menu-hero{
  display:grid;
  grid-template-columns:minmax(0,.91fr) minmax(520px,1.09fr);
  align-items:center;
  gap:clamp(42px,6vw,96px);
  background:transparent!important;
}

#page-menu .menu-hero-copy{
  max-width:710px;
}

#page-menu .menu-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 20px;
}

#page-menu .menu-hero-pills span{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#f8d9e6;
  font-family:var(--font-mono);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#page-menu .menu-hero h1{
  max-width:760px;
  margin:0 0 22px;
  color:#fff;
  font-size:var(--mn-hero-title);
  font-weight:700;
  line-height:.91;
  letter-spacing:-.052em;
}

#page-menu .menu-hero h1 span{
  display:block;
  width:max-content;
  max-width:100%;
  color:var(--mn-peach);
  background:linear-gradient(95deg,var(--mn-peach),#ffd0c6 60%,var(--mn-blush));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

#page-menu .menu-hero-copy > p{
  max-width:640px;
  margin:0 0 30px;
  color:#f5dfeb;
  font-size:var(--mn-body);
  line-height:1.74;
}

#page-menu .menu-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:38px;
}

#page-menu .menu-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:620px;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.16);
}

#page-menu .menu-hero-stats div{
  padding:19px 20px 0 0;
}

#page-menu .menu-hero-stats div + div{
  padding-left:20px;
  border-left:1px solid rgba(255,255,255,.12);
}

#page-menu .menu-hero-stats dt{
  margin:0 0 2px;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
}

#page-menu .menu-hero-stats dd{
  margin:0;
  color:#e7c8da;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.02em;
}

/* Craving console */
#page-menu .menu-console{
  position:relative;
  width:min(100%,670px);
  min-height:560px;
  justify-self:end;
  display:grid;
  place-items:center;
}

#page-menu .console-halo{
  position:absolute;
  inset:3% 1% 1% 2%;
  border:1px solid rgba(237,161,151,.28);
  border-radius:47% 53% 45% 55% / 46% 42% 58% 54%;
  box-shadow:0 0 0 34px rgba(237,161,151,.055),0 0 0 76px rgba(203,152,191,.035);
  transform:rotate(-7deg);
  animation:menuHalo 12s ease-in-out infinite alternate;
}

#page-menu .console-shell{
  position:relative;
  z-index:2;
  width:min(88%,560px);
  padding:15px;
  border:2px solid rgba(255,255,255,.42);
  border-radius:38px;
  background:linear-gradient(145deg,rgba(255,250,248,.97),rgba(247,222,217,.93));
  color:var(--mn-night);
  box-shadow:18px 22px 0 rgba(43,16,46,.78),0 34px 70px rgba(20,3,27,.3),inset 0 0 0 8px rgba(178,59,102,.1);
  transform:rotate(1.7deg);
}

#page-menu .console-shell::before{
  content:"";
  position:absolute;
  inset:-12px 24px auto;
  height:12px;
  border-radius:99px 99px 0 0;
  background:linear-gradient(90deg,var(--mn-peach),var(--mn-red),var(--mn-violet));
  opacity:.95;
}

#page-menu .console-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 11px 16px;
}

#page-menu .console-head > div{
  display:flex;
  align-items:center;
  gap:10px;
}

#page-menu .console-logo-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--mn-plum),var(--mn-violet));
  color:#fff;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:800;
  box-shadow:3px 4px 0 var(--mn-night);
}

#page-menu .console-head small,
#page-menu .console-head strong{
  display:block;
}

#page-menu .console-head small{
  margin-bottom:1px;
  color:var(--mn-mauve);
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#page-menu .console-head strong{
  font-size:.98rem;
  line-height:1.2;
}

#page-menu .console-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(58,23,56,.16);
  border-radius:999px;
  background:#fff;
  color:var(--mn-violet);
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#page-menu .console-live i,
#page-menu .console-foot i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#25a75d;
  box-shadow:0 0 0 5px rgba(37,167,93,.11);
}

#page-menu .console-screen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:122px;
  padding:25px;
  border:2px solid var(--mn-night);
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 12%,rgba(237,161,151,.42),transparent 28%),
    repeating-radial-gradient(ellipse at 84% 100%,transparent 0 18px,rgba(255,255,255,.06) 19px 20px),
    linear-gradient(135deg,var(--mn-night),#69236b 64%,var(--mn-plum));
  color:#fff;
}

#page-menu .console-screen-copy span,
#page-menu .console-screen-copy strong{
  display:block;
}

#page-menu .console-screen-copy span{
  margin-bottom:7px;
  color:#ddb9d2;
  font-family:var(--font-mono);
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#page-menu .console-screen-copy strong{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.5vw,2.15rem);
  line-height:1;
}

#page-menu .console-score{
  display:grid;
  place-items:center;
  width:74px;
  aspect-ratio:1;
  padding:10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.1);
}

#page-menu .console-score span{
  font-family:var(--font-mono);
  font-size:.52rem;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#page-menu .console-score strong{
  font-size:1rem;
  line-height:1;
}

#page-menu .console-picks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  padding:12px 0;
}

#page-menu .console-pick{
  min-width:0;
  padding:9px 8px 10px;
  border:1px solid rgba(58,23,56,.14);
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 7px 16px rgba(58,23,56,.08);
}

#page-menu .console-pick span{
  display:grid;
  place-items:center;
  height:72px;
  margin-bottom:5px;
  border-radius:13px;
  background:linear-gradient(145deg,#fff5f2,#f2dbe8);
}

#page-menu .console-pick img{
  width:auto;
  height:62px;
  max-width:78%;
  object-fit:contain;
  filter:drop-shadow(0 8px 7px rgba(58,23,56,.16));
}

#page-menu .console-pick b{
  display:block;
  overflow:hidden;
  color:var(--mn-night);
  font-size:.68rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#page-menu .console-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 8px 5px;
  color:var(--mn-copy);
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.03em;
}

#page-menu .console-foot span{
  display:flex;
  align-items:center;
  gap:9px;
}

#page-menu .console-foot b{color:var(--mn-violet);}

#page-menu .console-note{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 15px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:16px;
  background:rgba(255,250,248,.93);
  color:var(--mn-night);
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 14px 35px rgba(43,16,46,.22);
  backdrop-filter:blur(12px);
}

#page-menu .console-note i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--mn-coral);
  box-shadow:0 0 0 6px rgba(233,74,9,.11);
}

#page-menu .console-note--one{top:11%;left:-2%;transform:rotate(-3deg);}
#page-menu .console-note--two{right:-1%;bottom:13%;transform:rotate(2deg);}

#page-menu .menu-category-rail{
  position:absolute;
  right:0;
  bottom:17px;
  left:0;
}

#page-menu .menu-category-rail > div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(17px,2.8vw,42px);
  min-height:76px;
  padding:16px clamp(20px,3vw,38px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(100deg,rgba(43,16,46,.92),rgba(123,45,139,.88) 46%,rgba(208,69,85,.9));
  box-shadow:0 16px 38px rgba(43,16,46,.2),inset 0 1px rgba(255,255,255,.15);
}

#page-menu .menu-category-rail span{
  flex:0 0 auto;
  color:#fff;
  font-family:var(--font-mono);
  font-size:clamp(.7rem,.95vw,.82rem);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#page-menu .menu-category-rail i{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border:2px solid var(--mn-peach);
  border-radius:50%;
}

/* Liquid connections are layered fields, not standalone separators. */
#page-menu .menu-seam{
  position:relative;
  z-index:4;
  height:clamp(118px,10vw,176px);
  margin-top:-1px;
  overflow:hidden;
  pointer-events:none;
}

#page-menu .menu-seam-layer{
  position:absolute;
  right:-12%;
  bottom:-2px;
  left:-12%;
  display:block;
  border-radius:46% 54% 0 0 / 72% 66% 0 0;
  transform-origin:center bottom;
}

#page-menu .menu-seam--hero{
  --hero-seam-height:clamp(84px,6.4vw,118px);
  height:var(--hero-seam-height);
  margin-bottom:calc(var(--hero-seam-height) * -1);
  background:linear-gradient(122deg,#3a1738 0%,#672467 43%,#9d337a 72%,#b23b66 100%);
}

#page-menu .menu-seam--hero .menu-seam-layer--back{
  height:104%;
  bottom:-44%;
  background:linear-gradient(90deg,var(--mn-blush),var(--mn-peach));
  opacity:.78;
  border-radius:48% 52% 0 0 / 78% 68% 0 0;
  transform:rotate(1deg) translateX(-1.5%);
}

#page-menu .menu-seam--hero .menu-seam-layer--mid{
  height:78%;
  bottom:-42%;
  background:linear-gradient(96deg,var(--mn-red),var(--mn-mauve) 54%,var(--mn-peach));
  opacity:.96;
  border-radius:54% 46% 0 0 / 74% 82% 0 0;
  transform:rotate(-.7deg) translateX(1.2%);
}

#page-menu .menu-seam--hero .menu-seam-layer--front{
  height:58%;
  bottom:-43%;
  background:linear-gradient(90deg,var(--mn-warm),#f9e8e4 62%,var(--mn-warm));
  border-radius:43% 57% 0 0 / 84% 70% 0 0;
  transform:rotate(.35deg) translateX(-.6%);
}

/* Product explorer */
#page-menu .menu-explorer{
  position:relative;
  z-index:1;
  padding:clamp(126px,9vw,162px) 0 clamp(92px,9vw,132px);
  overflow:visible;
  background:
    radial-gradient(circle at 5% 20%,rgba(203,152,191,.18),transparent 22%),
    repeating-radial-gradient(ellipse at 90% 8%,transparent 0 38px,rgba(178,59,102,.055) 39px 41px),
    linear-gradient(180deg,var(--mn-warm),#f9e8e4 58%,#f4d8d6);
}

#page-menu .menu-explorer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.48;
  background-image:linear-gradient(rgba(123,45,139,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(123,45,139,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(transparent 14%,#000 34%,#000 85%,transparent);
}

#page-menu .menu-section-head{
  margin-bottom:clamp(30px,4vw,48px);
}

#page-menu .menu-section-head--split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.6fr);
  align-items:end;
  gap:clamp(28px,5vw,78px);
}

#page-menu .menu-section-head h2{
  max-width:760px;
  margin:0;
  color:var(--mn-night);
  font-size:var(--mn-section-title);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.04em;
}

#page-menu .menu-section-head > p{
  max-width:520px;
  margin:0 0 4px;
  color:var(--mn-copy);
  font-size:var(--mn-body);
  line-height:1.7;
}

#page-menu .menu-filter-dock{
  position:sticky;
  top:calc(var(--mn-nav-height) + 14px);
  z-index:20;
  margin-bottom:32px;
  padding:12px 14px 9px;
  border:1px solid rgba(58,23,56,.14);
  border-radius:24px;
  background:rgba(255,250,248,.88);
  box-shadow:0 16px 38px rgba(58,23,56,.12),inset 0 1px rgba(255,255,255,.8);
  backdrop-filter:blur(18px) saturate(1.15);
}

#page-menu .menu-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#page-menu .category-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  padding:2px 2px 5px;
  scrollbar-color:var(--mn-blush) transparent;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}

#page-menu .category-tab{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 17px;
  border:1px solid rgba(58,23,56,.14);
  border-radius:999px;
  background:#fff;
  color:var(--mn-copy);
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  scroll-snap-align:start;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

#page-menu .category-tab:hover{
  color:var(--mn-violet);
  transform:translateY(-1px);
}

#page-menu .category-tab.active,
#page-menu .category-tab[aria-pressed="true"]{
  border-color:var(--mn-night);
  background:linear-gradient(115deg,var(--mn-violet),var(--mn-plum));
  color:#fff;
  box-shadow:3px 4px 0 var(--mn-night);
}

#page-menu .menu-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(260px,28vw);
  min-width:210px;
  min-height:46px;
  padding:0 15px;
  border:1px solid rgba(58,23,56,.17);
  border-radius:999px;
  background:#fff;
}

#page-menu .menu-search:focus-within{
  border-color:var(--mn-violet);
  box-shadow:0 0 0 3px rgba(123,45,139,.1);
}

#page-menu .menu-search svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:var(--mn-violet);
  stroke-linecap:round;
  stroke-width:2;
}

#page-menu .menu-search input{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--mn-night);
  font:700 .82rem/1.2 var(--font-body);
}

#page-menu .menu-search input::placeholder{color:#987f94;}

#page-menu .menu-filter-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:25px;
  padding:5px 5px 0;
}

#page-menu .menu-filter-meta p{
  margin:0;
  color:#80697e;
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

#page-menu .menu-filter-meta button{
  padding:3px;
  border:0;
  background:transparent;
  color:var(--mn-violet);
  font:800 .72rem/1.2 var(--font-body);
  text-decoration:underline;
  text-underline-offset:3px;
}

#page-menu .product-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:18px;
}

#page-menu .menu-product{
  --card-bg:#fffaf8;
  --card-accent:var(--mn-mauve);
  --card-soft:#f5d8e6;
  --card-x:50%;
  --card-y:50%;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  grid-column:span 3;
  min-height:408px;
  padding:17px;
  border:1px solid rgba(58,23,56,.13)!important;
  border-radius:28px;
  overflow:hidden;
  background:var(--card-bg)!important;
  box-shadow:0 16px 28px rgba(58,23,56,.09),0 3px 0 rgba(255,255,255,.8) inset!important;
  color:var(--mn-night)!important;
  transition:transform .25s ease,box-shadow .25s ease;
}

#page-menu .menu-product::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.9;
  background:
    radial-gradient(circle at var(--card-x) var(--card-y),rgba(255,255,255,.82),transparent 32%),
    linear-gradient(145deg,transparent 54%,var(--card-soft));
  pointer-events:none;
}

#page-menu .menu-product::after{
  content:"";
  position:absolute;
  top:-18%;
  right:-27%;
  z-index:-1;
  width:190px;
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--card-accent) 30%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 25px color-mix(in srgb,var(--card-accent) 5%,transparent),0 0 0 52px color-mix(in srgb,var(--card-accent) 4%,transparent);
}

#page-menu .menu-product[hidden]{display:none!important;}

#page-menu .tone-coral{--card-accent:#e94a09;--card-soft:#ffd9cd;}
#page-menu .tone-violet{--card-accent:#7b2d8b;--card-soft:#e8d7ef;}
#page-menu .tone-peach{--card-accent:#d04555;--card-soft:#fde0d9;}
#page-menu .tone-berry{--card-accent:#b23b66;--card-soft:#f1d3df;}
#page-menu .tone-red{--card-accent:#d04555;--card-soft:#f7d4d8;}
#page-menu .tone-plum{--card-accent:#9d337a;--card-soft:#ead2e4;}
#page-menu .tone-orange{--card-accent:#e6503b;--card-soft:#f8d9d2;}
#page-menu .tone-mauve{--card-accent:#b23b66;--card-soft:#ead4e2;}

#page-menu .menu-product--feature{
  grid-column:span 6;
  grid-row:span 2;
  min-height:640px;
  padding:22px;
  border-color:rgba(58,23,56,.2);
  background:linear-gradient(145deg,#fffaf8,#f3d8e4)!important;
}

#page-menu .menu-product--wide{
  grid-column:span 6;
  min-height:330px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:auto 1fr;
  column-gap:18px;
}

#page-menu .product-card-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#page-menu .menu-product--wide .product-card-top{
  grid-column:1/-1;
}

#page-menu .product-category{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb,var(--card-accent) 35%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--card-accent) 10%,#fff);
  color:var(--card-accent);
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

#page-menu .product-number{
  color:color-mix(in srgb,var(--card-accent) 62%,#fff);
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:800;
}

#page-menu .product-media{
  position:relative;
  display:grid;
  place-items:center;
  flex:1 1 auto;
  width:100%;
  min-height:220px;
  margin:10px 0 8px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.95) 0 34%,transparent 35%),
    repeating-radial-gradient(circle at center,transparent 0 27px,color-mix(in srgb,var(--card-accent) 11%,transparent) 28px 29px);
}

#page-menu .menu-product--feature .product-media{
  min-height:410px;
  border-radius:26px;
}

#page-menu .menu-product--wide .product-media{
  grid-column:1;
  grid-row:2;
  min-height:235px;
  margin:8px 0 0;
}

#page-menu .product-media img{
  position:relative;
  z-index:2;
  width:auto!important;
  height:auto!important;
  max-width:80%!important;
  max-height:210px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 17px 13px rgba(58,23,56,.19));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}

#page-menu .menu-product--feature .product-media img{
  max-width:74%!important;
  max-height:390px!important;
}

#page-menu .menu-product--wide .product-media img{
  max-width:78%!important;
  max-height:210px!important;
}

#page-menu .product-orbit{
  position:absolute;
  width:70%;
  aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--card-accent) 24%,transparent);
  border-radius:50%;
  transform:rotate(-16deg) scaleY(.38);
}

#page-menu .product-orbit::before,
#page-menu .product-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--card-accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--card-accent) 10%,transparent);
}

#page-menu .product-orbit::before{top:9%;left:15%;width:7px;height:7px;}
#page-menu .product-orbit::after{right:12%;bottom:7%;width:5px;height:5px;}

#page-menu .product-placeholder{
  position:absolute;
  z-index:1;
  display:none;
  place-items:center;
  width:112px;
  aspect-ratio:1;
  border:1px dashed color-mix(in srgb,var(--card-accent) 45%,transparent);
  border-radius:30px;
  color:var(--card-accent);
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
}

#page-menu .product-media.is-placeholder .product-placeholder{display:grid;}

#page-menu .product-info{
  position:relative;
  z-index:3;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:13px;
  min-height:68px;
}

#page-menu .menu-product--wide .product-info{
  grid-column:2;
  grid-row:2;
  align-self:stretch;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:22px 12px 12px 0;
}

#page-menu .product-title-block{
  min-width:0;
}

#page-menu .product-brand{
  margin:0 0 4px;
  color:var(--card-accent);
  font-family:var(--font-mono);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1.25;
  text-transform:uppercase;
}

#page-menu .product-info h3{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:var(--mn-night)!important;
  font-size:var(--mn-card-title);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

#page-menu .product-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 0;
}

#page-menu .product-meta span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--card-accent) 26%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--card-accent) 8%,#fff);
  color:var(--mn-copy);
  font-size:.61rem;
  font-weight:800;
  line-height:1;
}

#page-menu .menu-product--feature .product-info h3{
  font-size:clamp(1.75rem,2.8vw,2.65rem);
}

#page-menu .product-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
  min-height:44px;
  flex:0 0 auto;
  padding:8px 9px 8px 14px;
  border:1px solid var(--mn-night);
  border-radius:999px;
  background:var(--mn-night);
  color:#fff;
  font-family:var(--font-body);
  font-size:.7rem;
  font-weight:800;
  line-height:1;
  box-shadow:3px 4px 0 color-mix(in srgb,var(--card-accent) 65%,var(--mn-night));
  transition:transform .18s ease,background .18s ease;
}

#page-menu .product-add i{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--card-accent);
  color:#fff;
  font-style:normal;
  font-size:1rem;
}

#page-menu .menu-product--wide .product-add{
  align-self:flex-start;
  margin-top:20px;
  padding-left:16px;
}

#page-menu .menu-product.is-added .product-add{
  background:var(--card-accent);
}

#page-menu .menu-product.is-added .product-add i{
  background:#fff;
  color:var(--card-accent);
}

#page-menu .menu-product.is-adding{
  animation:menuAdded .34s ease;
}

#page-menu .menu-empty{
  max-width:560px;
  margin:50px auto 0;
  padding:40px 28px;
  border:1px dashed rgba(58,23,56,.25);
  border-radius:28px;
  background:rgba(255,255,255,.5);
  text-align:center;
}

#page-menu .menu-empty > span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:20px;
  background:var(--mn-violet);
  color:#fff;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  transform:rotate(-5deg);
}

#page-menu .menu-empty h3{margin:0 0 7px;font-size:1.5rem;}
#page-menu .menu-empty p{margin:0 0 18px;color:var(--mn-copy);}
#page-menu .menu-empty button{
  min-height:44px;
  padding:10px 17px;
  border:1px solid var(--mn-night);
  border-radius:999px;
  background:var(--mn-night);
  color:#fff;
  font-weight:800;
}

/* Explorer to Smart Stock liquid field */
#page-menu .menu-seam--stock{
  --stock-seam-height:clamp(96px,7.4vw,132px);
  height:var(--stock-seam-height);
  margin-top:calc(var(--stock-seam-height) * -0.18);
  margin-bottom:calc(var(--stock-seam-height) * -1);
  background:#f4d8d6;
}

#page-menu .menu-seam--stock .menu-seam-layer--back{
  height:82%;
  bottom:-43%;
  background:linear-gradient(96deg,var(--mn-orange),var(--mn-red) 52%,var(--mn-mauve));
  border-radius:52% 48% 0 0 / 86% 78% 0 0;
  transform:rotate(.25deg) translateX(-.5%);
}

#page-menu .menu-seam--stock .menu-seam-layer--mid{
  display:none;
}

#page-menu .menu-seam--stock .menu-seam-layer--front{
  height:64%;
  bottom:-46%;
  background:linear-gradient(128deg,var(--mn-night),#51184e 48%,#722362);
  border-radius:47% 53% 0 0 / 88% 74% 0 0;
  transform:rotate(-.18deg) translateX(.35%);
}

/* Smart Stock studio */
#page-menu .menu-stock{
  position:relative;
  isolation:isolate;
  min-height:760px;
  padding:clamp(170px,13vw,215px) 0 clamp(104px,10vw,150px);
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 44%,rgba(178,59,102,.32),transparent 30%),
    linear-gradient(128deg,var(--mn-night),#51184e 48%,#722362);
  color:#fff;
}

#page-menu .menu-stock::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.42;
  background:
    repeating-radial-gradient(ellipse at 77% 52%,transparent 0 30px,rgba(237,161,151,.13) 31px 33px),
    linear-gradient(100deg,transparent 0 67%,rgba(233,74,9,.08) 67% 68%,transparent 68%);
}

#page-menu .menu-stock::after{
  content:"STOCK";
  position:absolute;
  left:-2%;
  bottom:-1%;
  z-index:-1;
  color:rgba(255,255,255,.035);
  font-family:var(--font-display);
  font-size:clamp(9rem,23vw,22rem);
  font-weight:800;
  line-height:.75;
  letter-spacing:-.07em;
}

#page-menu .menu-stock-grid{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(520px,1.16fr);
  align-items:center;
  gap:clamp(55px,7vw,110px);
}

#page-menu .menu-stock-copy{
  max-width:650px;
}

#page-menu .menu-stock-copy h2{
  margin:0 0 21px;
  color:#fff;
  font-size:var(--mn-section-title);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.04em;
}

#page-menu .menu-stock-copy > p:not(.stock-preset-note){
  max-width:600px;
  margin:0 0 28px;
  color:#e9cfdf;
  font-size:var(--mn-body);
  line-height:1.72;
}

#page-menu .stock-preset-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:17px;
}

#page-menu .stock-preset-buttons button{
  min-height:44px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#f6e5ee;
  font:800 .77rem/1 var(--font-body);
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}

#page-menu .stock-preset-buttons button:hover{transform:translateY(-2px);}

#page-menu .stock-preset-buttons button[aria-pressed="true"]{
  border-color:var(--mn-peach);
  background:var(--mn-peach);
  color:var(--mn-night);
  box-shadow:3px 4px 0 rgba(21,3,27,.72);
}

#page-menu .stock-preset-note{
  max-width:590px;
  min-height:54px;
  margin:0;
  padding-left:16px;
  border-left:3px solid var(--mn-peach);
  color:#cfaabd;
  font-size:.86rem;
  line-height:1.58;
}

#page-menu .stock-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:570px;
}

#page-menu .stock-radar{
  position:absolute;
  border:1px solid rgba(237,161,151,.24);
  border-radius:50%;
  pointer-events:none;
}

#page-menu .stock-radar--one{
  width:92%;
  aspect-ratio:1;
  box-shadow:0 0 0 37px rgba(237,161,151,.035),0 0 0 78px rgba(203,152,191,.025);
  transform:scaleY(.76) rotate(-8deg);
}

#page-menu .stock-radar--two{
  width:58%;
  aspect-ratio:1;
  border-color:rgba(233,74,9,.36);
  transform:scaleY(.76) rotate(12deg);
}

#page-menu .stock-dashboard{
  position:relative;
  z-index:2;
  width:min(93%,650px);
  padding:17px;
  border:1px solid rgba(255,255,255,.33);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,250,248,.97),rgba(247,222,217,.94));
  color:var(--mn-night);
  box-shadow:17px 20px 0 rgba(21,3,27,.62),0 28px 70px rgba(18,3,23,.34),inset 0 0 0 7px rgba(178,59,102,.09);
  transform:rotate(-1.2deg);
}

#page-menu .stock-dashboard > header,
#page-menu .stock-dashboard > footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#page-menu .stock-dashboard > header{
  padding:10px 10px 15px;
}

#page-menu .stock-dashboard > header div{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--mn-copy);
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#page-menu .stock-dashboard > header i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2cab66;
  box-shadow:0 0 0 6px rgba(44,171,102,.1);
}

#page-menu .stock-dashboard > header strong{
  color:var(--mn-violet);
  font-family:var(--font-display);
  font-size:1.08rem;
}

#page-menu .stock-product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:12px;
  border:2px solid var(--mn-night);
  border-radius:24px;
  background:
    repeating-linear-gradient(90deg,transparent 0 33px,rgba(255,255,255,.025) 34px 35px),
    linear-gradient(135deg,var(--mn-night),#6b236a 68%,var(--mn-plum));
}

#page-menu .stock-product{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:125px;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  color:#fff;
}

#page-menu .stock-product span{
  display:grid;
  place-items:center;
  width:92px;
  height:100px;
  border-radius:15px;
  background:#fff;
}

#page-menu .stock-product img{
  width:auto;
  height:auto;
  max-width:76px;
  max-height:88px;
  object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(43,16,46,.2));
}

#page-menu .stock-product b{
  font-size:.82rem;
  line-height:1.3;
}

#page-menu .stock-product.is-switching{
  animation:stockSwitch .34s ease;
}

#page-menu .stock-dashboard > footer{
  padding:15px 10px 7px;
  color:var(--mn-copy);
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#page-menu .stock-dashboard > footer b{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--mn-violet);
}

#page-menu .stock-dashboard > footer i{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#2cab66;
  color:#fff;
  font-style:normal;
}

/* CTA tide flows into the footer. */
#page-menu .menu-final{
  position:relative;
  isolation:isolate;
  padding:clamp(82px,8vw,120px) 0 clamp(74px,7vw,104px);
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 32%,rgba(237,161,151,.17),transparent 26%),
    linear-gradient(180deg,#51184e 0%,var(--mn-night) 64%,var(--mn-night) 100%);
  color:#fff;
}

#page-menu .menu-final::before{
  content:"";
  position:absolute;
  top:-60px;
  right:-5%;
  left:-5%;
  height:120px;
  border-radius:0 0 50% 50%;
  background:#51184e;
  transform:rotate(-1.5deg);
}

#page-menu .menu-final::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.35;
  background:repeating-radial-gradient(ellipse at 92% 52%,transparent 0 34px,rgba(237,161,151,.12) 35px 37px);
}

#page-menu .menu-final-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:35px;
  min-height:260px;
  padding-block:clamp(42px,5vw,68px);
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}

#page-menu .menu-final-inner > div{max-width:780px;}

#page-menu .menu-final h2{
  margin:0 0 14px;
  color:#fff;
  font-size:clamp(2.4rem,4.3vw,4.6rem);
  font-weight:700;
  line-height:.96;
  letter-spacing:-.045em;
}

#page-menu .menu-final p{
  max-width:660px;
  margin:0;
  color:#dcc0d2;
  font-size:var(--mn-body);
  line-height:1.7;
}

#page-menu .menu-final .menu-button{position:relative;z-index:2;}

#page-menu .menu-final-stamp{
  position:absolute;
  right:8%;
  bottom:-42px;
  z-index:-1;
  color:rgba(255,255,255,.045);
  font-family:var(--font-mono);
  font-size:4.7rem;
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.77;
  text-align:center;
  transform:rotate(-10deg);
}

/* Preference selection dock and drawer (enhanced by main.js). */
body[data-page="menu"] .preference-cart-toggle{
  position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:110;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:170px;
  min-height:58px;
  padding:9px 16px 9px 10px;
  border:2px solid var(--mn-night);
  border-radius:999px;
  background:linear-gradient(115deg,var(--mn-orange),var(--mn-red));
  color:#fff;
  box-shadow:5px 7px 0 var(--mn-night),0 16px 34px rgba(43,16,46,.22);
  font-family:var(--font-body);
  cursor:pointer;
  transform:translateY(130%);
  opacity:0;
  visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s ease,visibility .25s;
}

body[data-page="menu"] .preference-cart-toggle.is-visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}

body[data-page="menu"] .preference-cart-icon{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  flex:0 0 39px;
  border-radius:50%;
  background:#fff;
  color:var(--mn-violet);
  font-size:1.1rem;
}

body[data-page="menu"] .preference-cart-counts{
  display:grid;
  gap:1px;
  text-align:left;
}

body[data-page="menu"] .preference-cart-counts strong{font-size:.79rem;}
body[data-page="menu"] .preference-cart-counts small{font-size:.62rem;color:#ffe3df;}

body[data-page="menu"] .preference-backdrop{
  position:fixed;
  inset:0;
  z-index:198;
  background:rgba(28,5,29,.62);
  opacity:0;
  visibility:hidden;
  backdrop-filter:blur(5px);
  transition:opacity .25s ease,visibility .25s;
}

body[data-page="menu"] .preference-backdrop.is-open{
  opacity:1;
  visibility:visible;
}

body[data-page="menu"] .preference-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:199;
  display:flex;
  flex-direction:column;
  width:min(470px,100%);
  height:100dvh;
  padding:0 20px max(20px,env(safe-area-inset-bottom));
  border-left:1px solid rgba(58,23,56,.15);
  background:var(--mn-paper);
  color:var(--mn-night);
  box-shadow:-20px 0 50px rgba(22,3,24,.25);
  transform:translateX(104%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;
}

body[data-page="menu"] .preference-drawer.is-open{
  transform:translateX(0);
  visibility:visible;
}

body[data-page="menu"] .preference-drawer-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 0 18px;
  border-bottom:1px solid var(--mn-line);
  background:var(--mn-paper);
}

body[data-page="menu"] .preference-drawer h3{
  margin:0 0 4px;
  color:var(--mn-night);
  font-size:1.65rem;
  letter-spacing:-.02em;
}

body[data-page="menu"] .preference-drawer-head p{
  margin:0;
  color:var(--mn-copy);
  font-size:.78rem;
  line-height:1.45;
}

body[data-page="menu"] .preference-close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid var(--mn-night);
  border-radius:50%;
  background:var(--mn-night);
  color:#fff;
  font-size:1rem;
  font-weight:800;
}

body[data-page="menu"] .preference-drawer-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 0;
}

body[data-page="menu"] .preference-summary{
  color:var(--mn-copy);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.02em;
}

body[data-page="menu"] .preference-clear,
body[data-page="menu"] .preference-remove{
  min-height:40px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:var(--mn-red);
  font-size:.72rem;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

body[data-page="menu"] .preference-clear:disabled{opacity:.4;}

body[data-page="menu"] .preference-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:2px 2px 18px;
}

body[data-page="menu"] .preference-list > p{
  margin:22px 0;
  padding:28px;
  border:1px dashed var(--mn-line);
  border-radius:20px;
  color:var(--mn-copy);
  text-align:center;
}

body[data-page="menu"] .preference-item{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:14px;
  margin-bottom:10px;
  padding:12px;
  border:1px solid var(--mn-line);
  border-radius:20px;
  background:#fff;
}

body[data-page="menu"] .preference-item > img{
  width:78px;
  height:90px;
  padding:8px;
  border-radius:14px;
  background:var(--mn-soft);
  object-fit:contain;
}

body[data-page="menu"] .preference-item-title{
  margin-bottom:2px;
  color:var(--mn-night);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
}

body[data-page="menu"] .preference-item-meta{
  margin-bottom:7px;
  color:var(--mn-copy);
  font-size:.68rem;
}

body[data-page="menu"] .preference-item-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

body[data-page="menu"] .preference-qty-btn{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--mn-line);
  border-radius:50%;
  background:var(--mn-soft);
  color:var(--mn-night);
  font-size:1rem;
  font-weight:900;
}

body[data-page="menu"] .preference-item-controls strong{
  min-width:22px;
  text-align:center;
}

body[data-page="menu"] .preference-note{
  margin:0 0 13px;
  padding:13px 15px;
  border-left:3px solid var(--mn-peach);
  border-radius:0 12px 12px 0;
  background:var(--mn-soft);
  color:var(--mn-copy);
  font-size:.7rem;
  line-height:1.5;
}

body[data-page="menu"] .preference-send{
  width:100%;
  min-height:52px;
  justify-content:center;
  border:2px solid var(--mn-night)!important;
  background:linear-gradient(115deg,var(--mn-orange),var(--mn-red))!important;
  color:#fff!important;
  box-shadow:4px 5px 0 var(--mn-night)!important;
}

body[data-page="menu"] .preference-send:disabled{filter:grayscale(.5);opacity:.5;}
body[data-page="menu"].preference-drawer-open{overflow:hidden;}

body[data-page="menu"] .preference-status{
  position:fixed;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

body[data-page="menu"] .preference-fly{
  position:fixed;
  z-index:250;
  width:54px;
  height:54px;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(43,16,46,.25));
  transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .55s ease;
}

@keyframes menuHalo{
  from{transform:rotate(-7deg) scale(.98);border-radius:47% 53% 45% 55% / 46% 42% 58% 54%;}
  to{transform:rotate(2deg) scale(1.02);border-radius:53% 47% 56% 44% / 53% 58% 42% 47%;}
}

@keyframes menuAdded{
  0%,100%{transform:scale(1);}
  45%{transform:scale(.985);}
  70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--card-accent) 18%,transparent),0 18px 30px rgba(58,23,56,.1);}
}

@keyframes stockSwitch{
  0%{opacity:.45;transform:translateY(8px) scale(.98);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

@media (hover:hover) and (pointer:fine){
  #page-menu .menu-product:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 42px rgba(58,23,56,.14),0 3px 0 rgba(255,255,255,.85) inset!important;
  }

  #page-menu .menu-product:hover .product-media img{
    transform:translateY(-8px) rotate(2deg) scale(1.035);
    filter:drop-shadow(0 23px 15px rgba(58,23,56,.22));
  }

  #page-menu .product-add:hover{transform:translateY(-2px);background:var(--card-accent);}
}

@media (max-width:1180px){
  #page-menu .menu-hero{
    grid-template-columns:minmax(0,.86fr) minmax(460px,1.14fr);
    gap:36px;
  }

  #page-menu .console-note--one{left:0;}
  #page-menu .console-note--two{right:0;}

  #page-menu .menu-product{grid-column:span 4;}
  #page-menu .menu-product--feature,
  #page-menu .menu-product--wide{grid-column:span 6;}

  #page-menu .menu-stock-grid{
    grid-template-columns:minmax(0,.8fr) minmax(470px,1.2fr);
    gap:42px;
  }

  #page-menu .stock-product{grid-template-columns:76px minmax(0,1fr);}
  #page-menu .stock-product span{width:76px;}
  #page-menu .stock-product img{max-width:64px;}
}

@media (max-width:980px){
  body[data-page="menu"]{
    --mn-nav-height:78px;
    --mn-gutter:clamp(20px,4vw,36px);
  }

  body[data-page="menu"] .site-header{min-height:var(--mn-nav-height);backdrop-filter:none;}
  body[data-page="menu"] .nav{
    display:flex!important;
    justify-content:space-between!important;
    min-height:var(--mn-nav-height)!important;
    padding-block:4px!important;
  }
  body[data-page="menu"] .brand{width:145px!important;height:70px;flex-basis:145px!important;}
  body[data-page="menu"] .brand img,
  body[data-page="menu"] .brand .snapgo-logo-img{height:68px!important;max-width:140px!important;}
  body[data-page="menu"] .nav-links{display:none!important;}
  body[data-page="menu"] .hamburger{
    display:grid!important;
    place-items:center;
    width:48px;
    height:46px;
    border:2px solid var(--mn-night)!important;
    background:var(--mn-paper)!important;
    color:var(--mn-night)!important;
  }
  body[data-page="menu"] .mobile-menu{inset:var(--mn-nav-height) 0 0!important;background:var(--mn-paper)!important;}

  #page-menu .menu-hero-chapter{
    min-height:auto;
    padding-top:60px;
    padding-bottom:125px;
  }

  #page-menu .menu-hero{
    grid-template-columns:1fr;
    gap:48px;
  }

  #page-menu .menu-hero-copy{max-width:760px;}
  #page-menu .menu-console{justify-self:center;width:min(100%,700px);}
  #page-menu .menu-category-rail{bottom:16px;}

  #page-menu .menu-section-head--split{
    grid-template-columns:1fr;
    align-items:start;
    gap:20px;
  }

  #page-menu .menu-section-head > p{max-width:680px;}

  #page-menu .menu-filter-dock{top:calc(var(--mn-nav-height) + 9px);}

  #page-menu .menu-stock-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  #page-menu .menu-stock-copy{max-width:760px;}
  #page-menu .stock-stage{min-height:550px;}
}

@media (max-width:760px){
  #page-menu .menu-hero h1{font-size:clamp(3.15rem,12.5vw,5rem);}

  #page-menu .menu-category-rail > div{
    justify-content:flex-start;
    overflow-x:auto;
    padding-inline:24px;
    scroll-snap-type:x proximity;
  }

  #page-menu .menu-category-rail span{scroll-snap-align:start;}

  #page-menu .console-note{display:none;}

  #page-menu .menu-filter-row{
    display:grid;
    grid-template-columns:1fr;
  }

  #page-menu .menu-search{width:100%;min-width:0;}

  #page-menu .menu-product,
  #page-menu .menu-product--wide{
    grid-column:span 6;
  }

  #page-menu .menu-product--feature{
    grid-column:1/-1;
    min-height:560px;
  }

  #page-menu .menu-product--wide{
    display:flex;
    min-height:408px;
  }

  #page-menu .menu-product--wide .product-media{min-height:220px;}
  #page-menu .menu-product--wide .product-info{
    flex-direction:row;
    align-items:end;
    justify-content:space-between;
    padding:0;
  }
  #page-menu .menu-product--wide .product-add{align-self:auto;margin-top:0;}

  #page-menu .menu-final-inner{
    grid-template-columns:1fr;
    justify-items:start;
  }
}

@media (max-width:620px){
  #page-menu .menu-hero-chapter{padding-top:46px;padding-bottom:116px;}
  #page-menu .menu-hero-pills{gap:7px;}
  #page-menu .menu-hero-pills span{font-size:.59rem;padding:7px 9px;}
  #page-menu .menu-actions{display:grid;grid-template-columns:1fr;}
  #page-menu .menu-button{width:100%;}
  #page-menu .menu-hero-stats div{padding-right:10px;}
  #page-menu .menu-hero-stats div + div{padding-left:10px;}
  #page-menu .menu-hero-stats dt{font-size:1.28rem;}
  #page-menu .menu-hero-stats dd{font-size:.64rem;}

  #page-menu .menu-console{min-height:450px;}
  #page-menu .console-shell{width:96%;padding:11px;border-radius:27px;box-shadow:10px 13px 0 rgba(43,16,46,.75),0 24px 48px rgba(20,3,27,.28);transform:none;}
  #page-menu .console-screen{min-height:106px;padding:18px;}
  #page-menu .console-score{width:64px;}
  #page-menu .console-picks{gap:6px;}
  #page-menu .console-pick{padding:7px 5px;border-radius:14px;}
  #page-menu .console-pick span{height:58px;}
  #page-menu .console-pick img{height:50px;}
  #page-menu .console-pick b{font-size:.57rem;}
  #page-menu .console-halo{inset:9% 0 5%;}

  #page-menu .menu-explorer{padding-top:116px;}
  #page-menu .menu-filter-dock{margin-inline:-6px;border-radius:18px;}

  #page-menu .product-grid{gap:12px;}
  #page-menu .menu-product,
  #page-menu .menu-product--wide{
    min-height:370px;
    padding:13px;
    border-radius:22px;
  }
  #page-menu .menu-product--feature{min-height:520px;}
  #page-menu .product-media{min-height:196px;margin-block:7px;}
  #page-menu .menu-product--wide .product-media{min-height:196px;}
  #page-menu .menu-product--feature .product-media{min-height:340px;}
  #page-menu .product-media img{max-height:185px!important;}
  #page-menu .menu-product--feature .product-media img{max-height:320px!important;}
  #page-menu .product-info{align-items:stretch;flex-direction:column;min-height:104px;}
  #page-menu .menu-product--wide .product-info{align-items:stretch;flex-direction:column;}
  #page-menu .product-add,
  #page-menu .menu-product--wide .product-add{align-self:stretch;width:100%;padding-left:12px;}
  #page-menu .product-add i{margin-left:auto;}

  #page-menu .menu-stock{padding-top:136px;}
  #page-menu .stock-stage{min-height:510px;}
  #page-menu .stock-dashboard{width:100%;padding:12px;border-radius:25px;box-shadow:9px 12px 0 rgba(21,3,27,.62),0 22px 48px rgba(18,3,23,.3);transform:none;}
  #page-menu .stock-product-grid{gap:7px;padding:8px;}
  #page-menu .stock-product{grid-template-columns:1fr;min-height:168px;text-align:center;}
  #page-menu .stock-product span{width:100%;height:108px;}

  body[data-page="menu"] .preference-cart-toggle{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    min-width:155px;
  }
  body[data-page="menu"] .preference-drawer{padding-inline:16px;}
}

@media (max-width:410px){
  #page-menu .menu-product,
  #page-menu .menu-product--wide,
  #page-menu .menu-product--feature{
    grid-column:1/-1;
    min-height:390px;
  }
  #page-menu .menu-product--feature{min-height:510px;}
  #page-menu .product-info,
  #page-menu .menu-product--wide .product-info{min-height:auto;}
  #page-menu .console-head{padding-inline:5px;}
  #page-menu .console-logo-mark{width:38px;height:38px;}
  #page-menu .console-live{padding-inline:8px;}
  #page-menu .console-foot{font-size:.55rem;}
  body[data-page="menu"] .preference-drawer-actions{align-items:flex-start;flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  #page-menu *,
  #page-menu *::before,
  #page-menu *::after,
  body[data-page="menu"] .preference-cart-toggle,
  body[data-page="menu"] .preference-backdrop,
  body[data-page="menu"] .preference-drawer{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  #page-menu .menu-reveal,
  #page-menu.menu-motion-ready .menu-reveal{
    opacity:1!important;
    transform:none!important;
  }

  body[data-page="menu"] .preference-fly{display:none!important;}
}

@media (forced-colors:active){
  #page-menu .menu-seam{display:none;}
  #page-menu .menu-product,
  #page-menu .console-shell,
  #page-menu .stock-dashboard,
  #page-menu .menu-filter-dock{border:2px solid CanvasText;box-shadow:none;}
  #page-menu .menu-button,
  #page-menu .category-tab,
  #page-menu .product-add,
  #page-menu .stock-preset-buttons button{border:2px solid ButtonText;box-shadow:none;}
}

/* Contextual brand-partnership runway inside the product explorer. */
#page-menu .menu-brand-partner{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(310px,.72fr);
  align-items:center;
  gap:clamp(30px,5vw,72px);
  margin-top:clamp(60px,7vw,92px);
  padding:clamp(30px,4.5vw,58px);
  overflow:hidden;
  border:1px solid rgba(237,161,151,.34);
  border-radius:38px 19px 38px 19px;
  background:
    radial-gradient(circle at 82% 18%,rgba(233,74,9,.25),transparent 28%),
    linear-gradient(128deg,var(--mn-night),#60205e 58%,var(--mn-plum));
  color:#fff;
  box-shadow:12px 15px 0 rgba(58,23,56,.22),0 34px 70px rgba(58,23,56,.2);
}

#page-menu .menu-brand-partner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.48;
  background:repeating-radial-gradient(ellipse at 88% 46%,transparent 0 30px,rgba(237,161,151,.13) 31px 33px);
}

#page-menu .menu-brand-partner::after{
  content:"BRAND+";
  position:absolute;
  left:-1%;
  bottom:-.18em;
  z-index:-1;
  color:rgba(255,255,255,.04);
  font:800 clamp(6rem,15vw,12rem)/.75 var(--font-display);
  letter-spacing:-.07em;
}

#page-menu .menu-brand-partner__copy h2{
  max-width:650px;
  margin:17px 0 18px;
  color:#fff;
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:.98;
  letter-spacing:-.045em;
}

#page-menu .menu-brand-partner__copy > p{
  max-width:650px;
  margin:0;
  color:#ead1df;
  font-size:var(--mn-body);
  line-height:1.68;
}

#page-menu .menu-brand-partner__path{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:27px 0 0;
  padding:0;
  list-style:none;
}

#page-menu .menu-brand-partner__path li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  font-size:.76rem;
  font-weight:800;
}

#page-menu .menu-brand-partner__path b{
  color:var(--mn-peach);
  font:900 .65rem/1 var(--font-mono);
}

#page-menu .menu-brand-partner__action{
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
  padding:clamp(24px,3vw,34px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:28px 14px 28px 14px;
  background:linear-gradient(145deg,rgba(255,250,248,.98),rgba(237,161,151,.93));
  color:var(--mn-night);
  box-shadow:8px 10px 0 rgba(35,7,39,.55);
  transform:rotate(.65deg);
}

#page-menu .menu-brand-partner__action > span{
  color:var(--mn-violet);
  font:900 .68rem/1.3 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}

#page-menu .menu-brand-partner__action > strong{
  font:700 clamp(1.35rem,2vw,1.8rem)/1.12 var(--font-display);
}

#page-menu .menu-brand-partner__action .menu-button{width:100%;}

#page-menu .menu-brand-partner__action small{
  color:#70556c;
  font-size:.75rem;
  line-height:1.5;
}

@media(max-width:860px){
  #page-menu .menu-brand-partner{grid-template-columns:1fr;}
  #page-menu .menu-brand-partner__action{transform:none;}
}

@media(max-width:640px){
  #page-menu .menu-brand-partner{padding:27px 18px;border-radius:28px 15px 28px 15px;}
  #page-menu .menu-brand-partner__copy h2{font-size:clamp(2.2rem,11vw,3.3rem);}
  #page-menu .menu-brand-partner__path{align-items:stretch;flex-direction:column;}
}

@media(forced-colors:active){
  #page-menu .menu-brand-partner,
  #page-menu .menu-brand-partner__action{border:2px solid CanvasText!important;box-shadow:none!important;}
}
