/* Zarati's stylesheet: level two's style.js rendered with its theme.js (the measured brand), fonts self-hosted.
   Only the Latin subsets travel; the additions at the end replace level two's inline style attributes. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/zarati/assets/inter.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 400;font-display:swap;src:url(/zarati/assets/space-grotesk.woff2) format('woff2')}

/* ---- theme tokens ----
   Three states, in priority order:
     1. [data-theme] on <html>  — an explicit choice the visitor made, and it
        must beat the OS setting in BOTH directions.
     2. prefers-color-scheme    — the OS default, for a first visit.
     3. :root                   — dark, the brand default.
   Every colour below is a token. Nothing hardcodes a hex outside this block,
   which is the only reason a second theme is a few lines rather than a rewrite. */
:root{
  --bg:#0b0b0d; --fg:#ededf0; --fg-soft:#c2c2c8;
  --dim:#90909a; --faint:#6e6e78;
  --line:#232327; --card:#141417;
  --accent:#ddd5c8; --shadow:rgba(0,0,0,.55);
  --nav:rgba(11,11,13,.86);
  --scrim:rgba(0,0,0,.66);
  --hover:#1c1c20;
  --glow:rgba(221,213,200,.07);
  --gut:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#f2efe9; --fg:#1f1f24; --fg-soft:#3a3a41;
    --dim:#5f5f68; --faint:#86868f;
    --line:#e0dbd1; --card:#faf8f4;
    --accent:#6b5c46; --shadow:rgba(31,31,36,.09);
    --nav:rgba(242,239,233,.88);
    --scrim:rgba(31,31,36,.38);
    --hover:#e9e4da;
    --glow:rgba(107,92,70,.08);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f2efe9; --fg:#1f1f24; --fg-soft:#3a3a41;
  --dim:#5f5f68; --faint:#86868f;
  --line:#e0dbd1; --card:#faf8f4;
  --accent:#6b5c46; --shadow:rgba(31,31,36,.09);
  --nav:rgba(242,239,233,.88);
  --scrim:rgba(31,31,36,.38);
  --hover:#e9e4da;
  --glow:rgba(107,92,70,.08);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --fg:#ededf0; --fg-soft:#c2c2c8;
  --dim:#90909a; --faint:#6e6e78;
  --line:#232327; --card:#141417;
  --accent:#ddd5c8; --shadow:rgba(0,0,0,.55);
  --nav:rgba(11,11,13,.86);
  --scrim:rgba(0,0,0,.66);
  --hover:#1c1c20;
  --glow:rgba(221,213,200,.07);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sideways scroll is never wanted. It is pinned on BOTH html and body because
   whichever of the two is the viewport propagation source varies by browser,
   and setting only body lets iOS Safari scroll anyway. max-width:100vw is the
   backstop for anything that escapes its own clip. */
/* clip, NOT hidden. overflow-x:hidden on html makes html a scroll container, and
   position:sticky then resolves against that container instead of the viewport —
   which silently un-sticks the nav. clip suppresses the scroll without creating
   the container. */
html,body{max-width:100vw;overflow-x:clip;overscroll-behavior-x:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Inter, system-ui, -apple-system, sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font-family:inherit}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
/* Bands that should ignore the gutter on phones and touch both edges. */
.bleed{margin-inline:calc(var(--gut) * -1)}
.mono{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ---- reveal-on-scroll: subtle, and disabled for reduced motion ---- */
[data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---- ticker: a real marquee, not a static row ---- */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;padding:9px 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .t{display:inline-flex;white-space:nowrap;animation:sc 42s linear infinite}
.ticker span{padding-right:46px}
@keyframes sc{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:40;background:var(--nav);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
nav .brand{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;letter-spacing:.34em;
  font-size:15px;text-transform:uppercase;white-space:nowrap}
nav .links{display:none;gap:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
nav .links a{position:relative;padding-bottom:3px}
nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--fg);transition:right .35s var(--ease)}
nav .links a:hover::after{right:0}
.right{display:flex;gap:9px;align-items:center}
.icon{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;position:relative;transition:border-color .2s}
.icon:hover{border-color:var(--faint)}
.count{background:var(--accent);color:#000;border-radius:999px;font-size:9px;
  padding:1px 6px;margin-left:6px;font-weight:600;letter-spacing:0}
.burger{display:inline-flex;flex-direction:column;gap:4px;padding:11px;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;background:none}
.burger i{width:15px;height:1px;background:var(--fg);display:block}
@media(min-width:1024px){.burger{display:none}}

/* ---- brand lockup ---- */
nav .brand{display:inline-flex;align-items:center;gap:9px}
.mk{width:22px;height:22px;flex:none;color:var(--fg);transition:transform .5s var(--ease)}
nav .brand:hover .mk{transform:rotate(-8deg) scale(1.06)}
.mk.big{width:54px;height:54px;color:var(--fg);opacity:.9}

/* ---- theme toggle ---- */
.tt{width:38px;height:38px;border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--fg);cursor:pointer;display:grid;place-items:center;position:relative;
  transition:border-color .2s,transform .2s var(--ease)}
.tt:hover{border-color:var(--faint)}
.tt:active{transform:scale(.92)}
.tt svg{width:16px;height:16px;position:absolute;transition:opacity .3s var(--ease),transform .45s var(--ease)}
/* Dark theme shows the SUN (what you switch TO); light shows the moon. */
.tt .sun{opacity:1;transform:none}
.tt .moon{opacity:0;transform:rotate(-70deg) scale(.6)}
:root[data-theme="light"] .tt .sun{opacity:0;transform:rotate(70deg) scale(.6)}
:root[data-theme="light"] .tt .moon{opacity:1;transform:none}
@media(prefers-color-scheme:light){
  :root:not([data-theme]) .tt .sun{opacity:0;transform:rotate(70deg) scale(.6)}
  :root:not([data-theme]) .tt .moon{opacity:1;transform:none}
}
/* One frame with transitions off while the whole palette swaps — animating
   every colour at once reads as a smear, not a transition. */
.no-tr *,.no-tr *::before,.no-tr *::after{transition:none!important}

/* ---- sticky checkout bar ----
   This was a pill floating mid-screen: 176x65px parked over the middle of the
   grid, permanently covering one card's price and button, and it disappeared
   entirely at the bottom of the page. A cart affordance that hides the thing
   you are trying to buy is worse than none.

   It is now a full-width bar docked to the bottom edge — the standard mobile
   commerce pattern. It cannot cover a card because the page reserves space for
   it, it is always reachable, and it states the count, the total, and the
   action instead of being an icon you have to interpret. */
.fab{position:fixed;z-index:45;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:12px;
  padding:12px var(--gut);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--nav);backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);color:var(--fg);
  animation:fabin .38s var(--ease) both;
  transition:transform .3s var(--ease),opacity .25s}
.fab svg{width:20px;height:20px;flex:none}
.fab .n{background:var(--fg);color:var(--bg);border-radius:999px;min-width:21px;height:21px;
  display:grid;place-items:center;font-size:11px;font-weight:600;padding:0 6px;flex:none}
.fab .tot{margin-left:auto;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
/* The bar IS the checkout button on phones — a bar you can only tap to open a
   drawer adds a step to every purchase. */
.fab::after{content:"Checkout →";font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:999px;font-weight:600;
  white-space:nowrap}
@keyframes fabin{from{transform:translateY(100%)}}
/* Reserve the bar's height so it never sits on top of the last row or the
   footer's final line. */
body.has-fab{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
body.sheet-open .fab{transform:translateY(100%)}
@media(min-width:1024px){
  .fab{left:auto;right:24px;bottom:24px;border-radius:999px;border:1px solid var(--line);
    padding:12px 12px 12px 20px;box-shadow:0 12px 40px var(--shadow);width:auto}
  body.has-fab{padding-bottom:0}
  .fab:hover{transform:translateY(-2px)}
}

/* ---- card size selector ----
   A card with three prices cannot have one "Add to bag" and one hidden tier —
   the customer would add a size they never chose.

   MOBILE SHAPE: three chips side by side inside a ~195px card gave each one
   53px and forced 10px type, which truncated "3 Pre-Rolls" to "3 PRE…". A
   control you cannot read is not a control. On phones the sizes STACK full
   width, so each row is a 44px target with its label and its price both
   legible; they only sit side by side once there is width for it. */
.buy{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sizes{display:flex;flex-direction:column;gap:6px}
.sz{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:13px;letter-spacing:.01em;color:var(--dim);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.sz .v{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.sz:hover{border-color:var(--faint);color:var(--fg)}
.sz[data-on="1"]{border-color:var(--fg);color:var(--fg);background:var(--hover)}
.sz[data-on="1"] .v{color:var(--fg)}


/* ---- slide-over menu + cart drawer ---- */
/* The closed panel parks at translateX(100%), i.e. fully off the right edge.
   The fixed wrapper must clip it, or that parked panel becomes scrollable
   width on browsers that measure fixed descendants. */
.sheet{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.sheet .scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;
  transition:opacity .4s var(--ease);backdrop-filter:blur(2px)}
.sheet .panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,88vw);
  background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);
  transition:transform .45s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.sheet:target{pointer-events:auto}
.sheet:target .scrim{opacity:1}
.sheet:target .panel{transform:none}
.sheet .ph{display:flex;align-items:center;justify-content:space-between;
  padding:20px;border-bottom:1px solid var(--line)}
.sheet .x{font-size:22px;line-height:1;color:var(--dim);padding:4px 8px}
.sheet nav.menu a{display:block;padding:17px 20px;border-bottom:1px solid var(--line);
  font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:22px}

/* ---- hero ----
   The glow bleeds 50% past each side to keep the gradient's falloff off-screen.
   It is clipped HERE rather than left to body{overflow-x:hidden}: iOS Safari
   ignores overflow-x on body when body is not the scroll container, so relying
   on it produced a page that scrolled sideways on a real phone and nowhere
   else. Clip at the element that overflows, not at the root. */
.hero{padding:58px 0 50px;position:relative;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-14% -50% auto -50%;height:560px;
  background:radial-gradient(ellipse at 50% 0%,var(--glow),transparent 62%);
  pointer-events:none}
.kicker{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);position:relative}
.kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(232,226,217,.55);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(232,226,217,0)}100%{box-shadow:0 0 0 0 rgba(232,226,217,0)}}
h1{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;letter-spacing:-.025em;
  font-size:clamp(42px,12vw,96px);line-height:1.01;margin-top:20px;position:relative}
h1 .muted{color:var(--dim)}
.cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;position:relative}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);
  transition:transform .2s var(--ease),background .2s,border-color .2s;cursor:pointer;background:none;color:inherit}
.btn:hover{border-color:var(--faint)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
.btn.solid:hover{background:var(--accent)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---- sections ---- */
section.band{border-top:1px solid var(--line);padding:46px 0;width:100%}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.eyebrow{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:clamp(25px,6vw,34px)}

/* ---- product grid ---- */
.grid{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin-top:22px;grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);display:flex;flex-direction:column;position:relative}
.card .ph{position:relative;overflow:hidden;background:var(--card);display:block}
.card img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card .b{padding:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.nm{font-size:13px;line-height:1.3}
.pr{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:18px;color:var(--accent)}
.tag{position:absolute;top:9px;left:9px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--nav);border:1px solid var(--line);
  padding:5px 9px;border-radius:999px;color:var(--dim);backdrop-filter:blur(6px)}
.coa{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:2px}
button.add{margin-top:auto;width:100%;padding:12px;border:0;border-radius:999px;
  background:var(--fg);color:var(--bg);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:transform .18s var(--ease),background .2s}
button.add:hover{background:var(--accent)}
button.add:active{transform:scale(.97)}
button.add[disabled]{background:var(--hover);color:var(--faint);cursor:not-allowed}

/* ---- product detail ---- */
.pdp{display:grid;gap:22px;padding:24px 0}
.pdp .media{border-block:1px solid var(--line);background:var(--card);overflow:hidden}
.pdp h2{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:clamp(32px,8vw,52px);
  line-height:1.04;letter-spacing:-.02em}
.pdp .price{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:34px;color:var(--accent);
  margin-top:10px;transition:opacity .2s}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.tier{border:1px solid var(--line);border-radius:14px;padding:13px 10px;cursor:pointer;
  background:var(--card);text-align:center;transition:border-color .2s,background .2s,transform .15s var(--ease)}
.tier:active{transform:scale(.97)}
.tier[data-on="1"]{border-color:var(--accent);background:var(--hover)}
.tier .t{color:var(--dim);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  display:block;margin-bottom:5px}
.tier .v{font-size:14px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;margin-top:20px}
.qty button{background:none;border:0;color:var(--fg);width:44px;height:44px;font-size:18px;
  cursor:pointer;transition:background .2s}
.qty button:hover{background:var(--hover)}
.qty span{min-width:40px;text-align:center;font-size:15px}
/* Each stepper in the bag is its own form (no JS), so the forms must not
   introduce layout boxes between the flex container and the buttons. */
.qty form{display:contents}
.qty.small{margin-top:0;border-radius:999px}
.qty.small button{width:34px;height:34px;font-size:15px}
.qty.small span{min-width:28px;font-size:14px}
.rm{background:none;border:0;padding:0;font-size:11px;letter-spacing:.08em;cursor:pointer;
  text-transform:uppercase;color:var(--faint);font-family:inherit;transition:color .2s}
.rm:hover{color:var(--fg)}
.facts{margin-top:24px;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.facts span:first-child{color:var(--dim);flex:none}
/* Genetics and terpene lists are long; let them wrap right rather than
   stretching the row and forcing the page wide. */
.facts span:last-child{text-align:right}

/* ---- potency, effects, prose ---- */
.lede{color:var(--dim);font-size:15px;margin-top:8px;max-width:46ch}
.potency{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:26px}
.potency div{background:var(--card);padding:14px 12px;text-align:center}
.potency b{display:block;font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:21px;
  color:var(--accent)}
.potency span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:11px;
  letter-spacing:.06em;color:var(--dim)}
.prose{display:grid;gap:30px;max-width:760px}
.prose .mono{margin-bottom:9px}
.prose p{color:var(--dim);font-size:15px;line-height:1.75}
.sticker{width:min(190px,44vw);margin-inline:auto;opacity:.92}
/* The tagline is the one line that sells the strain — it earns space on the
   card, but it must never push the price or the button out of alignment. */
.tl{color:var(--faint);font-size:11px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag.thc{left:auto;right:9px;color:var(--accent)}
@media(min-width:640px){.prose{grid-template-columns:1fr 1fr;gap:40px}}

/* ---- reviews ---- */
.rev{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin-top:22px;grid-template-columns:1fr}
.rev .r{background:var(--bg);padding:20px}
.stars{color:var(--accent);font-size:11px;letter-spacing:3px}
.rev p{font-size:13px;color:var(--fg-soft);margin-top:10px;line-height:1.65}
.who{display:flex;align-items:center;gap:10px;margin-top:15px}
.av{width:26px;height:26px;border-radius:50%;background:var(--hover);display:grid;
  place-items:center;font-size:11px;color:var(--dim)}

/* ---- cart lines ---- */
.lines{border-top:1px solid var(--line);margin-top:20px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.line img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--card)}
.line .t{font-size:14px}
.sum{display:flex;justify-content:space-between;padding:16px 0;font-size:14px}
.tot{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:26px;color:var(--accent)}

/* ---- newsletter / footer ---- */
.news{display:grid;gap:24px;margin-top:6px}
.field{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:var(--card);margin-top:13px}
.field input{flex:1;background:transparent;border:0;color:var(--fg);padding:14px 18px;
  font-size:16px;outline:none}
.field button{background:var(--fg);color:var(--bg);border:0;padding:0 24px;font-weight:600;
  font-size:12px;cursor:pointer}
footer{border-top:1px solid var(--line);margin-top:52px}
.cols{display:grid;gap:28px;padding:40px 0;grid-template-columns:repeat(2,1fr)}
.cols h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.cols a,.cols div.li{display:block;font-size:13px;color:var(--dim);padding:5px 0;transition:color .2s}
.cols a:hover{color:var(--fg)}
.mark{text-align:center;padding:48px 0;border-top:1px solid var(--line)}
.mark .z{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:300;font-size:60px;color:var(--accent);line-height:1}
.mark .sub{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.legal{border-top:1px solid var(--line);padding:24px 0 40px;font-size:11px;color:var(--faint);line-height:1.7}

/* ---- forms ---- */
label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:16px}
input.f{width:100%;padding:14px;margin-top:7px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);font-size:16px;outline:none;transition:border-color .2s}
input.f:focus{border-color:var(--faint)}
.err{color:var(--err);margin-top:14px;font-size:13px}

/* ---- age gate ---- */
.gate{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:60;padding:20px}
.gate .box{max-width:420px;width:100%;text-align:center;border:1px solid var(--line);
  border-radius:20px;padding:36px 24px;background:var(--card)}

/* Phones: let the grid, media and review rail touch both edges. */
@media(max-width:639px){
  .grid,.rev,.pdp .media{margin-inline:calc(var(--gut) * -1)}
  .grid,.rev{border-inline:0}
}
@media(min-width:640px){
  :root{--gut:26px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .rev{grid-template-columns:repeat(2,1fr)}
  .card .b{padding:17px}
  .nm{font-size:14px}.pr{font-size:20px}
  .cols{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  :root{--gut:40px}
  nav .links{display:flex}
  .hero{padding:104px 0 88px}
  section.band{padding:70px 0}
  .grid{grid-template-columns:repeat(4,1fr)}
  .rev{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1.05fr 1fr;gap:54px;padding:50px 0}
  .pdp .media{border:1px solid var(--line)}
  .news{grid-template-columns:1fr 1fr;gap:56px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  [data-rv]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- motion ----
   Everything below is transition/keyframe work. It is grouped so the reduced-
   motion block at the end can switch off the whole layer in one place rather
   than chasing individual rules. */

/* Page entrance: content settles instead of snapping in. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .kicker{animation:rise .6s var(--ease) both}
.hero h1{animation:rise .7s .06s var(--ease) both}
.hero .cta{animation:rise .7s .14s var(--ease) both}

/* Cards lift on hover and the image pushes in slightly — the whole tile reacts,
   not just the picture. */
.card{transition:transform .4s var(--ease),border-color .3s}
@media(hover:hover){
  .card:hover{transform:translateY(-3px);z-index:1}
  .card:hover .nm{color:var(--accent)}
}
.nm{transition:color .25s}
.card .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg),transparent 42%);opacity:.5;
  transition:opacity .4s var(--ease);pointer-events:none}
.card:hover .ph::after{opacity:.18}

/* Buttons: press feedback everywhere, not only on .btn. */
button.add{transition:transform .18s var(--ease),background .22s,opacity .2s}
button.add:hover:not([disabled]){background:var(--accent)}
button.add:active:not([disabled]){transform:scale(.97)}

/* Tier chips on the PDP. */
.tier{transition:border-color .22s,background .22s,transform .18s var(--ease)}
.tier:active{transform:scale(.97)}

/* Sheet contents stagger in behind the panel, so opening the drawer reads as
   one motion rather than a panel that arrives already full. */
.sheet .panel > *{opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.sheet:target .panel > *{opacity:1;transform:none}
.sheet:target .panel > *:nth-child(1){transition-delay:.10s}
.sheet:target .panel > *:nth-child(2){transition-delay:.16s}
.sheet:target .panel > *:nth-child(3){transition-delay:.22s}

/* Focus is visible and consistent — keyboard users get the same affordance the
   mouse gets from :hover. */
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Light mode needs real elevation: on a white ground, a 1px line alone makes
   cards read as flat table cells. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .potency div{box-shadow:0 1px 2px var(--shadow)}
:root[data-theme="light"] nav{box-shadow:0 1px 0 var(--line)}
:root[data-theme="light"] .card .ph::after{opacity:.12}
@media(prefers-color-scheme:light){
  :root:not([data-theme]) .card,
  :root:not([data-theme]) .potency div{box-shadow:0 1px 2px var(--shadow)}
  :root:not([data-theme]) .card .ph::after{opacity:.12}
}

/* Body copy uses the softened foreground; headings keep full contrast so the
   hierarchy survives the reduction. */
p,.facts,.rev p{color:var(--fg-soft)}
h1,h2,.eyebrow,.pr,.price{color:var(--fg)}

/* One switch for the whole motion layer. A visitor who asks for reduced motion
   gets a static page, not a slower version of the same animation. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ticker .t{animation:none;transform:none}
  [data-rv]{opacity:1;transform:none}
}

/* ---- tactile feedback ----
   :hover does nothing on a phone and :active fires for only a few ms, so a tap
   previously produced no visible acknowledgement at all — the page just
   navigated later. These rules are the touch equivalents.

   -webkit-tap-highlight-color is killed because the default is a grey box that
   fights the design; what replaces it is a deliberate press state. */
a,button,label,input,summary{-webkit-tap-highlight-color:transparent}
button,.btn,.sz,.tier,.tt,.fab,.icon,.burger,a.nm,a.coa{touch-action:manipulation}

/* Press state, applied on real pointer-down rather than :active alone so it
   survives the browser's click delay. */
.press{transform:scale(.96)!important;filter:brightness(.94)}
.btn.press,button.add.press,.fab.press{transform:scale(.965)!important}

/* Ripple: a single pseudo-element scaled from the tap point. No library, one
   paint, and it is removed on animation end so it cannot accumulate. */
.rip{position:relative;overflow:hidden}
.rip::after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);
  width:0;height:0;border-radius:50%;background:currentColor;opacity:.22;
  transform:translate(-50%,-50%);pointer-events:none}
.rip.go::after{animation:rip .55s var(--ease) forwards}
@keyframes rip{to{width:260%;padding-bottom:260%;opacity:0}}

/* The add-to-bag button confirms rather than just navigating. */
button.add.done,.btn.done{background:var(--accent);color:var(--bg)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.pop{animation:pop .34s var(--ease)}

/* The bag badge and FAB count pulse when the cart changes, so the result of the
   tap is visible even when the button is already off-screen. */
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.count.bump,.fab .n.bump{animation:bump .42s var(--ease)}

/* Disabled must LOOK unavailable, not merely ignore the tap. */
button[disabled],.btn[disabled]{cursor:not-allowed;opacity:.42}

@media(prefers-reduced-motion:reduce){
  .rip.go::after{animation:none}
  .pop,.count.bump,.fab .n.bump{animation:none}
  .press{transform:none!important}
}

/* ---- mobile touch sizing ----
   Everything a finger hits is >=44px, which is the documented minimum on iOS
   and roughly the pad of an adult thumb. Before this the toggle was 38px, the
   bag 35px and the burger 35px — all individually "fine" and collectively a nav
   you miss. Desktop can be tighter because a cursor is precise. */
.tt{width:44px;height:44px}
.icon{padding:12px 16px;min-height:44px;display:inline-flex;align-items:center}
.burger{padding:14px 12px;min-height:44px;justify-content:center}
button.add{min-height:48px;font-size:12px}
.btn{min-height:48px}
.sheet .x{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0}
.sheet nav.menu a{min-height:56px;display:flex;align-items:center}
.coa{padding-block:6px}
.rm{min-height:44px;display:inline-flex;align-items:center}
/* The PDP tier grid has the full page width, so it can stay 3-up — but the rows
   still need to be thumb-sized. */
.tier{min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.qty button{width:46px;height:46px}
.field input{min-height:48px}
.field button{min-height:48px}
input.f{min-height:48px}

@media(min-width:1024px){
  .tt{width:38px;height:38px}
  .icon{min-height:36px;padding:8px 13px}
  button.add{min-height:42px}
}

/* Price + unit on the card: "$34.99 / 3.5g · Eighth". The unit is the quieter
   half so the number still leads. */
.pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.per{font-family:Inter, system-ui, -apple-system, sans-serif;font-size:11px;color:var(--faint);letter-spacing:.02em}

/* ---- checkout ----
   Expiry and CVV are short fields; stacking them full width made the form look
   longer and more daunting than it is. */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#pay label{display:block;margin-top:16px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
input.f{width:100%;margin-top:7px;background:var(--card);color:var(--fg);
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:16px;
  letter-spacing:.04em;transition:border-color .2s,background .2s}
/* 16px minimum: anything smaller makes iOS Safari ZOOM the page on focus, which
   throws the layout sideways mid-checkout. */
input.f:focus{outline:none;border-color:var(--fg);background:var(--bg)}
input.f::placeholder{color:var(--faint);letter-spacing:.02em}
.line.compact{padding:10px 0}
.line.compact img{width:44px;height:44px;border-radius:8px}
.err{color:#e0736c;margin-top:14px;font-size:13px;min-height:1em}

/* ---- account sheet ----
   Reuses the sheet/panel/field vocabulary — the only genuinely new pieces are
   the code input (large, spaced digits: six glyphs someone is copying from an
   email) and the signed-in dot on the nav pill. Labels match #pay's. */
.acct-pane{padding:6px 20px 26px}
.acct-pane label{display:block;margin-top:16px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
input.f.code{font-size:22px;letter-spacing:.4em;text-align:center;
  font-variant-numeric:tabular-nums}
.acct-pane .rm{text-decoration:underline;text-underline-offset:3px}
.icon .dot{display:inline-block;width:6px;height:6px;border-radius:999px;
  background:var(--accent);margin-left:6px}

/* ---- stellar additions: utilities in place of inline styles (the page's CSP allows no inline style) ---- */
.mt-xs{margin-top:4px}.mt-s{margin-top:8px}.mt-m{margin-top:16px}.mt-l{margin-top:24px}.mb-s{margin-bottom:12px}
.pad{padding:20px 26px}.pad-x{padding:0 20px 24px}
.wide{width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
.btn.solid.wide{margin-top:18px}
.dim{color:var(--dim)}.faint{color:var(--faint)}.fg{color:var(--fg)}
.small{font-size:12px}.tiny{font-size:11px}.center{text-align:center;justify-content:center}
.narrow{max-width:560px}.band.flat{border-top:0}
.underline{border-bottom:1px solid var(--line)}
.big{font-size:clamp(34px,8vw,58px)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:14px;color:var(--fg-soft);text-transform:none;letter-spacing:0}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.gate-brand{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:300;font-size:19px;letter-spacing:.32em}
.gate-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:300;font-size:32px;margin:24px 0 10px}
.small-eyebrow{font-size:18px;margin-bottom:10px}
.ph-empty{aspect-ratio:1;background:var(--card)}
.prose-p{line-height:1.8}
#pay label{display:block;margin-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
#pay label.check{text-transform:none;letter-spacing:0;font-size:14px;color:var(--fg-soft)}
#pay .btn[disabled]{opacity:.6}