/* ============================================================
   Gessura — single model (PDP) · v5 «Monochrome premium»
   Tokens only — nothing here invents a colour, radius, duration
   or hairline.

   The stage is pure page black with no frame: the model floats,
   its toolbar is a quiet caps strip, and the readout under it is
   one caps line. The buy column is boxless — thin measured
   numbers, licence rows on hairlines, ONE primary button wearing
   the running ring. Below: numbered spec rows, the manifest as
   hairline rows, and related models as flush marketplace tiles.
   Mint appears only on the ring, carets, live prices, focus,
   hovers and active control states.
   ============================================================ */

/* ------------------------------------------------ crumb strip */

.g3-pdp-crumbbar { border-bottom: 1px solid var(--hairline); }

/* ScrollSmoother pins #smooth-wrapper at the top of the viewport, which
   swallows the body's fixed-bar offset — every other page absorbs that
   inside a tall pagehead, but this thin strip would slide under the bar.
   The offset is re-added only while the smoother is actually running. */
html:not(.no-js) body:not(.no-motion):not(.ms-app) .g3-pdp-crumbbar { padding-top: 72px; }
@media (max-width: 700px) {
  html:not(.no-js) body:not(.no-motion):not(.ms-app) .g3-pdp-crumbbar { padding-top: 62px; }
}

.g3-pdp-crumb {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block: 0;
  margin-inline: auto;   /* .g3-wide centring survives the <p> reset */
  padding-block: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  min-width: 0;
}
.g3-pdp-crumb a {
  color: var(--bone-soft);
  transition: color var(--t-quick) var(--ease);
}
.g3-pdp-crumb a:hover { color: var(--bone); }
.g3-pdp-crumb span { color: var(--bone-faint); }
.g3-pdp-crumb .g3-pdp-crumb-no {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* -------------------------------------------------- workspace */

.g3-pdp-work {
  display: grid;
  /* the buy column reaches its full 540px from ~1500px; below that it
     narrows (never under 360px) so the stage keeps a real width down to
     the 1024px two-column floor */
  grid-template-columns: minmax(0, 1.55fr) clamp(360px, calc(72vw - 500px), 540px);
  gap: clamp(36px, 4.5vw, 88px);
  align-items: start;
  padding-block: clamp(28px, 3.5vw, 56px) clamp(64px, 7vw, 110px);
}

/* ---- the stage: no frame — the model floats on the page ---- */

.g3-pdp-plate { margin: 0; }

/* The stage stays in view while the buy column scrolls past it.
   The column stretches to the full row so the plate is contained by
   the hero row and releases at its foot. Native sticky covers the
   no-smoother path (no JS, reduced motion, no GSAP — .no-js /
   .no-motion); under ScrollSmoother the content is transformed and
   sticky is inert, so market.js pins the same plate with ScrollTrigger
   over the same range instead. Sticky must stay off in that case: the
   pin-spacer copies the plate's `top` and would offset it by it. */
@media (min-width: 1024px) {
  .g3-pdp-stagecol { align-self: stretch; }
  .no-js .g3-pdp-plate,
  .no-motion .g3-pdp-plate {
    position: sticky;
    top: calc(72px + 24px);
  }
  .no-js body.admin-bar .g3-pdp-plate,
  body.admin-bar.no-motion .g3-pdp-plate { top: calc(72px + 32px + 24px); }
}

.s3pdp-stage {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: min(74vh, 760px);
  min-height: 440px;
}
.s3pdp-stage.is-fullscreen { background: var(--coal); }

.g3-pdp .s3-mv,
.s3pdp-stage model-viewer {
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--ember);
  --progress-bar-height: 2px;
}
.s3pdp-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- the toolbar: one quiet strip, no chrome ---- */

.g3-pdp-dock {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  max-width: calc(100% - 24px);
}

.s3-vtools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.s3-vtool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bone-faint);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease);
}
.s3-vtool:hover { color: var(--bone); background: transparent; }
.s3-vtool.is-on { color: var(--ember-hi); }   /* an engaged control is live */
.s3-vsep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--hairline);
}

/* shading modes — real material states, revealed once the API answers */
.s3pdp-shade {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 1px solid var(--hairline);
  padding-left: 16px;
}
.s3pdp-shade[hidden] { display: none; }
.s3pdp-seg { display: flex; gap: 2px; }
.s3pdp-seg button {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
  cursor: pointer;
  transition: color var(--t-quick) var(--ease);
}
.s3pdp-seg button:hover { color: var(--bone); }
.s3pdp-seg button[aria-checked="true"] { color: var(--ember-hi); }
.s3pdp-shade-note {
  margin: 0;
  min-width: 150px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--bone-faint);
}

/* ---- the readout under the stage ---- */

.g3-pdp-platecap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
}
.g3-pdp-readout {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bone-soft);
}
.g3-pdp-hint {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  white-space: nowrap;
}

/* --------------------------------------------- buy column ---- */

.g3-pdp-title {
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.08;
  letter-spacing: -.01em;
  font-weight: 300;
  margin: 0 0 26px;
}

/* mono readouts inherited from the templates */
.g3-pdp .s3-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.g3-pdp .s3-readout {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* the triple: thin numeral over caps label, between two hairlines */
.s3pdp-triple {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px;
  padding: 20px 0;
  border-block: 1px solid var(--hairline);
}
.s3pdp-triple > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.g3-pdp .s3pdp-triple b {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
  font-weight: 200;
  letter-spacing: -.01em;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* mint only once it holds a real value — a placeholder is not live */
.s3pdp-triple [data-s3-lic-name] { color: var(--bone-faint); }
.s3pdp-triple [data-s3-lic-name][data-set] { color: var(--ember-hi); }

.s3pdp-lede {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-soft);
}
.s3pdp-lede p { margin: 0; }

/* capability line: quiet caps items, hairline-separated — no boxes */
.s3pdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.s3pdp-chips li {
  padding: 2px 14px 2px 0;
  margin-right: 14px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
.s3pdp-chips li:last-child { border-right: 0; margin-right: 0; }
.s3pdp-chips li.is-fmt {
  font-family: var(--font-mono);
  letter-spacing: .08em;
  color: var(--bone-faint);
}

/* ---- licence: rows on hairlines ---- */

.s3pdp-buy { margin-top: 30px; }

.s3pdp-lic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.s3pdp-lic-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3pdp-lic-head a {
  font-size: 12.5px;
  color: var(--bone-soft);
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 1px;
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3pdp-lic-head a:hover { color: var(--bone); border-color: var(--ember); }

.s3pdp-lic-q {
  margin: 10px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--bone);
}

/* the summary row: collapses the rows once a licence is picked */
.s3pdp-lic-trigger {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--bone-soft);
  text-align: left;
  transition: color var(--t-quick) var(--ease);
}
.s3pdp-lic-trigger:hover { color: var(--bone); }
.s3pdp-lic-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* once picked, the summary carries the decision — it reads live */
.s3pdp-buy.is-picked .s3pdp-lic-trigger-label { color: var(--bone); font-weight: 500; }
.s3pdp-lic-trigger-price {
  font-size: 12.5px;
  color: var(--bone-soft);
  white-space: nowrap;
}
.s3pdp-buy.is-picked .s3pdp-lic-trigger-price { color: var(--ember-hi); }
/* the caret is mint — carets are one of mint's few homes */
.s3pdp-lic-chev {
  flex-shrink: 0;
  align-self: center;
  color: var(--ember);
  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; }

/* the rows: one tier per hairline row, nothing framed */
.s3pdp-lic-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.s3pdp-lic-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  transition: padding-left var(--t-base) var(--ease);
}
.s3pdp-lic-card:hover { padding-left: 10px; }
.s3pdp-lic-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.s3pdp-lic-mark {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border: 1px solid var(--hairline-2);
  border-radius: 0;
  background: transparent;
  transition: border-color var(--t-quick) var(--ease),
              background var(--t-quick) var(--ease),
              box-shadow var(--t-quick) var(--ease);
}
.s3pdp-lic-card:hover .s3pdp-lic-mark { border-color: var(--bone); }
.s3pdp-lic-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.s3pdp-lic-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.s3pdp-lic-line b {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 300;
  color: var(--bone);
}
.s3pdp-lic-line i {
  font-style: normal;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--bone);
  white-space: nowrap;
}
.s3pdp-lic-line del { color: var(--bone-faint); margin-right: 5px; }
.s3pdp-lic-for { font-size: 13.5px; line-height: 1.55; color: var(--bone-soft); max-width: 46ch; }
.s3pdp-lic-terms { font-size: 12.5px; line-height: 1.5; color: var(--bone-faint); max-width: 46ch; }

/* selected = an active control state — mint is allowed here.
   .is-on is set by JS as well, so the state survives without :has(). */
.s3pdp-lic-card:has(input:checked) .s3pdp-lic-mark,
.s3pdp-lic-card.is-on .s3pdp-lic-mark {
  border-color: var(--ember);
  background: var(--ember);
  box-shadow: inset 0 0 0 3px var(--coal);
}
.s3pdp-lic-card:has(input:checked) .s3pdp-lic-line b,
.s3pdp-lic-card.is-on .s3pdp-lic-line b { color: var(--ember-hi); }
.s3pdp-lic-card:has(input:focus-visible) {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* the printed price for models sold without licence tiers */
.g3-pdp-price {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ember-hi);
}
.g3-pdp-price .amount { font-size: inherit; color: inherit; }
.g3-pdp-price del,
.g3-pdp-price del .amount { color: var(--bone-faint); font-size: .45em; font-weight: 400; }
.g3-pdp-price ins { text-decoration: none; }

/* ---- WooCommerce's own form: it still owns the transaction ---- */

.s3pdp-form { margin-top: 18px; }
.s3pdp-form form.cart { display: block; margin: 0; }

.s3pdp-form table.variations {
  width: 100%;
  margin: 0 0 12px;
  border: 0;
  border-collapse: collapse;
}
.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-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3pdp-form table.variations select {
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--bone);
  transition: border-color var(--t-quick) var(--ease);
}
.s3pdp-form table.variations select option { background: var(--coal-2); color: var(--bone); }
.s3pdp-form table.variations select:hover { border-color: var(--hairline-2); }
.s3pdp-form table.variations select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: none;
}
.s3pdp-form .reset_variations { display: none; }
.s3pdp-form table.variations[hidden],
.s3pdp-form table.variations tr[hidden] { display: none; }

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

/* the live price — thin, large, mint: it is the one live number */
.s3pdp-form .woocommerce-variation-price { margin: 18px 0 16px; }
.s3pdp-form .price,
.s3pdp-form .price .amount {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ember-hi);
}
.s3pdp-form .price del,
.s3pdp-form .price del .amount {
  color: var(--bone-faint);
  font-size: 17px;
  font-weight: 400;
}
.s3pdp-form .price ins { text-decoration: none; }

/* ---- the single primary CTA — it wears the running ring ---- */

.g3-pdp .s3pdp-form .single_add_to_cart_button {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  padding: 13px 24px;
  background: #1B1B1F;
  color: var(--bone) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}
/* the running light: same recipe as .g3-btn-primary in system.css —
   @property --g3a and @keyframes g3-ring-run are registered there */
.g3-pdp .s3pdp-form .single_add_to_cart_button::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-ctl) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--g3a),
    transparent 0turn,
    transparent .62turn,
    rgba(245, 246, 247, .25) .78turn,
    rgba(245, 246, 247, .95) .87turn,
    var(--ember) .94turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 1;
  animation: g3-ring-run 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.g3-pdp .s3pdp-form .single_add_to_cart_button:hover {
  background: #242429;
  border-color: rgba(255, 255, 255, .22);
}
.g3-pdp .s3pdp-form .single_add_to_cart_button:hover::after,
.g3-pdp .s3pdp-form .single_add_to_cart_button:focus-visible::after {
  animation-duration: 1.6s;
}
@media (prefers-reduced-motion: reduce) {
  .g3-pdp .s3pdp-form .single_add_to_cart_button::after { animation: none; opacity: .7; }
}

/* before a licence is chosen the button is not yet an action:
   dimmed, and its ring is dark */
.s3pdp-buy.is-unpicked .single_add_to_cart_button {
  background: transparent;
  border-color: var(--hairline);
  color: var(--bone-faint) !important;
}
.s3pdp-buy.is-unpicked .single_add_to_cart_button::after { opacity: 0; animation: none; }
/* 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: 12.5px;
  line-height: 1.5;
  color: var(--bone-faint);
}
.s3pdp-buy.is-picked .s3pdp-cta-note { display: none; }

/* quiet trust lines — plain text, no bullets */
.s3pdp-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s3pdp-trust li {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--bone-faint);
}

.s3pdp-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bone-soft);
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3pdp-jump:hover { color: var(--bone); border-color: var(--ember); }

/* ------------------------------------------- bands below ----- */

.g3-pdp-band {
  padding-block: clamp(64px, 7vw, 110px);
  border-top: 1px solid var(--hairline);
}

/* ---- the specification: numbered rows on hairlines ---- */

.s3pdp-spec-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.s3pdp-spec-head .g3-h2 { font-weight: 300; }
.s3pdp-spec-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone-faint);
  max-width: 56ch;
}

.s3pdp-rows { border-top: 1px solid var(--hairline); }
.s3pdp-row {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.s3pdp-row:hover { padding-left: 14px; }
.s3pdp-row-no {
  flex-shrink: 0;
  width: 2.4em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
}
.s3pdp-row-label {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 300;
  color: var(--bone);
  flex-shrink: 0;
}
.s3pdp-row-line {
  flex: 1;
  border-bottom: 1px dashed var(--hairline);
  translate: 0 -5px;
}
.s3pdp-row-val {
  font-size: 13.5px;
  color: var(--bone-soft);
  white-space: nowrap;
}

.s3pdp-spec-foot {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bone-faint);
}

/* ---- notes from the studio: prose beside quiet meta rows ---- */

.s3pdp-creator {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 88px);
  margin-top: clamp(48px, 6vw, 88px);
}
.s3pdp-creator-copy .g3-stamp { margin: 0 0 18px; }
.s3pdp-prose {
  color: var(--bone-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 60ch;
}
.s3pdp-prose > :first-child { margin-top: 0; }
.s3pdp-prose > :last-child { margin-bottom: 0; }
.s3pdp-prose-empty { margin: 0; color: var(--bone-faint); }

.s3pdp-creator-meta { padding-top: 34px; }
.s3pdp-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.s3pdp-meta-row:first-child { border-top: 1px solid var(--hairline); }
.s3pdp-meta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  flex-shrink: 0;
}
.s3pdp-meta-val {
  font-size: 13.5px;
  color: var(--bone-soft);
  text-align: right;
}
.s3pdp-meta-val a {
  color: var(--bone-soft);
  transition: color var(--t-quick) var(--ease);
}
.s3pdp-meta-val a:hover { color: var(--bone); }
.s3pdp-meta-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bone-faint);
  max-width: 44ch;
}

/* ---- manifest: every file, one hairline row each ---- */

.s3pdp-manifest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.s3pdp-manifest-head .g3-stamp { margin: 0 0 16px; }
.s3pdp-manifest-head .g3-h2 { font-weight: 300; }
.s3pdp-manifest-count {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
  white-space: nowrap;
}

.s3pdp-files {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.s3pdp-files li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.s3pdp-files li:hover { padding-left: 14px; }
.s3pdp-file-ext {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3pdp-file-name {
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 300;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s3pdp-file-size {
  font-size: 12.5px;
  color: var(--bone-soft);
  white-space: nowrap;
}
.s3pdp-files-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bone-faint);
  max-width: 68ch;
}

/* ---- related: flush marketplace tiles ---- */

.g3-pdp-related { padding-bottom: clamp(48px, 5vw, 80px); }
.g3-pdp-related-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.g3-pdp-related-head .g3-h2 { font-weight: 300; }
/* same lattice as the shop sheet (shop.css): the tiles draw the
   hairlines, so an odd tile count on two columns ends in page black */
.g3-pdp-related ul.products {
  --g3-lattice: color-mix(in srgb, var(--bone) 8%, var(--coal));
  list-style: none;
  margin: 0;
  padding: 0 0 1px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: transparent;
  border-top: 1px solid var(--hairline);
  overflow: clip;
}
.g3-pdp-related ul.products > .g3-shcell {
  box-shadow:
    1px 0 0 0 var(--g3-lattice),
    0 1px 0 0 var(--g3-lattice),
    1px 1px 0 0 var(--g3-lattice);
}

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

@media (max-width: 1180px) {
  .s3pdp-creator { grid-template-columns: 1fr; }
  .s3pdp-creator-meta { padding-top: 0; max-width: 560px; }
  .g3-pdp-related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .g3-pdp-work { grid-template-columns: 1fr; gap: 44px; }
  .g3-pdp-buycol { max-width: 640px; }
  .s3pdp-stage { height: min(62vh, 560px); }
}

@media (max-width: 680px) {
  .g3-pdp-crumb { flex-wrap: wrap; }
  .g3-pdp-crumb .g3-pdp-crumb-no { margin-left: 0; width: 100%; }
  .s3pdp-stage { height: min(54vh, 460px); min-height: 320px; }

  .g3-pdp-dock { gap: 4px 10px; }
  .s3-vtool { width: 34px; height: 40px; }
  .s3pdp-shade { border-left: 0; padding-left: 0; }
  .s3pdp-shade-note { display: none; }
  .s3pdp-seg button { padding: 8px 8px; font-size: 11px; }

  .g3-pdp-platecap { flex-direction: column; gap: 8px; }
  .g3-pdp .s3pdp-triple b { font-size: 22px; }

  .s3pdp-row { flex-wrap: wrap; row-gap: 4px; }
  .s3pdp-row-line { display: none; }
  .s3pdp-row-val { margin-left: calc(2.4em + 16px); white-space: normal; }

  .s3pdp-manifest-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .s3pdp-files li { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; }
  .s3pdp-file-name { white-space: normal; }
  .s3pdp-file-size { grid-column: 2; }
  .g3-pdp-related ul.products { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .s3pdp-lic-chev { transition: none; }
  .s3pdp-lic-card, .s3pdp-row, .s3pdp-files li { transition: none; }
}