/* ============================================================================
   pdp.css — PDP-specific styling only.

   REQUIRES assets/we-chassis.css, linked immediately BEFORE this file. The
   chassis owns the tokens, reset, containers, the ONE nav's styling, .rv
   reveals, the shadow tiers, the zone palettes and the canonical torn-paper
   tear system (.tstrip / --perf / --up2) with the real turbulence-derived
   masks. Nothing in this file redefines any of that — the first version of
   this sheet re-derived the chassis by hand, which is what left the nav
   half-styled (missing .btn-cta, missing the 55.6px height pin) and shipped a
   hand-authored zigzag instead of a torn edge.

   VERTICAL RHYTHM
   One scale, used everywhere, so optical spacing is consistent instead of
   ad-hoc per block. The previous pass mixed 40/34/26/25/18/16px gaps and
   produced exactly the "too close here, too wide there" reading:
     --s-xs   8px  hairline pairs (price ↔ compare-at)
     --s-sm  14px  label ↔ its value
     --s-md  22px  within a group (heading ↔ first row)
     --s-lg  34px  between groups in the buy column
     --s-xl  56px  between major blocks in a zone
     --s-2xl 84px  between zones' content and their edges
   Tear clearances come from the chassis tokens (--tear-gap-light /
   --tear-h * .82) via .tear-clear-top / .tear-clear-bottom — never hardcoded.
   ========================================================================== */

:root{--s-xs:8px;--s-sm:14px;--s-md:22px;--s-lg:34px;--s-xl:56px;--s-2xl:84px}
@media(max-width:640px){:root{--s-xl:40px;--s-2xl:56px}}

/* the fixed nav is 55.6px + a 24px tear; 136px is the canonical first-content
   offset the teardown heroes use (.hero{padding:136px 0 30px}). The previous
   96px put the breadcrumb 4px under the tear's teeth. */
.pdp-main{padding-top:136px}
@media(max-width:640px){.pdp-main{padding-top:104px}}

/* (the nav's bar→rag seam fix lives in we-chassis.css — the chassis owns the
   nav, and the bug is not PDP-specific: it shows on any chassis page whose
   content area is flat dark paper.) */

/* the chassis' .button is the white default + a .ghost modifier; the PDP's
   primary CTA is brand blue. Same geometry, so it inherits everything else. */
.button--brand{background:var(--blue);color:#050a12}

/* ---- editorial furniture (type scale shared with the teardowns) ---- */
.hand-kick{font-family:var(--hand);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1;
  color:var(--blue);margin:0 0 var(--s-sm);transform:rotate(-1.4deg);transform-origin:left;
  display:inline-block}
h1{font-weight:690;font-size:clamp(2.1rem,4.2vw,3.15rem);line-height:1.04;letter-spacing:-.028em;
  color:var(--ink);text-wrap:balance;margin:0 0 var(--s-md)}
h2{font-weight:650;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.1;letter-spacing:-.025em;
  color:var(--ink);text-wrap:balance;margin:0 0 var(--s-lg)}
h3{font-size:1.32rem;font-weight:660;color:var(--ink);letter-spacing:-.015em;line-height:1.2;
  margin:0 0 var(--s-sm)}
p{margin:0 0 var(--s-md)}p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:640}
.lead{font-size:1.14rem;line-height:1.6;color:var(--ink)}
.deck{font-size:1.04rem;line-height:1.6;color:var(--soft);max-width:52ch;margin:0 0 var(--s-lg)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.025)}
.chip b{color:var(--blue);font-weight:600}
.chip--ok{border-color:rgba(108,225,173,.4)}.chip--ok b{color:var(--green)}
.chip--warn{border-color:rgba(255,148,116,.42)}.chip--warn b{color:var(--orange)}
.zone--light .chip{color:var(--soft);background:rgba(255,255,255,.5)}
.zone--light .chip b{color:var(--brand-ink)}
.pull{border-left:2px solid var(--blue);padding:2px 0 2px 20px;margin:var(--s-lg) 0;
  font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.4;color:var(--ink);
  max-width:60ch}
.pull cite{display:block;font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-top:var(--s-sm)}
.zone--light .pull{border-left-color:color-mix(in srgb,#42b1ff 72%,#0f3350)}
.zone--light .hand-kick{color:var(--brand-ink)}

/* ============================================================
   BUY ZONE
   ============================================================ */
.pdp-buy{padding:0 0 var(--s-2xl)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  column-gap:var(--s-xl);row-gap:var(--s-lg);align-items:start}
@media(max-width:940px){.pdp-grid{grid-template-columns:1fr}}

.crumbs{display:flex;align-items:center;gap:var(--s-xs);flex-wrap:wrap;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 var(--s-lg)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs a:hover{color:var(--blue)}

/* ---- gallery ---- */
.gal{position:sticky;top:calc(56px + var(--s-lg))}
@media(max-width:940px){.gal{position:static}}
.gal-frame{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,#101722,#080c12);box-shadow:var(--shadow-1)}
.gal-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(66,177,255,.1),transparent 42%)}
.gal-frame img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.gal-frame:hover img{transform:scale(1.03)}
.gal-empty{display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(165deg,#101722,#080c12)}
.gal-empty span{font-family:var(--hand);font-size:clamp(3rem,9vw,5.4rem);font-weight:700;
  color:rgba(66,177,255,.34);line-height:1;transform:rotate(-3deg)}
.gal-empty small{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* the DAM gallery can carry a video alongside the stills; it shares the frame
   and stays hidden (preload:none) until its thumb is picked. */
.gal-video{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#05070a}
.gal-video[hidden]{display:none}
.gal-thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:var(--s-sm)}
.gal-thumb{position:relative;width:74px;height:74px;padding:0;border:1px solid var(--line);
  border-radius:9px;overflow:hidden;background:var(--panel);
  transition:border-color .2s ease,transform .2s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb:hover{transform:translateY(-2px)}
.gal-thumb[aria-current="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.gal-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,7,10,.34)}
.gal-play::after{content:"";width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;
  border-bottom:8px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));margin-left:3px}
.gal-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gal-badge{position:absolute;z-index:3;left:14px;top:14px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:5px;
  background:rgba(7,12,19,.9);border:1px solid rgba(66,177,255,.34);color:var(--blue);
  transform:rotate(-1.4deg)}
.gal-badge--sold{border-color:rgba(255,148,116,.5);color:var(--orange)}

/* ---- buy column ---- */
.buy-head{display:flex;align-items:center;gap:var(--s-xs);flex-wrap:wrap;margin:0 0 var(--s-md)}
.price-row{display:flex;align-items:baseline;gap:var(--s-sm);flex-wrap:wrap;margin:0 0 var(--s-xs)}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:650;letter-spacing:-.02em;color:var(--ink);line-height:1}
.price-was{font-family:var(--mono);font-size:1.06rem;color:var(--dim);text-decoration:line-through}
.price-save{font-family:var(--hand);font-size:1.4rem;font-weight:700;color:var(--green);
  transform:rotate(-1.6deg);display:inline-block;line-height:1}
.price-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin:0 0 var(--s-lg)}

.optset{margin:0 0 var(--s-lg)}
.optset-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-sm);
  margin:0 0 var(--s-sm)}
.optset-h b{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:500}
.optset-h span{font-size:.9rem;color:var(--ink);font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:var(--s-xs)}
.opt{position:relative;padding:11px 17px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--soft);font-size:.9rem;font-weight:560;text-align:left;
  line-height:1.25;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.opt small{display:block;font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:3px}
.opt:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.opt[aria-pressed="true"]{border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,var(--panel));color:var(--ink)}
.opt[aria-pressed="true"] small{color:var(--blue)}
.opt[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.opt[disabled]:hover{transform:none;border-color:var(--line)}

/* purchase-type switch (one-time vs subscribe) */
.plan{display:grid;gap:9px;margin:0 0 var(--s-lg)}
.plan-opt{display:grid;grid-template-columns:20px 1fr auto;gap:var(--s-sm);align-items:center;
  text-align:left;padding:14px 16px;border-radius:11px;
  border:1px dashed color-mix(in srgb,var(--blue) 42%,var(--line));
  background:color-mix(in srgb,var(--blue) 6%,transparent);
  transition:border-color .2s ease,background .2s ease}
.plan-opt i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:block}
.plan-opt[aria-pressed="true"]{border-style:solid;border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 11%,transparent)}
.plan-opt[aria-pressed="true"] i{border-color:var(--blue);box-shadow:inset 0 0 0 4px var(--blue)}
.plan-opt b{display:block;color:var(--ink);font-size:.94rem;font-weight:640}
.plan-opt small{display:block;font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-top:3px;
  letter-spacing:.03em}
.plan-opt em{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.02rem;color:var(--ink);font-weight:640}

/* qty + add to cart */
.buy-actions{display:flex;gap:var(--s-sm);flex-wrap:wrap;align-items:stretch;margin:0 0 var(--s-md)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:5px;
  background:var(--panel);overflow:hidden;flex:0 0 auto}
.qty button{width:44px;min-height:44px;font-size:1.15rem;color:var(--dim);
  transition:color .18s,background .18s}
.qty button:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.qty button[disabled]{opacity:.4;cursor:not-allowed}
.qty output{min-width:44px;text-align:center;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1rem;color:var(--ink);font-weight:640}
/* capped, not greedy: flex:1 1 220px stretched the CTA to ~400px beside the
   44px stepper and read as a slab rather than a button */
.atc{flex:0 1 260px}
.atc-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);
  margin:0 0 var(--s-lg);line-height:1.6}
.atc-note a{color:var(--blue);border-bottom:1px solid rgba(66,177,255,.35)}

/* trust row */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trust>div{background:var(--panel);padding:14px 16px}
.trust b{display:block;font-family:var(--mono);font-size:.78rem;color:var(--ink);font-weight:640}
.trust span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-top:4px;line-height:1.45}

/* ---- statbar ----
   The strip itself — white procedural paper with torn short ends — is the
   shared one in we-chassis.css (§PRINTED-PAPER LAYER), the same object the
   teardown heroes use. Only the column count and this page's rhythm live here.
   Deliberately NO colour declarations: the chassis owns the paper's ink
   values, and pdp.css loads after it. */
.statbar{grid-template-columns:repeat(4,1fr);margin-top:var(--s-xl)}
@media(max-width:640px){.statbar{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  letter-spacing:-.02em;overflow-wrap:anywhere;line-height:1.1}
.stat .l{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  margin-top:5px;line-height:1.4}

/* ============================================================
   DETAIL (cream) — rich description + spec sheet
   ============================================================ */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:var(--s-xl) var(--s-xl);
  box-shadow:0 30px 70px -50px rgba(30,22,10,.5),0 2px 0 rgba(30,22,10,.04)}
@media(max-width:640px){.sheet{padding:var(--s-lg) var(--s-md)}}
.sheet-stamp{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-ink,#1f5d8c);border:1.5px solid color-mix(in srgb,#42b1ff 50%,transparent);
  border-radius:6px;padding:6px 10px;transform:rotate(-2deg);display:inline-block;margin:0 0 var(--s-md)}
/* the sheet spans the 1180 grid, so the reading measure is capped here rather
   than by narrowing the container */
.rte{font-size:1.02rem;line-height:1.72;color:var(--soft);max-width:70ch}
.rte>*:first-child{margin-top:0}
.rte>*:last-child{margin-bottom:0}
.rte h1,.rte h2{font-size:1.5rem;font-weight:660;color:var(--ink);letter-spacing:-.015em;
  margin:var(--s-lg) 0 var(--s-sm)}
.rte h3,.rte h4{font-size:1.14rem;font-weight:650;color:var(--ink);margin:var(--s-md) 0 var(--s-xs)}
.rte p{margin:0 0 var(--s-md)}
.rte a{color:var(--brand-ink,#1f5d8c);border-bottom:1px solid rgba(31,93,140,.35)}
.rte ul,.rte ol{margin:0 0 var(--s-md);padding-left:22px}
.rte li{margin:0 0 7px}
.rte img{border-radius:10px;margin:var(--s-md) 0;border:1px solid var(--line)}
.rte blockquote{margin:var(--s-md) 0;padding-left:18px;
  border-left:2px solid color-mix(in srgb,#42b1ff 66%,#0f3350);font-family:var(--serif);
  font-style:italic;font-size:1.18rem;color:var(--ink)}
.rte table{width:100%;border-collapse:collapse;margin:var(--s-md) 0;font-size:.94rem}
.rte th,.rte td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.rte hr{border:0;border-top:1px solid var(--line);margin:var(--s-md) 0}

.spec{margin-top:var(--s-lg);border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:190px 1fr;gap:var(--s-sm);padding:13px 0;
  border-bottom:1px solid var(--line-soft)}
@media(max-width:560px){.spec-row{grid-template-columns:1fr;gap:2px}}
.spec-row dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim)}
.spec-row dd{margin:0;font-size:.98rem;color:var(--ink);overflow-wrap:anywhere}

/* ---- recommendations: one --s-2xl beat away from the detail sheet ---- */
.pdp-recs{margin-top:var(--s-2xl)}
.recs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-sm)}
@media(max-width:980px){.recs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.recs{grid-template-columns:1fr}}
.rec{display:block;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:var(--panel);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.rec:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--blue) 44%,var(--line))}
.rec-img{aspect-ratio:1/1;background:#0a0e14;overflow:hidden}
.rec-img img{width:100%;height:100%;object-fit:cover}
.rec-b{padding:14px 15px}
/* reserve two lines so a wrapping title doesn't make one card taller */
.rec-b b{display:block;font-size:.92rem;font-weight:620;color:var(--ink);line-height:1.3;
  min-height:2.6em}
.rec-b span{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem;
  color:var(--brand-ink,#1f5d8c);margin-top:6px}

/* ============================================================
   CLOSER (dark) — the up2 rag's opaque edge lands at this zone's
   top, and the rag hangs UP into the cream, so this side needs
   ordinary section padding, not a tear clearance. The first pass
   used the full --tear-gap-dark here and left ~185px of dead space.
   ============================================================ */
.pdp-closer{padding:var(--s-2xl) 0 var(--s-xl)}
.closer{text-align:center}
.closer .big{font-size:clamp(1.4rem,3.2vw,2rem);font-weight:690;color:var(--ink);letter-spacing:-.02em;
  margin:0 0 var(--s-sm);text-wrap:balance}
.closer p{margin:0 auto;color:var(--dim);font-size:15px;max-width:52ch}
.closer .row{display:flex;gap:var(--s-sm);justify-content:center;flex-wrap:wrap;margin-top:var(--s-lg)}

/* ---- sticky mobile buy bar ---- */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:var(--s-sm);
  align-items:center;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,10,15,.95);border-top:1px solid var(--line);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.stickybuy.on{transform:none}
.stickybuy .sb-t{flex:1;min-width:0}
.stickybuy .sb-t b{display:block;font-size:.86rem;color:var(--ink);font-weight:620;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stickybuy .sb-t span{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.9rem;color:var(--blue);margin-top:2px}
.stickybuy .button{min-height:42px;padding:0 18px;font-size:.84rem}
@media(max-width:940px){.stickybuy{display:flex}}
@media(prefers-reduced-motion:reduce){.stickybuy{transition:none}}

/* ---- footer ---- */
.pdp-footer{border-top:1px solid var(--line-soft);padding:var(--s-lg) 0 var(--s-2xl)}
/* same 1180 measure as the rest of the page; the prose caps itself */
.pdp-footer-inner{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
.pdp-footer p{max-width:82ch}
.pdp-footer h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 var(--s-xs)}
.pdp-footer p{font-size:12.5px;color:var(--dim);line-height:1.65;margin:0}
.pdp-footer .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:var(--s-md);margin-top:var(--s-md);border-top:1px solid var(--line-soft);flex-wrap:wrap}
.pdp-footer .bar img{width:132px}
.pdp-footer .bar small{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}