/* ════════════════════════════════════════════════════════════════════
   Standard CBD · v4 Redesign — SHARED CORE  (core.css)
   Enqueued site-wide by mu-plugins/falcon-redesign.php and linked by the
   staging draft HTML at /assets/redesign/core.css.

   Every page inherits: tokens · caramel toggle · type · buttons · layout ·
   9 trust icons · alive-hero engine styles · the PDP component library ·
   motion baseline.

   PER-PRODUCT WORLDS only set the four --accent* vars (dark + caramel) on
   the .std root and supply content. Default accent follows --gold, so a
   world-less page (homepage / info pages) is all-gold automatically.
   ════════════════════════════════════════════════════════════════════ */

/* ─── reset ─────────────────────────────────────────────────────────── */
.std, .std * { box-sizing: border-box; }
.std { margin: 0; padding: 0; }
.std a { text-decoration: none; color: inherit; }
.std img { display: block; max-width: 100%; }

/* ─── tokens (dark default) ─────────────────────────────────────────── */
.std {
  --bg:#08090a; --bg-2:#0c0e10; --surface:#13161a; --surface-2:#1a1e23;
  --line:rgba(243,239,230,0.08); --line-2:rgba(243,239,230,0.15);
  --ink:#f3efe6; --ink-mid:#c8c1b2; --ink-dim:#8c8678;
  --gold:#d4a574; --gold-bright:#ecca9c; --gold-deep:#b88652; --gold-glow:rgba(212,165,116,0.35);
  --media-bg:#0f1216;            /* fixed: was a self-referential var on the homepage */
  --section-deep:#050607;
  /* generic accent — per-product worlds override these four (dark + caramel).
     The default chain follows --gold so a world-less page is all-gold. */
  --accent:var(--gold); --accent-bright:var(--gold-bright); --accent-deep:var(--gold-deep); --accent-glow:var(--gold-glow);
  --display:'Young Serif',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --z-base:1; --z-raised:5; --z-sticky:50; --z-nav:100;
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
.std ::selection { background:var(--accent); color:#1a1410; }

/* ─── caramel light theme (site-wide toggle) ────────────────────────── */
.std[data-theme="caramel"] {
  --bg:#e6c79c; --bg-2:#dcb98a; --surface:#f1ddc1; --surface-2:#e8cfa9;
  --line:rgba(58,38,18,0.16); --line-2:rgba(58,38,18,0.26);
  --ink:#2a1c10; --ink-mid:#5e4631; --ink-dim:#8a7155;
  --gold:#9a5a1d; --gold-bright:#b06f27; --gold-deep:#7d4715; --gold-glow:rgba(154,90,29,0.3);
  --media-bg:#e2c294; --section-deep:#e9cda3;
}

/* ─── theme toggle pill + View-Transitions circular reveal ──────────── */
.std-theme-toggle { position:fixed; top:1.2rem; right:1.4rem; z-index:var(--z-nav); display:inline-flex; align-items:center; gap:0.55rem; background:rgba(20,16,14,0.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:999px; padding:0.4rem 0.85rem 0.4rem 0.45rem; cursor:pointer; color:var(--ink-mid); font-family:var(--sans); font-size:0.76rem; font-weight:600; letter-spacing:0.04em; transition:border-color .3s, color .3s; }
.std[data-theme="caramel"] .std-theme-toggle { background:rgba(255,250,242,0.55); }
.std-theme-toggle:hover { border-color:var(--gold); color:var(--ink); }
.tt-track { position:relative; width:42px; height:24px; border-radius:999px; background:linear-gradient(90deg, var(--surface-2), var(--surface)); border:1px solid var(--line-2); display:inline-block; }
.tt-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow:0 2px 6px rgba(0,0,0,0.35); transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.std[data-theme="caramel"] .tt-thumb { transform:translateX(18px); }
::view-transition-old(root){ animation:none; }
::view-transition-new(root){ animation:stdThemeReveal .45s cubic-bezier(.16,1,.3,1); }
@keyframes stdThemeReveal { from{ clip-path:circle(0% at var(--tx,95%) var(--ty,5%)); } to{ clip-path:circle(150% at var(--tx,95%) var(--ty,5%)); } }
@media (prefers-reduced-motion: reduce){ ::view-transition-new(root){ animation:none; } }

/* ─── type primitives ───────────────────────────────────────────────── */
.std-display { font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-0.025em; text-wrap:balance; }
.std-display em { color:var(--accent); font-style:normal; }      /* Young Serif has no italic → accent COLOR for emphasis */
.std-h1 { font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,3.8vw,3.3rem); line-height:1.06; letter-spacing:-0.02em; margin:0; text-wrap:balance; }
.std-h1 em { color:var(--accent); font-style:normal; }
.std-h2 { font-family:var(--display); font-weight:400; font-size:clamp(2rem,3.8vw,3.1rem); line-height:1.08; letter-spacing:-0.02em; margin:0; text-wrap:balance; }
.std-h2 em { color:var(--accent); font-style:normal; }
.std-lede { color:var(--ink-mid); font-size:1.08rem; line-height:1.6; text-wrap:pretty; }
.std-eyebrow { font-size:0.74rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-bright); margin:0 0 1rem; }

/* ─── buttons ───────────────────────────────────────────────────────── */
.std-btn { font-family:var(--sans); font-size:0.92rem; font-weight:600; letter-spacing:0.01em; padding:0.95rem 1.7rem; border-radius:9px; transition:transform 280ms cubic-bezier(.16,1,.3,1), background 280ms, box-shadow 280ms, color 200ms; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:0.55rem; line-height:1; }
.std-btn-primary { background:var(--gold); color:#18120b; }
.std-btn-primary:hover { background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 12px 34px -10px var(--gold-glow); }
.std-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.std-btn-ghost:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.std-btn .ar { transition:transform 280ms cubic-bezier(.16,1,.3,1); }
.std-btn:hover .ar { transform:translateX(3px); }

/* ─── layout ────────────────────────────────────────────────────────── */
.std-wrap { max-width:1200px; margin:0 auto; padding-left:2rem; padding-right:2rem; }
.std-sec { padding:clamp(5rem,10vw,9rem) 0; position:relative; }

/* ─── 9 trust icons — each uniquely animated on hover, pop on scroll-in ─ */
.std-runes { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:2.6rem 0; }
.std-runes-row { display:flex; justify-content:center; gap:clamp(1rem,3vw,2.4rem); flex-wrap:wrap; }
.std-runes-row + .std-runes-row { margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.std-rune { display:flex; flex-direction:column; align-items:center; gap:0.55rem; min-width:84px; }
.std-ring { position:relative; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 32%, rgba(212,165,116,0.28), rgba(212,165,116,0.07) 68%), var(--surface-2); border:1px solid rgba(212,165,116,0.32); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
.std-ring svg { width:27px; height:27px; stroke:var(--gold-bright); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.std-ring svg, .std-ring svg * { transform-box:fill-box; transform-origin:center; }
.std-ring .bub { fill:var(--gold-bright); stroke:none; opacity:0; }
.std-ring::after { content:''; position:absolute; inset:0; border-radius:50%; opacity:0; box-shadow:0 0 0 1px rgba(212,165,116,0.5), 0 0 20px -2px var(--gold-glow); transition:opacity .35s; }
.std-rune:hover .std-ring { transform:translateY(-4px); border-color:rgba(212,165,116,0.6); box-shadow:0 14px 30px -12px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.08); }
.std-rune:hover .std-ring::after { opacity:1; }
@keyframes stdBeam { to { transform:rotate(360deg) } }
.std-rune span { font-size:0.66rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-mid); text-align:center; }
/* per-icon unique animations (hover only → zero idle cost) */
.std-rune:hover .ic-truck { animation:icDrive .6s ease; }
@keyframes icDrive { 0%{transform:translateX(-2px)} 55%{transform:translateX(2px)} 100%{transform:translateX(0)} }
.std-rune:hover .ic-badge { animation:icSpin .85s cubic-bezier(.16,1,.3,1); }
@keyframes icSpin { to{transform:rotate(360deg)} }
.std-rune:hover .ic-chute { animation:icDrift 1s ease; }
@keyframes icDrift { 0%{transform:translateY(-3px) rotate(-4deg)} 50%{transform:translateY(2px) rotate(4deg)} 100%{transform:translateY(0) rotate(0)} }
.std-rune:hover .ic-lock .sh { animation:icClick .5s ease; }
@keyframes icClick { 0%{transform:translateY(-2.5px)} 60%{transform:translateY(0.5px)} 100%{transform:translateY(0)} }
.std-rune:hover .ic-flask .bub { animation:icBubble .9s ease infinite; }
.std-rune:hover .ic-flask .b2 { animation-delay:.3s; }
@keyframes icBubble { 0%{transform:translateY(2px);opacity:0} 40%{opacity:1} 100%{transform:translateY(-7px);opacity:0} }
.std-rune:hover .ic-leaf { animation:icSway .8s ease; }
@keyframes icSway { 0%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} 100%{transform:rotate(0)} }
.std-rune:hover .ic-flag .fl { animation:icWave .7s ease; transform-origin:left center; }
@keyframes icWave { 0%,100%{transform:skewX(0)} 30%{transform:skewX(-8deg)} 70%{transform:skewX(8deg)} }
.std-rune:hover .ic-pest .sl { animation:icStrike .4s ease; }
.std-rune:hover .ic-gmo .sp { animation:icGrow .6s ease; transform-origin:50% 100%; }
.std-rune:hover .ic-gmo .sl { animation:icStrike .4s ease .1s; }
@keyframes icStrike { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes icGrow { from{transform:scaleY(.6)} to{transform:scaleY(1)} }
@keyframes icPop { 0%{transform:scale(.7);opacity:.35} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.std-runes.seen .std-ring { animation:icPop .55s cubic-bezier(.34,1.56,.64,1) both; }
.std-runes.seen .std-runes-row .std-rune:nth-child(2) .std-ring { animation-delay:.06s; }
.std-runes.seen .std-runes-row .std-rune:nth-child(3) .std-ring { animation-delay:.12s; }
.std-runes.seen .std-runes-row .std-rune:nth-child(4) .std-ring { animation-delay:.18s; }
.std-runes.seen .std-runes-row .std-rune:nth-child(5) .std-ring { animation-delay:.24s; }

/* ─── alive-hero shared bits (engine lives in core.js) ──────────────── */
.std-spotlight { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s; mix-blend-mode:screen; background:radial-gradient(circle 380px at calc(var(--mx,50) * 1%) calc(var(--my,50) * 1%), var(--accent-glow), transparent 60%); }
.is-hot .std-spotlight { opacity:1; }
.std-particles { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.std-meteor { position:absolute; z-index:2; width:1px; height:64px; pointer-events:none; opacity:0; background:linear-gradient(to bottom, transparent, var(--gold) 35%, var(--ink) 55%, transparent); filter:drop-shadow(0 0 6px var(--gold-glow)); animation:stdMeteor 7s linear infinite; }
@keyframes stdMeteor { 0%{opacity:0; transform:translate(-40px,-60px) rotate(38deg)} 8%{opacity:.9} 55%{opacity:.9} 100%{opacity:0; transform:translate(360px,520px) rotate(38deg)} }

/* ════════════════════════════════════════════════════════════════════
   PDP COMPONENT LIBRARY — shared by every product world, accent-driven
   ════════════════════════════════════════════════════════════════════ */

/* PDP hero — accent-driven gradient world. Worlds may tune --hero-base / --spot;
   the gradient hero flips fully in caramel (image heroes stay dark — homepage only). */
.std-pdp-hero { position:relative; overflow:hidden; isolation:isolate; padding-top:5rem; --hero-base:#120a09; --spot:rgba(243,239,230,0.5);
  background:
    radial-gradient(ellipse 70% 90% at 12% 25%, var(--accent-glow) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 90% 80%, var(--accent-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-base) 0%, var(--bg) 70%); }
.std[data-theme="caramel"] .std-pdp-hero { --hero-base:#ecd0a6; --spot:rgba(90,55,25,0.18); }
.std-pdp-hero::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5; background-image:radial-gradient(circle, var(--spot) 1.5px, transparent 2px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 35%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 60% 60% at 30% 35%, #000 0%, transparent 70%); }
.std-pdp-hero-grid { position:relative; z-index:var(--z-raised); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-top:2rem; padding-bottom:4rem; }
@media (max-width:900px){ .std-pdp-hero-grid{ grid-template-columns:1fr; } }

/* hero stage — floating product on an accent glow */
.std-stage { position:relative; display:grid; place-items:center; min-height:440px; perspective:1300px; }
.std-stage-glow { position:absolute; width:70%; height:70%; border-radius:50%; z-index:0; background:radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); filter:blur(30px); animation:stdPulse 5s ease-in-out infinite; }
@keyframes stdPulse { 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.1); opacity:1 } }
.std-floatwrap { position:relative; z-index:1; display:grid; place-items:center; transform-style:preserve-3d; transform:rotateX(var(--py,0deg)) rotateY(var(--px,0deg)); transition:transform .3s ease-out; will-change:transform; }
.std-floatwrap img { width:78%; max-width:420px; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 50px var(--accent-glow)); animation:stdFloat 8s ease-in-out infinite; }
@keyframes stdFloat { 0%,100%{ transform:translateY(0) rotate(-1.5deg) } 50%{ transform:translateY(-14px) rotate(1.5deg) } }

/* breadcrumb + buy box */
.std-bc { font-size:0.78rem; color:var(--ink-dim); margin:0 0 1.4rem; letter-spacing:0.03em; }
.std-bc a:hover { color:var(--accent-bright); }
.std-bc .sep { opacity:0.5; margin:0 0.45rem; }
.std-stars { display:flex; align-items:center; gap:0.6rem; margin-bottom:1.3rem; color:var(--accent-bright); letter-spacing:0.08em; }
.std-stars .c { color:var(--ink-dim); font-size:0.85rem; letter-spacing:0; }
.std-lore { color:var(--ink-mid); font-size:1.05rem; line-height:1.65; margin:0 0 1.8rem; max-width:46ch; text-wrap:pretty; }
.std-lore strong { color:var(--ink); }
.std-price-row { display:flex; align-items:baseline; gap:0.8rem; margin-bottom:1.5rem; }
.std-bigprice { font-family:var(--display); font-size:2.3rem; color:var(--ink); }
.std-was { color:var(--ink-dim); text-decoration:line-through; font-family:var(--sans); font-size:0.62em; margin-right:0.5rem; font-weight:400; }
.std-price-note { font-size:0.82rem; color:var(--ink-dim); }
.std-opt { margin-bottom:1.4rem; }
.std-opt-label { font-size:0.74rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:0.6rem; display:block; }
.std-chips { display:flex; gap:0.5rem; flex-wrap:wrap; }
.std-chip { background:var(--surface); border:1px solid var(--line); color:var(--ink-mid); padding:0.55rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1); font-family:inherit; }
.std-chip:hover { border-color:var(--line-2); color:var(--ink); transform:translateY(-1px); }
.std-chip.sel { border-color:var(--accent-bright); color:var(--accent-bright); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); box-shadow:0 0 0 1px var(--accent-glow), 0 4px 16px -6px var(--accent-glow); }
.std-cart { display:flex; gap:0.7rem; align-items:stretch; margin:1.8rem 0 1.1rem; }
.std-qty { display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.std-qty button { background:transparent; border:0; color:var(--ink-mid); width:42px; font-size:1.1rem; cursor:pointer; font-family:inherit; transition:.2s; }
.std-qty button:hover { background:var(--surface-2); color:var(--ink); }
.std-qty input { width:40px; background:transparent; border:0; color:var(--ink); text-align:center; font-size:1rem; font-weight:600; font-family:inherit; -moz-appearance:textfield; }
.std-qty input::-webkit-outer-spin-button,.std-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.std-atc { flex:1; border:0; border-radius:10px; padding:0 1.8rem; min-height:54px; cursor:pointer; font-family:var(--sans); font-weight:700; font-size:0.95rem; letter-spacing:0.03em; text-transform:uppercase; color:#160d0b; background:linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 26px -8px var(--accent-glow); position:relative; overflow:hidden; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s; }
.std-atc:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 36px -8px var(--accent-glow); }
.std-atc:active { transform:translateY(0); }
.std-atc::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); pointer-events:none; }
.std-atc::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); transition:left .8s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.std-atc:hover::before { left:100%; }
.std-atc.added { background:linear-gradient(180deg,#4ea35f,#2f7a45); color:#fff; }
.std-ship { display:flex; align-items:center; gap:0.5rem; color:var(--ink-dim); font-size:0.85rem; }
.std-ship::before { content:''; width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,0.6); }

/* sticky add-to-cart bar */
.std-stickybar { position:fixed; top:0; left:0; right:0; z-index:var(--z-sticky); transform:translateY(-100%); transition:transform .4s cubic-bezier(.16,1,.3,1); background:rgba(8,9,10,0.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2); }
.std[data-theme="caramel"] .std-stickybar { background:rgba(245,235,220,0.9); }
.std-stickybar.show { transform:translateY(0); }
.std-stickybar-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.65rem 2rem; }
.std-sb-info { display:flex; align-items:center; gap:0.9rem; min-width:0; }
.std-sb-thumb { width:38px; height:38px; border-radius:8px; object-fit:contain; background:var(--surface); flex:none; }
.std-sb-name { font-family:var(--display); font-size:1.02rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.std-sb-price { color:var(--accent-bright); font-weight:700; white-space:nowrap; }
.std-sb-atc { flex:none; min-height:44px; padding:0 1.5rem; font-size:0.82rem; }
@media (max-width:600px){ .std-sb-thumb, .std-sb-name span { display:none; } .std-stickybar-inner { padding:0.6rem 1.2rem; } }

/* the blend / dose cards */
.std-blend { background:linear-gradient(180deg, var(--bg) 0%, var(--section-deep) 100%); border-top:1px solid var(--line); }
.std-blend-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.2rem; margin-top:3rem; }
.std-dose { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.3rem; background:radial-gradient(ellipse 100% 60% at 50% 0%, var(--accent-glow), transparent 60%), var(--surface); transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s; }
.std-dose::before { content:''; position:absolute; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg, var(--accent-bright), transparent); transition:width .55s cubic-bezier(.16,1,.3,1); }
.std-dose:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 40px -16px var(--accent-glow); }
.std-dose:hover::before { width:100%; }
.std-dose .mg { font-family:var(--display); font-size:1.9rem; color:var(--accent-bright); display:block; line-height:1; margin-bottom:0.5rem; transition:text-shadow .4s; }
.std-dose:hover .mg { text-shadow:0 0 18px var(--accent-glow); }
.std-dose .nm { display:block; font-weight:600; color:var(--ink); font-size:0.98rem; }
.std-dose .ds { display:block; color:var(--ink-dim); font-size:0.85rem; margin-top:0.3rem; line-height:1.45; }
/* photo-topped ingredient card — real macro imagery (warmer than icons) */
.std-dose-photo { padding:0; }
.std-dose-photo::before { display:none; }
.std-dose-img { display:block; width:100%; aspect-ratio:16/10; overflow:hidden; position:relative; }
.std-dose-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.std-dose-img::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,9,10,0) 60%, var(--surface)); }
.std-dose-photo:hover .std-dose-img img { transform:scale(1.05); }
.std-dose-body { display:block; padding:1.05rem 1.35rem 1.4rem; }

/* ═══════════ THE DECK — blackjack-style plan selector (stack -> dealer fan -> pick) ═══════════ */
.std-deck { position:relative; margin-top:3rem; }
.std-deck-felt { position:relative; height:404px; overflow:visible;
  background:radial-gradient(ellipse 54% 66% at 50% 94%, var(--accent-glow), transparent 72%), radial-gradient(ellipse 80% 54% at 50% 104%, rgba(212,165,116,0.13), transparent 74%); }
.std-deck:not(.is-fanned) .std-deck-felt { cursor:pointer; }
.std-pcard { position:absolute; left:50%; bottom:26px; margin-left:-86px; width:172px; height:276px;
  display:flex; align-items:center; justify-content:center; padding:1.25rem 0.95rem; text-align:center;
  border:1px solid var(--line-2); border-radius:18px; cursor:pointer; color:var(--ink); font-family:inherit;
  background:linear-gradient(180deg, rgba(255,251,242,0.13), rgba(255,251,242,0.03) 10%, transparent 26%), linear-gradient(158deg, rgba(255,251,242,0.05), transparent 42%), radial-gradient(140% 92% at 50% 3%, rgba(212,165,116,0.11), rgba(212,165,116,0.02) 40%, transparent 62%), linear-gradient(177deg, var(--surface-2), var(--surface));
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.9), 0 14px 30px -18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,250,240,0.14), inset 0 -1px 0 rgba(0,0,0,0.3);
  transform-origin:50% 50%; transform:rotate(0deg);
  transition:transform .62s cubic-bezier(.16,1,.3,1), box-shadow .42s, border-color .42s, opacity .42s;
  will-change:transform; -webkit-tap-highlight-color:transparent; }
.std-pcard::before { content:''; position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none; opacity:0.7;
  background:linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 16%, transparent 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .4s, background .4s; }
.std-pcard-face { position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; gap:0.42rem;
  transition:transform .4s cubic-bezier(.16,1,.3,1); }
.std-pcard-mg { font-family:var(--display); font-size:2rem; font-weight:700; line-height:1; letter-spacing:-0.01em; color:var(--accent-bright); text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.std-pcard-mg small { font-size:0.56rem; font-weight:600; color:var(--ink-dim); text-shadow:none; }
.std-pcard-nm { font-weight:600; font-size:1.05rem; color:var(--ink); }
.std-pcard-ds { font-size:0.73rem; color:var(--ink-dim); line-height:1.32; max-width:100%; padding:0 0.7rem; overflow-wrap:break-word; text-wrap:balance; }
.std-pcard-ds::before { content:''; display:block; width:26px; height:1px; margin:0.15rem auto 0.5rem; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0.65; }
.std-pcard-corner { position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1; color:var(--gold-bright); pointer-events:none; }
.std-pcard-corner b { font-family:var(--display); font-size:0.9rem; font-weight:700; }
.std-pcard-corner .std-pip { width:11px; height:11px; fill:var(--gold); }
.std-pcard-corner.tl { top:0.58rem; left:0.68rem; }
.std-pcard-corner.br { bottom:0.58rem; right:0.68rem; transform:rotate(180deg); }
.std-pcard-crown { position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1a130b;
  font-size:0.56rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.22rem 0.6rem; border-radius:999px;
  box-shadow:0 6px 16px -6px var(--gold-glow); transition:opacity .35s; }
.std-deck:not(.is-fanned) .std-pcard-crown { opacity:0; pointer-events:none; }
.std-deck.is-fanned .std-pcard:hover { border-color:var(--accent); box-shadow:0 54px 92px -30px rgba(0,0,0,0.92), 0 18px 34px -18px rgba(0,0,0,0.6), 0 0 0 1px var(--accent-glow); }
.std-deck.is-fanned .std-pcard:hover .std-pcard-face { transform:translateY(-7px); }
.std-pcard.is-selected { border-color:var(--accent-bright); box-shadow:0 56px 96px -24px var(--accent-glow), 0 18px 36px -18px rgba(0,0,0,0.55), 0 0 0 1.5px var(--accent-bright), inset 0 0 34px -8px var(--accent-glow); }
.std-pcard.is-selected::before { opacity:1; background:linear-gradient(155deg, var(--accent-bright), transparent 58%); }
.std-deck-bar { display:flex; flex-direction:column; align-items:center; gap:0.85rem; margin-top:0.6rem; }
.std-deck-toggle { background:transparent; border:1px solid var(--line-2); color:var(--ink); border-radius:999px;
  padding:0.7rem 1.7rem; font-family:inherit; font-size:0.85rem; font-weight:600; letter-spacing:0.01em; cursor:pointer;
  transition:border-color .3s, color .3s; }
.std-deck-toggle:hover { border-color:var(--gold); color:var(--gold-bright); }
.std-deck-toggle .std-deck-toggle-stack { display:none; }
.std-deck.is-fanned .std-deck-toggle-fan { display:none; }
.std-deck.is-fanned .std-deck-toggle-stack { display:inline; }
.std-deck-pick { color:var(--ink-mid); font-size:0.92rem; text-align:center; min-height:1.3em; margin:0; }
.std-deck-pick b { color:var(--accent-bright); font-weight:700; }
.std-deck-atc { margin-top:0.2rem; align-self:center; }
@keyframes stdDeckBreathe { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.std-deck:not(.is-fanned) .std-deck-felt { animation:stdDeckBreathe 4.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .std-pcard{ transition:none; } .std-deck:not(.is-fanned) .std-deck-felt{ animation:none; } }
@media (max-width:680px){
  .std-deck-felt { height:auto; display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; padding:0.4rem 0; animation:none !important; }
  .std-pcard { position:relative; left:auto; bottom:auto; margin:0; width:100%; height:auto; min-height:148px; transform:none !important; transform-origin:center; }
  .std-pcard-corner.br { display:none; }
  .std-deck-toggle { display:none; }
}

/* deck — one-time / subscribe mode toggle */
.std-deck-mode { display:inline-flex; padding:4px; gap:3px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); }
.std-deck-mode button { background:transparent; border:0; color:var(--ink-mid); font-family:inherit; font-size:0.82rem; font-weight:600; letter-spacing:0.01em; padding:0.5rem 1.15rem; border-radius:999px; cursor:pointer; transition:color .25s, background .25s, box-shadow .25s; white-space:nowrap; }
.std-deck-mode button:hover { color:var(--ink); }
.std-deck-mode button.is-on { color:#1a1206; background:linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow:0 2px 10px -3px var(--gold-glow); }
.std-deck-mode button .std-mode-save { font-size:0.7rem; opacity:0.85; margin-left:0.3rem; }

/* deck — variation pickers (strain / colour) */
.std-deck-vars { display:flex; flex-direction:column; gap:0.65rem; align-items:center; margin:0 auto 1.5rem; max-width:560px; }
.std-vargroup { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; align-items:center; }
.std-vargroup-label { width:100%; text-align:center; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-dim); margin-bottom:0.1rem; }
.std-varchip { background:var(--surface); border:1px solid var(--line-2); color:var(--ink-mid); border-radius:999px; padding:0.48rem 1rem; font-family:inherit; font-size:0.82rem; font-weight:500; cursor:pointer; transition:border-color .25s, color .25s, background .25s, box-shadow .25s; }
.std-varchip:hover { border-color:var(--gold); color:var(--ink); }
.std-varchip.sel { border-color:var(--accent-bright); color:var(--ink); background:linear-gradient(180deg, var(--accent-glow), transparent); box-shadow:inset 0 0 0 1px var(--accent-bright); }
.std-deck.needs-variation .std-deck-vars { animation:stdNudge .4s ease; }
@keyframes stdNudge { 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.std-deck.is-sub .std-pcard.is-selected::before { background:linear-gradient(155deg, var(--gold-bright), transparent 58%); }
@media (max-width:680px){ .std-deck-mode { width:100%; justify-content:center; } }

/* experience / feature split */
.std-feel-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.std-feel-img { border-radius:20px; overflow:hidden; aspect-ratio:4/5; background:radial-gradient(ellipse 80% 70% at 50% 40%, var(--accent-glow), var(--section-deep)); display:grid; place-items:center; border:1px solid var(--line); }
.std-feel-img img { width:72%; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)); }
.std-feel ul { list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1rem; }
.std-feel li { display:grid; grid-template-columns:auto 1fr; gap:0.8rem; color:var(--ink-mid); line-height:1.5; }
.std-feel li svg { width:18px; height:18px; color:var(--accent-bright); margin-top:3px; flex:none; }
.std-feel li strong { color:var(--ink); }

/* Q&A accordion (SEO-preserved headings) */
.std-qa { border-top:1px solid var(--line); }
.std-qa-item { border-bottom:1px solid var(--line); }
.std-qa-q { width:100%; background:none; border:0; cursor:pointer; padding:1.6rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; color:var(--ink); transition:color .25s; font-family:inherit; }
.std-qa-q:hover { color:var(--accent-bright); }
.std-qa-q h3 { font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2vw,1.45rem); margin:0; color:inherit; letter-spacing:-0.01em; }
.std-qa-q .ic { position:relative; width:20px; height:20px; flex:none; }
.std-qa-q .ic::before, .std-qa-q .ic::after { content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; background:var(--accent-bright); transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.16,1,.3,1); border-radius:2px; }
.std-qa-q .ic::after { transform:translate(-50%,-50%) rotate(90deg); }
.std-qa-item.open .std-qa-q .ic::after { transform:translate(-50%,-50%) rotate(0); }
.std-qa-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
.std-qa-a > div { overflow:hidden; }
.std-qa-item.open .std-qa-a { grid-template-rows:1fr; }
.std-qa-a p { color:var(--ink-mid); line-height:1.65; margin:0 0 1.6rem; max-width:72ch; }
.std-qa-a a { color:var(--accent-bright); }

/* PDP reviews — card grid with accent hairline + shimmer-on-hover */
.std-reviews-block { background:var(--bg-2); border-top:1px solid var(--line); }
.std-rev-head { display:flex; align-items:baseline; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.std-rev-head .big { font-family:var(--display); font-size:2.6rem; color:var(--accent-bright); }
.std-rev-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.3rem; }
.std-rev { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; padding:1.6rem; background:var(--surface); }
.std-rev::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent-bright), transparent); z-index:2; }
.std-rev::after { content:''; position:absolute; top:0; left:-120%; width:120%; height:100%; background:linear-gradient(120deg, transparent 35%, var(--accent-glow) 50%, transparent 65%); transition:left .9s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.std-rev:hover::after { left:100%; }
.std-rev .q { color:var(--ink); line-height:1.55; margin:0 0 1rem; font-size:1rem; }
.std-rev .w { font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }

/* product cards (shop grid + homepage secondary row) */
.std-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.5rem; }
.std-card { position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; transition:transform 350ms cubic-bezier(.16,1,.3,1), border-color 350ms, box-shadow 350ms; }
.std-card:hover { transform:translateY(-6px); border-color:rgba(212,165,116,0.3); box-shadow:0 26px 50px -24px rgba(0,0,0,0.65); }
.std-card-media { position:relative; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212,165,116,0.08), transparent 60%), var(--media-bg); }
.std-card-media img { width:74%; object-fit:contain; filter:drop-shadow(0 14px 28px rgba(0,0,0,0.45)); transition:transform 550ms cubic-bezier(.16,1,.3,1); }
.std-card:hover .std-card-media img { transform:scale(1.06); }
.std-card-tag { position:absolute; top:0.9rem; left:0.9rem; font-size:0.66rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-bright); background:rgba(8,9,10,0.55); border:1px solid var(--line-2); padding:0.25rem 0.6rem; border-radius:999px; }
.std-card-body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.std-card-cat { font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 0.5rem; }
.std-card h3 { font-family:var(--display); font-weight:500; font-size:1.12rem; line-height:1.2; letter-spacing:-0.01em; margin:0 0 0.4rem; }
.std-card-for { font-size:0.86rem; color:var(--ink-mid); margin:0 0 1rem; line-height:1.45; }
.std-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.std-card-price { font-family:var(--display); font-size:1.2rem; }
.std-card-go { font-size:0.82rem; font-weight:600; color:var(--accent); display:inline-flex; gap:0.3rem; align-items:center; }
.std-card-go .ar { transition:transform 250ms cubic-bezier(.16,1,.3,1); }
.std-card:hover .std-card-go .ar { transform:translateX(4px); }

/* gallery bento */
.std-gallery { border-top:1px solid var(--line); }
.std-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:0.9rem; margin-top:2.6rem; }
.std-bento figure { margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative; }
.std-bento figure::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(243,239,230,0.04); border-radius:16px; pointer-events:none; }
.std-bento img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.std-bento figure:hover img { transform:scale(1.06); }
.std-bento figcaption { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.2rem; font-family:var(--sans); font-size:0.82rem; font-weight:600; letter-spacing:0.02em; color:#fff; background:linear-gradient(0deg, rgba(10,6,5,0.82), transparent); transform:translateY(10px); opacity:0; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s; }
.std-bento figure:hover figcaption { transform:translateY(0); opacity:1; }
.std-bento .big { grid-column:span 2; grid-row:span 2; }
.std-bento .tall { grid-row:span 2; }
@media (max-width:760px){ .std-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .std-bento .big{ grid-column:span 2; grid-row:span 2; } .std-bento .tall{ grid-row:span 1; } }

/* simple page hero for content / info pages (no product engine) */
.std-phero { position:relative; overflow:hidden; text-align:center; padding:clamp(5rem,11vw,8.5rem) 0 clamp(3rem,6vw,4.5rem); border-bottom:1px solid var(--line); background:radial-gradient(ellipse 60% 80% at 50% -10%, var(--accent-glow), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
.std-phero .std-eyebrow { color:var(--accent-bright); }
.std-phero h1 { margin:0 auto 1.2rem; max-width:20ch; font-size:clamp(2.6rem,5.5vw,4.4rem); }
.std-phero .std-lede { max-width:62ch; margin:0 auto; font-size:1.15rem; }
.std-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:2.6rem; }

/* close + disclaimer */
.std-close { text-align:center; border-top:1px solid var(--line); background:radial-gradient(ellipse 55% 80% at 50% 40%, var(--accent-glow), transparent 62%), var(--bg); }
.std-close h2 { margin:0 auto 1.1rem; max-width:18ch; }
.std-close p { color:var(--ink-mid); max-width:46ch; margin:0 auto 2.2rem; line-height:1.6; }
.std-disc { border-top:1px solid var(--line); padding:2.2rem 0; }
.std-disc p { color:var(--ink-dim); font-size:0.8rem; line-height:1.6; max-width:80ch; margin:0 auto; text-align:center; }
.std-21 { display:inline-flex; align-items:center; gap:0.5rem; border:1px solid var(--line-2); border-radius:999px; padding:0.35rem 0.9rem; font-size:0.75rem; font-weight:600; letter-spacing:0.08em; color:var(--ink-mid); margin-bottom:1rem; }

/* ─── motion baseline (no-JS / reduced-motion = fully visible) ───────── */
.std-reveal { will-change:transform, opacity; }

/* hero entrance is CSS-only (never blanks on a throttled bg tab; gsap skips [data-hero]) */
[data-hero] .std-reveal { opacity:0; transform:translateY(20px); animation:stdRise .9s cubic-bezier(.16,1,.3,1) both; }
[data-hero] .std-reveal:nth-child(1){ animation-delay:.06s }
[data-hero] .std-reveal:nth-child(2){ animation-delay:.14s }
[data-hero] .std-reveal:nth-child(3){ animation-delay:.22s }
[data-hero] .std-reveal:nth-child(4){ animation-delay:.30s }
[data-hero] .std-reveal:nth-child(5){ animation-delay:.38s }
[data-hero] .std-reveal:nth-child(6){ animation-delay:.46s }
@keyframes stdRise { to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ [data-hero] .std-reveal { animation:none; opacity:1; transform:none } }
@media (max-width:980px){ .std-feel-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .std-hero-bg, .std-floatwrap { transform:none; } .std * { animation:none !important; } }

/* ════════════════════════════════════════════════════════════════════
   TYPE DIRECTION (2026-06-06): retired Young Serif → clean grotesk.
   Apple × Linear = one clean sans at all sizes, heavier + tighter for
   display. Reverses the earlier serif lock per Maverick's call. Wider wrap.
   ════════════════════════════════════════════════════════════════════ */
.std { --display:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif; }
.std-display { font-weight:700; letter-spacing:-0.035em; line-height:1.04; }
.std-h1 { font-weight:700; letter-spacing:-0.03em; }
.std-h2 { font-weight:600; letter-spacing:-0.025em; }
.std-qa-q h3, .std-card h3, .std-sb-name, .std-feature-body h3 { font-weight:600; letter-spacing:-0.012em; }
.std-bigprice, .std-dose .mg, .std-rev-head .big, .std-card-price, .std-price { font-weight:700; letter-spacing:-0.01em; }
.std-wrap { max-width:1320px; }