/* POWPAX product pages — reference-bar (cinematic) version.
   Built on this branch's grammar, not the V3 one: full-viewport flavor slams, display type at
   15vw, dark acts over macro texture, the configurator's buy grammar.
   The shell rules are byte-identical copies of index.html's inline CSS; everything new is
   .pdp- prefixed. */

/* ================= shell (mirrors index.html on this branch) ================= */
:root {
  --cream: hsl(40 33% 96%);
  --ink: hsl(240 3% 10%);
  --ink-soft: hsl(240 3% 16%);
  --head: hsl(240 3% 27%);
  --body-gray: hsl(45 4% 38%);
  --magenta: hsl(329 76% 59%);
  --magenta-deep: hsl(329 70% 48%);
  --lime: hsl(75 66% 49%);
  --orange: hsl(16 85% 58%);
  --yellow: hsl(46 96% 52%);
  --teal: hsl(194 48% 25%);
  --line: hsl(51 11% 87%);
  --sans: 'Inter', system-ui, sans-serif;
  --track-display: -.04em;
  --track-tight: -.02em;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto !important; overflow-x: clip; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; text-rendering: optimizeLegibility; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
::selection { background: var(--magenta); color: var(--cream); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--sans); font-weight: 900; line-height: .92; letter-spacing: var(--track-tight); text-transform: uppercase; text-wrap: balance; }

.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 5vw; transition: background .35s, padding .35s, box-shadow .35s; }
.nav.scrolled { background: hsl(40 33% 96% / .85); backdrop-filter: blur(12px); padding: .55rem 5vw; box-shadow: 0 1px 0 var(--line); }
.nav .logo img { height: 32px; width: auto; transform-origin: left center; transition: transform .35s; }
.nav.scrolled .logo img { transform: scale(.8125); }
.nav ul { display: flex; gap: 2rem; list-style: none; }
.nav a.link { font: 800 11px/1 var(--sans); letter-spacing: .2em; color: var(--head); text-decoration: none; transition: color .35s; }
.nav a.link:hover { color: var(--magenta-deep); }
.nav a.link:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 700px) { .nav ul { display: none; } }
/* over the flavor slam the nav needs a per-flavor link color (ink on yellow/orange, cream on
   magenta/teal); once scrolled it sits on the cream blur and goes back to the default */
.nav:not(.scrolled) a.link { color: var(--pdp-navink, var(--head)); }
.nav:not(.scrolled) a.link:hover { color: var(--pdp-navink, var(--head)); opacity: .7; }
/* the wordmark is magenta art, which vanishes on the Zaza panel — flatten it to the panel's ink
   while the nav is transparent, and hand the real magenta back once the cream bar appears */
.nav:not(.scrolled) .logo img { filter: var(--pdp-logo-filter, none); }

.gate { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; text-align: center; }
.gate-panel { position: absolute; inset: 0; background: var(--ink); }
.gate-panel.p2 { background: var(--magenta-deep); }
.gate-inner { position: relative; z-index: 2; color: var(--cream); display: grid; gap: 1.3rem; justify-items: center; padding: 0 6vw; }
.gate .badge { font: 800 11px/1 var(--sans); letter-spacing: .25em; color: var(--lime); font-variant-numeric: tabular-nums; }
.gate .gate-title { font: 900 clamp(2.6rem, 9vw, 6.5rem)/.95 var(--sans); text-transform: uppercase; text-wrap: balance; color: var(--cream); letter-spacing: var(--track-display); }
.gate p { color: hsl(40 10% 55%); font-size: 14px; max-width: 36ch; font-weight: 600; }
.gate-btns { display: flex; gap: .9rem; }
.gate-btns button, .gate-btns a { font: 800 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 1.1em 2.1em; border-radius: 99px; border: 2px solid var(--cream); background: none; color: var(--cream); text-decoration: none; transition: .2s; }
.gate-btns .yes { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.gate-btns .yes:hover { transform: scale(1.05); }
.gate-btns .yes:active { transform: scale(.97); }
.gate-btns a:hover { background: var(--cream); color: var(--ink); }
.gate-btns button:focus-visible, .gate-btns a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.btn { display: inline-block; font: 800 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; background: var(--magenta-deep); color: var(--cream); padding: 1.25em 2.5em; border-radius: 99px; text-decoration: none; border: 0; cursor: pointer; transition: background .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out; box-shadow: 0 1px 2px rgba(23,20,14,.10), 0 10px 24px rgba(206,40,120,.22); }
.btn:hover { background: var(--magenta); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23,20,14,.12), 0 16px 34px rgba(206,40,120,.30); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--magenta-deep); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; z-index: 300; background: var(--ink); color: var(--cream); padding: 1em 1.6em; font: 800 12px var(--sans); }
.skip:focus { left: 1rem; top: 1rem; }

.motion-toggle { position: fixed; bottom: 1rem; left: 1rem; z-index: 96; background: hsl(240 3% 12% / .75); color: var(--cream); border: 0; border-radius: 99px; font: 700 10px/1 var(--sans); letter-spacing: .2em; padding: .7em 1.1em; cursor: pointer; backdrop-filter: blur(4px); }
.motion-toggle:hover { background: hsl(240 3% 12% / .9); }
.motion-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.config-feats { list-style: none; display: grid; gap: .45rem; }
.config-feats li { font-weight: 600; font-size: .92rem; color: var(--head); padding-left: 1.2em; position: relative; }
.config-feats li::before { content: ''; position: absolute; left: 0; top: .42em; width: .5em; height: .5em; border-radius: 99px; background: var(--magenta-deep); }

footer { background: var(--ink); color: hsl(40 10% 60%); padding: 10vh 6vw 5vh; display: grid; gap: 5vh; justify-items: center; overflow: clip; position: relative; }
.foot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(hsl(240 3% 10% / .82), hsl(240 3% 10% / .5)); }
footer > * { position: relative; z-index: 2; }
.foot-word { font: 900 clamp(4rem, 18.5vw, 19rem)/.8 var(--sans); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--cream); text-align: center; user-select: none; }
footer .tag { font-weight: 600; font-style: italic; font-size: 1rem; color: var(--lime); }
footer .legal { font-size: 11px; max-width: 60ch; line-height: 1.7; text-wrap: pretty; font-variant-numeric: tabular-nums; text-align: center; }

/* ================= product page ================= */

/* --- act 1: the slam. same scene grammar as the homepage flavor blocks --- */
.pdp-slam { position: relative; min-height: 100svh; overflow: clip; display: grid; place-items: center; background: var(--pdp-panel, var(--ink)); padding: 12vh 0 0; }
/* the giant word is graphic, exactly as on the homepage flavor blocks: it stays white on every
   panel and is aria-hidden, with the real h1 sitting in the meta block in a color that clears
   4.5:1 against that panel (white on yellow is 1.63:1 — nowhere near readable as body text) */
.pdp-slam-word { position: absolute; inset: auto 0; font: 900 clamp(3.2rem, 15.5vw, 15rem)/.84 var(--sans); text-transform: uppercase; letter-spacing: var(--track-display); color: #fff; text-align: center; z-index: 0; opacity: .92; white-space: nowrap; }
.pdp-slam-stick { position: relative; z-index: 1; height: 78vh; display: grid; place-items: center; }
.pdp-slam-stick img { height: 78vh; width: auto; max-width: 84vw; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.22)) drop-shadow(0 32px 52px rgba(0,0,0,.34)); }
.pdp-slam-meta { position: absolute; z-index: 2; left: 6vw; bottom: 7vh; max-width: 38ch; display: grid; gap: .55rem; color: var(--pdp-navink, #fff); }
.pdp-slam-meta .kicker { font: 800 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.pdp-slam-meta h1 { font-size: clamp(1.5rem, 2.7vw, 2.3rem); letter-spacing: var(--track-display); color: inherit; }
.pdp-slam-meta .tag { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 700; font-style: italic; line-height: 1.4; text-wrap: pretty; }
.pdp-slam .fl-badge { width: clamp(100px, 11vw, 150px); height: auto; position: absolute; right: 6vw; bottom: 7vh; z-index: 2; filter: drop-shadow(0 4px 14px rgba(0,0,0,.22)); }
.pdp-crumb { position: absolute; top: 12vh; left: 6vw; z-index: 3; font: 800 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; display: flex; gap: .5rem; align-items: center; color: var(--pdp-navink, #fff); }
.pdp-crumb a { color: inherit; text-decoration: none; }
.pdp-crumb a:hover { text-decoration: underline; }
.pdp-crumb a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pdp-cue { position: absolute; bottom: 2.2vh; left: 50%; transform: translateX(-50%); z-index: 3; font: 800 10px/1 var(--sans); letter-spacing: .3em; color: var(--pdp-navink, #fff); }
/* the slam word drifts against the scroll — scroll-driven CSS, no JS, no cost when unsupported */
@supports (animation-timeline: view()) {
  .pdp-slam-word { animation: slamDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes slamDrift { from { transform: translateY(7vh); } to { transform: translateY(-7vh); } }
}

/* --- act 2: the buy band (configurator grammar, on cream) --- */
.pdp-band { background: var(--cream); padding: 14vh 6vw 12vh; border-top: 1px solid var(--line); }
.pdp-band-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5vw; align-items: center; }
/* explicit 1fr track: an auto row grows to the image and then max-height: 100% resolves against
   the image itself, so the box silently ignores its own aspect-ratio */
.pdp-pack { position: relative; aspect-ratio: 5 / 4; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: clip; min-width: 0; }
.pdp-pack img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(23,20,14,.12)) drop-shadow(0 34px 60px rgba(23,20,14,.16)); }
.pdp-buy { display: grid; gap: 1.15rem; justify-items: start; min-width: 0; }
.pdp-buy .kicker { font: 800 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--magenta-deep); }
.pdp-buy h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); color: var(--head); letter-spacing: var(--track-display); }
.pdp-buy .meta { font-weight: 600; font-size: .95rem; color: var(--body-gray); text-wrap: pretty; }
.pdp-pricerow { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pdp-price { font: 900 clamp(1.7rem, 2.6vw, 2.1rem)/1 var(--sans); color: var(--head); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); }
.pdp-unit { font-weight: 700; font-size: .84rem; color: var(--body-gray); font-variant-numeric: tabular-nums; }
.pdp-cart { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .2rem; }
.pdp-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; overflow: clip; }
.pdp-qty button { width: 44px; height: 48px; border: 0; background: none; cursor: pointer; font: 800 18px/1 var(--sans); color: var(--head); transition: background .18s ease-out, color .18s ease-out; }
.pdp-qty button:hover { background: var(--cream); color: var(--magenta-deep); }
.pdp-qty button:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: -3px; }
.pdp-qty input { width: 3.2ch; border: 0; background: none; text-align: center; font: 900 15px/1 var(--sans); color: var(--head); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-qty input:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: 2px; border-radius: 4px; }
.pdp-add { padding: 1.35em 2.8em; font-size: 14px; }
.pdp-assure { list-style: none; display: grid; gap: .4rem; }
.pdp-assure li { font-weight: 600; font-size: .82rem; line-height: 1.45; color: var(--body-gray); padding-left: 1.1em; position: relative; }
.pdp-assure li::before { content: ''; position: absolute; left: 0; top: .48em; width: .4em; height: .4em; border-radius: 99px; background: var(--lime); }

/* --- act 3: the dose, over macro texture (dark-act grammar) --- */
.pdp-act { background: var(--ink); color: var(--cream); padding: 20vh 6vw; position: relative; overflow: clip; }
.pdp-act .act-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.pdp-act::after { content: ''; position: absolute; inset: 0; background: linear-gradient(hsl(240 3% 10% / .55), hsl(240 3% 10% / .2) 45%, hsl(240 3% 10% / .78)); }
.pdp-act-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 8vh; position: relative; z-index: 2; }
.pdp-claims { display: grid; gap: .4em; }
.pdp-claims .claim { font: 900 clamp(2rem, 7.2vw, 6.4rem)/.95 var(--sans); text-transform: uppercase; letter-spacing: var(--track-display); color: var(--cream); }
.pdp-claims .claim.accent { color: var(--lime); }
.pdp-act-foot { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; align-items: flex-end; }
.pdp-act-foot p { font-weight: 500; line-height: 1.65; color: hsl(40 10% 62%); max-width: 44ch; font-size: clamp(.9rem, 1.2vw, 1.05rem); text-wrap: pretty; }
.pdp-act-foot .fine { font: 600 11px/1.6 var(--sans); letter-spacing: .06em; color: hsl(40 10% 42%); max-width: 30ch; }

/* --- act 4: the ritual, over a still from the sip beat --- */
.pdp-ritual { position: relative; background: #050505; color: var(--cream); padding: 16vh 6vw; overflow: clip; }
.pdp-ritual .ritual-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.pdp-ritual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(hsl(0 0% 2% / .5), hsl(0 0% 2% / .85)); }
.pdp-ritual-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 7vh; position: relative; z-index: 2; }
.pdp-ritual h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: var(--track-display); color: var(--cream); }
.pdp-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.pdp-steps li { display: grid; gap: .5rem; align-content: start; border-top: 1px solid hsl(40 33% 96% / .22); padding-top: 1.1rem; }
.pdp-steps .n { font: 900 11px/1 var(--sans); letter-spacing: .22em; color: var(--lime); font-variant-numeric: tabular-nums; }
.pdp-steps strong { font: 900 clamp(1.3rem, 2.4vw, 2rem)/1 var(--sans); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--cream); }
.pdp-steps span:not(.n) { font-weight: 500; font-size: .92rem; line-height: 1.5; color: hsl(40 10% 68%); text-wrap: pretty; }

/* --- act 5: what's in every stick (teal, .mix grammar) --- */
.pdp-inside { background: var(--teal); color: var(--cream); padding: 14vh 6vw; }
.pdp-inside-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 7vh; }
.pdp-inside h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: var(--track-display); color: var(--cream); }
.pdp-ing { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto; gap: clamp(1.1rem, 2.2vw, 2rem); }
.pdp-ing li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .3rem; align-content: start; border-left: 2px solid var(--lime); padding-left: .95rem; }
.pdp-ing strong { font: 800 clamp(.9rem, 1.4vw, 1.1rem)/1.25 var(--sans); color: var(--cream); text-wrap: balance; }
.pdp-ing span { font-weight: 500; font-size: .86rem; line-height: 1.45; color: hsl(196 32% 78%); text-wrap: pretty; }
.pdp-claim-icons { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem, 4vw, 3.4rem); }
.pdp-claim-icons li { display: grid; gap: .8rem; justify-items: center; }
.pdp-claim-icons .ic { position: relative; width: 58px; height: 58px; border: 1.5px solid var(--cream); border-radius: 99px; display: grid; place-items: center; }
.pdp-claim-icons .ic svg { width: 26px; height: 26px; stroke: var(--cream); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdp-claim-icons .ic.no::after { content: ''; position: absolute; width: 1.5px; height: 66%; background: var(--cream); transform: rotate(45deg); }
.pdp-claim-icons .bl { font: 800 10px/1.3 var(--sans); letter-spacing: .18em; text-align: center; color: var(--cream); }

/* --- act 6: the numbers --- */
.pdp-spec { background: var(--cream); padding: 14vh 6vw; }
.pdp-spec-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pdp-spec h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: var(--track-display); color: var(--head); }
.pdp-specs { display: grid; }
.pdp-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.pdp-specs > div:first-child { border-top: 1px solid var(--line); }
.pdp-specs dt { font: 800 10px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--body-gray); flex: 0 0 auto; }
.pdp-specs dd { font-weight: 700; font-size: .94rem; color: var(--head); text-align: right; text-wrap: balance; }
.pdp-contents { list-style: none; display: grid; gap: .2rem; margin-top: 1.4rem; }
.pdp-contents li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.pdp-contents a { font-weight: 800; color: var(--head); text-decoration: none; transition: color .2s ease-out; }
.pdp-contents a:hover { color: var(--magenta-deep); }
.pdp-contents a:focus-visible { outline: 2px solid var(--magenta-deep); outline-offset: 3px; border-radius: 3px; }
.pdp-contents span { font-weight: 600; font-size: .84rem; color: var(--body-gray); text-align: right; }

/* --- act 7: the other escapes, as color bands --- */
.pdp-more { display: grid; }
.pdp-more-head { background: var(--cream); text-align: center; padding: 12vh 6vw 6vh; }
.pdp-more-head h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: var(--track-display); color: var(--head); }
.pdp-band-link { position: relative; display: grid; place-items: center; min-height: 46vh; overflow: clip; text-decoration: none; background: var(--band); }
.pdp-band-link .band-word { position: absolute; inset: auto 0; text-align: center; font: 900 clamp(2.6rem, 12vw, 11rem)/.9 var(--sans); text-transform: uppercase; letter-spacing: var(--track-display); color: #fff; opacity: .9; white-space: nowrap; z-index: 0; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.pdp-band-link .band-stick { position: relative; z-index: 1; height: 38vh; width: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.22)) drop-shadow(0 26px 44px rgba(0,0,0,.32)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
/* same rule as the slam: giant word white and decorative, real labels in the band's readable ink */
.pdp-band-link .band-meta { position: absolute; z-index: 2; left: 6vw; bottom: 3.5vh; color: var(--band-ink, #fff); font: 800 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pdp-band-link .band-go { position: absolute; z-index: 2; right: 6vw; bottom: 3.5vh; color: var(--band-ink, #fff); font: 800 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: .5em; }
.pdp-band-link:hover .band-stick { transform: translateY(-10px) scale(1.03); }
.pdp-band-link:hover .band-word { transform: scale(1.02); }
.pdp-band-link:focus-visible { outline: 4px solid var(--cream); outline-offset: -8px; }

/* --- act 8: good to know --- */
.pdp-faq { background: var(--ink); color: var(--cream); padding: 14vh 6vw; }
.pdp-faq-inner { max-width: 820px; margin: 0 auto; }
.pdp-faq h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: var(--track-display); color: var(--cream); text-align: center; margin-bottom: 6vh; }
.pdp-faq details { border-bottom: 1px solid hsl(40 33% 96% / .18); }
.pdp-faq details:first-of-type { border-top: 1px solid hsl(40 33% 96% / .18); }
.pdp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem .2rem; font: 800 clamp(.95rem, 1.6vw, 1.1rem)/1.3 var(--sans); color: var(--cream); }
.pdp-faq summary::-webkit-details-marker { display: none; }
.pdp-faq summary::after { content: '+'; font: 900 1.4rem/1 var(--sans); color: var(--lime); flex: 0 0 auto; transition: transform .25s ease-out; }
.pdp-faq details[open] summary::after { transform: rotate(45deg); }
.pdp-faq summary:hover { color: var(--lime); }
.pdp-faq summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.pdp-faq details p { padding: 0 .2rem 1.5rem; font-weight: 500; line-height: 1.7; color: hsl(40 10% 66%); max-width: 64ch; text-wrap: pretty; }

/* --- sticky buy bar (phones) --- */
.pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 97; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 5vw calc(.7rem + env(safe-area-inset-bottom)); background: hsl(240 3% 10% / .92); backdrop-filter: blur(12px); transform: translateY(115%); transition: transform .3s ease-out; }
.pdp-bar.is-in { transform: none; }
.pdp-bar-name { font: 900 13px/1.1 var(--sans); text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--cream); }
.pdp-bar-price { font-weight: 800; font-size: .82rem; color: hsl(40 10% 66%); font-variant-numeric: tabular-nums; }
.pdp-bar .btn { padding: 1.05em 1.9em; font-size: 12px; }

/* --- reveals (armed by product.js only when motion is on) --- */
html.pdp-motion .reveal { opacity: 0; transform: translateY(26px); }
html.pdp-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html.pdp-motion .reveal { opacity: 1; transform: none; }
  .pdp-band-link:hover .band-stick, .pdp-band-link:hover .band-word, .btn:hover { transform: none; }
  .pdp-slam-word { animation: none !important; }
}

@media (max-width: 980px) {
  .pdp-band-inner { grid-template-columns: 1fr; gap: 6vh; }
  .pdp-buy { justify-items: center; text-align: center; }
  .pdp-buy .meta, .config-feats { text-align: left; }
  .pdp-pack { aspect-ratio: 4 / 3; }
  .pdp-spec-inner { grid-template-columns: 1fr; gap: 4vh; }
  .pdp-ing { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .pdp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pdp-bar { display: flex; }
  .motion-toggle { display: none; }
  .pdp-slam-stick, .pdp-slam-stick img { height: 58vh; }
  .pdp-slam-meta { left: 6vw; right: 6vw; bottom: 15vh; max-width: none; }
  .pdp-slam .fl-badge { right: 6vw; bottom: 3vh; width: 88px; }
  .pdp-slam-word { font-size: clamp(2.6rem, 17vw, 6rem); }
  .pdp-crumb { top: 9vh; }
  .pdp-cue { display: none; }
  footer { padding-bottom: calc(5vh + 4.5rem); }
  .pdp-band-link .band-meta { bottom: 2.5vh; }
  .pdp-band-link .band-go { bottom: 2.5vh; }
}
@media (max-width: 520px) {
  .pdp-ing { grid-template-columns: 1fr; }
  .pdp-steps { grid-template-columns: 1fr; }
  .pdp-band-link { min-height: 34vh; }
  .pdp-band-link .band-stick { height: 26vh; }
}