@nok-integration/storefront-react 0.17.2 → 0.18.1

package/dist/standalone/styles.css

@@ -41,14 +41,32 @@
   --type-heading-sm-line: 1.38;
   --type-paragraph-size: 16px;
   --type-paragraph-line: 1.55;
+  /*
+   * The `trimmed` family is `text-box-trim: trim-both` with a cap-alphabetic edge, which
+   * is how nearly every small text layer in this design is drawn. Figma's box therefore
+   * stops at the CAP height and a CSS line box does not, so these carry the cap in pixels
+   * rather than a ratio: 16px DAZN Oscine caps at 11, 14px at 10, 12px at 9. Rounded by
+   * the designer, which is why they are not one ratio.
+   *
+   * They were all `1` — the right idea, approximated, and 5px out on every 16px label. On
+   * the PDP that was the "Color: White" header and the "Size" header, and it compounded:
+   * measured at 375, the colour block came out 142 against the frame's 128.
+   *
+   * Glyphs deliberately overflow a box this short, exactly as they do in Figma. Anything
+   * that CLIPS (`overflow: hidden`, for an ellipsis or a line clamp) must add the
+   * padding/negative-margin pair — see `CartLineItem.title` and `ProductTile.title` — or
+   * it beheads the descenders. `text-box-trim` itself would let us write the design's
+   * numbers directly; it is Chrome 133+ and this package still supports the WebView
+   * DAZN's React 16 build ships with.
+   */
   --type-trimmed-md-size: 16px;
-  --type-trimmed-md-line: 1;
+  --type-trimmed-md-line: 11px;
   --type-trimmed-sm-size: 14px;
-  --type-trimmed-sm-line: 1;
+  --type-trimmed-sm-line: 10px;
   --type-caption-sm-size: 14px;
   --type-caption-sm-line: 1.5;
   --type-trimmed-xs-size: 12px;
-  --type-trimmed-xs-line: 1;
+  --type-trimmed-xs-line: 9px;
 
   /* ── Colour ───────────────────────────────────────────────────────────── */
   --color-text-default: #0c161c;
@@ -65,6 +83,9 @@
      control and the close disc on a sheet header. `full-color`, so it is the same
      value in both palettes and is not remapped below. */
   --color-surface-neutral: #ced0d2;
+  /* semantic/base/surface/bold — the sheet handle, and the ground of a disabled
+     `mobile/button`. Static, like the neutral above it. */
+  --color-surface-bold: #6d7377;
   --color-border-default: #dddedf;
   --color-border-subtle: #ced0d2;
   /* semantic/base/border/transparent/soft. Alpha rather than a flat grey on purpose: it
@@ -222,7 +243,7 @@
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._button_tdhm8_1 {
+._button_1u2uh_1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -246,33 +267,54 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-._fullWidth_tdhm8_25 {
+._fullWidth_1u2uh_25 {
   width: 100%;
 }
 
-._primary_tdhm8_29 {
+._primary_1u2uh_29 {
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
 
-._secondary_tdhm8_34 {
+._secondary_1u2uh_34 {
   background: transparent;
   color: var(--color-text-default);
   border-color: var(--color-border-default);
 }
 
-._ghost_tdhm8_40 {
+._ghost_1u2uh_40 {
   background: transparent;
   color: var(--color-text-default);
   border-color: transparent;
 }
 
-._button_tdhm8_1:disabled {
+._button_1u2uh_1:disabled {
   cursor: not-allowed;
+}
+
+/*
+ * Figma `mobile/button` state=disabled: a solid `surface/bold` ground with `text/disabled`
+ * on it — NOT the filled button at half strength, which is what this used to be.
+ *
+ * The difference is visible wherever a form gates its own CTA, and the new cancel and
+ * return sheets both open in that state, so it is the first thing drawn on either screen.
+ * Half-opacity black over white renders a washed grey that changes with whatever is behind
+ * it; the design's is one colour that does not.
+ *
+ * Only the filled variant. `secondary` and `ghost` are outlines rather than grounds, and
+ * the DS does not draw a filled disabled state for either — they keep the dimming.
+ */
+._primary_1u2uh_29:disabled {
+  background: var(--color-surface-bold);
+  color: var(--color-text-disabled);
+}
+
+._secondary_1u2uh_34:disabled,
+._ghost_1u2uh_40:disabled {
   opacity: 0.5;
 }
 
-._button_tdhm8_1:focus-visible {
+._button_1u2uh_1:focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
 }
@@ -283,17 +325,17 @@
  * cta-bar's own note said "annotate in build" — so it was drawn at 16px and the label
  * was dimmed to carry the busy signal. It has one now, and the spinner carries it alone.
  */
-._spinner_tdhm8_62 {
+._spinner_1u2uh_83 {
   width: 20px;
   height: 20px;
   margin: 2px;
   border-radius: var(--radius-full);
   border: 2px solid currentColor;
   border-top-color: transparent;
-  animation: _spin_tdhm8_62 700ms linear infinite;
+  animation: _spin_1u2uh_83 700ms linear infinite;
 }
 
-@keyframes _spin_tdhm8_62 {
+@keyframes _spin_1u2uh_83 {
   to {
     transform: rotate(360deg);
   }
@@ -819,7 +861,7 @@
   display: block;
   flex-shrink: 0;
 }
-._root_n3nm5_1 {
+._root_rvfx9_1 {
   display: inline-flex;
   align-items: baseline;
   gap: var(--space-8);
@@ -828,33 +870,54 @@
 
 /* Alignment variants. Cards align on the price baseline row with a tight 4px gap; the
    PDP price row centres the price against its sale badge (6px). */
-._center_n3nm5_10 {
+._center_rvfx9_10 {
   align-items: center;
   gap: var(--space-6);
 }
-._end_n3nm5_14 {
+._end_rvfx9_14 {
   align-items: flex-end;
   gap: var(--space-4);
 }
 
-/* Size sets the row's font-size so the price and its struck was-price match (per the
-   product-card, where both are 16px). */
-._sm_n3nm5_21 {
+/*
+ * Size sets the row's font-size so the price and its struck was-price match (per the
+ * product-card, where both are 16px), and its cap-trimmed leading.
+ *
+ * The leading was missing, and on the PDP that made the price row 25 tall against the
+ * frame's 20 — which is the whole of the 6px the product-info block was over. Figma sets
+ * every amount `text-box-trim: trim-both`, cap-alphabetic, so the row's height comes from
+ * the sale badge beside it rather than from the leading of a 16px font.
+ */
+._sm_rvfx9_28 {
   font-size: var(--type-trimmed-sm-size);
+  line-height: var(--type-trimmed-sm-line);
 }
-._md_n3nm5_24 {
+._md_rvfx9_32 {
   font-size: var(--type-trimmed-md-size);
+  line-height: var(--type-trimmed-md-line);
 }
-._lg_n3nm5_27 {
+._lg_rvfx9_36 {
   font-size: var(--type-heading-md-size);
+  /* 14 of cap on 20px, the same trim one size up. No token: `heading/md` is a display
+     size and this is its only trimmed use. */
+  line-height: 14px;
+}
+
+/*
+ * `mobile/pdp/price` is `min-h-[20px]`, and 20 is the sale badge's own height — so the row
+ * keeps that height whether or not a discount put a badge in it. Without this a
+ * full-price PDP would sit 9px tighter than a discounted one.
+ */
+._badge_rvfx9_48 {
+  min-height: 20px;
 }
 
-._price_n3nm5_31 {
+._price_rvfx9_52 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
-._compareAt_n3nm5_36 {
+._compareAt_rvfx9_57 {
   color: var(--color-text-disabled);
   text-decoration: line-through;
   font-weight: var(--font-weight-regular);
@@ -862,7 +925,7 @@
 
 /* On a product card the struck price carries the same weight as the live one (Figma
    `mobile/product-card`). Scoped to the card variant so the PDP's row is untouched. */
-._strikethrough_n3nm5_44 ._compareAt_n3nm5_36 {
+._strikethrough_rvfx9_65 ._compareAt_rvfx9_57 {
   font-weight: var(--font-weight-bold);
 }
 /*
@@ -1261,6 +1324,235 @@
 ._summaryCard_7mr8w_136 > :last-child {
   padding: 0 var(--space-16);
 }
+/*
+ * Figma `.sheet-header` (404:5379) — 48 tall, three slots.
+ *
+ * Extracted from the size guide when the cancel and return sheets turned out to instance
+ * the same component. One copy, so the handle cannot end up 4px off on one screen.
+ */
+._header_1f3nh_7 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+/* The empty left slot. It exists to balance the close control so the handle is centred on
+   the sheet rather than on what is left of it. */
+._slot_1f3nh_15 {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+}
+
+/* `self-stretch` with 12 of padding: the handle sits 12 from the top of the 48, not
+   centred in it. */
+._handleSlot_1f3nh_23 {
+  align-self: stretch;
+  padding: var(--space-12);
+}
+
+._handle_1f3nh_23 {
+  width: 44px;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-bold);
+}
+
+._closeSlot_1f3nh_35 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  background: none;
+  color: var(--color-text-default);
+  cursor: pointer;
+}
+
+._closeSlot_1f3nh_35:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
+}
+
+/* `across-platform/icon-button`, fill: a 24 disc around the 16px cross box. */
+._close_1f3nh_35 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-neutral);
+}
+/*
+ * Figma `Reason for cancelling` (4632:17129) and `Reason for return`.
+ *
+ * A 48 header, a body of 24-gap blocks inset 16, and the sheet footer. Radius 12 at the
+ * top — NOT the size guide's 16. The two sheets are drawn with different corners in the
+ * file and each follows its own.
+ */
+._scrim_7on4q_8 {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  /* `semantic/base/surface/backdrop`. */
+  background: rgba(12, 22, 28, 0.32);
+  animation: _fade_7on4q_1 160ms ease-out;
+}
+
+._sheet_7on4q_20 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90dvh;
+  overflow: hidden;
+  border-radius: var(--radius-12) var(--radius-12) 0 0;
+  background: var(--color-surface-default);
+  animation: _rise_7on4q_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+._body_7on4q_32 {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+  padding: 0 var(--space-16);
+}
+
+._body_7on4q_32 > * {
+  flex-shrink: 0;
+}
+
+/* `heading/md` at the library's 1.32, not our 1.25 base. */
+._title_7on4q_46 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._options_7on4q_54 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/*
+ * Each reason is a filled card, not a bare radio: 12 of padding on a `soft` ground at
+ * radius 12, which makes the whole row the target rather than the 20px circle.
+ */
+._option_7on4q_54 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-12);
+  border: 0;
+  border-radius: var(--radius-12);
+  background: var(--color-surface-soft);
+  color: var(--color-text-subtle);
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+._option_7on4q_54:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/*
+ * The frame's `Checkbox`: a 24 box holding a 20 circle, so the ring sits 2 in from each
+ * edge and the row's 8 gap measures from the box rather than the circle.
+ */
+._radio_7on4q_88 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-surface-max);
+}
+
+/* Unselected is an empty ring; the filled disc and tick are drawn only when chosen. */
+._radio_7on4q_88::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-full);
+}
+
+._option_7on4q_54[aria-checked='true'] ._radio_7on4q_88::before {
+  border-color: transparent;
+}
+
+._radio_7on4q_88 svg {
+  position: relative;
+}
+
+/* 16px, cap-trimmed to 11 — `trimmed/md`, the same face the size chips use. */
+._label_7on4q_118 {
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-regular);
+  padding: 5px 0;
+  margin: -5px 0;
+}
+
+/* `.bottomsheet-footer`: no top padding, 24 below, inset 16. */
+._footer_7on4q_127 {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  padding: var(--space-16) var(--space-16) calc(var(--space-24) + var(--safe-area-bottom));
+}
+
+._error_7on4q_135 {
+  margin: 0;
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 1.4;
+  color: var(--color-state-text-critical);
+}
+
+@keyframes _fade_7on4q_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes _rise_7on4q_1 {
+  from {
+    transform: translateY(12%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._scrim_7on4q_8,
+  ._sheet_7on4q_20 {
+    animation: none;
+  }
+}
 /*
  * Figma `order stats` (5479:132209), whose three states differ only inside the widget.
  *
@@ -1268,7 +1560,7 @@
  * everything below it is 32 apart: widget, rule, rows, address, summary. Same rhythm and
  * same padding as the confirmation, which is the same page from the fold down.
  */
-._page_1vg5x_8 {
+._page_opefg_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1278,7 +1570,7 @@
 /* ── Order number + timeline ───────────────────────────────────────────────── */
 
 /* `mobile/order/delivery-widget`: the title row, then the steps, 32 apart. */
-._widget_1vg5x_18 {
+._widget_opefg_18 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1286,7 +1578,7 @@
 
 /* The number on the left, the carrier link hard right — and nothing between them, so a
    long reference runs into the space the link is not using rather than under it. */
-._titleRow_1vg5x_26 {
+._titleRow_opefg_26 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1302,7 +1594,7 @@
  *
  * Nothing clips it, so the cap-height box needs no descender protection.
  */
-._headline_1vg5x_42 {
+._headline_opefg_42 {
   margin: 0;
   min-width: 0;
   font-size: var(--type-heading-md-size);
@@ -1314,107 +1606,675 @@
 }
 
 /*
- * The carrier link: a text link with the design's `redirect-link` mark, not the 48px
- * button this used to be. The frame puts it on the title's own line, right-aligned, at the
- * same 16px as a timeline label.
- *
- * An anchor rather than a button because the destination is a real page on somebody else's
- * site, and it has to behave like one: middle-click, long-press, open in a new tab.
+ * The carrier link: a text link with the design's `redirect-link` mark, not the 48px
+ * button this used to be. The frame puts it on the title's own line, right-aligned, at the
+ * same 16px as a timeline label.
+ *
+ * An anchor rather than a button because the destination is a real page on somebody else's
+ * site, and it has to behave like one: middle-click, long-press, open in a new tab.
+ */
+._track_opefg_61 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex-shrink: 0;
+  font-size: var(--type-trimmed-md-size);
+  line-height: 14px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  text-decoration: none;
+}
+
+._track_opefg_61:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
+}
+
+/*
+ * The frame's `Line 11`, between the widget and the receipt.
+ *
+ * A Figma line has no height — 32 above it and 32 below it means 64 between the blocks it
+ * separates, with the hairline drawn on that boundary. The negative margin takes the
+ * pixel back out of the layout so the two gaps stay 32 rather than becoming 32 and 33.
+ */
+._rule_opefg_86 {
+  height: 1px;
+  margin: 0 0 -1px;
+  border: 0;
+  background: var(--color-border-default);
+}
+
+/* ── Need help? ────────────────────────────────────────────────────────────── */
+
+/* `mobile/explore`: the heading, then the rows, 6 apart. */
+._help_opefg_96 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+._helpTitle_opefg_102 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
+  font-weight: var(--font-weight-bold);
+}
+
+._helpRows_opefg_109 {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * 48 tall: 16 of padding either side of a 16px chevron, which is what sets the height. The
+ * label is cap-trimmed to 10 and is shorter than the mark beside it.
+ */
+._helpRow_opefg_109 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  width: 100%;
+  padding: var(--space-16) 0;
+  border: 0;
+  border-radius: var(--radius-8);
+  background: none;
+  color: var(--color-text-default);
+  font-family: inherit;
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  font-weight: var(--font-weight-bold);
+  text-align: left;
+  cursor: pointer;
+}
+
+/*
+ * `border/full-color/subtle`, one step darker than the hairline the cards are drawn with,
+ * and between the rows only — a rule under the last one would leave the block underlined.
+ *
+ * After `.helpRow` and not before it: that rule sets `border: 0` and its own padding, and
+ * at equal specificity the later one wins. Written first, this drew no line at all.
+ *
+ * Nothing gives the pixel back, because nothing takes it: the row's height comes from its
+ * padding and its 16px chevron rather than from a `height`, so the hairline adds to the
+ * row instead of eating into it. 48, the line, then 48 — the frame's own 97 for the pair.
+ */
+._helpRow_opefg_109 + ._helpRow_opefg_109 {
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+._helpRow_opefg_109:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ── Cancel, and the cancelled order ───────────────────────────────────────── */
+
+/*
+ * Figma `Cancel flow` (4551:32251) screen 1: a destructive action on a pale critical
+ * ground, at the foot of the screen below the summary.
+ *
+ * Not a `Button` variant. The design system has no destructive button and inventing one
+ * would put a fourth variant in the primitive for a single use — this is the one control
+ * in the package drawn this way, so it is drawn here.
+ */
+._cancel_opefg_167 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--control-height);
+  padding: 0 var(--space-20);
+  border: 0;
+  border-radius: var(--radius-8);
+  background: var(--color-state-surface-critical-soft);
+  color: var(--color-state-text-critical);
+  font-family: inherit;
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-bold);
+  cursor: pointer;
+}
+
+._cancel_opefg_167:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Screen 3. The head is a title and one meta line, 8 apart. */
+._cancelledHead_opefg_191 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._cancelledTitle_opefg_197 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+/* The reference and the date it was placed, cap-trimmed to 10 on 14. */
+._cancelledMeta_opefg_206 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+  color: var(--color-text-subtle);
+}
+/*
+ * Figma `Return flow` (4551:32294), the item-selection screen (4632:17780).
+ *
+ * 20 of padding top and bottom, 16 either side, and 24 between the title block, the list
+ * and the button. The cards are 12 apart inside the list.
+ */
+._page_1c7ro_7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  padding: var(--space-20) var(--space-16);
+  background: var(--color-surface-default);
+}
+
+._titles_1c7ro_15 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._title_1c7ro_15 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+/* 14 cap-trimmed to 10, like every small label in this package. */
+._subtitle_1c7ro_30 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+  color: var(--color-text-subtle);
+}
+
+._list_1c7ro_38 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+/*
+ * A filled card at radius 18 — the largest corner in the scale, and the one the frame
+ * uses for a block a fan acts on rather than merely reads.
+ */
+._card_1c7ro_48 {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-12);
+  padding: var(--space-20) var(--space-16);
+  border-radius: var(--radius-18);
+  background: var(--color-surface-soft);
+}
+
+/*
+ * The checkbox sits 12 down from the top of the card rather than centred on the row: the
+ * card grows when a reason is chosen, and a centred control would drift down with it.
+ */
+._checkSlot_1c7ro_61 {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  padding: var(--space-12) 0 0;
+  border: 0;
+  background: none;
+  color: var(--color-surface-max);
+  cursor: pointer;
+}
+
+._checkSlot_1c7ro_61:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
+}
+
+/* A 24 box holding a 20 mark, so the row's 12 gap measures from the box. */
+._check_1c7ro_61 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+._check_1c7ro_61::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-full);
+}
+
+._checkSlot_1c7ro_61[aria-checked='true'] ._check_1c7ro_61::before {
+  border-color: transparent;
+}
+
+._check_1c7ro_61 svg {
+  position: relative;
+}
+
+._row_1c7ro_105 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+._line_1c7ro_113 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+._thumb_1c7ro_119 {
+  position: relative;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-6);
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+}
+
+._img_1c7ro_129 {
+  object-fit: cover;
+}
+
+._placeholder_1c7ro_133 {
+  width: 100%;
+  height: 100%;
+}
+
+._meta_1c7ro_138 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* 14 bold, cap-trimmed to 10 and clipped to one line. */
+._name_1c7ro_147 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._attrs_1c7ro_159 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+  color: var(--color-text-subtle);
+}
+
+._price_1c7ro_167 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-6);
+  flex-shrink: 0;
+  text-align: right;
+}
+
+._paid_1c7ro_176 {
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  font-variant-numeric: tabular-nums;
+}
+
+._was_1c7ro_184 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * The frame's `drop-menu`: a fixed 154 x 32 outlined control, padded 12 on the left and 8
+ * on the right so the chevron sits closer to the edge than the label does.
+ *
+ * Disabled-coloured while it still says "Select reason" — the label is a prompt at that
+ * point, not a value, and the design greys it to say so. It is a live control either way.
+ */
+._reason_1c7ro_199 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 154px;
+  height: 32px;
+  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-6);
+  background: none;
+  color: var(--color-text-disabled);
+  font-family: inherit;
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  font-weight: var(--font-weight-bold);
+  cursor: pointer;
+}
+
+._reasonSet_1c7ro_217 {
+  color: var(--color-text-default);
+}
+
+._reason_1c7ro_199:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+/*
+ * Figma `Return flow` (4551:32294), screen 5 — the label and its instructions.
+ *
+ * The intro block, then a bordered card holding two numbered steps, then "Done". The card
+ * is padded 16 with 24 between its steps; the steps themselves are 16 and 8 internally.
+ */
+._page_1r0ea_7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  padding: var(--space-20) var(--space-16);
+  background: var(--color-surface-default);
+}
+
+._intro_1r0ea_15 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+/* `trimmed/md` bold, cap-trimmed to 11 — the frame's heading here is 16, not 20. */
+._title_1r0ea_22 {
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  padding: 5px 0;
+  margin: -5px 0;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._subtitle_1r0ea_31 {
+  margin: 0;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  color: var(--color-text-subtle);
+}
+
+/* radius-xxl in the DS — 18 here, the same corner the return cards take. */
+._card_1r0ea_39 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  padding: var(--space-16);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-18);
+}
+
+/* Step one carries a button and a note, so its parts are 16 apart. */
+._step_1r0ea_49 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+/* Step two is a heading and a paragraph, at 8. */
+._step2_1r0ea_56 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._stepHead_1r0ea_62 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+/* A 24 square at radius 6 on the soft ground — a marker, not a circle. */
+._number_1r0ea_69 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-6);
+  background: var(--color-surface-soft);
+  font-size: var(--type-caption-sm-size);
+  line-height: 1.5;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._stepTitle_1r0ea_84 {
+  flex: 1 1 0;
+  min-width: 0;
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  padding: 5px 0;
+  margin: -5px 0;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._body_1r0ea_95 {
+  margin: 0;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  color: var(--color-text-default);
+}
+
+/* The frame gives this paragraph 4 of spacing between its two lines. */
+._body2_1r0ea_103 {
+  margin: 0;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  color: var(--color-text-default);
+}
+
+._body2_1r0ea_103 br {
+  content: '';
+  display: block;
+  margin-bottom: var(--space-4);
+}
+
+/*
+ * `mobile/button` at the small size: 40 rather than 48, outlined in the static dark
+ * border, and 14 rather than 16. It is a secondary action inside a card, not the screen's
+ * own call to action — the frame keeps "Done" for that.
  */
-._track_1vg5x_61 {
+._download_1r0ea_121 {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-6);
-  flex-shrink: 0;
-  font-size: var(--type-trimmed-md-size);
-  line-height: 14px;
-  font-weight: var(--font-weight-bold);
+  justify-content: center;
+  gap: var(--space-8);
+  min-height: 40px;
+  padding: var(--space-6) var(--space-8);
+  border: 1px solid var(--color-surface-max);
+  border-radius: var(--radius-8);
   color: var(--color-text-default);
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  font-weight: var(--font-weight-bold);
   text-decoration: none;
 }
 
-._track_1vg5x_61:focus-visible {
+._download_1r0ea_121:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
-  border-radius: var(--radius-4);
 }
 
+/* 12 with the library's 1% tracking. */
+._note_1r0ea_143 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.5;
+  letter-spacing: 0.12px;
+  color: var(--color-text-default);
+}
 /*
- * The frame's `Line 11`, between the widget and the receipt.
+ * Figma `Return flow` (4551:32294), screens 6 to 8 — "Return in progress".
  *
- * A Figma line has no height — 32 above it and 32 below it means 64 between the blocks it
- * separates, with the hairline drawn on that boundary. The negative margin takes the
- * pixel back out of the layout so the two gaps stay 32 rather than becoming 32 and 33.
+ * The title block, the three-step timeline, then the lines coming back. Same 20/16
+ * padding and same rhythm as the order tracking screen, because it is the same screen
+ * with a different subject.
  */
-._rule_1vg5x_86 {
-  height: 1px;
-  margin: 0 0 -1px;
-  border: 0;
-  background: var(--color-border-default);
+._page_o44fl_8 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  padding: var(--space-20) var(--space-16) var(--space-24);
 }
 
-/* ── Need help? ────────────────────────────────────────────────────────────── */
-
-/* `mobile/explore`: the heading, then the rows, 6 apart. */
-._help_1vg5x_96 {
+._titles_o44fl_15 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-6);
+  gap: var(--space-8);
 }
 
-._helpTitle_1vg5x_102 {
+._title_o44fl_15 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+/* 14 cap-trimmed to 10 — the reference and the reported date on one line. */
+._subtitle_o44fl_30 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+  color: var(--color-text-subtle);
 }
 
-._helpRows_1vg5x_109 {
+._items_o44fl_38 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
+  gap: var(--space-16);
 }
 
-/*
- * 48 tall: 16 of padding either side of a 16px chevron, which is what sets the height. The
- * label is cap-trimmed to 10 and is shorter than the mark beside it.
- */
-._helpRow_1vg5x_109 {
+._item_o44fl_38 {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--space-12);
+}
+
+._thumb_o44fl_53 {
+  position: relative;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-6);
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+}
+
+._img_o44fl_63 {
+  object-fit: cover;
+}
+
+._placeholder_o44fl_67 {
   width: 100%;
-  padding: var(--space-16) 0;
-  border: 0;
-  border-radius: var(--radius-8);
-  background: none;
-  color: var(--color-text-default);
-  font-family: inherit;
+  height: 100%;
+}
+
+._meta_o44fl_72 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+._name_o44fl_80 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
   font-weight: var(--font-weight-bold);
-  text-align: left;
-  cursor: pointer;
+  color: var(--color-text-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /*
- * `border/full-color/subtle`, one step darker than the hairline the cards are drawn with,
- * and between the rows only — a rule under the last one would leave the block underlined.
- *
- * After `.helpRow` and not before it: that rule sets `border: 0` and its own padding, and
- * at equal specificity the later one wins. Written first, this drew no line at all.
+ * "Size: M" and the sale badge on one row, as the frame has them. `align-items: center`
+ * rather than baseline: the badge is a 20px box and its text is 12px, so a baseline would
+ * hang it below the size it sits beside.
  *
- * Nothing gives the pixel back, because nothing takes it: the row's height comes from its
- * padding and its 16px chevron rather than from a `height`, so the hairline adds to the
- * row instead of eating into it. 48, the line, then 48 — the frame's own 97 for the pair.
+ * The trim pair stays on the TEXT, not on the row — the badge brings its own height, and
+ * a negative margin on the flex container would eat into the gap above it.
  */
-._helpRow_1vg5x_109 + ._helpRow_1vg5x_109 {
-  border-top: 1px solid var(--color-border-subtle);
+._attrs_o44fl_100 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: var(--color-text-subtle);
 }
 
-._helpRow_1vg5x_109:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+._attrs_o44fl_100 > span {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
+}
+
+._price_o44fl_115 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-6);
+  flex-shrink: 0;
+  text-align: right;
+}
+
+._paid_o44fl_124 {
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  font-variant-numeric: tabular-nums;
+}
+
+._was_o44fl_132 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
+  font-variant-numeric: tabular-nums;
 }
 /*
  * Figma `5295:74053`. The page's own block starts at y=118 — under the 64px bar and the
@@ -1719,7 +2579,7 @@
  * and left the card 11px taller than the frame, because the compensation was in the gap
  * rather than in the box that was wrong. See `.title`.
  */
-._tile_1eiri_7 {
+._tile_1io44_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -1727,7 +2587,7 @@
   color: inherit;
 }
 
-._media_1eiri_15 {
+._media_1io44_15 {
   position: relative;
   width: 100%;
   /* Product-card image is 165:220 (3:4), radius-6 (Figma), sharp not pill-round. */
@@ -1737,11 +2597,11 @@
   background: var(--color-surface-soft);
 }
 
-._image_1eiri_25 {
+._image_1io44_25 {
   object-fit: cover;
 }
 
-._placeholder_1eiri_29 {
+._placeholder_1io44_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
@@ -1749,7 +2609,7 @@
 
 /* TOP PICK flag — top-left over the image, white surface, radius-2, uppercase. Fixed
    colours (not theme tokens): it always sits over a light product image. */
-._topBadge_1eiri_37 {
+._topBadge_1io44_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1760,7 +2620,13 @@
   max-width: calc(100% - var(--space-8) * 2);
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: var(--space-4) var(--space-6);
+  /* `mobile/badge/top-pick` fixes the box at 20 — it does not hug its leading. That was
+     invisible while `--type-trimmed-xs-line` was `1`, because 4 + 12 + 4 happened to come
+     to 20; with the token carrying the real cap (9) it would have shrunk to 17. */
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 var(--space-6);
   border-radius: var(--radius-2);
   background: #f9fafa;
   color: #0c161c;
@@ -1772,14 +2638,27 @@
   white-space: nowrap;
 }
 
-._saleBadge_1eiri_60 {
+/*
+ * `display: block` is not decoration. The wrapper is a `span`, so as an inline box it
+ * reserves room for the font's descenders around the 20px badge inside it — measured 25,
+ * which pushed the badge 2.5px off the 8px inset the frame draws it at.
+ */
+/*
+ * `display: flex`, and it is load-bearing. The wrapper is a `span`, so left inline — or
+ * even as a `block` — it builds a LINE box around the 20px badge and reserves the font's
+ * descender room under it: measured 25 against the badge's 20, which put the badge 13px
+ * above the image's edge where the frame draws it 8. A flex container makes the badge a
+ * flex item, and a flex item has no line box.
+ */
+._saleBadge_1io44_78 {
   position: absolute;
+  display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
 
 /* Scrim over the whole image, not a corner flag (Figma out-of-stock state). */
-._oos_1eiri_67 {
+._oos_1io44_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1806,13 +2685,13 @@
  * The trim now lives on the text, as it does on the order screens, so the gaps can be the
  * design's own numbers again.
  */
-._bottom_1eiri_94 {
+._bottom_1io44_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
 
-._titlePrice_1eiri_81 {
+._titlePrice_1io44_100 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
@@ -1832,7 +2711,7 @@
  * `text-box-trim` would let us write the design's numbers directly; it is Chrome 133+ and
  * this package still supports the WebView that ships with React 16-era DAZN builds.
  */
-._title_1eiri_5 {
+._title_1io44_5 {
   font-size: var(--type-paragraph-size);
   line-height: 21px;
   padding: 5px 0;
@@ -1866,13 +2745,13 @@
  * Scoped here rather than set on `PriceBlock` itself, which the PDP also renders — its
  * row is measured against a different frame and must not move with this one.
  */
-._titlePrice_1eiri_81 > :last-child {
+._titlePrice_1io44_100 > :last-child {
   line-height: 11px;
 }
 
 /* Colour swatches (Figma product-card): 0.5px-bordered boxes with a 14px colour square;
    the first reads as selected (dark border). */
-._swatches_1eiri_160 {
+._swatches_1io44_179 {
   display: flex;
   gap: var(--space-4);
   align-items: center;
@@ -1882,18 +2761,18 @@
  * 18 on the nose: 14 of colour with 2 either side, and the outline drawn INSIDE that,
  * which is where Figma draws a stroke. As a `border` it sat outside and made the box 19.
  */
-._swatch_1eiri_160 {
+._swatch_1io44_179 {
   display: inline-flex;
   padding: 2px;
   box-shadow: inset 0 0 0 0.5px var(--color-border-subtle);
   border-radius: var(--radius-2);
 }
 
-._swatchActive_1eiri_177 {
+._swatchActive_1io44_196 {
   box-shadow: inset 0 0 0 0.5px var(--color-surface-max);
 }
 
-._swatchDot_1eiri_181 {
+._swatchDot_1io44_200 {
   display: block;
   width: 14px;
   height: 14px;
@@ -1904,11 +2783,11 @@
  * Spotlight card (Figma `size=large`, 3668:12485). Full-bleed with its own 16px gutter —
  * the block that places it adds none — a taller 343:457 image and an 18px title.
  */
-._large_1eiri_192 {
+._large_1io44_211 {
   padding: 0 var(--space-16);
 }
 
-._large_1eiri_192 ._media_1eiri_15 {
+._large_1io44_211 ._media_1io44_15 {
   aspect-ratio: 343 / 457;
 }
 
@@ -1921,7 +2800,7 @@
  * 23 = the cap of 18px text (13) plus the same 10 of leading, so the margins above leave a
  * one-line name 13 tall — the frame's number for this variant.
  */
-._large_1eiri_192 ._title_1eiri_5 {
+._large_1io44_211 ._title_1io44_5 {
   font-size: 18px;
   line-height: 23px;
   min-height: 0;
@@ -1935,14 +2814,14 @@
  * spotlight shows two swatches under its price. Drawn on a 165px card it also cost 34 of
  * the 291 the card is given, which is why the rail ran 55 long before this.
  */
-._tile_1eiri_7:not(._large_1eiri_192) ._swatches_1eiri_160 {
+._tile_1io44_7:not(._large_1io44_211) ._swatches_1io44_179 {
   display: none;
 }
 /*
  * Figma `mobile/limited edition` (5304:77067), 360 tall at 375:
  * 24 above the heading, 28 of heading, 12, a 220 row, 12, a 40 caption, 24 below.
  */
-._section_1fdjh_5 {
+._section_1n5an_5 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -1954,7 +2833,7 @@
  * same 206x28 `header` frame, so they have to measure the same. (`ExploreList`'s heading
  * is the same 20px face in a 26 box; the frames differ, and each follows its own.)
  */
-._title_1fdjh_17 {
+._title_1n5an_17 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-heading-md-size);
@@ -1963,7 +2842,7 @@
   color: var(--color-text-default);
 }
 
-._link_1fdjh_26 {
+._link_1n5an_26 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -1975,7 +2854,7 @@
  * The row scrolls, and the third picture peeks past the fold exactly as the frame draws
  * it: two 165s and a 12 gutter fill the 343 content width, and the next one starts at 354.
  */
-._track_1fdjh_38 {
+._track_1n5an_38 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -1991,11 +2870,11 @@
   scrollbar-width: none;
 }
 
-._track_1fdjh_38::-webkit-scrollbar {
+._track_1n5an_38::-webkit-scrollbar {
   display: none;
 }
 
-._frame_1fdjh_58 {
+._frame_1n5an_58 {
   position: relative;
   flex: 0 0 auto;
   width: 165px;
@@ -2006,23 +2885,31 @@
   scroll-snap-align: start;
 }
 
-._image_1fdjh_69 {
+._image_1n5an_69 {
   object-fit: cover;
 }
 
-._placeholder_1fdjh_73 {
+._placeholder_1n5an_73 {
   width: 100%;
   height: 100%;
 }
 
-._saleBadge_1fdjh_78 {
+/*
+ * `display: flex`, and it is load-bearing. The wrapper is a `span`, so left inline — or
+ * even as a `block` — it builds a LINE box around the 20px badge and reserves the font's
+ * descender room under it: measured 25 against the badge's 20, which put the badge 13px
+ * above the image's edge where the frame draws it 8. A flex container makes the badge a
+ * flex item, and a flex item has no line box.
+ */
+._saleBadge_1n5an_85 {
   position: absolute;
+  display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
 
 /* The whole picture dims, as it does on a product card — not a corner flag. */
-._oos_1fdjh_85 {
+._oos_1n5an_93 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -2038,7 +2925,7 @@
  * One caption for the row: the frame's `bottom` is 40 — a 13px name, 16, an 11px price —
  * because the pictures above it are all the same garment.
  */
-._caption_1fdjh_101 {
+._caption_1n5an_109 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
@@ -2051,7 +2938,7 @@
  * margin takes back both that padding and the half-leading the trim removes. The frame's
  * name box is 13.
  */
-._name_1fdjh_114 {
+._name_1n5an_122 {
   font-size: 18px;
   line-height: 23px;
   padding: 5px 0;
@@ -2064,7 +2951,7 @@
 }
 
 /* 11 on 16px, the same cap the product card's price row takes. */
-._price_1fdjh_127 {
+._price_1n5an_135 {
   display: flex;
   align-items: baseline;
   gap: var(--space-4);
@@ -2073,13 +2960,13 @@
   font-variant-numeric: tabular-nums;
 }
 
-._paid_1fdjh_136 {
+._paid_1n5an_144 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
 /* Struck, and at the same weight as the live price — `mobile/product-card` again. */
-._was_1fdjh_142 {
+._was_1n5an_150 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-disabled);
   text-decoration: line-through;
@@ -2381,17 +3268,55 @@
   color: var(--color-text-default);
   font-variant-numeric: tabular-nums;
 }
-._row_1xbbn_1 {
+/*
+ * The line is a COLUMN now: the media/detail row, and under it the `Labels` row Figma's
+ * low-stock state adds (4693:67094). `spacer/spacer-xxs` between them, which is what
+ * takes the line from 100 to 130 in the frame.
+ */
+._line_1s2s6_6 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+._row_1s2s6_12 {
   display: flex;
   gap: var(--space-16);
   align-items: center;
 }
 
-._pending_1xbbn_7 {
+._pending_1s2s6_18 {
   opacity: 0.6;
 }
 
-._media_1xbbn_11 {
+/* Full width and its own row, so the label sits under the thumbnail as well as the
+   detail column — not tucked inside the stepper's column, where it used to be. */
+._labels_1s2s6_24 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/*
+ * "Only 2 left", in the warning tone. 24px tall: `py-7` around a cap-trimmed 14px line,
+ * which is 7 + 10 + 7. The cap height is stated as the line-height for the same reason it
+ * is everywhere else in this package — Figma's box stops at the cap and a CSS line box
+ * does not.
+ *
+ * Warning, not subtle grey. Scarcity is the one thing on a cart line the fan is meant to
+ * notice before they leave the screen, and it was previously set to be ignored.
+ */
+._lowStock_1s2s6_39 {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 0;
+  font-size: var(--type-trimmed-sm-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 10px;
+  color: var(--color-state-text-warning);
+}
+
+._media_1s2s6_49 {
   position: relative;
   flex-shrink: 0;
   width: 100px;
@@ -2401,18 +3326,26 @@
   background: var(--color-surface-soft);
 }
 
-._image_1xbbn_21 {
+._image_1s2s6_59 {
   object-fit: cover;
 }
 
-._placeholder_1xbbn_25 {
+._placeholder_1s2s6_63 {
   width: 100%;
   height: 100%;
 }
 
 /* Bottom-left over the thumbnail, per the design. */
-._saleBadge_1xbbn_31 {
+/*
+ * `display: flex`, and it is load-bearing. The wrapper is a `span`, so left inline — or
+ * even as a `block` — it builds a LINE box around the 20px badge and reserves the font's
+ * descender room under it: measured 25 against the badge's 20, which put the badge 13px
+ * above the image's edge where the frame draws it 6. A flex container makes the badge a
+ * flex item, and a flex item has no line box.
+ */
+._saleBadge_1s2s6_76 {
   position: absolute;
+  display: flex;
   left: var(--space-6);
   bottom: var(--space-6);
 }
@@ -2425,7 +3358,7 @@
  *
  * Radius matches the 8px thumbnail rather than the card's 6.
  */
-._oos_1xbbn_45 {
+._oos_1s2s6_91 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -2438,7 +3371,7 @@
   font-weight: var(--font-weight-bold);
 }
 
-._info_1xbbn_58 {
+._info_1s2s6_104 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
@@ -2446,47 +3379,66 @@
   min-width: 0;
 }
 
-._head_1xbbn_66 {
+._head_1s2s6_112 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-8);
 }
 
-._meta_1xbbn_73 {
+._meta_1s2s6_119 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   min-width: 0;
 }
 
-._title_1xbbn_80 {
+/*
+ * ONE line, ellipsised, and trimmed to the cap.
+ *
+ * Figma's `Product info` sets `whitespace-nowrap` and the title `text-ellipsis`, so a long
+ * catalogue name is cut rather than wrapped. Ours clamped to two lines, and the second
+ * line is what made every cart line 6.5px taller than the frame draws it — the detail
+ * column overflowed the 100px thumbnail that is supposed to set the row's height.
+ *
+ * The cap-trim pair is the idiom this package uses everywhere (see `ProductTile.title`):
+ * `line-height` is the design's box — 11 of cap on 16px text — and the padding gives the
+ * descenders room inside the clip box that `text-overflow` needs, while the negative
+ * margin takes that room back out of the layout. Measured in a browser at 375: title box
+ * 24.8 -> 11, and the line 106.5 -> 100.
+ */
+._title_1s2s6_134 {
   font-size: var(--type-trimmed-md-size);
   font-weight: var(--font-weight-bold);
-  /* Product titles are catalogue copy and can run long; unbounded, the title pushes the
-     price out of alignment down the list. */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  line-height: 11px;
+  padding: 7px 0;
+  margin: -7px 0;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* "Color: White  Size: M" */
-._details_1xbbn_92 {
+._details_1s2s6_152 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-6);
   min-width: 0;
 }
 
-._detail_1xbbn_92 {
+/* 10 of cap on 14px, same trim. Nothing clips these, so the descenders simply hang out
+   of the box and are drawn — exactly as they are in the frame. */
+._detail_1s2s6_152 {
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-regular);
+  line-height: 10px;
+  padding: 6px 0;
+  margin: -6px 0;
   color: var(--color-text-subtle);
   white-space: nowrap;
 }
 
-._price_1xbbn_106 {
+._price_1s2s6_171 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -2494,15 +3446,21 @@
   flex-shrink: 0;
 }
 
-._amount_1xbbn_114 {
+._amount_1s2s6_179 {
   font-size: var(--type-trimmed-md-size);
   font-weight: var(--font-weight-bold);
+  line-height: 11px;
+  padding: 7px 0;
+  margin: -7px 0;
   white-space: nowrap;
 }
 
-._was_1xbbn_120 {
+._was_1s2s6_188 {
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-regular);
+  line-height: 10px;
+  padding: 6px 0;
+  margin: -6px 0;
   color: var(--color-text-disabled);
   text-decoration: line-through;
   white-space: nowrap;
@@ -2676,49 +3634,56 @@
   gap: var(--space-20);
 }
 
-._gallery_1e69n_1 {
+._gallery_10mch_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_1e69n_8 {
+._track_10mch_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
-  /* Hero media is 375×485 (portrait) and fully sharp (no rounded corners) — it sits
-     edge-to-edge and flush under the header. */
-  aspect-ratio: 375 / 485;
+  /*
+   * Hero media is 375x475 (portrait) and fully sharp (no rounded corners) — it sits
+   * edge-to-edge and flush under the header.
+   *
+   * 475, not the 485 this had. That number came from `pdp` (3601:2479), which ADR-0022
+   * superseded: every frame in the design of record puts the `img` at 375x475 — `full
+   * PDP`, all three `States > PDP` frames, and the scrolled one. Ten pixels, on the
+   * tallest element of the tallest screen, and everything below it moved with it.
+   */
+  aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
   /* Same as the review carousel: the dots below are the indicator. */
   scrollbar-width: none;
 }
 
-._track_1e69n_8::-webkit-scrollbar {
+._track_10mch_8::-webkit-scrollbar {
   display: none;
 }
 
-._slide_1e69n_25 {
+._slide_10mch_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
-  aspect-ratio: 375 / 485;
+  aspect-ratio: 375 / 475;
 }
 
-._image_1e69n_32 {
+._image_10mch_39 {
   object-fit: cover;
 }
 
-._placeholder_1e69n_36 {
+._placeholder_10mch_43 {
   width: 100%;
-  aspect-ratio: 375 / 485;
+  aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_1e69n_43 {
+._share_10mch_50 {
   position: absolute;
   top: var(--space-16);
   right: var(--space-16);
@@ -2735,13 +3700,13 @@
   cursor: pointer;
 }
 
-._dots_1e69n_60 {
+._dots_10mch_67 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_1e69n_60 {
+._dot_10mch_67 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2753,13 +3718,13 @@
   position: relative;
 }
 
-._dot_1e69n_60::after {
+._dot_10mch_67::after {
   content: '';
   position: absolute;
   inset: -18px;
 }
 
-._dotActive_1e69n_84 {
+._dotActive_10mch_91 {
   background: var(--color-surface-max);
 }
 /*
@@ -2769,7 +3734,7 @@
  * The body's blocks are all 20 apart: title, unit control, table, note, "How to measure",
  * fabric. Everything below is that rhythm and the geometry inside each block.
  */
-._scrim_v44fk_8 {
+._scrim_ddqa4_8 {
   position: fixed;
   inset: 0;
   z-index: 60;
@@ -2780,10 +3745,10 @@
      cart and menu sheets are drawn over. Theirs are literals of the same intent written
      before the variable was published; this one follows the variable. */
   background: rgba(12, 22, 28, 0.32);
-  animation: _fade_v44fk_1 160ms ease-out;
+  animation: _fade_ddqa4_1 160ms ease-out;
 }
 
-._sheet_v44fk_2 {
+._sheet_ddqa4_2 {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -2796,68 +3761,12 @@
      and `xs`, and this corner is neither. */
   border-radius: 16px 16px 0 0;
   background: #ffffff;
-  animation: _rise_v44fk_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-/* ── .sheet-header ─────────────────────────────────────────────────────────── */
-
-/* Three slots, so the handle is centred on the sheet rather than on what is left of it
-   once the close control has taken its 48. */
-._header_v44fk_42 {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-._slot_v44fk_48 {
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-}
-
-/* `self-stretch` with 12 of padding: the handle sits 12 from the top of the 48, not
-   centred in it. */
-._handleSlot_v44fk_56 {
-  align-self: stretch;
-  padding: var(--space-12);
-}
-
-._handle_v44fk_56 {
-  width: 44px;
-  height: 4px;
-  border-radius: var(--radius-full);
-  /* `semantic/base/surface/bold`. */
-  background: #6d7377;
-}
-
-._closeSlot_v44fk_69 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-  padding: var(--space-12);
-  border: 0;
-  background: none;
-  color: var(--color-text-default);
-  cursor: pointer;
-}
-
-/* `across-platform/icon-button`, fill: a 24 disc around the 16px cross box. */
-._close_v44fk_69 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-neutral);
+  animation: _rise_ddqa4_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 /* ── Body ──────────────────────────────────────────────────────────────────── */
 
-._body_v44fk_96 {
+._body_ddqa4_40 {
   flex: 1 1 auto;
   overflow-y: auto;
   display: flex;
@@ -2873,11 +3782,11 @@
  * excess and the chart came out 14 short of the 256 the design draws. The body scrolls;
  * its blocks keep their size.
  */
-._body_v44fk_96 > * {
+._body_ddqa4_40 > * {
   flex-shrink: 0;
 }
 
-._titles_v44fk_116 {
+._titles_ddqa4_60 {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
@@ -2885,7 +3794,7 @@
 
 /* `heading/md` at 1.32 — the library's 1.32, not our `--type-heading-md-line`, which is
    1.25 and is the base h2 default the whole package inherits. */
-._title_v44fk_116 {
+._title_ddqa4_60 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
@@ -2893,7 +3802,7 @@
   color: var(--color-text-default);
 }
 
-._subtitle_v44fk_132 {
+._subtitle_ddqa4_76 {
   margin: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);
@@ -2906,7 +3815,7 @@
  * `Segmented Control` (4882:56556): 190 x 40, a 9 radius the scale does not carry, and 4
  * of horizontal padding around two halves.
  */
-._units_v44fk_145 {
+._units_ddqa4_89 {
   display: flex;
   align-items: center;
   width: 190px;
@@ -2921,7 +3830,7 @@
  * and its content centred, so the trim is what decides whether the CAP box or the line box
  * is the thing being centred — and the design centres the cap.
  */
-._unit_v44fk_145 {
+._unit_ddqa4_89 {
   flex: 1 1 0;
   display: inline-flex;
   align-items: center;
@@ -2940,7 +3849,7 @@
 
 /* Four shorter than its neighbour, and that is the component rather than a slip: the
    selected half carries its own 2 of vertical padding inside the track's 36. */
-._unitOn_v44fk_179 {
+._unitOn_ddqa4_123 {
   height: 32px;
   background: var(--color-surface-neutral);
   font-weight: var(--font-weight-bold);
@@ -2948,7 +3857,7 @@
 
 /* A half-pixel hairline drawn INSIDE the pill, as every Figma stroke is — hence `inset`
    rather than a border, which CSS would draw around it and make the pill 37 tall. */
-._unitOff_v44fk_187 {
+._unitOff_ddqa4_131 {
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
   font-weight: var(--font-weight-regular);
 }
@@ -2957,11 +3866,11 @@
 
 /* Wider than the sheet on a narrow phone or a long chart, so it scrolls inside its own
    container rather than making the sheet scroll sideways. */
-._tableWrap_v44fk_196 {
+._tableWrap_ddqa4_140 {
   overflow-x: auto;
 }
 
-._table_v44fk_196 {
+._table_ddqa4_140 {
   width: 100%;
   /* `separate` with no spacing, not `collapse`: collapsed borders cannot carry the
      header's rounded top corners. */
@@ -2982,11 +3891,11 @@
  * 93%, and Chrome scaled all five back up to an equal fifth. Same trap `ShopSurface`
  * documents on its base headings.
  */
-._col_v44fk_221 {
+._col_ddqa4_165 {
   width: 18.6006%;
 }
 
-._colEdge_v44fk_225 {
+._colEdge_ddqa4_169 {
   width: 22.0991%;
 }
 
@@ -2996,7 +3905,7 @@
  * variable behind either, and `border/soft` and `text/subtle` are visibly different
  * greys.
  */
-._table_v44fk_196 thead th {
+._table_ddqa4_140 thead th {
   height: 36px;
   padding: 0;
   background: #f5f5f5;
@@ -3008,21 +3917,21 @@
   text-align: center;
 }
 
-._table_v44fk_196 thead th:first-child {
+._table_ddqa4_140 thead th:first-child {
   padding-left: var(--space-12);
   border-top-left-radius: var(--radius-8);
   text-align: left;
 }
 
-._table_v44fk_196 thead th:last-child {
+._table_ddqa4_140 thead th:last-child {
   padding-right: var(--space-12);
   border-top-right-radius: var(--radius-8);
 }
 
 /* 13px, which is not on the type scale — the design uses a detached style here rather
    than a token, and 12 or 14 both miss the row. */
-._table_v44fk_196 tbody th,
-._table_v44fk_196 tbody td {
+._table_ddqa4_140 tbody th,
+._table_ddqa4_140 tbody td {
   height: 44px;
   padding: 0;
   border-bottom: 1px solid var(--color-surface-soft);
@@ -3033,20 +3942,20 @@
   text-align: center;
 }
 
-._table_v44fk_196 tbody th {
+._table_ddqa4_140 tbody th {
   padding-left: var(--space-12);
   font-weight: var(--font-weight-bold);
   text-align: left;
 }
 
-._table_v44fk_196 tbody td:last-child {
+._table_ddqa4_140 tbody td:last-child {
   padding-right: var(--space-12);
 }
 
 /* No rule under the last row: the table would otherwise be underlined, and the note that
    follows is a separate block with its own ground. */
-._table_v44fk_196 tbody tr:last-child th,
-._table_v44fk_196 tbody tr:last-child td {
+._table_ddqa4_140 tbody tr:last-child th,
+._table_ddqa4_140 tbody tr:last-child td {
   border-bottom: 0;
 }
 
@@ -3054,7 +3963,7 @@
 
 /* `caption/xs` — the same 12px face as `trimmed/xs` on a 1.52 leading rather than a
    trimmed box, which is why the line-height is written out. */
-._note_v44fk_293 {
+._note_ddqa4_237 {
   margin: 0;
   padding: var(--space-8) var(--space-12);
   border-radius: var(--radius-8);
@@ -3066,13 +3975,13 @@
 
 /* ── How to measure ────────────────────────────────────────────────────────── */
 
-._how_v44fk_305 {
+._how_ddqa4_249 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
 
-._howTitle_v44fk_311 {
+._howTitle_ddqa4_255 {
   margin: 0;
   font-size: var(--type-heading-sm-size);
   line-height: var(--type-heading-sm-line);
@@ -3080,14 +3989,14 @@
   color: #0d0d0d;
 }
 
-._howList_v44fk_319 {
+._howList_ddqa4_263 {
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._howItem_v44fk_326 {
+._howItem_ddqa4_270 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
@@ -3100,7 +4009,7 @@
  * separates with the hairline drawn on that boundary — the negative margin takes the pixel
  * back out of the layout so the pair stays 16 rather than becoming 17.
  */
-._howItem_v44fk_326 + ._howItem_v44fk_326 {
+._howItem_ddqa4_270 + ._howItem_ddqa4_270 {
   margin-top: -1px;
   padding-top: var(--space-8);
   border-top: 1px solid var(--color-surface-soft);
@@ -3112,7 +4021,7 @@
  * length" clear of anything that clips, and the margin takes that padding back out of the
  * layout so the box measures the 9 the frame gives it.
  */
-._howLabel_v44fk_351 {
+._howLabel_ddqa4_295 {
   padding: 5px 0;
   margin: -5px 0;
   font-size: var(--type-trimmed-xs-size);
@@ -3122,7 +4031,7 @@
   color: #0d0d0d;
 }
 
-._howText_v44fk_361 {
+._howText_ddqa4_305 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
@@ -3131,7 +4040,7 @@
 
 /* ── Fabric ────────────────────────────────────────────────────────────────── */
 
-._fabric_v44fk_370 {
+._fabric_ddqa4_314 {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
@@ -3139,7 +4048,7 @@
 
 /* `caption/xs-bold`, not the trimmed style the "How to measure" labels use: the frame's
    box is 18, which is the full 1.52 line rather than a cap. */
-._fabricLabel_v44fk_378 {
+._fabricLabel_ddqa4_322 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
@@ -3147,7 +4056,7 @@
   color: #0d0d0d;
 }
 
-._fabricText_v44fk_386 {
+._fabricText_ddqa4_330 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
@@ -3158,7 +4067,7 @@
 
 /* Not in the frame. Guides carried these before there was a chart to carry instead, and a
    payload that still has them is still worth drawing. */
-._notes_v44fk_397 {
+._notes_ddqa4_341 {
   margin: 0;
   padding-left: var(--space-16);
   display: flex;
@@ -3169,7 +4078,7 @@
   color: var(--color-text-subtle);
 }
 
-@keyframes _fade_v44fk_1 {
+@keyframes _fade_ddqa4_1 {
   from {
     opacity: 0;
   }
@@ -3178,7 +4087,7 @@
   }
 }
 
-@keyframes _rise_v44fk_1 {
+@keyframes _rise_ddqa4_1 {
   from {
     transform: translateY(12%);
   }
@@ -3188,8 +4097,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._scrim_v44fk_8,
-  ._sheet_v44fk_2 {
+  ._scrim_ddqa4_8,
+  ._sheet_ddqa4_2 {
     animation: none;
   }
 }
@@ -3280,30 +4189,34 @@
 ._chevron_9zj90_85 {
   display: block;
 }
-._root_1j4n8_1 {
+._root_1h4ny_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._header_1j4n8_7 {
+/* "Color: White" — cap-trimmed like every label in this column, so the block measures the
+   frame's 128 rather than 142. */
+._header_1h4ny_9 {
   margin: 0;
   display: flex;
+  align-items: center;
   gap: var(--space-4);
   font-size: var(--type-trimmed-md-size);
+  line-height: var(--type-trimmed-md-line);
 }
 
-._title_1j4n8_14 {
+._title_1h4ny_18 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
-._value_1j4n8_19 {
+._value_1h4ny_23 {
   font-weight: var(--font-weight-regular);
   color: var(--color-text-subtle);
 }
 
-._tiles_1j4n8_24 {
+._tiles_1h4ny_28 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
@@ -3314,7 +4227,7 @@
  * overhanging the top edge, so clipping here would shave it in half. `.media` is the
  * clipped box instead, which keeps the image inside the radius.
  */
-._tile_1j4n8_24 {
+._tile_1h4ny_28 {
   position: relative;
   width: 79px;
   height: 105px;
@@ -3327,11 +4240,11 @@
   cursor: pointer;
 }
 
-._selected_1j4n8_48 {
+._selected_1h4ny_52 {
   border-color: var(--color-surface-max);
 }
 
-._media_1j4n8_32 {
+._media_1h4ny_36 {
   position: absolute;
   inset: 0;
   border-radius: var(--radius-8);
@@ -3339,11 +4252,11 @@
   background: var(--color-surface-soft);
 }
 
-._image_1j4n8_60 {
+._image_1h4ny_64 {
   object-fit: cover;
 }
 
-._placeholder_1j4n8_64 {
+._placeholder_1h4ny_68 {
   position: absolute;
   inset: 0;
   background: var(--color-surface-soft);
@@ -3351,7 +4264,7 @@
 
 /* Sold-out: full dark scrim with white label (Figma color/tile state=sold-out). The tile
    stays tappable — see the component docblock. */
-._scrim_1j4n8_72 {
+._scrim_1h4ny_76 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3370,7 +4283,7 @@
  * proud of the top edge — so it reads as a tag pinned to the tile rather than a label
  * inside it. `pointer-events: none` keeps it from swallowing taps meant for the tile.
  */
-._stockBadge_1j4n8_91 {
+._stockBadge_1h4ny_95 {
   position: absolute;
   top: -10px;
   left: 50px;
@@ -4471,7 +5384,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_oq0bd_25 {
+._header_1yjrk_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -4513,24 +5426,35 @@
 /*
  * Overlaid rather than stacked, for screens whose artwork runs to the top of the display.
  *
- * `absolute`, so this deliberately opts OUT of the sticky default above: the category
- * hero scrolls away under its own title and a bar pinned over a photograph that is no
- * longer there would be a bar floating on nothing.
+ * Overlaid is about the ARTWORK, not about staying on screen. `mobile/hero` carries its
+ * own `mobile/header` instance at y=0, hidden, and positions the category title at y=106 —
+ * measured from the top of the SCREEN, not from under a bar. In flow the header pushes the
+ * picture down and every measurement inside it lands a bar height low, which is how the
+ * category page shipped.
+ *
+ * So it is taken out of the flow with a negative margin rather than with `absolute`, and
+ * it keeps the sticky default. This was `position: absolute` until 21 Aug 2026, and that
+ * scrolled the bar off the top of a category page: the back chevron, the cart badge and
+ * the menu were reachable only by scrolling back up. DAZN reported it.
+ *
+ * The give-away was in the component itself — a bar that had left the screen was still
+ * switching to `.scrolled` and painting a scrim on nothing. That state only means anything
+ * for a bar that is still there. It looked correct on the shop entry because the entry
+ * scrolls its own snap scroller and never the document, so `absolute` never moved.
  *
- * `mobile/hero` carries its own `mobile/header` instance at y=0, hidden, and positions the
- * category title at y=106 — measured from the top of the SCREEN, not from under a bar. In
- * flow the header pushes the picture down and every measurement inside it lands a bar
- * height low,
- * which is how the category page shipped.
+ * `sticky` rather than `fixed`: we are mounted in someone else's page, under chrome of
+ * theirs we cannot see. `fixed` pins to the viewport and would sit on top of it. Sticky
+ * stays inside our own box, wherever the host has put it.
  *
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_oq0bd_44 {
-  position: absolute;
+._floating_1yjrk_44 {
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
+  /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
+     under the bar, which is what `absolute` was really buying. */
+  margin-bottom: calc(-1 * var(--header-height));
   z-index: 5;
   /*
    * Clear at rest. The scrim belongs to `.scrolled` below.
@@ -4582,12 +5506,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_oq0bd_44._scrolled_oq0bd_87 {
+._floating_1yjrk_44._scrolled_1yjrk_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_oq0bd_44 {
+  ._floating_1yjrk_44 {
     transition: none;
   }
 }
@@ -4607,7 +5531,7 @@
  * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
  * as a static white it would be invisible the first time a host passed one on a light page.
  */
-._title_oq0bd_161 {
+._title_1yjrk_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -4620,7 +5544,7 @@
   white-space: nowrap;
 }
 
-._right_oq0bd_174 {
+._right_1yjrk_185 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -4633,12 +5557,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_oq0bd_187 {
+._spacer_1yjrk_198 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_oq0bd_192 {
+._iconBtn_1yjrk_203 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -4654,7 +5578,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_oq0bd_192::after {
+._iconBtn_1yjrk_203::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -4665,12 +5589,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_oq0bd_219 {
+._menuBtn_1yjrk_230 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_oq0bd_219::after {
+._menuBtn_1yjrk_230::after {
   inset: -6px;
 }
 
@@ -4693,7 +5617,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_oq0bd_247 {
+._badge_1yjrk_258 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -4720,13 +5644,13 @@
  * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
  * left one empty, so the title centres on the screen rather than on what is left over.
  */
-._closeSlot_oq0bd_274 {
+._closeSlot_1yjrk_285 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_oq0bd_274._iconBtn_oq0bd_192::after {
+._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
   inset: -6px;
 }
 
@@ -4735,7 +5659,7 @@
  * centres "Order #2304" between two equal slots, so it is the free space, not a measured
  * width. Same size, weight and colour as the shop entry's — one text style, two positions.
  */
-._centred_oq0bd_289 {
+._centred_1yjrk_300 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;