/* ============================================================================
   MeshyFlix — product detail page.
   The contract is /DESIGN-SYSTEM.md: radii 8/14/999, one hairline, three
   durations, weights 400/500/700, lime only on the buy CTA, the active control
   state and live data. Glass appears exactly once on this page — the floating
   viewer toolbar.

   This page is deliberately NOT --w-base. The workspace is full-bleed and the
   bands below sit at --w-wide, so it never reads like the pages around it.
   Loaded after main.css, which owns the older .s3-* product rules.
   ========================================================================== */

.s3-pdp{
  --strip: 54px;                 /* the breadcrumb-as-header strip */
  --rail:  420px;
  --stage-inset: clamp(16px, 1.4vw, 22px);
  padding:0;
}

/* main.css positions .s3-readout absolutely for the old stage plate. On this
   page the class means what system.css says it means: a mono micro-label. */
.s3-pdp .s3-readout{
  position:static; display:block; min-width:0; margin:0;
  padding:0; border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  font-family:var(--mono); font-size:10px; line-height:1.4; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
}
.s3-pdp .s3-mono{ letter-spacing:.02em }

/* ------------------------------------------------------------- 1. top strip */
/* Breadcrumb-as-header. The product name lives here and nowhere else, which
   hands a whole extra viewport back to the render. */

.s3pdp-top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:var(--strip); padding:0 clamp(20px,3.5vw,52px);
  border-bottom:1px solid var(--hairline);
}
.s3pdp-crumb{ display:flex; align-items:baseline; gap:10px; min-width:0; margin:0 }
.s3pdp-crumb a{
  font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color var(--t-quick) var(--ease);
}
.s3pdp-crumb a:hover{ color:var(--text) }
.s3pdp-crumb span{ color:var(--faint); font-size:14px }
.s3pdp-crumb h1{
  margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s3pdp-top-meta{
  display:flex; gap:14px; margin:0; flex-shrink:0;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}

/* ------------------------------------------------------------ 2. workspace */

.s3pdp-work{
  display:grid; grid-template-columns:minmax(0,1fr) var(--rail);
  height:calc(100dvh - var(--s3-navh, 74px) - var(--strip));
  min-height:640px;
}

/* ---- stage: edge to edge, no inset, no frame, no rounded corners ---- */
.s3pdp-stage{
  position:relative; overflow:hidden;
  border-right:1px solid var(--hairline);
  background:radial-gradient(circle at 50% 40%, var(--surface-2), var(--bg) 76%);
}
.s3pdp-stage.is-fullscreen{ border:0 }
.s3-pdp .s3-mv{ width:100%; height:100%; background:transparent; --poster-color:transparent }
.s3pdp-poster{ width:100%; height:100%; object-fit:contain }

/* Instrument plates. Solid, not glass — the glass budget is spent on the
   toolbar, and one glass surface per page is the whole point of the ladder. */
.s3pdp-plate{
  position:absolute; z-index:3;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
}
/* Top-right: the toolbar owns the left edge, so the plate never sits under it. */
.s3pdp-readout{ right:var(--stage-inset); top:var(--stage-inset); padding:12px 14px; min-width:200px }
.s3pdp-readout .s3-readout{ margin-bottom:9px }
.s3pdp-readout div{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:3px 0 }
.s3pdp-readout span{ font-size:12px; color:var(--muted) }
.s3pdp-readout b{ font-size:12px; font-weight:500; color:var(--text); letter-spacing:.02em }

/* ---- the one glass surface on this page ---- */
.s3-pdp .s3-vtools{
  position:absolute; left:var(--stage-inset); top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:4px; padding:6px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--hairline);
}
.s3-pdp .s3-vtool{
  display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; color:var(--muted);
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  transition:background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-pdp .s3-vtool:hover{ background:var(--glass-2); color:var(--text) }
.s3-pdp .s3-vtool.is-on{ background:rgba(207,254,37,.08); color:var(--accent) }   /* active control */
.s3-pdp .s3-vsep{ height:1px; margin:4px 9px; background:var(--hairline) }

/* ---- shading: honest material states, named for what they are ---- */
.s3pdp-shade{
  left:50%; bottom:var(--stage-inset); transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; padding:8px 8px 8px 14px;
}
.s3pdp-shade[hidden]{ display:none }
.s3pdp-seg{ display:flex; gap:3px }
.s3pdp-seg button{
  border:0; border-radius:var(--r-chip); cursor:pointer; background:transparent;
  padding:7px 13px; font-family:var(--font); font-size:13px; font-weight:500; color:var(--muted);
  transition:background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3pdp-seg button:hover{ color:var(--text) }
.s3pdp-seg button[aria-checked="true"]{ background:rgba(207,254,37,.08); color:var(--accent) }
.s3pdp-shade-note{
  min-width:184px; margin:0; font-size:11px; letter-spacing:.04em; color:var(--faint);
}
.s3pdp-hint{
  position:absolute; left:var(--stage-inset); bottom:calc(var(--stage-inset) + 4px); z-index:3;
  margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); pointer-events:none;
}

/* ------------------------------------------------------------------ 3. rail */

.s3pdp-rail{ background:var(--bg); overflow:hidden }
.s3pdp-rail-scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; padding:24px 26px 40px }
.s3pdp-rail-scroll::-webkit-scrollbar{ width:8px }
.s3pdp-rail-scroll::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:var(--r-pill) }

/* Big number / small label, with the licence inside it. */
.s3pdp-triple{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px;
  padding-bottom:20px; border-bottom:1px solid var(--hairline);
}
.s3pdp-triple > div{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.s3pdp-triple b{
  font-size:22px; line-height:1; font-weight:500; letter-spacing:-.02em; color:var(--text);
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Lime only once it holds a real value — a placeholder is not live data. */
.s3pdp-triple [data-s3-lic-name]{ color:var(--faint) }
.s3pdp-triple [data-s3-lic-name][data-set]{ color:var(--accent) }

.s3pdp-lede{ margin:18px 0 0; font-size:14px; line-height:1.6; color:var(--muted) }
.s3pdp-lede p{ margin:0 }

.s3pdp-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:14px 0 0; padding:0; list-style:none }
.s3pdp-chips li{
  padding:5px 9px; border-radius:var(--r-chip); border:1px solid var(--hairline);
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.s3pdp-chips li.is-fmt{ color:var(--faint) }

/* ----------------------------------------------------------- 4. buy block */

.s3pdp-buy{ margin-top:24px }

.s3pdp-lic-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px }
.s3pdp-lic-head h2{
  margin:0; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--text);
}
.s3pdp-lic-head a{
  font-size:12px; font-weight:400; color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--hairline); transition:color var(--t-quick) var(--ease);
}
.s3pdp-lic-head a:hover{ color:var(--text) }
/* Frame the choice as a question about the buyer, not about rights. */
.s3pdp-lic-q{ margin:5px 0 12px; font-size:13px; line-height:1.5; color:var(--faint) }

.s3pdp-lic-trigger{
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  font-family:var(--font); font-size:15px; font-weight:500; color:var(--text); text-align:left;
  transition:border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.s3pdp-lic-trigger:hover{ border-color:var(--hairline-2) }
.s3pdp-lic-trigger-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.s3pdp-lic-trigger-price{ font-size:12px; letter-spacing:.02em; color:var(--muted); white-space:nowrap }
.s3pdp-lic-chev{ flex-shrink:0; color:var(--faint); transition:transform var(--t-base) var(--ease) }
.s3pdp-lic-trigger[aria-expanded="true"] .s3pdp-lic-chev{ transform:rotate(180deg) }

.s3pdp-lic-panel[hidden]{ display:none }
.s3pdp-lic-panel{ animation:s3pdp-reveal var(--t-base) var(--ease) }
@keyframes s3pdp-reveal{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

.s3pdp-lic-cards{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.s3pdp-lic-card{
  position:relative; display:flex; gap:12px; padding:14px 16px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.s3pdp-lic-card:hover{ border-color:var(--hairline-2) }
.s3pdp-lic-card input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.s3pdp-lic-mark{
  flex-shrink:0; width:16px; height:16px; margin-top:3px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--bg);
  transition:border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.s3pdp-lic-body{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.s3pdp-lic-line{ display:flex; align-items:baseline; justify-content:space-between; gap:14px }
.s3pdp-lic-line b{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--text) }
.s3pdp-lic-line i{
  font-style:normal; font-size:13px; letter-spacing:.02em; color:var(--text); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.s3pdp-lic-line del{ color:var(--faint); margin-right:5px }
.s3pdp-lic-for{ font-size:13px; line-height:1.5; color:var(--muted) }
.s3pdp-lic-terms{ font-size:12px; line-height:1.5; color:var(--faint) }

/* Selected is an active control state — one of the three places lime is allowed.
   .is-on is set by JS as well, so the state survives without :has(). */
.s3pdp-lic-card:has(input:checked),
.s3pdp-lic-card.is-on{ border-color:var(--accent); background:rgba(207,254,37,.08) }
.s3pdp-lic-card:has(input:checked) .s3pdp-lic-mark,
.s3pdp-lic-card.is-on .s3pdp-lic-mark{ border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--accent) }
.s3pdp-lic-card:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:3px }

/* ---- WooCommerce's own form: it still owns the transaction ---- */
.s3pdp-form{ margin-top:14px }
.s3pdp-form form.cart{ display:block; margin:0 }
.s3pdp-form table.variations{ width:100%; margin:0 0 12px; border:0 }
.s3pdp-form table.variations th,
.s3pdp-form table.variations td{ display:block; padding:0; border:0 }
.s3pdp-form table.variations label{
  display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.s3pdp-form table.variations select{
  width:100%; padding:12px 14px; border-radius:var(--r-chip);
  background:var(--surface-2); border:1px solid var(--hairline); color:var(--text);
  font-family:var(--font); font-size:14px;
}
.s3pdp-form .reset_variations{ display:none }
.s3pdp-form table.variations[hidden],
.s3pdp-form table.variations tr[hidden]{ display:none }

/* Deleted outright: stock status, and the variation blurb the cards already carry.
   !important is load-bearing here — WooCommerce's variation script calls
   jQuery .show() on these, which writes an inline display nothing else beats.
   A licence is bought once, so the quantity field goes too. */
.s3pdp-form .woocommerce-variation-availability,
.s3pdp-form .woocommerce-variation-description,
.s3pdp-form .stock,
.s3pdp-form .quantity{ display:none !important }

/* The live price. */
.s3pdp-form .woocommerce-variation-price{ margin:0 0 12px }
.s3pdp-form .woocommerce-variation-price .price,
.s3pdp-form .woocommerce-variation-price .amount{
  font-family:var(--mono); font-size:26px; font-weight:500; letter-spacing:-.02em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.s3pdp-form .woocommerce-variation-price del .amount{ color:var(--faint); font-size:17px }
.s3pdp-form .woocommerce-variation-price ins{ text-decoration:none }

/* The single filled CTA on this page. */
.s3-pdp .s3pdp-form .single_add_to_cart_button{
  display:flex; width:100%; justify-content:center; align-items:center;
  padding:15px 26px; border:1px solid transparent; border-radius:var(--r-card);
  background:var(--accent); color:var(--accent-ink) !important;
  font-family:var(--font); font-size:15px; font-weight:700; line-height:1; letter-spacing:0;
  transition:background var(--t-quick) var(--ease), color var(--t-quick) var(--ease),
             border-color var(--t-quick) var(--ease);
}
.s3-pdp .s3pdp-form .single_add_to_cart_button:hover{ background:#DDFF52; transform:none }

/* Before a licence is chosen the button is not an action, so it is not lime.
   The look is server-rendered, so there is no flash of a ready-looking CTA. */
.s3pdp-buy.is-unpicked .single_add_to_cart_button{
  background:var(--surface-2); color:var(--muted) !important; border-color:var(--hairline);
}
/* Swallowing the click is gated on our JS being live, because that is what
   turns the click into "open the picker" instead of into nothing at all. */
.s3pdp-buy.js-lic.is-unpicked .single_add_to_cart_button{ pointer-events:none }
.s3pdp-cta-note{ margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--faint) }
.s3pdp-buy.is-picked .s3pdp-cta-note{ display:none }

.s3pdp-trust{
  list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:7px;
}
.s3pdp-trust li{ font-size:12.5px; line-height:1.5; color:var(--muted) }

.s3pdp-jump{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:13px; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color var(--t-quick) var(--ease);
}
.s3pdp-jump:hover{ color:var(--text) }

/* ------------------------------------------------- 5. bands below the fold */
/* Consecutive bands must differ: full-bleed workspace → --w-wide on --bg →
   --w-wide on --surface-1 → --w-wide on --bg. */

.s3pdp-band{ padding-block:calc(var(--pad) * .58); border-top:1px solid var(--hairline) }
.s3pdp-band-alt{ background:var(--surface-1) }
.s3pdp-band h2{
  margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500; color:var(--text);
}

.s3pdp-detail{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,4vw,64px) }
.s3pdp-panel-note{ margin:8px 0 20px; font-size:13px; line-height:1.55; color:var(--faint); max-width:46ch }

.s3pdp-kv{ margin:0; border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden }
.s3pdp-kv > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:11px 16px; border-bottom:1px solid var(--hairline);
}
.s3pdp-kv > div:last-child{ border-bottom:0 }
.s3pdp-kv dt{ margin:0; font-size:13.5px; color:var(--muted); flex-shrink:0 }
.s3pdp-kv dd{
  margin:0; font-size:13px; color:var(--text); text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.s3pdp-kv-soft{ margin-top:20px }
.s3pdp-kv-soft dd{ font-family:var(--font); font-size:13.5px; letter-spacing:0 }
.s3pdp-kv-soft a{ color:var(--muted); text-decoration:none; transition:color var(--t-quick) var(--ease) }
.s3pdp-kv-soft a:hover{ color:var(--text) }

.s3pdp-panel-foot{ margin:12px 0 0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }

.s3pdp-prose{ color:var(--muted); font-size:15px; line-height:1.65 }
.s3pdp-prose > :first-child{ margin-top:0 }
.s3pdp-prose > :last-child{ margin-bottom:0 }

/* ---- manifest: here is exactly what you get ---- */
.s3pdp-manifest-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:20px }
.s3pdp-manifest-head p{ margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }

.s3pdp-files{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden;
}
.s3pdp-files li{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--hairline);
}
.s3pdp-files li:last-child{ border-bottom:0 }
.s3pdp-file-ext{
  padding:4px 0; border:1px solid var(--hairline); border-radius:var(--r-chip); text-align:center;
  font-size:10px; font-weight:500; letter-spacing:.1em; color:var(--muted);
}
.s3pdp-file-name{ font-size:14px; color:var(--text) }
.s3pdp-file-size{ font-size:12px; letter-spacing:.02em; color:var(--muted); font-variant-numeric:tabular-nums }
.s3pdp-files-note{ margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--faint); max-width:70ch }

/* ---- related, demoted to the very bottom ---- */
.s3pdp-related .related > h2,
.s3pdp-related h2{
  margin:0 0 24px; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500; color:var(--text);
}

/* --------------------------------------------------------------- responsive */

@media (max-width:1180px){
  .s3pdp-work{ grid-template-columns:1fr; height:auto }
  .s3pdp-stage{ height:min(62vh,600px); border-right:0; border-bottom:1px solid var(--hairline) }
  .s3pdp-rail-scroll{ height:auto; overflow:visible; padding:24px 22px 44px }
  .s3pdp-detail{ grid-template-columns:1fr }
}

@media (max-width:820px){
  .s3pdp-top{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding-block:10px }
  .s3pdp-crumb h1{ white-space:normal }
  .s3-pdp .s3-vtools{ flex-direction:row; left:50%; top:auto; bottom:var(--stage-inset); transform:translateX(-50%) }
  .s3-pdp .s3-vsep{ width:1px; height:auto; margin:9px 4px }
  /* Shading sits above the now-horizontal toolbar rather than under it. */
  .s3pdp-shade{ bottom:calc(var(--stage-inset) + 62px); padding:7px 7px 7px 12px; gap:9px }
  .s3pdp-shade-note{ display:none }
  .s3pdp-seg button{ padding:6px 10px; font-size:12px }
  .s3pdp-hint{ display:none }
  .s3pdp-readout{ min-width:0; padding:10px 12px }
  .s3pdp-triple b{ font-size:19px }
  .s3pdp-files li{ grid-template-columns:56px minmax(0,1fr); gap:12px 14px }
  .s3pdp-file-size{ grid-column:2 }
}

/* ------------------------------------------------------------------ phones --
   The toolbar is eight buttons and two rules. Laid horizontally at the desktop
   sizes it measures 372px, which is wider than the stage on a 375px iPhone and
   was being clipped at both ends. Tightening the gaps and the inset brings it
   to 342px inside 366px of stage, and the buttons get taller rather than wider
   — a row of adjacent targets is mis-tapped vertically, not horizontally.
   flex-wrap is the safety valve for anything narrower than 360px. */

@media (max-width:520px){
  .s3-pdp{ --stage-inset:12px }

  /* The bar is absolutely positioned at left:50%, so its shrink-to-fit width
     is measured against the half of the stage to its right — 195px, which
     wrapped a bar that fits perfectly well. width:max-content takes the
     measurement off the content instead; max-width still resolves against the
     whole stage, so it wraps only when it genuinely cannot fit. */
  .s3-pdp .s3-vtools{
    gap:2px; padding:5px;
    width:max-content;
    max-width:calc(100% - (var(--stage-inset) * 2));
    flex-wrap:wrap; justify-content:center;
  }
  .s3-pdp .s3-vtool{ width:38px; height:44px }
  .s3-pdp .s3-vsep{ margin:10px 2px }

  /* Notes and the trust list are body copy, not readouts. */
  .s3pdp-trust li,
  .s3pdp-cta-note{ font-size:13px }
  .s3pdp-lic-q{ font-size:13.5px }

  /* 44px hit box for the one bare text link in the rail. */
  .s3pdp-jump{ position:relative }
  .s3pdp-jump::after{
    content:""; position:absolute; left:-10px; right:-10px; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce){
  .s3pdp-lic-panel{ animation:none }
  .s3pdp-lic-chev{ transition:none }
}