/* ============================================================
   Best Buds — "Golden Hour"
   Palette sampled from the Best Buds logo + their own product photography.
   ============================================================ */

:root{
  /* colour — every value derived, see ART-DIRECTION.md */
  --brand:#00E33A;          /* the logo green, sampled */
  --brand-bright:#2BF05C;   /* on-dark accent */
  --brand-mid:#12A03A;      /* borders, marks */
  --brand-deep:#0B5E22;     /* AA text/buttons on cream */
  --gold:#C9A227;           /* trichome gold — rationed */
  --cream:#FBF8F1;
  --cream-2:#F4EFE3;
  --ink:#14170F;
  --ink-60:#5A5F52;
  --ink-40:#8B9080;
  --stage:#0A0C09;
  --stage-2:#141810;
  --line:#E2DCCB;
  --line-dark:#252A20;
  --lemon:#F6DA01;

  /* type */
  --disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* scale */
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --r1:8px; --r2:14px; --r3:22px; --r4:32px;
  --shadow:0 2px 4px rgba(20,23,15,.04), 0 12px 32px -8px rgba(20,23,15,.10);
  --shadow-lg:0 4px 8px rgba(20,23,15,.06), 0 32px 64px -16px rgba(20,23,15,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; line-height:.98; letter-spacing:-.02em; margin:0}
p{margin:0}
.is-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brand-mid); outline-offset:3px; border-radius:4px}

.wrap{width:min(1240px,92vw); margin-inline:auto}

/* ---------- demo flag ---------- */
.demo-flag{
  background:var(--ink); color:var(--cream); font-size:13.5px; line-height:1.5;
  padding:10px 5vw; text-align:center; position:relative; z-index:60;
}
.demo-flag strong{color:var(--brand-bright)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  padding:.72em 1.35em; border-radius:100px; font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:.92em 1.7em; font-size:16px}
.btn--full{width:100%}
.btn--primary{--bg:var(--brand-deep); --bd:var(--brand-deep)}
.btn--primary:hover{--bg:#0a4d1c; --bd:#0a4d1c}
.btn--outline{--bg:transparent; --fg:var(--ink); --bd:var(--ink)}
.btn--outline:hover{--bg:var(--ink); --fg:var(--cream)}
.btn--bright{--bg:var(--brand-bright); --fg:#06210E; --bd:var(--brand-bright)}
.btn--bright:hover{--bg:var(--brand); --bd:var(--brand)}
.btn--dark{--bg:var(--ink); --fg:var(--cream); --bd:var(--ink)}
.btn--ghost{--bg:transparent; --fg:var(--ink-60); --bd:var(--line)}
.btn--ghostlight{--bg:transparent; --fg:var(--cream); --bd:rgba(251,248,241,.35)}
.btn--ghostlight:hover{--bg:rgba(251,248,241,.1)}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ---------- shared heads ---------- */
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-deep); margin-bottom:.9em;
}
.eyebrow--light{color:var(--brand-bright)}
.sechead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; margin-bottom:var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
}
.sechead h2{font-size:clamp(2.1rem,5.2vw,3.6rem)}
.sechead__note{max-width:38ch; color:var(--ink-60); font-size:15.5px}
.sechead--light{border-bottom-color:var(--line-dark)}
.sechead--light .sechead__note{color:#9AA490}
.sec{padding:var(--s6) 0; background:var(--cream)}
.sec--tight{padding-top:var(--s5)}

/* ---------- ticker ---------- */
.ticker{background:var(--brand-deep); color:var(--cream); overflow:hidden; padding:9px 0}
.ticker__track{
  display:flex; gap:2.2rem; width:max-content; white-space:nowrap;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  animation:slide 34s linear infinite;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(251,248,241,.86); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.hdr.stuck{border-bottom-color:var(--line); box-shadow:0 4px 24px -12px rgba(20,23,15,.2)}
.hdr__in{display:flex; align-items:center; gap:var(--s3); height:70px}
.hdr__logo img{height:34px; width:auto}
.hdr__nav{display:flex; gap:1.45rem; margin-left:auto; font-size:14.5px; font-weight:500}
.hdr__nav a{text-decoration:none; padding:.3em 0; position:relative}
.hdr__nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--brand-mid); transition:right .25s var(--ease)}
.hdr__nav a:hover::after{right:0}
.hdr__act{display:flex; align-items:center; gap:.7rem; margin-left:auto}
.hdr__phone{font-size:14.5px; font-weight:600; text-decoration:none; white-space:nowrap}
.cartbtn{position:relative; background:var(--ink); color:var(--cream); border:0; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:transform .18s var(--ease)}
.cartbtn:hover{transform:scale(1.06)}
.cartbtn svg{fill:currentColor}
.cartbtn__n{position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 4px; border-radius:100px; background:var(--brand-bright); color:#06210E; font-size:11px; font-weight:700; display:grid; place-items:center}
.burger{display:none; background:none; border:0; width:40px; height:40px; padding:9px; cursor:pointer; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}


/* ---------- the world (Three.js "Golden Hour" flight) ---------- */
/* The world runs the FULL length of the page. Nothing below the hero is allowed an opaque
   background — every surface is glass floating over the flight, with a veil underneath it
   doing the work of keeping text readable. Mobile and reduced-motion never see any of this;
   they get the cream storefront defined further down, which has to stand on its own. */
.world{position:fixed; top:0; left:0; z-index:-2; display:none; width:100vw; height:100vh}
@supports (height:100lvh){ .world{height:100lvh} }   /* iOS: cover the viewport with toolbars collapsed */
.world-on body::before{height:100vh}
@supports (height:100lvh){ .world-on body::before{height:100lvh} }
.gl-on .world{display:block}
/* the no-WebGL fallback: a still golden-hour sky, so the page never flips to a different design */
.world-on body{background:#1A1712 radial-gradient(70% 55% at 50% 60%, #8A4A2C 0%, #53331F 38%, #221B26 100%) fixed}

/* veil + vignette: sits above the canvas, below all content */
.world-on body::before{
  content:""; position:fixed; top:0; left:0; width:100vw; z-index:-1; pointer-events:none;
  background:
    radial-gradient(125% 90% at 50% 42%, transparent 52%, rgba(10,12,9,.52) 100%),
    linear-gradient(180deg, rgba(10,12,9,.40), rgba(10,12,9,.20) 24%, rgba(10,12,9,.26) 70%, rgba(10,12,9,.52));
}

/* the still hero stands down once the flight is live; without WebGL it stays, on the dark sky */
.gl-on .field{display:none}
.gl-on .hero{min-height:82svh; display:grid; align-content:center; padding-block:var(--s6)}
.world-on .potchip{background:rgba(14,17,12,.92); border-color:rgba(253,251,245,.14); color:#FDFBF5}
.world-on .potchip__l{color:rgba(253,251,245,.66)}
.gl-on .hero__in{grid-template-columns:minmax(0,1fr)}
.gl-on .hero__copy{max-width:760px}

/* --- type goes light across the whole document --- */
.world-on .ground,
.world-on .sec,
.world-on .sec--rev{background:transparent}
.world-on .band{display:none}          /* the world already delivers golden hour */
.world-on h1,.world-on h2,.world-on h3,.world-on h4{color:#FDFBF5}
.world-on .hero h1 em{color:var(--brand-bright)}
.world-on .eyebrow{color:var(--brand-bright)}
.world-on .hero__sub,
.world-on .sechead__note,
.world-on .art__x,
.world-on .resultcount,
.world-on .lemon__copy p{color:rgba(253,251,245,.74)}
.world-on .sechead{border-bottom-color:rgba(253,251,245,.18)}
.world-on .hero__trust{border-top-color:rgba(253,251,245,.22)}
.world-on .hero__trust strong{color:#FDFBF5}
.world-on .hero__trust span{color:rgba(253,251,245,.66)}
.world-on .display,.world-on h1,.world-on h2{text-shadow:0 2px 26px rgba(10,12,9,.8)}
.world-on .hero__sub{text-shadow:0 1px 20px rgba(10,12,9,.85)}

/* --- controls --- */
.world-on .btn--outline{--fg:#FDFBF5; --bd:rgba(253,251,245,.5)}
.world-on .btn--outline:hover{--bg:#FDFBF5; --fg:var(--ink)}
.world-on .chip{color:#FDFBF5; border-color:rgba(253,251,245,.26); background:rgba(10,12,9,.4)}
.world-on .chip:hover{border-color:rgba(253,251,245,.6)}
.world-on .chip.is-on{background:var(--brand-bright); border-color:var(--brand-bright); color:#06210E}
.world-on .sel{color:rgba(253,251,245,.7)}
.world-on .sel select{
  color:#FDFBF5; background-color:rgba(10,12,9,.55); border-color:rgba(253,251,245,.26);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23FDFBF5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.world-on .linkbtn{color:var(--brand-bright)}

/* --- product cards become glass --- */
.world-on .card{background:rgba(13,16,11,.72); border-color:rgba(253,251,245,.14); color:#FDFBF5}
.world-on .card:hover{background:rgba(16,20,13,.86); border-color:rgba(253,251,245,.26)}
.world-on .card__cat{color:rgba(253,251,245,.5)}
.world-on .card__add{background:var(--brand-bright); color:#06210E}
.world-on .card__add:hover{background:#fff}
.world-on .card__p small{color:rgba(253,251,245,.45)}

/* --- the dark bands soften so the flight shows through them --- */
.world-on .stage{background:rgba(10,12,9,.62)}
.world-on .snax{background:rgba(12,15,10,.66)}
.world-on .coa{background:rgba(10,12,9,.66)}
.world-on .whole{background:rgba(11,94,34,.62)}
.world-on .ft{background:rgba(8,10,7,.82)}
.world-on .rev{background:rgba(13,16,11,.72); border-color:rgba(253,251,245,.14)}
.world-on .rev__t{color:#FDFBF5}
.world-on .rev__x{color:rgba(253,251,245,.72)}
.world-on .rev__by{border-top-color:rgba(253,251,245,.14); color:rgba(253,251,245,.5)}
.world-on .rev__v{color:var(--brand-bright)}
.world-on .lemon{background:rgba(246,218,1,.84)}
.world-on .lemon h2,.world-on .lemon .eyebrow,.world-on .lemon__price{color:#1A1800}
.world-on .lemon__copy p{color:#3A3505; text-shadow:none}
.world-on .ed__tag{background:rgba(10,12,9,.82); color:#FDFBF5}
.world-on .art__kicker{color:var(--brand-bright)}

/* --- header stays dark the whole way down; there is no cream page to hand back to --- */
.world-on .hdr{background:rgba(10,12,9,.42); border-bottom-color:transparent}
.world-on .hdr.stuck{background:rgba(10,12,9,.72); border-bottom-color:rgba(253,251,245,.12)}
.world-on .hdr__nav a,.world-on .hdr__phone{color:#FDFBF5}
.world-on .burger span{background:#FDFBF5}
.world-on .hdr__nav.open{background:rgba(10,12,9,.96)}
.world-on .hdr__nav.open a{color:#FDFBF5; border-bottom-color:rgba(253,251,245,.12)}
.world-on .cartbtn{background:var(--brand-bright); color:#06210E}

/* --- overlays match the dark world --- */
.world-on .cart{background:rgba(14,17,12,.97); color:#FDFBF5}
.world-on .cart__hd{border-bottom-color:rgba(253,251,245,.14)}
.world-on .cart__ft{background:rgba(8,10,7,.9); border-top-color:rgba(253,251,245,.14)}
.world-on .ci{border-bottom-color:rgba(253,251,245,.12)}
.world-on .ci__m{color:rgba(253,251,245,.5)}
.world-on .qty{border-color:rgba(253,251,245,.22)}
.world-on .qty button:hover{background:rgba(253,251,245,.12)}
.world-on .iconbtn:hover{background:rgba(253,251,245,.12)}
.world-on .cart__fine,.world-on .shipbar{color:rgba(253,251,245,.5)}
.world-on .shipbar{background:rgba(253,251,245,.16)}
.world-on .qv__card{background:rgba(14,17,12,.98); color:#FDFBF5}
.world-on .qv__cat{color:rgba(253,251,245,.5)}
.world-on .qv__meta{border-top-color:rgba(253,251,245,.16)}
.world-on .qv__meta span:first-child{color:rgba(253,251,245,.6)}
.world-on .qv__x{color:rgba(253,251,245,.72)}
.world-on .qv__close{background:rgba(253,251,245,.16); color:#FDFBF5}

.world-on .cart__ship b{color:var(--brand-bright)}
.world-on .checkout,.world-on #checkout{--bg:var(--brand-bright); --bd:var(--brand-bright); --fg:#06210E}
.world-on .agegate__card{background:rgba(14,17,12,.98); color:#FDFBF5}
.world-on .agegate p{color:rgba(253,251,245,.72)}
.world-on .btn--ghost{--fg:rgba(253,251,245,.7); --bd:rgba(253,251,245,.3)}

@media (prefers-reduced-motion:reduce){ .world{display:none !important} }

/* ---------- hero ---------- */
.hero{padding:var(--s6) 0 var(--s5)}
.hero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:center}
.hero h1{font-size:clamp(2.9rem,7.4vw,5.4rem); letter-spacing:-.035em}
.hero h1 em{font-style:normal; color:var(--brand-deep)}
.hero__sub{margin-top:var(--s3); font-size:clamp(1rem,1.6vw,1.16rem); color:var(--ink-60); max-width:44ch}
.hero__cta{display:flex; gap:.7rem; margin-top:var(--s4); flex-wrap:wrap}
.hero__trust{list-style:none; display:flex; gap:var(--s4); margin:var(--s5) 0 0; padding:var(--s3) 0 0; border-top:1px solid var(--line); flex-wrap:wrap}
.hero__trust li{display:flex; flex-direction:column}
.hero__trust strong{font-family:var(--disp); font-size:1.5rem; letter-spacing:-.02em}
.hero__trust span{font-size:13px; color:var(--ink-60)}
.hero__art{position:relative}
.hero__frame{margin:0; border-radius:var(--r4); overflow:hidden; background:var(--stage); box-shadow:var(--shadow-lg); aspect-ratio:1/1}
.hero__frame img{width:100%; height:100%; object-fit:cover}
.potchip{
  position:absolute; left:-18px; bottom:34px; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r2); padding:.75rem 1.1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.7rem;
}
.potchip__n{font-family:var(--disp); font-size:1.7rem; color:var(--gold); letter-spacing:-.03em}
.potchip__l{font-size:11.5px; line-height:1.25; color:var(--ink-60); font-weight:500}
.labchip{
  position:absolute; right:-10px; top:26px; background:var(--brand-deep); color:var(--cream);
  border-radius:100px; padding:.5rem .95rem; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:.45rem; box-shadow:var(--shadow);
}

/* ---------- golden hour band ---------- */
.band{position:relative; margin:var(--s4) 0 0; background:var(--cream)}
.band__img{width:100%; height:clamp(220px,32vw,420px); object-fit:cover; object-position:center 42%}
.band__cap{position:absolute; inset:0; display:grid; place-items:center; padding:var(--s4) 5vw;
  background:radial-gradient(60% 55% at 50% 55%, rgba(20,23,15,.62), rgba(20,23,15,.14) 70%, transparent)}
.band__cap p{font-family:var(--disp); font-weight:800; color:#fff; text-shadow:0 2px 28px rgba(20,23,15,.75); font-size:clamp(1.5rem,4vw,2.8rem); letter-spacing:-.02em; text-align:center; margin:0}

.ground{position:relative; background:var(--cream)}

/* ---------- filters ---------- */
.filters{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.filters__row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.chip{
  background:transparent; border:1.5px solid var(--line); border-radius:100px;
  padding:.5em 1.05em; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.chip:hover{border-color:var(--ink-40)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.sel{display:flex; align-items:center; gap:.5rem; font-size:13.5px; color:var(--ink-60)}
.sel select{
  font:inherit; font-size:14px; color:var(--ink); background:var(--cream); border:1.5px solid var(--line);
  border-radius:100px; padding:.5em 2em .5em .9em; cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314170F' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8em center; background-size:11px;
}
.resultcount{font-size:13.5px; color:var(--ink-40); margin-bottom:var(--s3)}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:var(--s3)}
.loadmore-wrap{display:flex; justify-content:center; margin-top:var(--s4)}
.grid__empty{text-align:center; padding:var(--s5) 0; color:var(--ink-60)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); overflow:hidden;
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  animation:pop .32s var(--ease) both;
}
@keyframes pop{from{opacity:0; transform:translateY(8px)}}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent}
.card__fig{position:relative; margin:0; aspect-ratio:1/1; background:var(--stage); overflow:hidden}
.card__fig img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .card__fig img{transform:scale(1.045)}
.card__pot{
  position:absolute; top:10px; left:10px; background:rgba(10,12,9,.72); backdrop-filter:blur(6px);
  color:var(--gold); font-family:var(--disp); font-size:13px; padding:.3em .6em; border-radius:7px; letter-spacing:-.01em;
}
.card__flag{
  position:absolute; top:10px; right:10px; background:var(--brand-bright); color:#06210E;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.32em .55em; border-radius:6px;
}
.card__b{padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.3rem; flex:1}
.card__cat{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40)}
.card__t{font-family:var(--body); font-weight:600; font-size:15px; line-height:1.32; letter-spacing:0}
.card__foot{margin-top:auto; padding-top:.65rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.card__p{font-weight:600; font-size:15px}
.card__p small{font-weight:400; color:var(--ink-40); font-size:12.5px}
.card__add{
  background:var(--ink); color:var(--cream); border:0; border-radius:100px;
  padding:.44em .95em; font-size:13px; font-weight:600; cursor:pointer; transition:background .18s, transform .15s;
}
.card__add:hover{background:var(--brand-deep); transform:scale(1.04)}
.card__add.done{background:var(--brand-bright); color:#06210E}

/* ---------- rosin stage ---------- */
.stage{background:var(--stage); color:var(--cream); padding:var(--s6) 0; margin-top:var(--s6)}
.stage__in{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center}
.stage h2{font-size:clamp(2.2rem,5.4vw,3.9rem)}
.stage__copy p{color:#9AA490; margin-top:var(--s3); max-width:42ch}
.pull{
  margin:var(--s4) 0; padding-left:var(--s3); border-left:2px solid var(--brand-bright);
  font-size:15.5px; line-height:1.6; color:#C8CFBE; font-style:italic;
}
.pull cite{display:block; margin-top:.7rem; font-style:normal; font-size:12.5px; color:var(--ink-40); letter-spacing:.04em}
.stage__big{margin:0; border-radius:var(--r4); overflow:hidden; aspect-ratio:1/1}
.stage__big img{width:100%; height:100%; object-fit:cover}
.stage__strip{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:.7rem}
.stage__strip img{border-radius:var(--r2); aspect-ratio:1/1; object-fit:cover}

/* ---------- edibles ---------- */
.edibles{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:var(--s3)}
.ed{position:relative; border-radius:var(--r3); overflow:hidden; text-decoration:none; display:block; aspect-ratio:1/1; background:var(--cream-2)}
.ed--tall{aspect-ratio:auto}
.ed img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.ed:hover img{transform:scale(1.05)}
.ed__tag{
  position:absolute; left:14px; bottom:14px; background:rgba(251,248,241,.94); backdrop-filter:blur(6px);
  border-radius:100px; padding:.45em .95em; font-size:12.5px; font-weight:600;
}

/* ---------- lemonade ---------- */
.lemon{background:var(--lemon); margin-top:var(--s6); overflow:hidden}
.lemon__in{display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s5); align-items:center; padding:var(--s5) 0}
.lemon__can{margin:0}
.lemon__can img{border-radius:var(--r3); box-shadow:var(--shadow-lg)}
.lemon__copy h2{font-size:clamp(2.2rem,5.6vw,4rem); color:#1A1800}
.lemon__copy p{color:#3A3505; margin-top:var(--s3); max-width:40ch}
.lemon .eyebrow{color:#3A3505}
.lemon__price{font-size:16px; margin-top:var(--s3)}
.lemon__price strong{font-family:var(--disp); font-size:1.5rem}
.lemon__price span{color:#5A5410; font-size:14px}
.lemon .btn{margin-top:var(--s4)}

/* ---------- snax ---------- */
.snax{background:var(--stage-2); color:var(--cream); padding:var(--s6) 0}
.snaxrail{overflow-x:auto; scrollbar-width:thin; padding:var(--s3) 0 var(--s4); scroll-snap-type:x proximity}
.snaxrail__track{display:flex; gap:var(--s2); padding-inline:max(4vw,calc((100vw - 1240px)/2))}
.snaxcard{flex:0 0 200px; scroll-snap-align:start; text-decoration:none; color:inherit}
.snaxcard img{border-radius:var(--r2); aspect-ratio:1/1; object-fit:cover; background:#000}
.snaxcard h3{font-family:var(--body); font-weight:600; font-size:13.5px; line-height:1.35; margin-top:.6rem}
.snaxcard p{font-size:13px; color:var(--brand-bright); font-weight:600; margin-top:.15rem}
.snaxcard span{font-size:11.5px; color:var(--ink-40)}
.snax__foot{padding-top:var(--s2)}

/* ---------- reviews ---------- */
.sec--rev{background:var(--cream-2)}
.revs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s3)}
.rev{background:var(--cream); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s3)}
.rev__stars{color:var(--gold); font-size:14px; letter-spacing:.12em}
.rev__t{font-weight:600; font-size:15px; margin-top:.6rem}
.rev__x{font-size:14.5px; color:var(--ink-60); margin-top:.5rem; line-height:1.62}
.rev__by{margin-top:var(--s2); padding-top:.7rem; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-40); display:flex; justify-content:space-between; gap:.5rem}
.rev__v{color:var(--brand-deep); font-weight:600}

/* ---------- COA ---------- */
.coa{background:var(--stage); color:var(--cream); padding:var(--s6) 0}
.coa__in{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s5); align-items:center}
.coa h2{font-size:clamp(2rem,5vw,3.4rem)}
.coa__copy>p{color:#9AA490; margin-top:var(--s3); max-width:44ch}
.coa__form{display:flex; gap:.55rem; margin-top:var(--s4); flex-wrap:wrap}
.coa__form input{
  flex:1 1 240px; background:rgba(251,248,241,.06); border:1.5px solid var(--line-dark); color:var(--cream);
  border-radius:100px; padding:.85em 1.2em; font:inherit; font-size:15px;
}
.coa__form input::placeholder{color:#6E7565}
.coa__form input:focus{border-color:var(--brand-bright); outline:none}
.coa__hint{font-size:13px; color:var(--ink-40); margin-top:.8rem}
.coa__hint .linkbtn{color:var(--brand-bright)}
.coa__out{margin-top:var(--s3); border:1px solid var(--line-dark); border-radius:var(--r2); padding:var(--s3); background:rgba(251,248,241,.04)}
.coa__out h4{font-family:var(--body); font-size:14px; font-weight:600}
.coa__row{display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--line-dark); font-size:14px}
.coa__row:last-child{border-bottom:0}
.coa__row span:last-child{color:var(--brand-bright); font-weight:600}
.coa__pass{display:inline-flex; align-items:center; gap:.4rem; background:rgba(43,240,92,.14); color:var(--brand-bright); border-radius:100px; padding:.25em .7em; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.8rem}
.coa__miss{color:#E8B4A0; font-size:14px}
.coa__art{margin:0; border-radius:var(--r4); overflow:hidden; aspect-ratio:1/1}
.coa__art img{width:100%; height:100%; object-fit:cover}

/* ---------- learn ---------- */
.learn{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.art{text-decoration:none; display:block}
.art figure{margin:0 0 var(--s2); border-radius:var(--r3); overflow:hidden; aspect-ratio:3/2; background:var(--cream-2)}
.art figure img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.art:hover figure img{transform:scale(1.05)}
.art__kicker{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep)}
.art h3{font-family:var(--body); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em; margin-top:.35rem}
.art__x{font-size:14.5px; color:var(--ink-60); margin-top:.45rem}

/* ---------- wholesale ---------- */
.whole{background:var(--brand-deep); color:var(--cream); padding:var(--s5) 0; margin-top:var(--s6)}
.whole__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.whole h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.whole p{color:rgba(251,248,241,.78); margin-top:var(--s2); max-width:48ch}
.whole__act{display:flex; gap:.7rem; flex-wrap:wrap}

/* ---------- footer ---------- */
.ft{background:var(--stage); color:var(--cream); padding:var(--s6) 0 var(--s4)}
.ft__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:var(--s4)}
.ft__brand img{height:38px; width:auto; margin-bottom:var(--s2)}
.ft__brand p{color:#9AA490; font-size:14.5px; max-width:34ch}
.ft__hours{margin-top:var(--s3) !important; font-size:14px !important}
.ft__hours a{color:var(--brand-bright); font-weight:600}
.ft__col h4{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40); margin-bottom:var(--s2)}
.ft__col a{display:block; text-decoration:none; font-size:14.5px; padding:.3em 0; color:#C8CFBE; transition:color .18s}
.ft__col a:hover{color:var(--brand-bright)}
.ft__note{font-size:14px; color:#9AA490; margin-bottom:var(--s2)}
.ft__form{display:flex; gap:.5rem; flex-wrap:wrap}
.ft__form input{
  flex:1 1 160px; background:rgba(251,248,241,.06); border:1.5px solid var(--line-dark);
  color:var(--cream); border-radius:100px; padding:.72em 1.1em; font:inherit; font-size:14.5px;
}
.ft__form input::placeholder{color:#6E7565}
.ft__form input:focus{border-color:var(--brand-bright); outline:none}
.ft__msg{font-size:13.5px; color:var(--brand-bright); margin-top:.7rem; min-height:1.2em}
.ft__legal{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
}
.ft__legal p{font-size:12px; color:#6E7565; max-width:76ch; line-height:1.55}
.ft__demo{white-space:nowrap}

/* ---------- age gate ---------- */
.agegate[hidden],.qv[hidden],.scrim[hidden]{display:none !important}
.agegate{position:fixed; inset:0; z-index:100; background:rgba(10,12,9,.86); backdrop-filter:blur(10px); display:grid; place-items:center; padding:5vw}
.agegate__card{background:var(--cream); border-radius:var(--r4); padding:var(--s5) var(--s4); max-width:430px; width:100%; text-align:center; box-shadow:var(--shadow-lg)}
.agegate__logo{height:42px; width:auto; margin:0 auto var(--s3)}
.agegate h2{font-size:1.9rem}
.agegate p{color:var(--ink-60); font-size:15px; margin-top:.8rem}
.agegate__actions{display:flex; gap:.6rem; justify-content:center; margin-top:var(--s4)}
.agegate__deny{color:#A33; font-weight:500}

/* ---------- cart ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,12,9,.5); z-index:70; animation:fade .25s}
@keyframes fade{from{opacity:0}}
.cart{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--cream);
  z-index:80; display:flex; flex-direction:column; transform:translateX(101%);
  transition:transform .34s var(--ease); box-shadow:var(--shadow-lg);
}
.cart.open{transform:none}
.cart__hd{display:flex; align-items:center; justify-content:space-between; padding:var(--s3); border-bottom:1px solid var(--line)}
.cart__hd h2{font-size:1.35rem}
.iconbtn{background:none; border:0; font-size:28px; line-height:1; width:38px; height:38px; cursor:pointer; border-radius:50%; transition:background .18s}
.iconbtn:hover{background:var(--cream-2)}
.cart__body{flex:1; overflow-y:auto; padding:var(--s3)}
.cart__empty{color:var(--ink-40); text-align:center; padding:var(--s5) 0; font-size:15px}
.ci{display:flex; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.ci img{width:64px; height:64px; border-radius:var(--r1); object-fit:cover; background:var(--stage); flex:0 0 auto}
.ci__b{flex:1; min-width:0}
.ci__t{font-size:14px; font-weight:600; line-height:1.3}
.ci__m{font-size:12.5px; color:var(--ink-40); margin-top:.15rem}
.ci__r{display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; gap:.5rem}
.qty{display:flex; align-items:center; gap:.3rem; border:1px solid var(--line); border-radius:100px; padding:.1rem}
.qty button{background:none; border:0; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1; transition:background .15s}
.qty button:hover{background:var(--cream-2)}
.qty span{font-size:13px; min-width:16px; text-align:center; font-weight:600}
.ci__p{font-weight:600; font-size:14px}
.cart__ft{padding:var(--s3); border-top:1px solid var(--line); background:var(--cream-2)}
.cart__ship{font-size:13px; margin-bottom:.7rem}
.cart__ship b{color:var(--brand-deep)}
.shipbar{height:5px; background:var(--line); border-radius:100px; margin-top:.45rem; overflow:hidden}
.shipbar i{display:block; height:100%; background:var(--brand-mid); border-radius:100px; transition:width .4s var(--ease)}
.cart__tot{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s2); font-size:15px}
.cart__tot strong{font-family:var(--disp); font-size:1.5rem}
.cart__fine{font-size:11.5px; color:var(--ink-40); text-align:center; margin-top:.6rem}

/* ---------- quick view ---------- */
.qv{position:fixed; inset:0; z-index:90; background:rgba(10,12,9,.7); backdrop-filter:blur(8px); display:grid; place-items:center; padding:4vw; animation:fade .22s}
.qv__card{background:var(--cream); border-radius:var(--r4); max-width:860px; width:100%; max-height:88vh; overflow:auto; display:grid; grid-template-columns:1fr 1fr; position:relative}
.qv__fig{margin:0; background:var(--stage); aspect-ratio:1/1}
.qv__fig img{width:100%; height:100%; object-fit:cover}
.qv__b{padding:var(--s4)}
.qv__cat{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40)}
.qv__b h2{font-family:var(--body); font-weight:600; font-size:1.5rem; line-height:1.22; letter-spacing:-.01em; margin-top:.4rem}
.qv__price{font-family:var(--disp); font-size:1.9rem; margin-top:.8rem}
.qv__price small{font-family:var(--body); font-size:13px; color:var(--ink-40); font-weight:400}
.qv__meta{list-style:none; padding:var(--s3) 0 0; margin:var(--s3) 0 0; border-top:1px solid var(--line); display:grid; gap:.55rem}
.qv__meta li{display:flex; justify-content:space-between; font-size:14px; gap:1rem}
.qv__meta span:first-child{color:var(--ink-60)}
.qv__meta span:last-child{font-weight:600; text-align:right}
.qv__x{font-size:14.5px; color:var(--ink-60); margin-top:var(--s3); line-height:1.6}
.qv__cta{margin-top:var(--s4); display:flex; gap:.6rem; flex-wrap:wrap}
.qv__close{position:absolute; top:12px; right:12px; z-index:2; background:rgba(251,248,241,.94); border:0; width:38px; height:38px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer; box-shadow:var(--shadow)}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:95;
  background:var(--ink); color:var(--cream); border-radius:100px; padding:.75rem 1.35rem;
  font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); opacity:0;
  transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hdr__nav{display:none}
  .burger{display:flex}
  .hdr__nav.open{
    display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    background:var(--cream); border-bottom:1px solid var(--line); padding:var(--s3) 5vw; gap:.15rem;
    box-shadow:var(--shadow); margin-left:0;
  }
  .hdr__nav.open a{padding:.7em 0; border-bottom:1px solid var(--line); font-size:16px}
  .hdr__nav.open a:last-child{border-bottom:0}
  .ft__in{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1/-1}
}
@media (max-width:900px){
  body{font-size:16px}
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero__in,.stage__in,.coa__in,.lemon__in{grid-template-columns:1fr; gap:var(--s4)}
  .hero__art{order:-1; max-width:520px; margin-inline:auto; width:100%}
  .potchip{left:8px; bottom:14px}
  .labchip{right:8px; top:14px}
  .hero__trust{gap:var(--s3); margin-top:var(--s4)}
  .stage__copy{order:-1}
  .lemon__can{max-width:340px}
  .learn,.edibles{grid-template-columns:1fr}
  .ed--tall{aspect-ratio:4/3}
  .qv__card{grid-template-columns:1fr}
  .coa__art{max-width:400px; margin-inline:auto}
  .sec{padding:var(--s5) 0}
  .whole__in{flex-direction:column; align-items:flex-start}
}
@media (max-width:640px){
  .hdr__phone{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:.7rem}
  .card__b{padding:.7rem .75rem .8rem}
  .card__t{font-size:13.5px}
  .card__add{padding:.4em .75em; font-size:12px}
  .filters{gap:.8rem}
  .filters__row--end{width:100%}
  .sel{flex:1}
  .sel select{width:100%}
  .hero__trust{width:100%; justify-content:space-between; gap:.8rem}
  .hero__trust strong{font-size:1.2rem}
  .hero__trust span{font-size:11.5px}
  .ft__in{grid-template-columns:1fr}
  .ft__legal{flex-direction:column}
  .stage__strip{gap:.45rem}
  .snaxcard{flex-basis:150px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .ticker__track{animation:none}
}