/* ══════════════════════════════════════════════════════════════
   VISION SINDH — PDP special treatment
   Per-chapter atmosphere · gallery rhythm · lightbox ·
   spec ledger · mobile buy bar
   Owns .pdp-page only. Extends site.css, never fights it.
   Palette discipline: ink / bone / ash / paper.
   EMBER (#d9611f) is light + focus only — it never fills a shape.

   Each chapter sets -d (desktop) and -m (mobile) dials; the two
   resolver blocks below are the only place --fig1-h and --band are
   assigned, so the small-screen pass always wins.
   ══════════════════════════════════════════════════════════════ */

.pdp-page {
  --bone: #e9e4da;
  --ember: #d9611f;

  /* ── chapter dials (defaults; every chapter re-tunes them) ── */
  --glyph-size: clamp(88px, 38cqw, 300px);
  --glyph-ink: 8%;              /* stroke opacity against ink */
  --glyph-w: 1.1px;             /* stroke weight */
  --glyph-tilt: 0deg;
  --glyph-track: 0.02em;
  --glyph-drift: 34px;          /* parallax travel, rAF-driven */

  --fig1-d: 88svh;              /* the opening frame, minimum stature */
  --fig1-m: 64svh;
  --fig-gap: 12px;
  --band-d: clamp(104px, 17vh, 206px);   /* the breath after frame one */
  --band-m: clamp(88px, 13vh, 150px);
  --grain: 0.12;
  --fig-filter: none;

  --rev-y: 22px;                /* reveal rise */
  --rev-veil: 13%;              /* reveal veil */
  --rev-t: 0.8s;

  --ledger-pad: 22px;           /* spec row rhythm */
  --ledger-label: 170px;
  --ledger-track: 0.14em;
  --rule: var(--line);

  overflow-x: clip;             /* clip (not hidden) — keeps sticky alive */
}

/* ═══════════════════════════════════════════════════════════════
   1 · CHAPTER ATMOSPHERE
   Same instrument, five tunings. The ground moves about one
   percent; the glyph, the rhythm and the rules carry the rest.
   ═══════════════════════════════════════════════════════════════ */

/* साधु — Godman. Upright, centred, unhurried. */
.pdp-page.chapter--godman {
  --paper: #f0ede6;
  --paper-2: #e7e3da;
  --glyph-size: clamp(92px, 46cqw, 300px);   /* साधु */
  --glyph-ink: 8.5%;
  --glyph-w: 1.15px;
  --fig1-d: 88svh;
  --fig1-m: 64svh;
  --fig-gap: 14px;
  --rev-t: 0.95s;
  --ledger-pad: 24px;
  --ledger-track: 0.16em;
}

/* रौद्र — Rage of God. Tighter, harder, ember at the edges. */
.pdp-page.chapter--rage-of-god {
  --paper: #eeeae3;
  --paper-2: #e4e0d6;
  --glyph-size: clamp(96px, 41cqw, 320px);   /* रौद्र */
  --glyph-ink: 11%;
  --glyph-w: 1.6px;
  --glyph-tilt: -2deg;
  --glyph-drift: 46px;
  --fig1-d: 92svh;
  --fig1-m: 68svh;
  --fig-gap: 8px;
  --band-d: clamp(96px, 15vh, 180px);
  --band-m: clamp(80px, 12vh, 132px);
  --grain: 0.16;
  --rev-y: 26px;
  --rev-veil: 16%;
  --rev-t: 0.58s;
  --ledger-pad: 20px;
  --rule: #cbc5b8;
}

/* मसान — Last Rites. Ash-quiet. Everything one step further away. */
.pdp-page.chapter--last-rites {
  --paper: #ebe8e2;
  --paper-2: #e2dfd8;
  --glyph-size: clamp(88px, 38cqw, 300px);   /* मसान */
  --glyph-ink: 5.5%;
  --glyph-w: 1px;
  --glyph-track: 0.06em;
  --glyph-drift: 26px;
  --fig1-d: 84svh;
  --fig1-m: 62svh;
  --fig-gap: 18px;
  --band-d: clamp(120px, 20vh, 230px);
  --band-m: clamp(100px, 15vh, 165px);
  --fig-filter: saturate(0.88) contrast(0.97);
  --grain: 0.18;
  --rev-y: 16px;
  --rev-veil: 18%;
  --rev-t: 1.15s;
  --ledger-pad: 26px;
  --rule: #d6d1c6;
}

/* मूल — Essentials. Nothing extra. The plainest sibling. */
.pdp-page.chapter--essentials {
  --paper: #efece6;
  --glyph-size: clamp(78px, 43cqw, 250px);   /* मूल */
  --glyph-ink: 4.5%;
  --glyph-w: 0.9px;
  --glyph-drift: 22px;
  --fig1-d: 80svh;
  --fig1-m: 58svh;
  --band-d: clamp(96px, 15vh, 172px);
  --band-m: clamp(80px, 12vh, 130px);
  --grain: 0.08;
  --rev-t: 0.75s;
  --ledger-pad: 20px;
  --ledger-label: 150px;
}

/* अभिलेख — Archive. A record, stamped and filed. */
.pdp-page.chapter--archive {
  --paper: #edeae3;
  --paper-2: #e4e1d8;
  --glyph-size: clamp(38px, 23cqw, 130px);   /* अभिलेख — seven syllables */
  --glyph-ink: 7%;
  --glyph-w: 1.25px;
  --glyph-tilt: -4.5deg;
  --glyph-track: 0.1em;
  --glyph-drift: 18px;
  --fig1-d: 86svh;
  --fig1-m: 64svh;
  --fig-gap: 16px;
  --grain: 0.15;
  --rev-t: 0.9s;
  --ledger-pad: 22px;
  --ledger-track: 0.2em;
}

/* एक — Custom. Single, made once. */
.pdp-page.chapter--custom {
  --paper: #eeebe5;
  --glyph-size: clamp(100px, 55cqw, 340px);  /* एक */
  --glyph-ink: 7%;
  --fig1-d: 86svh;
  --fig1-m: 64svh;
  --grain: 0.1;
}

/* ── resolvers — the only assignment of the two live values.
   The glyph needs no breakpoint: it is sized in cqw against the
   gallery column itself, so it holds its proportion everywhere. ── */
.pdp-page {
  --fig1-h: var(--fig1-d);
  --band: var(--band-d);
}
@media (max-width: 860px) {
  .pdp-page {
    --fig1-h: var(--fig1-m);
    --band: var(--band-m);
  }
}

/* ─── The watermark glyph ────────────────────────────────────────
   It lives in the breath between frame one and frame two, so it
   can never sit under a line of copy. It bleeds sideways, slides
   under the photographs above and below it, and drifts on scroll.
   pdp.js mirrors data-dev onto the gallery and measures the band
   (--pdp-band-top), so this stays correct at any image height.   */

/* clip the glyph's sideways bleed at the page edge. `clip` (not
   `hidden`) — it makes no scroll container, so .pdp__info stays sticky. */
.pdp-page main > .section { overflow-x: clip; }
.pdp-page .pdp__gallery {
  position: relative;
  gap: var(--fig-gap);
  container-type: inline-size;   /* the glyph measures itself against this column */
}
.pdp-page .pdp__gallery > figure { position: relative; z-index: 1; }
.pdp-page .pdp__gallery > figure:nth-of-type(2) { margin-top: var(--band); }

.pdp-page .pdp__gallery[data-dev]::before {
  content: attr(data-dev);
  position: absolute;
  z-index: 0;
  left: -14%;
  right: -14%;
  top: calc(var(--pdp-band-top, 100%) - 7vh);
  height: calc(var(--band) + 14vh);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--glyph-size);
  line-height: 0.92;
  letter-spacing: var(--glyph-track);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: var(--glyph-w) color-mix(in srgb, var(--ink) var(--glyph-ink), transparent);
  transform: translate3d(0, var(--pdp-par, 0px), 0) rotate(var(--glyph-tilt));
  pointer-events: none;
  user-select: none;
}

@supports not (-webkit-text-stroke: 1px black) {
  .pdp-page .pdp__gallery[data-dev]::before {
    color: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}

/* Last Rites: the glyph is ash, not ink — it has already left. */
.pdp-page.chapter--last-rites .pdp__gallery[data-dev]::before {
  -webkit-text-stroke-color: color-mix(in srgb, var(--ash) 34%, transparent);
}

/* ─── Chapter hairline accents ───────────────────────────────── */

.pdp-page .pdp__info > .eyebrow {
  position: relative;
  padding-bottom: 12px;
}
.pdp-page .pdp__info > .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 34px;
  background: var(--ash);
  opacity: 0.55;
}
.pdp-page.chapter--godman .pdp__info > .eyebrow::after { width: 54px; background: var(--ink); opacity: 0.28; }
.pdp-page.chapter--rage-of-god .pdp__info > .eyebrow::after { width: 26px; height: 2px; background: var(--ember); opacity: 0.85; }
.pdp-page.chapter--last-rites .pdp__info > .eyebrow::after { width: 88px; background: var(--ash); opacity: 0.3; }
.pdp-page.chapter--essentials .pdp__info > .eyebrow::after { width: 18px; }
.pdp-page.chapter--archive .pdp__info > .eyebrow::after {
  width: 64px;
  background: none;
  border-top: 1px dashed color-mix(in srgb, var(--ash) 70%, transparent);
  opacity: 1;
}

/* Rage of God: ember stays a light, never a fill */
.pdp-page.chapter--rage-of-god :focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.pdp-page.chapter--rage-of-god .sizes__row { border-bottom-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.pdp-page.chapter--rage-of-god .sizes__row button[aria-checked="true"] { border-bottom-width: 3px; }

/* Archive: filed, dated, done */
.pdp-page.chapter--archive .pdp__retired {
  border-block-color: var(--ash);
  border-inline: 1px solid var(--ash);
  padding-inline: 16px;
}
.pdp-page.chapter--archive .pdp__gallery > figure:first-of-type::after {
  content: "RECORD";
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ash);
  border: 1px solid color-mix(in srgb, var(--ash) 60%, transparent);
  padding: 5px 9px 4px;
  transform: rotate(-6deg);
  opacity: 0.62;
  pointer-events: none;
}

/* Last Rites: the page keeps its distance */
.pdp-page.chapter--last-rites .pdp__hook { color: var(--ash); }
.pdp-page.chapter--last-rites .pdp__gallery > figure { border-color: color-mix(in srgb, var(--ash) 26%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   2 · GALLERY RHYTHM
   Frame one is given a floor, never a ceiling: min-height sets
   its stature, the picture keeps its own proportions. Nothing in
   this gallery is ever cropped — a cut hem is lost information.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page .pdp__gallery > figure:first-of-type {
  min-height: var(--fig1-h);
  display: grid;
  align-content: center;
}
.pdp-page .pdp__gallery img { filter: var(--fig-filter); }

/* cheap tiled grain — one 140px raster, bounded to the frames */
.pdp-page .pdp__gallery > figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* reveal — only with JS + motion allowed; no-JS stays fully visible */
@media (prefers-reduced-motion: no-preference) {
  .pdp-js .pdp__gallery > figure.rise {
    opacity: 0;
    transform: translateY(var(--rev-y));
    transition:
      opacity var(--rev-t) var(--ease),
      transform var(--rev-t) var(--ease);
  }
  .pdp-js .pdp__gallery > figure.rise.in {
    opacity: 1;
    transform: none;
  }
  /* the veil: the edge the reveal lifts from, as a page-coloured curtain
     that retracts by transform — compositor-only. An animated clip-path
     here repainted the whole photograph every frame of the reveal. */
  .pdp-js .pdp__gallery > figure.rise > .pdp-veil {
    position: absolute; z-index: 6; pointer-events: none;
    background: var(--paper);
    transition: transform var(--rev-t) var(--ease);
  }
  .pdp-veil[data-edge="bottom"] { left: 0; right: 0; bottom: 0; height: var(--rev-veil); transform-origin: 50% 100%; }
  .pdp-veil[data-edge="top"]    { left: 0; right: 0; top: 0; height: var(--rev-veil); transform-origin: 50% 0; }
  .pdp-veil[data-edge="right"]  { top: 0; bottom: 0; right: 0; width: var(--rev-veil); transform-origin: 100% 50%; }
  .pdp-veil[data-edge="left"]   { top: 0; bottom: 0; left: 0; width: var(--rev-veil); transform-origin: 0 50%; }
  .pdp-js .pdp__gallery > figure.rise.in > .pdp-veil[data-edge="bottom"],
  .pdp-js .pdp__gallery > figure.rise.in > .pdp-veil[data-edge="top"] { transform: scaleY(0); }
  .pdp-js .pdp__gallery > figure.rise.in > .pdp-veil[data-edge="right"],
  .pdp-js .pdp__gallery > figure.rise.in > .pdp-veil[data-edge="left"] { transform: scaleX(0); }
}

/* zoom affordance — an affordance, nothing more */
.pdp-js .pdp__gallery > figure { cursor: zoom-in; }
@media (hover: hover) and (pointer: fine) {
  .pdp-page .pdp__gallery > figure img { transition: transform 0.9s var(--ease); }
  .pdp-page .pdp__gallery > figure:hover img { transform: scale(1.012); }
}
.pdp-page .pdp__gallery > figure:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   3 · LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #100e0c;   /* opaque ink ground — the page must not read through */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0s 0.28s;
}
.lb.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid #2a2622;
}
.lb__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d8579;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
}
.lb__btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s, opacity 0.2s;
}
.lb__btn:hover { color: #fff; }
.lb__btn:disabled { opacity: 0.25; cursor: default; }
.lb__btn:focus-visible { outline: 2px solid var(--ember); outline-offset: -4px; }
.lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}
.lb__img {
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #17140f;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.lb.is-open .lb__img { opacity: 1; transform: none; }
.lb__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #2a2622;
}
.lb__cap {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f695e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 8px;
}
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   4 · SPEC LEDGER
   Full-width hairlines, the label column inside the rule, and
   every measurement set in mono so it reads as a measurement.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page .pdp__specs { max-width: 1000px; }
.pdp-page .pdp__specs > .eyebrow {
  margin-bottom: 0;
  padding-bottom: 14px;
  letter-spacing: var(--ledger-track);
}
.pdp-page .pdp__specs dl {
  margin-top: 0;
  border-top: 1px solid var(--ink);
}
.pdp-page .pdp__specs dl > div {
  grid-template-columns: var(--ledger-label) minmax(0, 1fr);
  gap: 18px;
  padding-block: var(--ledger-pad);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.pdp-page .pdp__specs dt {
  font-size: 11px;
  letter-spacing: var(--ledger-track);
  color: var(--ash);
  padding-top: 2px;
}
.pdp-page .pdp__specs dd {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 64ch;
}
/* two pages ship an empty ledger — don't leave a dangling label */
.pdp-page .pdp__specs:not(:has(dt)) { display: none; }

.pdp-page .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.pdp-page .pdp__price .num { font-family: inherit; font-size: inherit; font-weight: inherit; }

@media (max-width: 860px) {
  .pdp-page .pdp__specs dl > div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: calc(var(--ledger-pad) * 0.8);
  }
}

/* ═══════════════════════════════════════════════════════════════
   5 · MOBILE BUY BAR
   ═══════════════════════════════════════════════════════════════ */

.pdp-bar {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px));
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid #2e2a25;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.pdp-bar.is-up { transform: translate3d(0, 0, 0); }
.pdp-bar__t {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-bar__p {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #9d968a;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdp-bar__cta {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bone);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.pdp-bar__cta:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
/* the bar reserves its own room so it never eats the footer */
.pdp-page.has-buybar { padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)); }
/* never over the lightbox */
body.lb-open .pdp-bar { transform: translate3d(0, 101%, 0); }

@media (min-width: 861px) {
  .pdp-bar { display: none; }
  .pdp-page.has-buybar { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   6 · SMALL SCREENS
   Frame one runs edge to edge — the opening picture is the page.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .pdp-page .pdp__gallery > figure:first-of-type {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
  }
  .pdp-page .pdp__gallery[data-dev]::before {
    top: calc(var(--pdp-band-top, 100%) - 5vh);
    height: calc(var(--band) + 10vh);
    left: -8%;
    right: -8%;
  }
  .pdp-page .pdp__specs { margin-top: clamp(34px, 6vh, 56px); }
  .pdp-page .pdp__gallery { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-page .pdp__gallery[data-dev]::before { transform: rotate(var(--glyph-tilt)); }
  .pdp-page .pdp__gallery > figure img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   7 · THE MOBILE FOLD — the garment first
   On a phone the column put the words above the cloth: you met a
   price before you met the piece. Below 861px the same DOM is
   re-ordered by CSS alone — the gallery becomes a swipeable strip
   at the top of the page, the buy fold (title · price · size ·
   acquire) sits directly under it, and the long hook moves below
   the fold. Nothing is reordered in the markup, so every chapter
   treatment in pdp-tops.css / pdp-bottoms.css keeps its selectors.
   Desktop (≥861px) never sees a line of this.
   ═══════════════════════════════════════════════════════════════ */

/* the strip meter is a JS enhancement — no JS, no meter, and the
   strip is still a native horizontal scroller. It never exists on
   desktop. */
.pdp-strip { display: none; }

@media (max-width: 860px) {
  /* the fold is 844px on the phone we design to: every band above the
     Acquire button is spent deliberately. The page opens closer to the
     top and the grid runs tighter than it does in the column. */
  .pdp-page main > .section { padding-top: clamp(14px, 2.4vh, 26px); }
  .pdp { row-gap: 12px; margin-top: -14px; }

  /* ── a · the swipe strip ──────────────────────────────────── */
  .pdp-page .pdp__gallery {
    --strip-w: min(84vw, 45svh);     /* 4:3 tall → the frame never passes 60svh */
    order: -1;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 0;
    /* full-bleed: the strip clips itself, the page never scrolls sideways */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-page .pdp__gallery::-webkit-scrollbar { width: 0; height: 0; }

  /* the watermark is a device of the vertical fall — it lives in the
     breath between frame one and frame two, and the strip has no
     breath. It moves behind the buy fold instead (see c). */
  .pdp-page .pdp__gallery[data-dev]::before { content: none; }

  .pdp-page .pdp__gallery > figure {
    flex: 0 0 var(--strip-w);
    width: var(--strip-w);
    aspect-ratio: 3 / 4;                /* the frame's own proportion */
    display: block;
    scroll-snap-align: center;
    overflow: hidden;
    /* strip reset — sway, beat, the rail channel and the edge bleed are
       all rhythms of a column, written per page in pdp-tops.css and
       pdp-bottoms.css. Inside the strip they are off, and only here;
       the per-page colour, grain and border treatments all stand. */
    margin: 0 !important;
    min-height: 0 !important;
    border-inline-width: 1px !important;
  }
  .pdp-page .pdp__gallery > figure:first-of-type { display: block; }
  .pdp-page .pdp__gallery > figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;                /* nothing in this gallery is cropped */
  }
  /* the rise is a reveal for frames arriving from below. On the strip
     every frame is already beside you — it would only hide the cloth. */
  .pdp-js .pdp__gallery > figure.rise {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* the leg-line measures a fall; on the strip the meter below is the
     measure instead. */
  .bt .pdp__gallery > .bt-rail { display: none; }

  /* ── b · the strip meter: index + travelled hairline ──────── */
  .pdp-strip {
    order: -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  .pdp-strip__i {
    flex: none;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--ash);
    font-variant-numeric: tabular-nums;
  }
  .pdp-strip__track {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .pdp-strip__fill {
    position: absolute;
    inset: 0;
    background: var(--ember);           /* ember is a light, never a fill */
    opacity: 0.85;
    transform: scaleX(var(--strip-p, 0));
    transform-origin: left center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pdp-strip__fill { transition: transform 0.18s linear; }
  }
  /* the bottoms rail hands its ink to the meter that replaced it */
  .bt .pdp-strip__fill { background: var(--rail-live); opacity: 1; }

  /* ── c · the buy fold, compressed ─────────────────────────── */
  .pdp-page .pdp__info { gap: 11px; }
  .pdp-page .pdp__info > .pdp__hook,
  .pdp-page .pdp__info > .tops__sig { order: 2; }
  .pdp-page .pdp__info > .pdp__note { order: 3; }
  .pdp-page .pdp__info > .pdp__hook { margin-top: 10px; }
  .pdp-page .pdp__title { font-size: clamp(25px, 6.6vw, 28px); line-height: 1.05; }
  .pdp-page .pdp__price { line-height: 1.2; }
  .pdp-page .pdp__info > .btn { min-height: 46px; padding-block: 13px; }

  /* the size rail reads as one line: the label beside the sizes, not
     above them. Touch targets stay 44 × 48. */
  .pdp-page .sizes {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pdp-page .sizes__head { flex: none; }
  .pdp-page .sizes__row { flex: 1 1 auto; }
  /* sized by their own words, so CUSTOM never crowds 2XL */
  .pdp-page .sizes__row button {
    flex: 1 1 auto;
    min-width: 34px;
    padding-inline: 4px;
    font-size: 11px;
  }

  /* the chapter glyph, rehoused: it keeps the page's mark on a phone,
     a hairline stroke behind the words, never over them. */
  /* `top` is the desktop sticky offset — relative must not inherit it */
  .pdp-page .pdp__info[data-dev] { position: relative; top: auto; }
  .pdp-page .pdp__info[data-dev]::before {
    content: attr(data-dev);
    position: absolute;
    z-index: -1;
    left: -10%;
    right: -10%;
    top: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--glyph-size);   /* each chapter's own tuning, cqw → viewport here */
    line-height: 0.92;
    letter-spacing: var(--glyph-track);
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: var(--glyph-w) color-mix(in srgb, var(--ink) var(--glyph-ink), transparent);
    transform: translateY(-50%) rotate(var(--glyph-tilt));
    opacity: 0.7;                   /* it sits under live copy — one step back */
    pointer-events: none;
    user-select: none;
  }
  @supports not (-webkit-text-stroke: 1px black) {
    .pdp-page .pdp__info[data-dev]::before { color: color-mix(in srgb, var(--ink) 6%, transparent); }
  }
  .pdp-page.chapter--last-rites .pdp__info[data-dev]::before {
    -webkit-text-stroke-color: color-mix(in srgb, var(--ash) 30%, transparent);
  }
}