/* ── FRACTAL FOREST — EARTH BRUTALISM ────────────────────────────────
   Full brutalist system. Monster display type (Archivo Black), 3px
   structural rules, hard offset slabs, spec-sheet counters, inverted
   hovers, marquee ticker. Palette DNA kept: bone / ink / moss / gold.
   Every class name preserved — app.js untouched. */
:root{
  --bone:#EFE9DB;
  --bone-2:#E2DAC6;
  --ink:#141A16;
  --ink-soft:#39423C;
  --moss:#3E5C50;
  --moss-deep:#1F332D;
  --gold:#B9975B;
  --clay:#A8886B;
  --sage:#A3A489; /* sagebrush — gray-green with dust and tan in it */
  --line:rgba(20,26,22,.28);
  --edge:#141A16;
  --bw:3px;
  --radius:0;
  --slab:8px 8px 0 var(--ink);
  --slab-sm:5px 5px 0 var(--ink);
  --slab-moss:10px 10px 0 var(--moss-deep);
  --font-display:"Archivo Black",Impact,"Arial Black",sans-serif;
  --font-serif:"Fraunces",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}
/* raw paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2{font-family:var(--font-display);font-weight:400;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
h3{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bone);padding:8px 14px;z-index:99}

/* ── top bar — solid, ruled, cellular ── */
.topbar{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:var(--bw) solid var(--edge)}
.topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;padding:16px 0}
.brand-mark{height:26px;width:auto;display:block}
.brand-name{font-family:var(--font-display);font-weight:400;letter-spacing:.06em;font-size:16px;text-transform:uppercase}
.brand-logo{height:22px;width:auto;display:block}
.brand-logo-big{width:min(460px,72%);height:auto;display:block;filter:brightness(0) invert(1)}
.brand-name.big{font-size:clamp(44px,8.5vw,118px);letter-spacing:-.01em;line-height:.9;display:block}
.nav{display:flex;gap:0;margin-left:auto;align-self:stretch;align-items:stretch}
.nav a{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:0 13px;display:flex;align-items:center;border-left:1px solid var(--line);transition:background .12s,color .12s}
.nav a:last-child{border-right:1px solid var(--line)}
.nav a:hover{background:var(--ink);color:var(--bone)}
.nav a.active{background:var(--ink);color:var(--bone);box-shadow:inset 0 -4px 0 var(--gold)}
.topbar-cta{display:flex;align-items:center;padding:10px 0}
.nav-burger{display:none;background:none;border:2px solid var(--edge);cursor:pointer;flex-direction:column;gap:4.5px;padding:9px 8px}
.nav-burger span{width:20px;height:2.5px;background:var(--ink);display:block}

/* ── marquee ticker ── */
.marquee{overflow:hidden;background:var(--ink);color:var(--bone);border-bottom:var(--bw) solid var(--edge);position:relative;z-index:40}
.marquee-track{display:inline-flex;white-space:nowrap;animation:mq 28s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:11px 0;display:inline-block}
.marquee-track span b{color:var(--gold);font-weight:700}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* ── buttons — slabs ── */
.btn{display:inline-block;white-space:nowrap;background:var(--ink);color:var(--bone);padding:15px 28px;border-radius:0;font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:var(--bw) solid var(--ink);box-shadow:var(--slab-sm);box-shadow:5px 5px 0 rgba(20,26,22,.35);transition:transform .1s,box-shadow .1s;position:relative}
.btn{box-shadow:5px 5px 0 var(--moss)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--moss)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--moss)}
.btn-small{padding:10px 16px;font-size:11px;box-shadow:4px 4px 0 var(--moss)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:5px 5px 0 var(--gold)}
.btn-ghost:hover{background:var(--ink);color:var(--bone);box-shadow:8px 8px 0 var(--gold)}
.btn-gold{background:var(--moss);border-color:var(--ink);box-shadow:5px 5px 0 var(--gold)}
.btn-gold:hover{box-shadow:8px 8px 0 var(--gold)}

/* ── layout primitives ── */
.section{max-width:1280px;margin:0 auto;padding:84px 20px}
.section.tight{padding:48px 20px}
main{counter-reset:sec}
.kicker{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--bone);background:var(--moss);border:2px solid var(--edge);padding:6px 11px 6px 9px;margin-bottom:22px;display:inline-flex;align-items:center;gap:10px;counter-increment:sec;box-shadow:3px 3px 0 var(--ink)}
.kicker::before{content:counter(sec,decimal-leading-zero);color:var(--gold);font-size:11px;letter-spacing:.1em}
/* section kicker chip: hidden but keeps its box so titles never jump — hero kicker (.hero .hero-kicker) is unaffected */
.section .kicker{visibility:hidden}
/* section titles: always one row (a two-row title shifts the grid down) — clamp holds the longest title ("INCENSE & SACRED WOOD.") on one line from mobile to desktop */
.section h2{font-size:clamp(20px,4.6vw,60px);margin-bottom:14px;max-width:none;white-space:nowrap}
/* inline-sized sub-headings (e.g. product-page "More from …") may still wrap — they aren't page headers */
.section h2[style]{white-space:normal;max-width:20ch}
.section-sub{color:var(--ink-soft);max-width:560px;margin-bottom:38px;font-family:var(--font-serif);font-size:19px;font-style:italic;line-height:1.5}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.link-arrow{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);white-space:nowrap;border-bottom:3px solid var(--gold);padding-bottom:3px}
.link-arrow:hover{background:var(--gold);color:var(--ink)}

/* ── hero — framed loop viewport (brutalist monitor) ── */
.hero{position:relative;overflow:hidden;background:var(--sage);color:var(--ink);border-bottom:var(--bw) solid var(--edge);padding:clamp(40px,5vw,80px) 20px;min-height:calc(100vh - var(--chrome,118px));min-height:calc(100svh - var(--chrome,118px));display:flex;align-items:center;justify-content:center}
.hero-stage{position:relative;margin:0 auto;width:min(1120px,100%,calc((100svh - var(--chrome,118px) - clamp(150px,20vh,230px)) * 1.7778))}
.hero-frame{position:relative;width:100%;aspect-ratio:16/9;border:var(--bw) solid var(--ink);background:#8E9077;box-shadow:14px 14px 0 var(--ink);overflow:hidden;z-index:1}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;filter:contrast(1.06) saturate(.96)}
/* corner registration ticks — L-marks breaking the frame's corners */
.hero-tick{position:absolute;width:22px;height:22px;z-index:4;pointer-events:none}
.hero-tick.tl{top:-9px;left:-9px;border-top:var(--bw) solid var(--gold);border-left:var(--bw) solid var(--gold)}
.hero-tick.tr{top:-9px;right:-9px;border-top:var(--bw) solid var(--gold);border-right:var(--bw) solid var(--gold)}
.hero-tick.bl{bottom:-9px;left:-9px;border-bottom:var(--bw) solid var(--gold);border-left:var(--bw) solid var(--gold)}
.hero-tick.br{bottom:-9px;right:-9px;border-bottom:var(--bw) solid var(--gold);border-right:var(--bw) solid var(--gold)}
/* kicker — pinned top-left, breaking the frame's top edge */
.hero .hero-kicker{position:absolute;top:0;left:26px;transform:translateY(-50%);z-index:5;margin:0;color:var(--bone);background:var(--moss);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hero .hero-kicker::before{color:var(--gold)}
/* headline — breaks over the frame's top-left, clamped to the left half */
.hero .hero-title{position:absolute;top:40px;left:0;z-index:5;margin:0;max-width:14ch;font-family:var(--font-mono);font-weight:700;font-size:clamp(26px,3.4vw,50px);letter-spacing:.01em;line-height:1.06;text-transform:uppercase;color:#F8F4E9;text-shadow:4px 4px 0 rgba(20,26,22,.88)}
/* CTAs — pinned bottom-left, overlapping the frame's bottom edge */
.hero .hero-ctas{position:absolute;left:26px;bottom:0;transform:translateY(50%);z-index:5;margin:0;display:flex;gap:16px;flex-wrap:wrap}
.hero .btn{border-color:var(--ink)}
/* filled, never ghost — this button crosses the frame's dark edge, so it
   carries its own bone slab to stay legible on sage AND video alike */
.hero .btn-ghost{color:var(--ink);border-color:var(--ink);background:var(--bone)}
.hero .btn-ghost:hover{background:var(--ink);color:var(--bone)}
/* carousel dots — small square registration markers, bottom-center inside the frame */
.hero-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;display:flex;gap:10px;padding:8px 10px;background:rgba(20,26,22,.6);border:2px solid var(--ink)}
.hero-dot{width:13px;height:13px;padding:0;background:transparent;border:var(--bw) solid var(--bone);border-radius:0;cursor:pointer;transition:background .12s,border-color .12s,transform .1s}
.hero-dot:hover{transform:translate(-1px,-1px)}
.hero-dot.is-active{background:var(--gold);border-color:var(--ink)}
.hero-dot:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── pillars — exposed structural grid ── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bw);background:var(--edge);border-top:var(--bw) solid var(--edge);border-bottom:var(--bw) solid var(--edge)}
.pillar{background:var(--bone);padding:38px 30px;position:relative}
.pillar::before{content:"▦";position:absolute;top:14px;right:16px;color:var(--gold);font-size:14px}
.pillar h3{font-size:17px;margin-bottom:12px}
.pillar p{font-size:14px;color:var(--ink-soft)}

/* ── cards — numbered slabs ── */
.grid{display:grid;gap:26px;counter-reset:crd}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bone);border:var(--bw) solid var(--edge);border-radius:0;overflow:hidden;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;counter-increment:crd}
.card:hover{transform:translate(-4px,-4px);box-shadow:var(--slab)}
.card-img{aspect-ratio:1/1;background:var(--bone-2);object-fit:cover;width:100%;border-bottom:var(--bw) solid var(--edge)}
.card-img.wide{aspect-ratio:16/10}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-body::before{content:"№ " counter(crd,decimal-leading-zero);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--ink-soft)}
.card-badge{position:absolute;top:0;left:0;background:var(--ink);color:var(--bone);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-right:var(--bw) solid var(--edge);border-bottom:var(--bw) solid var(--edge)}
.card-media{position:relative}
.card h3{font-size:15.5px}
.card .price{font-family:var(--font-mono);font-weight:700;font-size:14px;margin-top:auto;padding-top:10px;letter-spacing:.02em;border-top:2px solid var(--edge)}
.card .short{font-size:13.5px;color:var(--ink-soft)}
.stars{color:var(--gold);font-size:12.5px;letter-spacing:.1em}
.stars .count{font-family:var(--font-mono);color:var(--ink-soft);font-size:11px;letter-spacing:0;margin-left:6px}
.strike{text-decoration:line-through;color:var(--ink-soft);font-weight:400;margin-right:8px}

/* collection tiles — hard band */
.tile{position:relative;border:var(--bw) solid var(--edge);border-radius:0;overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;color:var(--bone);transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translate(-4px,-4px);box-shadow:var(--slab)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,11,.94) 0%,rgba(10,14,11,.55) 26%,rgba(10,14,11,0) 62%)}
.tile-body{position:relative;z-index:2;padding:22px}
.tile h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:6px;text-shadow:3px 3px 0 rgba(0,0,0,.5)}
.tile p{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.chip{border:2px solid var(--edge);background:transparent;border-radius:0;padding:9px 15px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.12s;color:var(--ink)}
.chip:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.chip.active{background:var(--ink);color:var(--bone);border-color:var(--ink);box-shadow:4px 4px 0 var(--gold)}

/* ── PDP ── */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.pdp-img{border-radius:0;overflow:hidden;background:var(--bone-2);border:var(--bw) solid var(--edge);box-shadow:var(--slab)}
.pdp h1{font-size:clamp(32px,4.6vw,60px);margin:14px 0 14px}
.pdp .price{font-family:var(--font-mono);font-size:21px;font-weight:700;margin:14px 0 8px;display:inline-block;border:2px solid var(--edge);padding:8px 14px;box-shadow:4px 4px 0 var(--gold)}
.pdp .desc{color:var(--ink-soft);margin:22px 0 28px;max-width:52ch;font-family:var(--font-serif);font-size:17px;line-height:1.55}
.pdp-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);margin-top:18px;border-left:3px solid var(--gold);padding-left:12px}
/* PDP size selector */
.pdp-sizes{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.size-chip{border:var(--bw) solid var(--edge);background:var(--bone);padding:11px 16px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .1s,box-shadow .1s,background .12s,color .12s}
.size-chip:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.size-chip.active{background:var(--ink);color:var(--bone);box-shadow:4px 4px 0 var(--gold)}
.cl-var{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-top:3px}
.crumb{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.crumb a{color:var(--moss);border-bottom:2px solid var(--gold)}

/* ── ingredient ledger ── */
.section > div{counter-reset:ing}
.ing{border-top:var(--bw) solid var(--edge);padding:30px 0;display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:baseline;counter-increment:ing}
.ing:last-child{border-bottom:var(--bw) solid var(--edge)}
.ing h3{font-size:19px}
.ing h3::before{content:counter(ing,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.2em;display:block;margin-bottom:6px}
.ing p{color:var(--ink-soft);max-width:62ch}

/* ── journal posts ── */
.post{display:flex;flex-direction:column;gap:10px;background:var(--bone);border:var(--bw) solid var(--edge);border-radius:0;padding:28px 26px;transition:transform .12s,box-shadow .12s}
.post:hover{transform:translate(-4px,-4px);box-shadow:var(--slab)}
.post .tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);background:var(--moss);padding:5px 9px;align-self:flex-start;border:2px solid var(--edge)}
.post h3{font-size:18px}
.post p{font-size:14px;color:var(--ink-soft)}

/* ── banner — the big slab ── */
.banner{background:var(--moss-deep);color:var(--bone);border:var(--bw) solid var(--edge);border-radius:0;box-shadow:var(--slab-moss);box-shadow:10px 10px 0 var(--gold);padding:60px 48px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.banner h2{font-size:clamp(26px,3.8vw,46px);max-width:16ch}
.banner p{color:rgba(239,233,219,.82);font-size:15px;font-family:var(--font-serif);font-style:italic;margin-top:8px}

/* ── prose / about ── */
.prose{max-width:700px}
.prose p{margin-bottom:20px;font-size:17.5px;color:var(--ink-soft);font-family:var(--font-serif);line-height:1.6}
.prose p strong{color:var(--ink);font-weight:600}
.stat-row{display:flex;gap:0;flex-wrap:wrap;margin-top:44px;border:var(--bw) solid var(--edge);background:var(--edge);gap:var(--bw)}
.stat{background:var(--bone);padding:26px 34px;flex:1 1 180px}
.stat b{font-family:var(--font-display);font-size:44px;font-weight:400;display:block;line-height:1}
.stat span{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ── footer — giant wordmark on ink ── */
.footer{background:var(--ink);color:var(--bone);margin-top:56px;border-top:var(--bw) solid var(--gold)}
.footer-inner{max-width:1280px;margin:0 auto;padding:64px 20px 44px;display:grid;grid-template-columns:1.4fr 1.6fr;gap:56px}
.footer-tag{color:rgba(239,233,219,.72);font-size:14px;margin-top:18px;font-family:var(--font-serif);font-style:italic}
.newsletter{margin-top:26px}
.newsletter-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,233,219,.8);margin-bottom:14px}
.newsletter .btn{background:var(--bone);color:var(--ink);border-color:var(--bone);box-shadow:5px 5px 0 var(--gold)}
.newsletter .btn:hover{box-shadow:8px 8px 0 var(--gold)}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bw);background:rgba(239,233,219,.25);border:1px solid rgba(239,233,219,.25)}
.footer-col{background:var(--ink);padding:22px 20px}
.footer-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:700}
.footer-col a{display:block;font-size:14px;color:rgba(239,233,219,.78);padding:5px 0;transition:.15s}
.footer-col a:hover{color:var(--ink);background:var(--gold);padding-left:8px}
.footer-legal{border-top:var(--bw) solid rgba(239,233,219,.2);max-width:1280px;margin:0 auto;padding:24px 20px 34px}
.disclaimer{font-size:11.5px;color:rgba(239,233,219,.5);max-width:640px}
.colophon{font-family:var(--font-mono);font-size:11px;font-weight:700;color:rgba(239,233,219,.65);margin-top:12px;letter-spacing:.1em;text-transform:uppercase}

/* ── responsive ── */
@media(max-width:960px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr;gap:34px}
  .footer-inner{grid-template-columns:1fr;gap:40px}
  .ing{grid-template-columns:1fr;gap:8px}
}
/* nav collapses EARLY — the moment the wordmark could ever kiss the tabs.
   Full row needs ~1150px of honest room; below that, burger. Never a collision. */
@media(max-width:1150px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bone);border-bottom:var(--bw) solid var(--edge);flex-direction:column;gap:0;padding:0;z-index:60}
  .nav.open{display:flex}
  .nav a{padding:15px 22px;border-left:none;border-bottom:1px solid var(--line);font-size:13px}
  .nav a:last-child{border-right:none}
  /* collapsed order: brand left → search → burger → SHOP ALL → cart, right-packed */
  .brand{order:1}
  #searchBtn{order:2;margin-left:auto}
  .nav-burger{display:flex;order:3;margin-left:0}
  .topbar-cta{order:4}
  #cartBtn{order:5}
}
@media(max-width:700px){
  .topbar-inner{gap:12px}
  .brand-logo{display:none} /* mark alone below 700px — wordmark can never collide with the CTA */
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .hero{padding:32px 16px 104px}
  .hero-stage{display:flex;flex-direction:column;gap:22px}
  .hero-frame{order:3;box-shadow:8px 8px 0 var(--ink)}
  .hero .hero-kicker{order:1;position:static;transform:none;top:auto;left:auto;align-self:flex-start}
  .hero .hero-title{order:2;position:static;transform:none;top:auto;left:auto;max-width:none;font-size:clamp(24px,7vw,34px);text-shadow:none}
  .hero .hero-ctas{order:4;position:static;transform:none;left:auto;bottom:auto}
  .hero-dots{order:3;position:static;transform:none;left:auto;bottom:auto;align-self:center;gap:14px;padding:10px 12px}
  .hero-dot{width:20px;height:20px}
  .hero-tick{display:none}
  .banner{padding:42px 26px;box-shadow:6px 6px 0 var(--gold)}
  .section{padding:56px 18px}
  .stat{padding:20px 22px}
}

/* ── plant a seed — framed field ── */
.plant-field{position:relative;border:var(--bw) solid var(--edge);border-radius:0;background:linear-gradient(to bottom,var(--bone) 0%,var(--bone) 62%,var(--bone-2) 100%);height:min(54vh,460px);overflow:hidden;cursor:crosshair;margin-top:12px;box-shadow:var(--slab)}
#plantCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plant-hud{position:absolute;top:0;left:0;display:flex;gap:0;z-index:3;border-right:2px solid var(--edge);border-bottom:2px solid var(--edge);background:var(--bone)}
.plant-stat{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-left:2px solid var(--edge)}
.plant-stat:first-child{border-left:none}
.plant-stat span{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.plant-stat b{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--ink);line-height:1}
.plant-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);transition:opacity .5s;z-index:3;pointer-events:none}

/* ── real catalog: pricing, sold-out, shop toolbar ── */
.price .was{ text-decoration:line-through; color:var(--ink-soft); font-weight:400; margin-right:6px; font-size:.86em }
.price .now{ color:var(--ink) }
.card.is-out .card-img{ opacity:.55; filter:grayscale(1) contrast(1.1) }
.card-badge.out{ background:var(--clay) }
.pdp .price .was{ font-size:.72em }
.shop-toolbar{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:20px }
.shop-search{ flex:1 1 240px; min-width:200px; background:transparent; border:var(--bw) solid var(--edge); border-radius:0; padding:13px 15px; font-family:var(--font-mono); font-size:13px; color:var(--ink) }
.shop-search::placeholder{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700 }
.shop-search:focus{ outline:none; box-shadow:5px 5px 0 var(--gold) }
.shop-tools{ display:flex; align-items:center; gap:18px }
.shop-count{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap }
.shop-sort{ background:var(--bone); border:var(--bw) solid var(--edge); border-radius:0; padding:12px 15px; font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); cursor:pointer }
.shop-sort:focus{ outline:none; box-shadow:5px 5px 0 var(--gold) }

/* ── custom brutalist select (shop sort) — matches the system, no OS popup ── */
.ff-select{position:relative;display:inline-block}
.ff-select-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:200px;background:var(--bone);border:var(--bw) solid var(--edge);border-radius:0;padding:12px 15px;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);cursor:pointer;transition:box-shadow .1s}
.ff-select-trigger:focus-visible{outline:none;box-shadow:5px 5px 0 var(--gold)}
.ff-select.is-open .ff-select-trigger{box-shadow:5px 5px 0 var(--gold)}
.ff-select-label{white-space:nowrap}
.ff-select-chevron{font-size:11px;line-height:1;transition:transform .15s}
.ff-select.is-open .ff-select-chevron{transform:rotate(180deg)}
.ff-select-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:100%;list-style:none;margin:0;padding:0;background:var(--bone);border:var(--bw) solid var(--edge);box-shadow:6px 6px 0 var(--ink);max-height:min(60vh,320px);overflow:auto}
.ff-select-menu[hidden]{display:none}
.ff-option{display:flex;align-items:center;gap:11px;padding:11px 15px;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);white-space:nowrap;cursor:pointer}
.ff-option + .ff-option{border-top:2px solid var(--line)}
.ff-option::before{content:"";width:11px;height:11px;flex:0 0 auto;border:2px solid var(--edge);background:transparent}
.ff-option.is-selected::before{background:var(--gold)}
.ff-option:hover,.ff-option:focus{outline:none;background:var(--ink);color:var(--bone)}
.ff-option:hover::before,.ff-option:focus::before{border-color:var(--bone)}
.ff-option.is-selected:hover::before,.ff-option.is-selected:focus::before{background:var(--gold);border-color:var(--gold)}
@media(max-width:700px){
  .shop-tools{width:100%;justify-content:space-between}
  .ff-select{flex:1 1 auto}
  .ff-select-trigger{width:100%;min-width:0}
  .ff-select-menu{left:0;right:0}
  .ff-option{padding:15px}
}

/* ── value sections — intentional editorial titles (Fraunces), not cereal-box shouting ── */
.scene{display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(28px,4vw,64px);padding:clamp(66px,9vw,120px) max(20px,calc(50vw - 620px));border-bottom:var(--bw) solid var(--edge);position:relative}
.scene.has-media{grid-template-columns:1.15fr 1fr}
.scene-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px}
.scene-media{position:relative;border:var(--bw) solid var(--edge);box-shadow:var(--slab);aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.scene-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.06) saturate(.96)}
.scene h2{font-family:var(--font-serif);font-weight:340;text-transform:none;letter-spacing:-.015em;line-height:1.04;font-size:clamp(38px,6vw,86px);max-width:17ch;margin:0}
.scene .link-arrow,.scene .btn{margin-top:12px}
.scene-idx{position:static;display:block;order:-1;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--gold);margin-bottom:2px}
.sc-bone{background:var(--bone);color:var(--ink)}
.sc-ink{background:var(--ink);color:var(--bone)}
.sc-moss{background:var(--moss-deep);color:var(--bone)}
.sc-ink .btn,.sc-moss .btn{border-color:var(--bone)}
.sc-ink .link-arrow,.sc-moss .link-arrow{color:var(--bone)}
@media(max-width:700px){.scene{gap:18px}.scene.has-media{grid-template-columns:1fr}.scene-media{box-shadow:6px 6px 0 var(--ink)}}

/* ── image reveal — no pop-in ─────────────────────────────────
   Cards/tiles already reserve their box via aspect-ratio, so layout
   never shifts. Until a file is decoded the media slab shows plain
   bone (intentional, on-system); revealImages() adds .is-loaded and
   the image fades up. No jolt, ever. */
.card-img,.tile img,.pdp-img img{transition:opacity .5s cubic-bezier(.25,.46,.45,.94)}
.card-img:not(.is-loaded),.tile img:not(.is-loaded),.pdp-img img:not(.is-loaded){opacity:0}
.card.is-out .card-img:not(.is-loaded){opacity:0}
@media (prefers-reduced-motion: reduce){.card-img,.tile img,.pdp-img img{transition:none}}

/* ── boot veil — the site arrives composed, never mid-assembly ──
   Full-bleed bone screen with the FRTL mark breathing in the center.
   Covers the empty-main/footer flash on refresh; app.js adds .is-done
   right after the first route paints, and the veil fades away. */
#boot{position:fixed;inset:0;z-index:300;background:var(--bone);display:flex;align-items:center;justify-content:center;transition:opacity .45s ease}
#boot.is-done{opacity:0;pointer-events:none}
#boot img{width:72px;height:72px;object-fit:contain;animation:bootBreath 1.4s ease-in-out infinite}
@keyframes bootBreath{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.09);opacity:1}}
@media (prefers-reduced-motion: reduce){#boot img{animation:none}#boot{transition:none}}

/* ── hero sale ticker — the promo band lives on the hero's floor ── */
.hero-sale{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--bone);border-top:var(--bw) solid var(--edge);overflow:hidden;z-index:6}
.hero-sale-track{display:inline-flex;white-space:nowrap;animation:mq 26s linear infinite;will-change:transform}
.hero-sale-track span{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:11px 0;display:inline-block}
.hero-sale-track b{color:var(--gold)}
@media (prefers-reduced-motion: reduce){.hero-sale-track{animation:none}}

/* ── Ask the Forest — chat drawer ── */
.chat-drawer{position:fixed;right:20px;bottom:90px;z-index:9500;width:min(370px,calc(100vw - 40px));background:var(--bone);border:var(--bw) solid var(--edge);box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;max-height:min(560px,72vh)}
.chat-drawer[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--bone);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;padding:11px 13px}
.chat-head button{background:none;border:0;color:var(--bone);cursor:pointer;font-size:14px;line-height:1}
.chat-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-soft);padding:8px 13px;border-bottom:2px solid var(--line);background:var(--bone-2)}
.chat-log{overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:10px;min-height:170px}
.msg{max-width:90%;padding:9px 12px;font-size:13px;line-height:1.5;border:2px solid var(--edge);background:#fff;align-self:flex-start}
.msg.me{background:var(--moss);color:var(--bone);align-self:flex-end}
.msg a{color:var(--moss);border-bottom:2px solid var(--gold)}
.msg.me a{color:var(--bone)}
.msg .chat-card{display:flex;gap:10px;align-items:center;border:2px solid var(--edge);background:var(--bone);padding:7px;margin-top:8px;color:var(--ink);border-bottom:2px solid var(--edge)}
.msg .chat-card img{width:46px;height:46px;object-fit:cover;border:2px solid var(--edge)}
.msg .chat-card b{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
.chat-form{display:flex;gap:8px;padding:10px;border-top:var(--bw) solid var(--edge);background:var(--bone-2)}
.chat-form input{flex:1;min-width:0;border:2px solid var(--edge);background:var(--bone);padding:10px;font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.chat-form input:focus{outline:none;box-shadow:3px 3px 0 var(--gold)}
.chat-form button{background:var(--ink);color:var(--bone);border:2px solid var(--edge);padding:0 14px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;cursor:pointer}
@media(max-width:700px){.chat-drawer{right:12px;bottom:84px}}

/* ── topbar icon buttons: search + cart ── */
.tb-ico{position:relative;width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:transparent;border:var(--bw) solid var(--edge);cursor:pointer;color:var(--ink);transition:background .12s,color .12s;margin-left:12px}
.tb-ico svg{width:20px;height:20px}
.tb-ico:hover{background:var(--ink);color:var(--bone)}
.cart-count{position:absolute;top:-9px;right:-9px;min-width:18px;height:18px;padding:0 4px;background:var(--gold);color:var(--ink);border:2px solid var(--edge);font-family:var(--font-mono);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cart-count[hidden]{display:none}
.cart-count.pop{animation:cartPop .3s ease}
@keyframes cartPop{50%{transform:scale(1.4)}}

/* ── quick add — the plus slab on every card ── */
.card-add{position:absolute;right:0;bottom:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bone);border:0;border-top:var(--bw) solid var(--edge);border-left:var(--bw) solid var(--edge);cursor:pointer;z-index:2;transition:background .12s}
.card-add .ca-plus{font-family:var(--font-mono);font-weight:700;font-size:20px;line-height:1;color:var(--ink);transition:color .12s}
.card-add:hover{background:var(--ink)}
.card-add:hover .ca-plus{color:var(--gold)}
.card-add .ca-n{position:absolute;top:-9px;left:-9px;min-width:18px;height:18px;padding:0 3px;font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--bone);background:var(--moss);border:2px solid var(--edge);display:none;align-items:center;justify-content:center}
.card-add .ca-n:not(:empty){display:flex}

/* ── search veil ── */
.search-veil{position:fixed;inset:0;z-index:9600;background:var(--bone);display:flex;flex-direction:column}
.search-veil[hidden]{display:none}
.search-bar{display:flex;border-bottom:var(--bw) solid var(--edge);background:var(--bone)}
.search-bar input{flex:1;min-width:0;border:0;background:transparent;padding:26px max(20px,calc(50vw - 620px));font-family:var(--font-mono);font-weight:700;font-size:clamp(18px,3vw,34px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);outline:none}
.search-bar input::placeholder{color:var(--ink-soft);opacity:.5}
.search-close{width:76px;border:0;border-left:var(--bw) solid var(--edge);background:var(--ink);color:var(--bone);font-size:20px;cursor:pointer}
.search-close:hover{color:var(--gold)}
.search-results{flex:1;overflow-y:auto;padding:26px max(20px,calc(50vw - 620px)) 60px}
.search-hint{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding:14px 0}

/* ── search empty state — featured widgets (Apple-TV layout, brutalist) ── */
.sv-sec{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.sv-hero{position:relative;display:block;aspect-ratio:21/9;border:var(--bw) solid var(--edge);box-shadow:8px 8px 0 var(--ink);overflow:hidden;margin-top:6px;background:var(--ink)}
.sv-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.95)}
.sv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,22,.82) 0%,rgba(20,26,22,.35) 45%,transparent 75%)}
.sv-hero-tick{position:absolute;width:20px;height:20px;z-index:3}
.sv-hero-tick.tl{top:10px;left:10px;border-top:var(--bw) solid var(--gold);border-left:var(--bw) solid var(--gold)}
.sv-hero-tick.br{bottom:10px;right:10px;border-bottom:var(--bw) solid var(--gold);border-right:var(--bw) solid var(--gold)}
.sv-hero-body{position:absolute;left:26px;bottom:22px;z-index:4;color:var(--bone)}
.sv-hero-body .sv-kick{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.sv-hero-body h3{font-family:var(--font-display);font-size:clamp(24px,4vw,44px);text-transform:uppercase;line-height:.95;margin:6px 0 8px;color:var(--bone)}
.sv-hero-body .sv-cta{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--gold);padding-bottom:2px}
.sv-hero:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--ink);transition:transform .12s,box-shadow .12s}
/* seek tiles */
.sv-seeks{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sv-seek{position:relative;aspect-ratio:1/1.15;border:var(--bw) solid var(--edge);overflow:hidden;cursor:pointer;padding:0;background:var(--ink)}
.sv-seek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:transform .3s}
.sv-seek::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,22,.9) 0%,rgba(20,26,22,.25) 60%,transparent 100%)}
.sv-seek span{position:absolute;left:0;right:0;bottom:8px;z-index:2;text-align:center;font-family:var(--font-display);font-size:12px;text-transform:uppercase;color:var(--bone);letter-spacing:.02em}
.sv-seek:hover img{transform:scale(1.07)}
.sv-seek:hover{box-shadow:4px 4px 0 var(--gold)}
/* horizontal card rails */
.sv-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sv-strip::-webkit-scrollbar{height:5px}
.sv-strip::-webkit-scrollbar-thumb{background:var(--gold)}
.sv-card{flex:0 0 150px;width:150px;scroll-snap-align:start;border:var(--bw) solid var(--edge);background:var(--bone);display:flex;flex-direction:column;text-decoration:none;transition:transform .12s,box-shadow .12s}
.sv-card.wide{flex-basis:200px;width:200px}
.sv-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.sv-card-media{display:block;aspect-ratio:1/1;overflow:hidden;border-bottom:2px solid var(--edge)}
.sv-card.wide .sv-card-media{aspect-ratio:16/10}
.sv-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.sv-card-n{font-family:var(--font-display);font-size:11px;text-transform:uppercase;line-height:1.2;color:var(--ink);padding:9px 10px 4px;min-height:34px}
.sv-card-p{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink);padding:0 10px 10px}
@media(max-width:700px){
  .sv-hero{aspect-ratio:16/10}
  .sv-seeks{grid-template-columns:repeat(3,1fr)}
}
.search-hit{display:grid;grid-template-columns:64px 1fr auto auto;gap:18px;align-items:center;padding:14px 0;border-bottom:2px solid var(--line);text-decoration:none}
.search-hit:hover{background:var(--bone-2)}
.search-hit img{width:64px;height:64px;object-fit:cover;border:2px solid var(--edge)}
.search-hit .sh-name{font-family:var(--font-display);font-size:15px;text-transform:uppercase;color:var(--ink);display:block}
.search-hit .sh-col{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:4px}
.search-hit .sh-price{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
.search-hit .sh-price s{color:var(--ink-soft);font-weight:400;margin-right:4px}
.search-hit .card-add{position:relative;border:var(--bw) solid var(--edge);top:auto;right:auto;bottom:auto}

/* ── cart drawer ── */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:9700;width:min(420px,100vw);background:var(--bone);border-left:var(--bw) solid var(--edge);box-shadow:-10px 0 0 rgba(20,26,22,.18);display:flex;flex-direction:column}
.cart-drawer[hidden]{display:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--bone);font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.24em;padding:16px 18px}
.cart-head button{background:none;border:0;color:var(--bone);font-size:16px;cursor:pointer;line-height:1}
.cart-head button:hover{color:var(--gold)}
.cart-items{flex:1;overflow-y:auto;padding:6px 18px}
.cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:2px solid var(--line)}
.cart-line img{width:56px;height:56px;object-fit:cover;border:2px solid var(--edge)}
.cl-name{font-family:var(--font-display);font-size:12.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.3}
.cl-name:hover{color:var(--moss)}
.cl-qty{display:flex;align-items:center;margin-top:8px;border:2px solid var(--edge);width:max-content;background:var(--bone)}
.cl-qty button{width:26px;height:24px;background:var(--bone);border:0;font-family:var(--font-mono);font-weight:700;cursor:pointer;line-height:1}
.cl-qty button:hover{background:var(--ink);color:var(--bone)}
.cl-qty span{min-width:30px;text-align:center;font-family:var(--font-mono);font-size:12px;font-weight:700;border-left:2px solid var(--edge);border-right:2px solid var(--edge);line-height:24px}
.cl-price{font-family:var(--font-mono);font-weight:700;font-size:13px;text-align:right}
.cl-remove{display:block;margin:6px 0 0 auto;background:none;border:0;color:var(--ink-soft);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:var(--font-mono)}
.cl-remove:hover{color:var(--clay)}
.cart-empty{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:38px 0;text-align:center}
.cart-foot{border-top:var(--bw) solid var(--edge);padding:16px 18px;background:var(--bone-2)}
.cf-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 0;color:var(--ink)}
.cf-row.sale{color:var(--moss)}
.cf-row.total{font-size:15px;border-top:2px solid var(--edge);margin-top:8px;padding-top:10px}
.cart-note{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-soft);margin-top:12px;line-height:1.7}
@media(max-width:700px){
  .search-bar input{padding:20px 16px}
  .search-results{padding:18px 16px 50px}
  .tb-ico{width:38px;height:38px;margin-left:8px}
}

/* ── cart: shipping meter, upsell, checkout ── */
.ship-meter{margin-bottom:12px}
.sm-label{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.sm-track{height:12px;border:2px solid var(--edge);background:var(--bone)}
.sm-fill{height:100%;background:var(--gold);transition:width .4s ease}
.sm-fill.full{background:var(--moss)}
.cart-upsell{margin-top:14px;border-top:var(--bw) solid var(--edge);padding-top:14px}
.cu-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);display:block;margin-bottom:12px}
/* single scrollable row of mini picks */
.cu-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cu-strip::-webkit-scrollbar{height:5px}
.cu-strip::-webkit-scrollbar-thumb{background:var(--clay-soft,#A8886B)}
.cu-card{flex:0 0 118px;width:118px;scroll-snap-align:start;border:2px solid var(--edge);background:var(--bone);display:flex;flex-direction:column}
.cu-thumb{display:block;aspect-ratio:1/1;overflow:hidden;border-bottom:2px solid var(--edge)}
.cu-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cu-name{font-family:var(--font-display);font-size:10px;text-transform:uppercase;line-height:1.2;color:var(--ink);padding:7px 8px 3px;min-height:32px}
.cu-price{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink);padding:0 8px 7px}
.cu-price s{color:var(--ink-soft);font-weight:400;margin-right:3px}
.cu-add{margin-top:auto;background:var(--ink);color:var(--bone);border:0;border-top:2px solid var(--edge);padding:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .12s}
.cu-add:hover{color:var(--gold)}
.cart-checkout{display:block;text-align:center;margin-top:14px}
.plant-ticker{display:flex;align-items:center;gap:11px;background:var(--moss-deep);color:var(--bone);border:2px solid var(--edge);padding:9px 12px;margin-bottom:12px}
.plant-ticker img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.plant-ticker span{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;line-height:1.5;text-transform:uppercase}
.plant-ticker b{color:var(--gold);font-size:13px}
.plant-ticker em{color:var(--bone);opacity:.7;font-style:italic;text-transform:none;font-family:var(--font-serif)}

/* ── help center ── */
.hlp-cat{margin-top:34px}
.hlp-cat-h{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);padding-bottom:10px;border-bottom:var(--bw) solid var(--edge);margin-bottom:2px}
.hlp{border-bottom:2px solid var(--line)}
.hlp-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;cursor:pointer;padding:20px 2px;text-align:left;font-family:var(--font-display);font-size:15px;text-transform:uppercase;color:var(--ink);transition:color .12s}
.hlp-q:hover{color:var(--moss)}
.hlp-icon{position:relative;width:14px;height:14px;flex:0 0 auto}
.hlp-icon::before,.hlp-icon::after{content:"";position:absolute;background:var(--gold);transition:transform .3s,opacity .3s}
.hlp-icon::before{top:6px;left:0;width:100%;height:2px}
.hlp-icon::after{left:6px;top:0;width:2px;height:100%}
.hlp.open .hlp-icon::after{opacity:0;transform:scaleY(0)}
.hlp-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.hlp.open .hlp-a{max-height:340px}
.hlp-a p{font-family:var(--font-body);font-size:15px;color:var(--ink-soft);line-height:1.7;padding:0 2px 22px;max-width:64ch}
.hlp-none{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:30px 0}
.hlp-foot{margin-top:44px;padding-top:26px;border-top:var(--bw) solid var(--edge);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hlp-foot span{font-family:var(--font-serif);font-style:italic;font-size:19px;color:var(--ink)}
.search-hit.help{grid-template-columns:64px 1fr auto auto}
.search-hit.help .sh-help-ic{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:2px solid var(--edge);background:var(--moss);color:var(--bone);font-family:var(--font-display);font-size:26px}

/* FDA-safe reframe chip in search */
.safe-line{padding:14px 0 6px}
.safe-chip{display:inline-flex;align-items:center;gap:8px;background:var(--moss);color:var(--bone);border:2px solid var(--edge);box-shadow:3px 3px 0 var(--ink);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px}

/* ── always perfect: the mark never squishes ──────────────────
   Brand mark is rigid at every width. Below 700px wordmark hides
   (mark alone). On phone the FRTL favicon stays — never vanishes. */
.brand,.brand-mark{flex:0 0 auto}
@media(max-width:480px){
  .brand{padding:12px 0;gap:0}
  .brand-mark{height:28px}
}

/* ── the field — ambient veil of matter & seeking ──────────────
   A fixed, pointer-transparent layer that drifts two registers of
   text through every surface at whisper opacity: INGREDIENTS in
   spec-mono uppercase (the matter) and sought states in Fraunces
   italic (the seeking). Gold, so it ghosts on bone AND ink alike.
   Pure transform/opacity animation; reduced-motion holds it still. */
#field{position:fixed;inset:-6vh -8vw;z-index:1;pointer-events:none;overflow:hidden}
#field span{position:absolute;display:block;white-space:nowrap;color:var(--gold);opacity:var(--fo,.1);font-family:var(--font-mono);font-weight:700;letter-spacing:.3em;text-transform:uppercase;will-change:transform;animation:fieldDrift var(--fd,90s) ease-in-out infinite alternate,fieldBreath var(--fb,12s) ease-in-out infinite}
#field span.serif{font-family:var(--font-serif);font-weight:340;font-style:italic;text-transform:none;letter-spacing:.01em}
/* glint words: mostly dim, then a brief firefly surge and back down */
#field span.glint{animation:fieldDrift var(--fd,90s) ease-in-out infinite alternate,fieldGlint var(--fb,14s) ease-in-out infinite}
/* motes: raw square sparks — hard pixels with a soft gold aura */
#field i.mote{position:absolute;display:block;background:var(--gold);width:var(--ms,3px);height:var(--ms,3px);box-shadow:0 0 9px 2px rgba(185,151,91,.55);opacity:var(--fo,.3);will-change:transform;animation:fieldDrift var(--fd,70s) ease-in-out infinite alternate,fieldGlint var(--fb,9s) ease-in-out infinite}
@keyframes fieldDrift{from{transform:translate(var(--x0,0),var(--y0,0)) rotate(var(--r0,0deg)) scale(var(--s0,1))}to{transform:translate(var(--x1,0),var(--y1,0)) rotate(var(--r1,0deg)) scale(var(--s1,1))}}
@keyframes fieldBreath{0%,100%{opacity:calc(var(--fo,.1)*.35)}50%{opacity:var(--fo,.1)}}
@keyframes fieldGlint{0%,70%,100%{opacity:calc(var(--fo,.1)*.4)}80%{opacity:calc(var(--fo,.1)*3)}88%{opacity:calc(var(--fo,.1)*1.5)}}
@media (prefers-reduced-motion: reduce){#field span,#field i.mote{animation:none}#field span{opacity:.05}#field i.mote{opacity:.14}}

/* ── mobile filter matrix — chips become structure ─────────────
   On small screens the loose chip cloud collapses into a hard
   cellular grid: one ink frame, 3px shared rules, every collection
   a bone cell. ALL spans the top row like a header slab; the active
   cell inverts to ink with the gold registration bar — the same
   grammar as the nav. No floating pills, no ragged gaps. */
@media(max-width:700px){
  .chips{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bw);background:var(--edge);border:var(--bw) solid var(--edge);box-shadow:var(--slab-sm);margin-bottom:40px}
  .chip{border:0;border-radius:0;background:var(--bone);color:var(--ink);padding:15px 10px;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;letter-spacing:.07em;line-height:1.25}
  .chip:hover{transform:none;box-shadow:none;background:var(--bone);color:var(--ink)}
  .chip:active{background:var(--ink);color:var(--bone)}
  .chip.active,.chip.active:hover{background:var(--ink);color:var(--bone);border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--gold)}
  .chips .chip:first-child{grid-column:1 / -1;font-size:12px;letter-spacing:.22em}
}