/* ══════════════════════════════════════════════════════════════
   VISION SINDH — TOPS layer
   Loads only on <body class="… type--top">, after pdp-extra.css.
   It never redefines a base selector's job: it re-tunes the base
   dials (--glyph-*, --fig1-*, --band-*, --grain, --rev-*,
   --ledger-*, --rule) and adds four components of its own —
   the pulled lead, the signature hairline, the frame plate and
   the brief ledger — all injected by pdp-tops.js.

   Twenty-three garments, six families, one overlay:

     A · UGRA / ARMOUR      ugra-aangrakha, ugra-aangrakha-top,
                            ugra-aangrakha-top-limited-white-ver
     B · ROBES & VESTS      r-o-g-essential-robe-1, r-o-g-robe-summer-ver,
                            the-rog-robe-limited-white-ver,
                            the-rog-robe-limited-white-ver-cape-sleeves,
                            raged-monk-robe, monk-vest-summer-ver,
                            monk-vest-limited-white-ver
     C · DRAPE & SHAWL      echofall-drape-tunic,
                            karma-draped-hoodie-summer-version,
                            ashfall-cloak, shawl-draped-hoodie-limited-white-ver,
                            shawl-streetwear-shrug, shrug-white-limited-version
     D · KURTAS             draped-collar-kurta, leather-longline-kurta,
                            white-zippered-kurta
     E · LAST RITES         ashen-longline-tee, statement-collar-jacket
     F · ARCHIVE VOID       void-utility-top, obsidian-drape-top
     ○ · WHITE LIMITED      an overlay on six of the above — bone ground,
                            lighter rules, less grain. Tonal only; the
                            title already says "Limited White".

   Palette discipline unchanged: ink / bone / ash / paper.
   EMBER (#d9611f) appears only as a hairline or a focus ring —
   it is a light in this file, never a fill.
   Composed at 390×844 first; desktop widens what is already true.
   ══════════════════════════════════════════════════════════════ */

.pdp-page.type--top {
  /* ── tops dials (families and single garments re-tune these) ── */
  --t-lead: clamp(19px, 5.4vw, 26px);   /* the pulled first clause  */
  --t-lead-lh: 1.22;
  --t-lead-track: 0.002em;
  --t-lead-ink: var(--ink);
  --t-rest: 14px;                        /* the clause that follows */
  --t-rest-ink: var(--ash);
  --t-rest-gap: 9px;

  --t-sig-h: 22px;                       /* the signature hairline  */
  --t-sig-col: color-mix(in srgb, var(--ash) 52%, transparent);
  --t-sig-w: 1;
  --t-sig-t: 1.3s;
  --t-sig-squeeze: -9px;

  --t-plate-ink: color-mix(in srgb, var(--ink) 66%, transparent);  /* the frame plate */
  --t-plate-bg: color-mix(in srgb, var(--paper) 93%, transparent);
  --t-plate-track: 0.2em;
  --t-plate-size: 9.5px;

  --t-veil: 0 0 var(--rev-veil) 0;       /* which edge the reveal lifts from */
  --t-sway: 0px;                         /* gallery drift amplitude */
  --t-step: 0px;                         /* progressive indent per frame */
  --t-mark: 0px;                         /* eyebrow motif size; 0 = none */
  --t-mark-r: 50%;
  --t-mark-col: color-mix(in srgb, var(--ash) 70%, transparent);
  --t-mark-style: solid;
}

/* ═══════════════════════════════════════════════════════════════
   1 · THE PULLED LEAD
   pdp-tops.js splits .pdp__hook at its own punctuation — the em
   dash the copy already carries, or its first full stop. Nothing
   is rewritten; the break the sentence had is simply given room.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top .tops__lead {
  display: block;
  /* measured in its own size, so the quote keeps the same three
     or four lines whether it is set at 19px or 29px */
  max-width: 17em;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-track);
  color: var(--t-lead-ink);
  text-wrap: balance;
}
.pdp-page.type--top .tops__lead.is-long {
  font-size: clamp(15.5px, 4vw, 18px);
  line-height: 1.4;
  max-width: 26em;
}
.pdp-page.type--top .tops__rest {
  display: block;
  margin-top: var(--t-rest-gap);
  font-size: var(--t-rest);
  line-height: 1.6;
  color: var(--t-rest-ink);
  max-width: 42ch;
}

/* ═══════════════════════════════════════════════════════════════
   2 · THE SIGNATURE HAIRLINE
   One stroke per family, drawn once as it arrives. A drape sways,
   a robe arches, armour steps, a kurta plumbs, ash frays.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top .tops__sig {
  display: block;
  width: 100%;
  height: var(--t-sig-h);
  margin-block: var(--t-sig-squeeze);
  pointer-events: none;
}
.pdp-page.type--top .tops__sig svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* the stroke is drawn by wiping the box, not by dashing the
     path: the viewBox is scaled non-uniformly to fill the column,
     and a dash pattern under non-scaling-stroke is measured in
     screen space — it comes apart into stripes. A wipe cannot. */
  clip-path: inset(0 100% 0 0);
}
.pdp-page.type--top .tops__sig path {
  fill: none;
  stroke: var(--t-sig-col);
  stroke-width: var(--t-sig-w);
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  .pdp-page.type--top .tops__sig.in svg {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--t-sig-t) var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-page.type--top .tops__sig svg { clip-path: none; }
}

/* ═══════════════════════════════════════════════════════════════
   3 · THE FRAME PLATE
   A museum plate, not a caption: the frame's number, in the
   family's own numerals. Archive keeps the base RECORD stamp and
   takes no plate; drape pieces speak through the sway instead.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top .tops__plate {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  padding: 4px 7px 3px;
  background: var(--t-plate-bg);
  font-family: var(--font-mono);
  font-size: var(--t-plate-size);
  font-weight: 500;
  letter-spacing: var(--t-plate-track);
  line-height: 1;
  color: var(--t-plate-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
/* frame one runs edge to edge on small screens — hold the plate
   inside the safe gutter so it never kisses the screen edge */
@media (max-width: 860px) {
  .pdp-page.type--top .pdp__gallery > figure:first-of-type .tops__plate {
    left: calc(var(--gutter) * 0.6);
    bottom: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4 · THE BRIEF LEDGER
   Two garments ship their whole spec sheet inside the hook as one
   unbroken paragraph and an empty ledger below. The words are the
   brand's, verbatim; only the line breaks are ours.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top .tops__brief { display: block; }
.pdp-page.type--top .tops__brief dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.pdp-page.type--top .tops__brief dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule);
}
.pdp-page.type--top .tops__brief dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}
.pdp-page.type--top .tops__brief dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.pdp-page.type--top .tops__outro {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ash);
  max-width: 44ch;
}
@media (min-width: 861px) {
  .pdp-page.type--top .tops__brief dl > div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5 · EYEBROW MOTIF
   A mark before the chapter name. The base owns the rule beneath
   it; this is the slot above. 0px = no mark (the default).
   ═══════════════════════════════════════════════════════════════ */

/* only the pages that ask for a mark get one — a bare border on a
   zero-size box would still print two stray pixels */
.pdp-page.type--top.has-mark .pdp__info > .eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: var(--t-mark);
  height: var(--t-mark-h, var(--t-mark));
  margin-right: 9px;
  margin-top: -2px;
  border: 1px var(--t-mark-style) var(--t-mark-col);
  border-radius: var(--t-mark-r);
}

/* ═══════════════════════════════════════════════════════════════
   6 · GALLERY CADENCE
   Sway and step are positive insets only: a frame narrows and
   shifts, it never overhangs the sticky info column.
   pdp-tops.js writes --i on each figure (0-based).
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top .pdp__gallery > figure { position: relative; }

/* step — a walk that keeps shortening — and drift, where odd
   frames lean one way and even frames the other. A family uses
   one or the other; the even rule simply carries both terms. */
.pdp-page.type--top .pdp__gallery > figure:nth-of-type(n + 2) {
  margin-inline-start: calc(var(--i, 0) * var(--t-step));
}
.pdp-page.type--top .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(odd) { margin-inline-end: var(--t-sway); }
.pdp-page.type--top .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(even) {
  margin-inline-start: calc(var(--i, 0) * var(--t-step) + var(--t-sway));
}

/* the reveal's own edge */
@media (prefers-reduced-motion: no-preference) {
  /* the edge comes from --t-veil; pdp.js reads it and anchors the
     composited curtain (.pdp-veil) there */
}

/* ═══════════════════════════════════════════════════════════════
   7 · FAMILY A — UGRA / ARMOUR
   "The raged form of God in torn battle armour." The fastest
   reveals on the site, the tightest gaps, ember at the edges.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--ugra-aangrakha, .product--ugra-aangrakha-top, .product--ugra-aangrakha-top-limited-white-ver) {
  --glyph-ink: 13%;
  --glyph-w: 1.8px;
  --glyph-tilt: -3deg;
  --glyph-drift: 54px;
  --fig-gap: 6px;
  --band-d: clamp(84px, 13vh, 150px);
  --band-m: clamp(66px, 10vh, 108px);
  --rev-t: 0.46s;
  --rev-y: 30px;
  --rev-veil: 20%;
  --ledger-pad: 18px;
  --ledger-track: 0.1em;
  --t-lead: clamp(20px, 5.9vw, 29px);
  --t-lead-track: -0.004em;
  --t-lead-lh: 1.16;
  --t-rest: 13.5px;
  --t-sig-col: color-mix(in srgb, var(--ember) 42%, transparent);
  --t-sig-w: 1.4;
  --t-sig-t: 0.5s;
  --t-plate-track: 0.24em;
  --t-plate-ink: var(--ink);
}
.pdp-page.type--top:is(.product--ugra-aangrakha, .product--ugra-aangrakha-top, .product--ugra-aangrakha-top-limited-white-ver) .pdp__title {
  letter-spacing: -0.012em;
}
/* the rail carries the same charge as the eyebrow rule */
.pdp-page.type--top:is(.product--ugra-aangrakha, .product--ugra-aangrakha-top, .product--ugra-aangrakha-top-limited-white-ver) .sizes__row button[aria-checked="true"] {
  border-bottom-color: var(--ember);
}

/* ═══════════════════════════════════════════════════════════════
   8 · FAMILY B — ROBES & VESTS
   "The drape flips over the head, the walk slows down." The veil
   lifts from the top here — every frame arrives like a hood
   coming down — and the walk shortens frame by frame.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--r-o-g-essential-robe-1, .product--r-o-g-robe-summer-ver, .product--the-rog-robe-limited-white-ver, .product--the-rog-robe-limited-white-ver-cape-sleeves, .product--raged-monk-robe, .product--monk-vest-summer-ver, .product--monk-vest-limited-white-ver) {
  --glyph-ink: 9.5%;
  --glyph-w: 1.4px;
  --glyph-drift: 38px;
  --fig-gap: 12px;
  --band-d: clamp(118px, 19vh, 220px);
  --band-m: clamp(96px, 15vh, 166px);
  --rev-t: 0.86s;
  --rev-y: 18px;
  --rev-veil: 19%;
  --t-veil: var(--rev-veil) 0 0 0;
  --t-step: 1.1%;
  --t-lead-lh: 1.2;
  --t-lead-track: 0.004em;
  --t-sig-t: 1.1s;
  --t-sig-col: color-mix(in srgb, var(--ink) 30%, transparent);
  --ledger-pad: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   9 · FAMILY C — DRAPE & SHAWL
   Cloth that moves. The slowest reveals, the widest breath, and
   a gallery that sways left and right down the page.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--echofall-drape-tunic, .product--karma-draped-hoodie-summer-version, .product--ashfall-cloak, .product--shawl-draped-hoodie-limited-white-ver, .product--shawl-streetwear-shrug, .product--shrug-white-limited-version) {
  --glyph-ink: 7%;
  --glyph-w: 1.05px;
  --glyph-track: 0.05em;
  --glyph-drift: 42px;
  --fig-gap: 16px;
  --band-d: clamp(126px, 21vh, 240px);
  --band-m: clamp(104px, 16vh, 176px);
  --rev-t: 1.12s;
  --rev-y: 20px;
  --rev-veil: 15%;
  --t-sway: 3%;
  --t-lead-lh: 1.3;
  --t-lead-track: 0.008em;
  --t-rest-gap: 11px;
  --t-sig-t: 1.7s;
  --t-sig-h: 26px;
  --ledger-pad: 24px;
  --ledger-track: 0.17em;
}
@media (min-width: 861px) {
  .pdp-page.type--top:is(.product--echofall-drape-tunic, .product--karma-draped-hoodie-summer-version, .product--ashfall-cloak, .product--shawl-draped-hoodie-limited-white-ver, .product--shawl-streetwear-shrug, .product--shrug-white-limited-version) { --t-sway: 6%; }
}

/* ═══════════════════════════════════════════════════════════════
   10 · FAMILY D — KURTAS
   Devotional spacing. Nothing hurries, nothing leans; the ledger
   is given the most air on the site and the frames sit square.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--draped-collar-kurta, .product--leather-longline-kurta, .product--white-zippered-kurta) {
  --glyph-ink: 5%;
  --glyph-w: 1px;
  --glyph-track: 0.08em;
  --glyph-drift: 20px;
  --fig-gap: 20px;
  --band-d: clamp(132px, 21vh, 244px);
  --band-m: clamp(102px, 15vh, 168px);
  --rev-t: 1s;
  --rev-y: 12px;
  --rev-veil: 10%;
  --ledger-pad: 28px;
  --ledger-track: 0.19em;
  --ledger-label: 160px;
  --t-lead: clamp(19px, 5.1vw, 25px);
  --t-lead-lh: 1.34;
  --t-lead-track: 0.012em;
  --t-rest-gap: 12px;
  --t-sig-t: 1.5s;
  --t-sig-col: color-mix(in srgb, var(--ink) 24%, transparent);
  --t-plate-track: 0.16em;
  --t-plate-size: 10px;
}
.pdp-page.type--top:is(.product--draped-collar-kurta, .product--leather-longline-kurta, .product--white-zippered-kurta) .tops__plate {
  left: auto;
  right: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   11 · FAMILY E — LAST RITES
   Ash-quiet, one step further away than everything else. The
   plates fade as the page descends.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--ashen-longline-tee, .product--statement-collar-jacket) {
  --glyph-ink: 5%;
  --glyph-track: 0.07em;
  --fig-gap: 18px;
  --rev-t: 1.2s;
  --rev-y: 14px;
  --t-lead-ink: var(--ink-soft);
  --t-lead-lh: 1.26;
  --t-rest-ink: color-mix(in srgb, var(--ash) 85%, transparent);
  --t-sig-col: color-mix(in srgb, var(--ash) 42%, transparent);
  --t-sig-t: 1.5s;
  --t-plate-ink: var(--ash);
  --t-plate-track: 0.22em;
}
/* the plate loses a little more of itself with every frame */
.pdp-page.type--top:is(.product--ashen-longline-tee, .product--statement-collar-jacket) .tops__plate {
  opacity: calc(1 - var(--i, 0) * 0.13);
}

/* ═══════════════════════════════════════════════════════════════
   12 · FAMILY F — ARCHIVE VOID
   Both retired, both hookless. No lead, no signature, no plate —
   only the record, in a colder frame.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--void-utility-top, .product--obsidian-drape-top) {
  --glyph-ink: 8%;
  --glyph-tilt: -5deg;
  --fig-gap: 14px;
  --rev-t: 0.95s;
  --grain: 0.17;
  --rule: #cfc9bc;
}
.pdp-page.type--top:is(.product--void-utility-top, .product--obsidian-drape-top) .pdp__gallery > figure {
  --white: #eae6de;
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.pdp-page.type--top:is(.product--void-utility-top, .product--obsidian-drape-top) .pdp__retired {
  border-block-width: 1px;
  border-block-color: var(--ink);
}
.pdp-page.type--top:is(.product--void-utility-top, .product--obsidian-drape-top) .pdp__retired .mono {
  letter-spacing: 0.2em;
}

/* ═══════════════════════════════════════════════════════════════
   13 · OVERLAY — WHITE LIMITED
   Six garments cut in white. The page turns bone: a lighter
   ground, lighter rules, less grain, a fainter watermark. Felt,
   not announced — the title already carries the words.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--top:is(.product--ugra-aangrakha-top-limited-white-ver, .product--the-rog-robe-limited-white-ver, .product--the-rog-robe-limited-white-ver-cape-sleeves, .product--monk-vest-limited-white-ver, .product--shrug-white-limited-version, .product--shawl-draped-hoodie-limited-white-ver) {
  --paper: #f2f0ea;
  --paper-2: #eae7e0;
  --white: #fcfbf8;
  --rule: #ddd8cc;
  --grain: 0.07;
  --glyph-ink: 6%;
  --t-plate-bg: color-mix(in srgb, #fff 72%, transparent);
  --t-plate-ink: color-mix(in srgb, var(--ink) 62%, transparent);
  --t-sig-col: color-mix(in srgb, var(--ash) 44%, transparent);
}
.pdp-page.type--top:is(.product--ugra-aangrakha-top-limited-white-ver, .product--the-rog-robe-limited-white-ver, .product--the-rog-robe-limited-white-ver-cape-sleeves, .product--monk-vest-limited-white-ver, .product--shrug-white-limited-version, .product--shawl-draped-hoodie-limited-white-ver) .pdp__gallery > figure {
  border-color: color-mix(in srgb, var(--ash) 24%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   14 · ONE GARMENT AT A TIME
   Each page keeps something no other page has. Ordered after the
   families so a single piece always outranks its relatives.
   ═══════════════════════════════════════════════════════════════ */

/* — A1 · Ugra Angrakha Top (Summer Ver.) —
   A 20-inch diagonal zipper runs the crossover line. Every second
   frame is cut on that same diagonal.                            */
.pdp-page.type--top.product--ugra-aangrakha { --rev-t: 0.5s; }
.pdp-page.type--top.product--ugra-aangrakha .pdp__gallery > figure:nth-of-type(even) {
  clip-path: polygon(0 0, 100% 3.2%, 100% 100%, 0 100%);
}

/* — A2 · UGRA AANGRAKHA TOP —
   "Extended hem panel on the right side." The odd frames give the
   right side its extra inch of cloth.                            */
.pdp-page.type--top.product--ugra-aangrakha-top .pdp__gallery > figure:nth-of-type(n + 3):nth-of-type(odd) {
  margin-left: 7%;
  margin-right: 0;
}
.pdp-page.type--top.product--ugra-aangrakha-top .tops__plate::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--ember);
}

/* — A3 · UGRA AANGRAKHA TOP (Limited White Full Ver.) —
   Armour drawn from its sheath: the veil lifts from the right.  */
.pdp-page.type--top.product--ugra-aangrakha-top-limited-white-ver {
  --t-veil: 0 var(--rev-veil) 0 0;
  --rev-y: 12px;
}

/* — B1 · R-O-G Robe —
   The original, and the slowest walk of the seven.              */
.pdp-page.type--top.product--r-o-g-essential-robe-1 {
  --t-step: 1.7%;
  --band-d: clamp(140px, 23vh, 260px);
  --band-m: clamp(112px, 17vh, 190px);
  --rev-t: 0.96s;
}

/* — B2 · R-O-G Robe (Summer Ver.) —
   The same walk, opening out instead of closing in.             */
.pdp-page.type--top.product--r-o-g-robe-summer-ver {
  --t-step: 0px;
  --rule: #ddd8cc;
  --glyph-w: 1.1px;
}
.pdp-page.type--top.product--r-o-g-robe-summer-ver .pdp__gallery > figure:nth-of-type(n + 2) {
  margin-inline-start: calc((5 - var(--i, 0)) * 1.3%);
}

/* — B3 · The ROG ROBE (Limited White Full Ver.) —
   Full length: frame one stands taller here than anywhere.      */
.pdp-page.type--top.product--the-rog-robe-limited-white-ver {
  --fig1-m: 73svh;
  --fig1-d: 94svh;
  --t-step: 0.8%;
}

/* — B4 · The ROG ROBE (Limited White Half Ver., cape sleeves) —
   The cape breathes: frames alternate wide and narrow.          */
.pdp-page.type--top.product--the-rog-robe-limited-white-ver-cape-sleeves { --t-step: 0px; }
.pdp-page.type--top.product--the-rog-robe-limited-white-ver-cape-sleeves .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(even) {
  margin-inline: 8%;
}

/* — B5 · Monk Vest —
   A lifetime of meditation: the mark is the vest's own opening,
   a single upright hairline before the chapter name.            */
.pdp-page.type--top.product--raged-monk-robe {
  --t-mark: 1px;
  --t-mark-h: 11px;
  --t-mark-r: 0;
  --t-mark-col: color-mix(in srgb, var(--ink) 55%, transparent);
  --t-step: 1.3%;
}

/* — B6 · Monk Vest (Summer Ver.) —
   Lighter cloth, less breath, and the plate moves to the top.   */
.pdp-page.type--top.product--monk-vest-summer-ver {
  --band-d: clamp(100px, 16vh, 184px);
  --band-m: clamp(84px, 13vh, 140px);
  --grain: 0.12;
}
.pdp-page.type--top.product--monk-vest-summer-ver .tops__plate { bottom: auto; top: 10px; }
@media (max-width: 860px) {
  .pdp-page.type--top.product--monk-vest-summer-ver .pdp__gallery > figure:first-of-type .tops__plate { top: 14px; bottom: auto; }
}

/* — B7 · Monk Vest (Limited White Full Ver.) —
   The white vest speaks widest: the lead is set with the most
   open tracking of the family.                                  */
.pdp-page.type--top.product--monk-vest-limited-white-ver {
  --t-lead-track: 0.03em;
  --t-lead-lh: 1.3;
  --t-step: 0.9%;
}

/* — C1 · Karma Draped Hoodie —
   "Rooted in karmic cycles." The mark is the cycle: a closed
   ring, and a sway that returns to where it began.              */
.pdp-page.type--top.product--echofall-drape-tunic {
  --t-mark: 7px;
  --t-mark-col: color-mix(in srgb, var(--ink) 42%, transparent);
  --t-sway: 4%;
}
@media (min-width: 861px) { .pdp-page.type--top.product--echofall-drape-tunic { --t-sway: 7%; } }

/* — C2 · Karma Draped Hoodie (Summer Version) —
   The same cycle, broken open for summer.                       */
.pdp-page.type--top.product--karma-draped-hoodie-summer-version {
  --t-mark: 7px;
  --t-mark-style: dashed;
  --grain: 0.07;
  --band-m: clamp(88px, 13vh, 148px);
  --t-sig-t: 1.9s;
}

/* — C3 · Shawl Draped Hoodie —
   "Wear it loud, wear it bold." The widest sway on the site and
   the whole brief broken out of the paragraph it was hiding in. */
.pdp-page.type--top.product--ashfall-cloak {
  --t-sway: 5%;
  --t-lead: clamp(17px, 4.6vw, 22px);
}
@media (min-width: 861px) { .pdp-page.type--top.product--ashfall-cloak { --t-sway: 9%; } }

/* — C4 · Shawl Draped Hoodie (Limited White Ver.) —
   The same garment in bone, and the sway mirrored.              */
.pdp-page.type--top.product--shawl-draped-hoodie-limited-white-ver {
  --t-lead: clamp(17px, 4.6vw, 22px);
  --t-sway: 5%;
}
.pdp-page.type--top.product--shawl-draped-hoodie-limited-white-ver .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(odd) { margin-right: 0; margin-left: var(--t-sway); }
.pdp-page.type--top.product--shawl-draped-hoodie-limited-white-ver .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(even) { margin-left: 0; margin-right: var(--t-sway); }
@media (min-width: 861px) { .pdp-page.type--top.product--shawl-draped-hoodie-limited-white-ver { --t-sway: 9%; } }

/* — C5 · Shawl Streetwear Shrug —
   Cultural roots, street edge: the shawl slips further off the
   shoulder with every frame.                                    */
.pdp-page.type--top.product--shawl-streetwear-shrug {
  --t-sway: 0%;
  --t-step: 2.4%;
  --glyph-tilt: -6deg;
}

/* — C6 · Shrug (White Limited Ver.) —
   Four frames only. Each one is given more room than usual.     */
.pdp-page.type--top.product--shrug-white-limited-version {
  --fig1-m: 70svh;
  --fig1-d: 92svh;
  --band-d: clamp(150px, 25vh, 280px);
  --band-m: clamp(116px, 18vh, 196px);
  --fig-gap: 22px;
  --t-sway: 4%;
}
@media (min-width: 861px) { .pdp-page.type--top.product--shrug-white-limited-version { --t-sway: 8%; } }

/* — D1 · Draped Collar Kurta —
   "One piece that does the work of two." Three sentences, three
   lines — and one pair of frames that share a single row.       */
.pdp-page.type--top.product--draped-collar-kurta .tops__rest { max-width: 30ch; }
@media (min-width: 861px) {
  .pdp-page.type--top.product--draped-collar-kurta .pdp__gallery { grid-template-columns: 1fr 1fr; }
  .pdp-page.type--top.product--draped-collar-kurta .pdp__gallery > figure { grid-column: span 2; }
  .pdp-page.type--top.product--draped-collar-kurta .pdp__gallery > figure:nth-of-type(3),
  .pdp-page.type--top.product--draped-collar-kurta .pdp__gallery > figure:nth-of-type(4) { grid-column: span 1; }
}

/* — D2 · Longline Leather Kurta —
   Armoured: the heaviest rules on the site, the tallest opening
   frame, and a fraction more contrast in the cloth.             */
.pdp-page.type--top.product--leather-longline-kurta {
  --rule: color-mix(in srgb, var(--ink) 42%, transparent);
  --ledger-pad: 24px;
  --ledger-track: 0.22em;
  --fig1-m: 72svh;
  --fig1-d: 96svh;
  --fig-filter: contrast(1.04) saturate(0.96);
  --t-lead-track: 0.02em;
  --t-sig-w: 1.6;
  --t-sig-col: color-mix(in srgb, var(--ink) 42%, transparent);
}
.pdp-page.type--top.product--leather-longline-kurta .pdp__specs dl { border-top-width: 2px; }

/* — D3 · White Zippered Kurta —
   "Minimal on the surface. Precise underneath." A zip line runs
   down the inside edge of the column, and the plates go metric. */
.pdp-page.type--top.product--white-zippered-kurta {
  --t-plate-track: 0.14em;
  --t-plate-size: 9.5px;
  --rev-veil: 7%;
}
.pdp-page.type--top.product--white-zippered-kurta .pdp__hook.has-lead {
  padding-left: 16px;
  border-left: 1px dashed color-mix(in srgb, var(--ash) 55%, transparent);
}

/* — E1 · ASHEN LONGLINE TEE —
   "Worn until it frays." The ledger wears out as it descends.   */
.pdp-page.type--top.product--ashen-longline-tee {
  --fig-gap: 20px;
  --ledger-pad: 22px;
}
.pdp-page.type--top.product--ashen-longline-tee .pdp__specs dl > div:nth-child(n + 4) { border-bottom-style: dashed; }
.pdp-page.type--top.product--ashen-longline-tee .pdp__specs dl > div:nth-child(n + 5) { border-bottom-color: color-mix(in srgb, var(--ash) 34%, transparent); }
.pdp-page.type--top.product--ashen-longline-tee .pdp__specs dl > div:last-child { border-bottom-color: color-mix(in srgb, var(--ash) 20%, transparent); }

/* — E2 · STATEMENT COLLAR JACKET —
   "Walks into a room before you do." The collar is a rule above
   the title that reaches past the column, and frame one stands
   at its full height.                                           */
.pdp-page.type--top.product--statement-collar-jacket {
  --fig1-m: 74svh;
  --fig1-d: 97svh;
  --band-d: clamp(130px, 21vh, 236px);
  --t-lead: clamp(20px, 5.6vw, 27px);
  --t-lead-ink: var(--ink);
}
.pdp-page.type--top.product--statement-collar-jacket .pdp__title {
  padding-left: 16px;
  border-left: 2px solid var(--ink);
}
.pdp-page.type--top.product--statement-collar-jacket .pdp__price { font-size: clamp(22px, 2.3vw, 31px); }

/* — F1 · Void Collar Top —
   Retired. The record is set in the coldest frame of the two.   */
.pdp-page.type--top.product--void-utility-top .pdp__gallery > figure { --white: #e6e2da; }
.pdp-page.type--top.product--void-utility-top .pdp__retired { border-inline: 1px solid var(--ink); padding-inline: 16px; }

/* — F2 · Thumbhole Top —
   Retired, and still draping: the even frames step to the right.*/
.pdp-page.type--top.product--obsidian-drape-top {
  --fig-filter: contrast(1.05) saturate(0.92);
}
.pdp-page.type--top.product--obsidian-drape-top .pdp__gallery > figure:nth-of-type(n + 2):nth-of-type(even) { margin-left: 6%; }
.pdp-page.type--top.product--obsidian-drape-top .pdp__retired {
  border-block-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════
   15 · SMALL SCREENS
   The sway and the step are halved below 861px — at 390 the
   column is the page, and a frame that walks too far reads as a
   mistake rather than a rhythm.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 520px) {
  .pdp-page.type--top {
    --t-sig-h: 18px;
    --t-sig-squeeze: -7px;
  }
}