/* ══════════════════════════════════════════════════════════════
   VISION SINDH — BOTTOM-WEAR product pages
   Loads only on <body class="… type--bottom">, after pdp-extra.css.

   Bottoms are read down, not across: silhouette and hardware.
   So this layer gives the gallery a LEG-LINE — a measuring rail
   that falls the length of the frames, ticked at every frame,
   drawn on scroll — and it lets the spec ledger speak by setting
   the construction words in the copy apart from the prose.

   LAYERING RULE (base is final):
   every atmospheric change here is made by re-tuning the base's
   chapter dials on .pdp-page.type--bottom — --glyph-*, --fig1-*,
   --band-*, --fig-gap, --grain, --rev-*, --ledger-*, --rule.
   Base selectors are never redefined; the base owns frame-one's
   min-height FLOOR (hems and heel-stacks must never crop), the
   IO reveals, the lightbox, span.num and the mobile buy bar.

   Palette: ink / bone / ash / paper. EMBER is light + focus only.
   Mobile 390 is the composed case; desktop widens the channel.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   0 · THE BOTTOMS TUNING  (dials only — see layering rule)
   A bottom hangs. Frame one stands a little taller, the breath
   after it is longer, and the frames below fall in a tighter
   column so the eye keeps descending.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--bottom {
  /* the leg-line channel — the rail's own column, left of the frames */
  --rail-w: clamp(32px, 9vw, 58px);
  --rail-t: 1px;                 /* hairline weight */
  --rail-ink: color-mix(in srgb, var(--ink) 13%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 34%, transparent);
  --tick-ink: color-mix(in srgb, var(--ink) 30%, transparent);
  --tick-w: 17px;
  --tick-h: 1px;
  --num-ink: var(--ash);
  --num-op: 0.6;
  --cap-w: 15px;                 /* the hem stop at the foot of the rail */
  --beat: 0px;                   /* extra breath on alternating frames */
  --rail-ease: 1s;
  --call-line: color-mix(in srgb, var(--ash) 52%, transparent);
  --call-style: solid;
  --call-off: 3px;

  /* base dials, re-tuned for a garment that is read downward */
  --fig1-d: 90svh;
  --fig1-m: 66svh;
  --fig-gap: 10px;
  --band-d: clamp(112px, 18vh, 214px);
  --band-m: clamp(94px, 14vh, 158px);
  --ledger-track: 0.17em;
}

/* ═══════════════════════════════════════════════════════════════
   1 · THE FALL LINE
   It starts under the eyebrow on the first screen and reappears
   as the gallery rail — one line, running the height of the page.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--bottom .pdp__info > .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 1px;
  height: var(--descender, 15px);
  background: var(--ash);
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   2 · THE RAIL
   Built by pdp-bottoms.js (progressive: no JS, no rail, no gap).
   The frames below frame one step right to open its channel; on
   small screens they take the right edge in exchange, so the
   channel is the only inset and the picture stays large.
   ═══════════════════════════════════════════════════════════════ */

.bt .pdp__gallery > figure:not(:first-of-type) { margin-left: var(--rail-w); }

@media (max-width: 860px) {
  .bt .pdp__gallery > figure:not(:first-of-type) {
    margin-right: calc(var(--gutter) * -1);
    border-inline-end: 0;
  }
}

/* alternating breath — the leg-line's cadence, family-tuned */
.bt .pdp__gallery > figure:nth-of-type(odd):not(:first-of-type) { margin-top: var(--beat); }

.bt-rail {
  position: absolute;
  z-index: 0;
  left: 0;
  width: var(--rail-w);
  top: var(--rail-top, 0px);
  height: var(--rail-h, 0px);
  pointer-events: none;
  user-select: none;
}

.bt-rail__line,
.bt-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--rail-t);
  height: 100%;
}
.bt-rail__line { background: var(--rail-ink); }
.bt-rail__fill {
  background: var(--rail-live);
  transform-origin: 0 0;
  transform: scaleY(var(--bt-p, 0));
}

/* the hem stop — where the line lands */
.bt-rail__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cap-w);
  height: 1px;
  background: var(--rail-ink);
}

/* a frame mark: the tick, and the frame's number under it */
.bt-rail__marks { position: absolute; inset: 0; }
.bt-mark {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
}
.bt-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tick-w);
  height: var(--tick-h);
  background: var(--tick-ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.72s var(--ease);
}
.bt-mark.is-on::before { transform: scaleX(1); }

.bt-mark__n {
  position: absolute;
  left: 5px;
  top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  color: var(--num-ink);
  opacity: 0;
  transition: opacity var(--rail-ease) var(--ease);
}
.bt-mark.is-on .bt-mark__n { opacity: var(--num-op); }

@media (prefers-reduced-motion: reduce) {
  .bt-mark::before { transform: scaleX(1); transition: none; }
  .bt-mark__n { opacity: var(--num-op); transition: none; }
  .bt-rail__fill { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════════
   3 · CONSTRUCTION CALL-OUTS
   pdp-bottoms.js lifts the construction words already printed in
   the ledger — drop-crotch, potli, churidar, nada, eyelets, GSM —
   out of the prose. No new copy: the same words, set apart.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--bottom .bt-call {
  font-style: normal;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--call-line);
  text-decoration-style: var(--call-style);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--call-off);
  text-decoration-skip-ink: none;
}

/* ═══════════════════════════════════════════════════════════════
   4 · FAMILIES
   One instrument, five tunings — the rail, the cadence and the
   ledger rules carry the difference.
   ═══════════════════════════════════════════════════════════════ */

/* ── 4.1 · UTILITY — engineered, mono-forward, machine cadence ──
   vs-fit-pants · pants-02 · pants-03 · gun-metal-cargos          */
.bt.bt-fam--utility {
  --rail-ink: color-mix(in srgb, var(--ink) 16%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 40%, transparent);
  --tick-ink: color-mix(in srgb, var(--ink) 38%, transparent);
  --tick-w: 20px;
  --num-op: 0.72;
  --num-ink: color-mix(in srgb, var(--ink) 58%, transparent);
  --cap-w: 20px;
  --beat: 0px;                   /* no drift — the cadence is even */
  --rail-ease: 0.7s;
  --descender: 18px;
  --fig-gap: 8px;
  --ledger-track: 0.2em;
  --call-line: color-mix(in srgb, var(--ink) 40%, transparent);
}
/* the ledger reads as a spec sheet: every rule opens with a stop */
.bt.bt-fam--utility .pdp__specs dl > div { position: relative; }
.bt.bt-fam--utility .pdp__specs dl > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 8px;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* ── 4.2 · DRAPE — flowing, slower, more air ───────────────────
   potli (×2) · asymmetric · heram/harem (×2)                     */
.bt.bt-fam--drape {
  --rail-ink: color-mix(in srgb, var(--ink) 10%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 26%, transparent);
  --tick-ink: color-mix(in srgb, var(--ash) 62%, transparent);
  --tick-w: 13px;
  --num-op: 0.48;
  --cap-w: 11px;
  --beat: 26px;                  /* the fall gathers unevenly */
  --rail-ease: 1.5s;
  --descender: 22px;
  --fig-gap: 15px;
  --band-d: clamp(128px, 21vh, 244px);
  --band-m: clamp(104px, 16vh, 176px);
  --rev-t: 1.2s;
  --rev-y: 26px;
  --call-style: dotted;
  --call-off: 4px;
}
/* the rail breathes rather than states — it fades at both ends */
.bt.bt-fam--drape .bt-rail__line,
.bt.bt-fam--drape .bt-rail__fill {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
}
/* ledger rules soften away to the right, like a hem let out */
.bt.bt-fam--drape .pdp__specs dl > div {
  border-bottom-color: transparent;
  position: relative;
}
.bt.bt-fam--drape .pdp__specs dl > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--rule);
  -webkit-mask-image: linear-gradient(to right, #000 58%, transparent);
  mask-image: linear-gradient(to right, #000 58%, transparent);
}

/* ── 4.3 · CHURIDAR — gathered, stacked at the ankle ───────────
   churidar-cargo-pants (×2)                                      */
.bt.bt-fam--churidar {
  --rail-ink: color-mix(in srgb, var(--ink) 15%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 34%, transparent);
  --tick-ink: color-mix(in srgb, var(--ink) 33%, transparent);
  --tick-w: 15px;
  --num-op: 0.55;
  --cap-w: 15px;
  --beat: 9px;
  --descender: 16px;
  --fig-gap: 11px;
  --call-off: 4px;
}
/* the hem stop is a stack, not a stop — the churidar gather */
.bt.bt-fam--churidar .bt-rail__cap {
  height: 9px;
  background: repeating-linear-gradient(
    to bottom,
    var(--rail-ink) 0 1px,
    transparent 1px 4px
  );
}
/* every ledger rule doubles — two lines, bunched */
.bt.bt-fam--churidar .pdp__specs dl > div { position: relative; }
.bt.bt-fam--churidar .pdp__specs dl > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--rule);
  opacity: 0.75;
}

/* ── 4.4 · DENIM — raw, torn at the edge ───────────────────────
   distressed-draped-denim · acid-washed-denim                    */
.bt.bt-fam--denim {
  --rail-ink: color-mix(in srgb, var(--ink) 18%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 38%, transparent);
  --tick-ink: color-mix(in srgb, var(--ink) 36%, transparent);
  --tick-w: 18px;
  --tick-h: 2px;
  --num-op: 0.6;
  --cap-w: 18px;
  --beat: 17px;
  --descender: 14px;
  --fig-gap: 12px;
  --grain: 0.2;
  --call-style: dashed;
  --torn: polygon(0 0, 4% 62%, 9% 8%, 15% 70%, 21% 18%, 27% 78%, 33% 22%,
    39% 74%, 45% 12%, 52% 68%, 58% 28%, 64% 80%, 70% 18%, 76% 66%, 82% 24%,
    88% 76%, 94% 14%, 100% 58%, 100% 100%, 0 100%);
}
/* raw selvedge: the ledger rule is torn, not ruled */
.bt.bt-fam--denim .pdp__specs dl > div {
  border-bottom-color: transparent;
  position: relative;
}
.bt.bt-fam--denim .pdp__specs dl > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  clip-path: var(--torn);
}
/* and the rail lands on a torn hem */
.bt.bt-fam--denim .bt-rail__cap {
  height: 3px;
  background: var(--tick-ink);
  clip-path: polygon(0 0, 22% 70%, 44% 6%, 66% 74%, 88% 14%, 100% 60%, 100% 100%, 0 100%);
}

/* ── 4.5 · ASH — Last Rites. Quiet, far away, one ember breath ──
   masaan-frayed-cargos · layered-gravel-pants                    */
.bt.bt-fam--ash {
  --rail-ink: color-mix(in srgb, var(--ash) 24%, transparent);
  --rail-live: color-mix(in srgb, var(--ash) 46%, transparent);
  --tick-ink: color-mix(in srgb, var(--ash) 50%, transparent);
  --tick-w: 12px;
  --num-op: 0.42;
  --cap-w: 10px;
  --beat: 34px;
  --rail-ease: 1.8s;
  --descender: 26px;
  --fig-gap: 17px;
  --band-d: clamp(134px, 22vh, 252px);
  --band-m: clamp(108px, 17vh, 184px);
  --rev-t: 1.35s;
  --glyph-ink: 4.5%;
  --ledger-pad: 28px;
  --call-line: color-mix(in srgb, var(--ash) 34%, transparent);
}
/* the ember breath — a light on the frame you are standing in
   front of, and nowhere else. Never a fill, never a shape. */
.bt.bt-fam--ash .bt-mark.is-now::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0;
  animation: bt-breath 4.2s var(--ease) infinite;
}
@keyframes bt-breath {
  0%, 100% { opacity: 0; }
  38%, 58% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .bt.bt-fam--ash .bt-mark.is-now::after { animation: none; opacity: 0.5; }
}
/* the ledger rules fade out before they reach the margin */
.bt.bt-fam--ash .pdp__specs dl > div {
  border-bottom-color: transparent;
  position: relative;
}
.bt.bt-fam--ash .pdp__specs dl > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--rule);
  -webkit-mask-image: linear-gradient(to right, #000 34%, transparent 92%);
  mask-image: linear-gradient(to right, #000 34%, transparent 92%);
}

/* ═══════════════════════════════════════════════════════════════
   5 · THE WHITE LIMITEDS — bone-forward
   Three pieces cut in white cloth. The page is cut in it too:
   the ground lifts toward bone, the grain drops, the frames are
   bordered in bone rather than line.
   ═══════════════════════════════════════════════════════════════ */

.pdp-page.type--bottom:is(
  .product--loin-draped-potli-cargo-limited-white-ver,
  .product--draped-harem-pants-limited-white-version,
  .product--churidar-cargo-pants-limited-white-ver
) {
  --paper: #f3f1ec;
  --paper-2: #ece9e2;
  --grain: 0.07;
  --glyph-ink: 5%;
  --rule: #ddd8cd;
  --rail-ink: color-mix(in srgb, var(--ink) 11%, transparent);
  --tick-ink: color-mix(in srgb, var(--ink) 26%, transparent);
  --num-ink: color-mix(in srgb, var(--ink) 46%, transparent);
  --fig-filter: brightness(1.012) saturate(0.95);
}
.pdp-page.type--bottom:is(
  .product--loin-draped-potli-cargo-limited-white-ver,
  .product--draped-harem-pants-limited-white-version,
  .product--churidar-cargo-pants-limited-white-ver
) .pdp__gallery > figure {
  border-color: color-mix(in srgb, var(--bone) 78%, var(--line));
}

/* ═══════════════════════════════════════════════════════════════
   6 · THE FIFTEEN — one accent each, from the page's own copy
   ═══════════════════════════════════════════════════════════════ */

/* 01 · Loin Draped Potli Cargo — "80-inch nada drawstring".
   TWIN-CORD RAIL: the line runs as two cords that converge and
   tie off at the hem. */
.bt.product--lion-draped-potli-cargo .bt-rail__line,
.bt.product--lion-draped-potli-cargo .bt-rail__fill {
  width: 4px;
  background:
    linear-gradient(to right, currentColor 0 1px, transparent 1px 3px, currentColor 3px 4px);
}
.bt.product--lion-draped-potli-cargo .bt-rail__line { color: var(--rail-ink); background-color: transparent; }
.bt.product--lion-draped-potli-cargo .bt-rail__fill { color: var(--rail-live); background-color: transparent; }
.bt.product--lion-draped-potli-cargo .bt-rail__cap {
  width: 4px;
  height: 4px;
  border: 1px solid var(--rail-live);
  border-radius: 50%;
  background: none;
  bottom: -2px;
}

/* 02 · Loin Draped Potli Cargo, White — "the attached potli,
   a drawstring pouch". POTLI TICKS: every mark is a cinched
   mouth, not a dash. */
.bt.product--loin-draped-potli-cargo-limited-white-ver .bt-mark::before {
  width: 5px;
  height: 5px;
  top: -2px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--tick-ink);
}
.bt.product--loin-draped-potli-cargo-limited-white-ver .bt-mark__n { top: 9px; left: 10px; }

/* 03 · Asymmetric Aghoor Pants — "nothing lines up on purpose".
   WANDERING RAIL: no two ticks are the same length, and none of
   them start where the last one did. */
.bt.product--assymetric-draped-pants .bt-mark:nth-child(1)::before { width: 21px; margin-left: 0; }
.bt.product--assymetric-draped-pants .bt-mark:nth-child(2)::before { width: 9px;  margin-left: 7px; }
.bt.product--assymetric-draped-pants .bt-mark:nth-child(3)::before { width: 28px; margin-left: 3px; }
.bt.product--assymetric-draped-pants .bt-mark:nth-child(4)::before { width: 13px; margin-left: 12px; }
.bt.product--assymetric-draped-pants .bt-mark:nth-child(5)::before { width: 24px; margin-left: 5px; }
.bt.product--assymetric-draped-pants .bt-mark:nth-child(6)::before { width: 11px; margin-left: 9px; }
.bt.product--assymetric-draped-pants .bt-rail__cap { width: 26px; }

/* 04 · Draped Heram Pants — "naturally pleated double gauze".
   PLEAT-PITCH RAIL: the line is a fine, even pleat. */
.bt.product--draped-heram-pants-1 .bt-rail__line {
  background: repeating-linear-gradient(to bottom, var(--rail-ink) 0 5px, transparent 5px 9px);
}
.bt.product--draped-heram-pants-1 .bt-rail__fill {
  background: repeating-linear-gradient(to bottom, var(--rail-live) 0 5px, transparent 5px 9px);
}

/* 05 · Draped Harem Pants, White — "double cotton gauze, moves
   independently from the body". DOUBLE-GAUZE RAIL: two threads,
   one ash one bone, out of phase. */
.bt.product--draped-harem-pants-limited-white-version .bt-rail__line {
  width: 3px;
  background:
    repeating-linear-gradient(to bottom, var(--rail-ink) 0 3px, transparent 3px 7px) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 5px, var(--bone) 5px 8px) right / 1px 100% no-repeat;
  background-color: transparent;
}
.bt.product--draped-harem-pants-limited-white-version .bt-rail__fill { width: 1px; }

/* 06 · Churidar Cargo Pants — "500 GSM Benzer Black cotton …
   you feel this fabric before you see it". The heaviest cloth in
   the catalogue draws the heaviest line. */
.bt.product--churidar-cargo-pants {
  --rail-t: 2px;
  --rail-ink: color-mix(in srgb, var(--ink) 26%, transparent);
  --rail-live: color-mix(in srgb, var(--ink) 52%, transparent);
  --tick-h: 2px;
}
.bt.product--churidar-cargo-pants .bt-rail__cap { width: 22px; }

/* 07 · Churidar Cargo Pants, White — white denim on a bone page.
   INVERTED RAIL: a bone thread with an ash shadow, the only
   light-on-light line in the set. */
.bt.product--churidar-cargo-pants-limited-white-ver .bt-rail__line {
  width: 3px;
  background: var(--white);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--ash) 34%, transparent);
}
.bt.product--churidar-cargo-pants-limited-white-ver .bt-rail__fill {
  width: 3px;
  background: var(--white);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--ink) 30%, transparent);
}

/* 08 · Acid Washed Denim — "the wash is applied by hand like
   paint … no two will ever look the same". BLEACH-FADE RAIL: the
   line lifts and returns down its length; no two runs are equal. */
.bt.product--acid-washed-denim .bt-rail__line,
.bt.product--acid-washed-denim .bt-rail__fill {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 6%, rgba(0,0,0,.2) 11%, #000 19%,
    rgba(0,0,0,.15) 27%, #000 34%, #000 46%, rgba(0,0,0,.25) 53%, #000 61%,
    rgba(0,0,0,.1) 71%, #000 79%, rgba(0,0,0,.3) 88%, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0 6%, rgba(0,0,0,.2) 11%, #000 19%,
    rgba(0,0,0,.15) 27%, #000 34%, #000 46%, rgba(0,0,0,.25) 53%, #000 61%,
    rgba(0,0,0,.1) 71%, #000 79%, rgba(0,0,0,.3) 88%, #000 100%);
}

/* 09 · Distressed Draped Denim — "48 rivets hammered across the
   surface — each one placed, not random". RIVET TICKS: a hammered
   square head at every mark, and the rail is studded between. */
.bt.product--distressed-draped-denim .bt-mark::before {
  width: 4px;
  height: 4px;
  top: -2px;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
}
.bt.product--distressed-draped-denim .bt-mark__n { top: 9px; left: 10px; }
.bt.product--distressed-draped-denim .bt-rail__line {
  width: 2px;
  background-image:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 34%, transparent) 0 2px, transparent 2px 26px),
    linear-gradient(var(--rail-ink), var(--rail-ink));
}

/* 10 · Gun Metal Cargos — "a heavy, armoured take … built to look
   dangerous". PLATED FRAMES: each frame carries an inner plate
   line, a hair inside its own border. */
.bt.product--gun-metal-cargos .pdp__gallery > figure { position: relative; }
.bt.product--gun-metal-cargos .pdp__gallery > figure::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  pointer-events: none;
}

/* 11 · VS Base Pants - 01 — "the foundation piece … the brand's
   utility foundation". THE DATUM: the rail opens on a zero line
   ruled the full width of the gallery. Nothing else is measured
   from anywhere. */
.bt.product--vs-fit-pants .bt-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;                    /* in the breath, never over a frame */
  width: 100cqw;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 0 46%, transparent 78%);
  mask-image: linear-gradient(to right, #000 0 46%, transparent 78%);
}

/* 12 · Ashwa Flared Cargo — "four symmetrical metal eyelets …
   the four stages of life in an endless loop". FOUR EYELETS at
   every mark, and a closed loop where the line lands. */
.bt.product--pants-03 .bt-mark::before {
  width: 24px;                   /* four, never three */
  height: 3px;
  top: -1px;
  background: none;
  background-image: radial-gradient(circle at center, var(--tick-ink) 0 1.4px, transparent 1.6px);
  background-size: 6px 3px;
  background-repeat: repeat-x;
}
.bt.product--pants-03 .bt-rail__cap {
  width: 7px;
  height: 7px;
  bottom: -3px;
  border: 1px solid var(--rail-live);
  border-radius: 50%;
  background: none;
}

/* 13 · Dark Gravel Pants — "the hardware runs the full length of
   the leg". METAL PITCH: the rail carries hardware at a constant
   interval the whole way down, not only where the frames fall. */
.bt.product--pants-02 .bt-rail__line {
  width: 6px;
  background-image:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 26%, transparent) 0 2px,
      transparent 2px 58px),
    linear-gradient(var(--rail-ink), var(--rail-ink));
  background-size: 6px 100%, 1px 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}

/* 14 · MASAAN FRAYED CARGOS — "the shroud laid over the body,
   torn and left where it settled". The line does not end — it
   frays out. */
.bt.product--masaan-frayed-cargos .bt-rail__line,
.bt.product--masaan-frayed-cargos .bt-rail__fill {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
}
.bt.product--masaan-frayed-cargos .bt-rail__cap {
  width: 22px;
  height: 5px;
  background: var(--tick-ink);
  clip-path: polygon(0 0, 8% 84%, 17% 10%, 26% 92%, 35% 16%, 44% 88%, 53% 8%,
    62% 90%, 71% 20%, 80% 86%, 89% 12%, 100% 78%, 100% 100%, 0 100%);
  opacity: 0.8;
}

/* 15 · LAYERED GRAVEL PANTS — "sharp, scattered stones … pressed
   into cotton drill like stones into dirt". SCATTER: every tick
   is a sharp wedge, and none of them lie on the same line. */
.bt.product--layered-gravel-pants .bt-mark::before {
  height: 4px;
  top: -2px;
  background: color-mix(in srgb, var(--ash) 68%, transparent);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 62%);
}
.bt.product--layered-gravel-pants .bt-mark:nth-child(1)::before { width: 14px; margin-left: 2px; }
.bt.product--layered-gravel-pants .bt-mark:nth-child(2)::before { width: 8px;  margin-left: 11px; }
.bt.product--layered-gravel-pants .bt-mark:nth-child(3)::before { width: 17px; margin-left: 5px; }
.bt.product--layered-gravel-pants .bt-mark:nth-child(4)::before { width: 10px; margin-left: 15px; }
.bt.product--layered-gravel-pants .bt-mark:nth-child(5)::before { width: 13px; margin-left: 7px; }

/* ═══════════════════════════════════════════════════════════════
   7 · SMALL SCREENS
   The channel narrows but never closes — it is the composition.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 520px) {
  .pdp-page.type--bottom { --rail-w: 34px; --tick-w: 15px; }
  .bt.bt-fam--utility { --tick-w: 17px; }
  .bt.bt-fam--drape { --tick-w: 12px; }
  .bt.product--pants-03 .bt-mark::before { width: 21px; background-size: 5px 3px; }
  .bt.product--assymetric-draped-pants .bt-mark::before { max-width: 26px; }
  .bt-mark__n { font-size: 8.5px; letter-spacing: 0.06em; }
}