@nok-integration/storefront-react 0.17.1 → 0.18.0

package/dist/standalone/styles.css

@@ -32,18 +32,41 @@
   --type-heading-lg-size: 24px;
   --type-heading-lg-line: 1.2;
   --type-heading-md-size: 20px;
-  --type-heading-sm-size: 20px;
   --type-heading-md-line: 1.25;
+  /* `size/heading/sm` + `heading/sm-bold`. This used to read 20px, which is the
+     library's heading/md — the two components that want it (the PDP's "Why us" tiles
+     and the size guide's "How to measure") both wrote 18 out by hand to work around
+     it, and nothing else consumes it. */
+  --type-heading-sm-size: 18px;
+  --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;
@@ -56,6 +79,13 @@
      --color-border-default, but a separate token in DAZN's library; keep them separate. */
   --color-surface-subtle: #dddedf;
   --color-surface-max: #080e12;
+  /* semantic/base/surface/full-color/neutral — the selected half of a segmented
+     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
@@ -213,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;
@@ -237,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;
 }
@@ -274,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);
   }
@@ -491,40 +542,55 @@
 ._action_ney0g_57 {
   margin: var(--space-8) var(--space-16) 0;
 }
-._root_1u83t_1 {
+/*
+ * The design's shared empty state, instanced by the cart (Figma 4451:48190) and the orders
+ * list (4551:32238). Both frames draw the same block: a 24px heading, a paragraph 6px
+ * under it, and the action 24 below the pair.
+ */
+._root_ryf3q_6 {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--space-8);
+  gap: var(--space-24);
   padding: var(--space-32) var(--space-24);
 }
 
-._icon_1u83t_10 {
+._icon_ryf3q_15 {
   font-size: 32px;
   line-height: 1;
 }
 
-._title_1u83t_15 {
-  font-size: var(--type-heading-md-size);
-  line-height: var(--type-heading-md-line);
+/* The heading and the paragraph, 6px apart — `spacer/spacer-xxs`. */
+._text_ryf3q_21 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/*
+ * `heading/lg`, 24px, and the 1.32 the design system gives it rather than
+ * `--type-heading-lg-line`. That token is 1.2, which is a divergence of its own on every
+ * screen that reads it; correcting it there moves the PDP title, the lifestyle copy and
+ * the review carousel, so it is written out here and left for a measured pass of its own.
+ *
+ * Both frames make this line 32px tall, which is 24 x 1.32.
+ */
+._title_ryf3q_35 {
+  font-size: var(--type-heading-lg-size);
+  line-height: 1.32;
 }
 
-._body_1u83t_20 {
+._body_ryf3q_40 {
   margin: 0;
   color: var(--color-text-subtle);
   font-size: var(--type-paragraph-size);
+  line-height: var(--type-paragraph-line);
   max-width: 34ch;
 }
 
-/*
- * The one place the empty state is drawn is the cart (Figma 4451:48190), and it separates
- * the action from the copy far more than it separates the two lines of copy: 24 against 6.
- * With the `gap` above, this lands the button 28px below the last line where the frame has
- * 28 — it was 20, close enough to the paragraph above to read as part of it.
- */
-._action_1u83t_33 {
-  margin-top: var(--space-16);
+._action_ryf3q_48 {
+  display: flex;
 }
 ._root_1lbpx_1 {
   display: flex;
@@ -795,7 +861,7 @@
   display: block;
   flex-shrink: 0;
 }
-._root_n3nm5_1 {
+._root_rvfx9_1 {
   display: inline-flex;
   align-items: baseline;
   gap: var(--space-8);
@@ -804,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);
@@ -838,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);
 }
 /*
@@ -1057,158 +1144,40 @@
 ._row_1hsxt_16._discount_1hsxt_69 dd {
   color: var(--color-state-text-success);
 }
-._page_1eqkm_1 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-24);
-  padding: var(--space-24) var(--space-16);
-}
-
-/* ── Status + timeline ─────────────────────────────────────────────────────── */
-
-._status_1eqkm_10 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-24);
-}
-
-/* The timeline and its button are one block in the design — 16px apart, 24px from the
-   heading above them. */
-._widget_1eqkm_18 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-16);
-}
-
-._title_1eqkm_24 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-12);
-}
-
-._headline_1eqkm_30 {
-  margin: 0;
-  font-size: var(--type-heading-md-size);
-  line-height: 1.32;
-  font-weight: var(--font-weight-bold);
-}
-
-._subtitle_1eqkm_37 {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--space-8);
-  flex-wrap: wrap;
-  font-size: var(--type-paragraph-size);
-  font-weight: var(--font-weight-regular);
-  color: var(--color-text-subtle);
-}
-
-._dot_1eqkm_48 {
-  width: 4px;
-  height: 4px;
-  border-radius: var(--radius-full);
-  background: currentColor;
-  flex-shrink: 0;
-}
-
-/* Figma `mobile/button`, as an anchor: the destination is the carrier's own site, so this
-   is a link and has to behave like one — middle-click, long-press, open in new tab. */
-._trackButton_1eqkm_58 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  padding: var(--space-12);
-  border-radius: var(--radius-8);
-  background: var(--color-surface-max);
-  color: var(--color-text-strong);
-  font-size: var(--type-trimmed-md-size);
-  font-weight: var(--font-weight-bold);
-  text-align: center;
-  text-decoration: none;
-}
-
-._trackButton_1eqkm_58:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-._srOnly_1eqkm_78 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ── Items card ────────────────────────────────────────────────────────────── */
-
-._itemsCard_1eqkm_92 {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--color-border-transparent-soft);
-  border-radius: var(--radius-18);
-  overflow: hidden;
-}
-
-._cardHeader_1eqkm_100 {
-  display: flex;
-  align-items: center;
-  gap: var(--space-12);
-  min-height: 60px;
-  padding: 0 var(--space-16);
-}
-
-._cardTitle_1eqkm_108 {
-  margin: 0;
-  font-size: var(--type-heading-md-size);
-  line-height: 1.38;
-  font-weight: var(--font-weight-bold);
-}
+/*
+ * The blocks the confirmation (Figma 5295:74053) and the tracking screen (5479:132209)
+ * both draw: the item rows, then the two cards. Written once because the frames instance
+ * one set of components, and measured against both.
+ */
 
-._count_1eqkm_115 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 var(--space-4);
-  border-radius: var(--radius-full);
-  background: var(--color-surface-subtle);
-  font-size: var(--type-trimmed-xs-size);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: 0.12px;
-  font-variant-numeric: tabular-nums;
-}
+/* ── Lines ─────────────────────────────────────────────────────────────────── */
 
-._lines_1eqkm_130 {
+/*
+ * `mobile/checkout/cart-row`, and deliberately NOT inside a card.
+ *
+ * Both frames lay the rows straight on the page between the widget and the address. The
+ * tracking screen used to draw a bordered "Items" card with a count instead, off a frame
+ * that has since been redrawn; nothing draws that card now.
+ *
+ * `CartLineItem` is left alone: its copy of this component carries a quantity stepper and
+ * a remove control that a receipt must not have.
+ */
+._lines_7mr8w_19 {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--color-border-default);
+  gap: var(--space-16);
 }
 
-._line_1eqkm_130 {
+._line_7mr8w_19 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
-  padding: var(--space-12) var(--space-16);
 }
 
-/* Between lines only — a rule under the last one would float above the card's edge. The
-   12px either side of it comes from the rows' own padding. */
-._line_1eqkm_130 + ._line_1eqkm_130 {
-  border-top: 1px solid var(--color-border-default);
-}
-
-._thumb_1eqkm_152 {
+._thumb_7mr8w_34 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
@@ -1218,228 +1187,995 @@
   background: var(--color-surface-soft);
 }
 
-._image_1eqkm_162 {
+._image_7mr8w_44 {
   object-fit: cover;
 }
 
-._placeholder_1eqkm_166 {
+._placeholder_7mr8w_48 {
   width: 100%;
   height: 100%;
 }
 
-/* Title and price share a top edge; the thumbnail centres against the pair. */
-._lineBody_1eqkm_172 {
+._lineBody_7mr8w_53 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
+  gap: var(--space-16);
   flex: 1 1 0;
   min-width: 0;
 }
 
-._lineText_1eqkm_180 {
+._lineText_7mr8w_62 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   flex: 1 1 0;
   min-width: 0;
-  padding-right: var(--space-16);
 }
 
-._lineTitle_1eqkm_189 {
+/* Cap-trimmed to the frame's 11, with the same descender protection as the subtitle —
+   this one is ellipsised too, and a `p` or a `g` in a product name is not unusual. */
+._lineTitle_7mr8w_72 {
+  margin: -6px 0;
+  padding: 6px 0;
   font-size: var(--type-trimmed-sm-size);
+  line-height: 11px;
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-._lineDetails_1eqkm_197 {
+/*
+ * The variant, then the sale badge beside it — 12px apart, vertically centred on it.
+ *
+ * Cap-trimmed like the title above, which is what leaves the badge as the tallest thing in
+ * the row and holds it to the 20px the frame gives it. Untrimmed the text alone was 22, so
+ * the row stood 55 against the frame's 48 and the thumbnail stopped being what sets the
+ * row's height.
+ */
+._lineMeta_7mr8w_91 {
   display: flex;
+  align-items: center;
   gap: var(--space-12);
+  min-width: 0;
   font-size: var(--type-trimmed-sm-size);
+  line-height: 11px;
   color: var(--color-text-subtle);
-  min-width: 0;
 }
 
-._linePrice_1eqkm_205 {
+/*
+ * Stacked, not in a row: the frame puts what was paid above what it would have cost, at
+ * two different sizes. That is why this is written here rather than with `PriceBlock`,
+ * which lays the pair out inline at one size for the product card and the PDP.
+ */
+._linePrice_7mr8w_106 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-6);
   flex-shrink: 0;
-  font-size: var(--type-trimmed-md-size);
-  font-weight: var(--font-weight-bold);
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
 
-/* ── Address + payment ─────────────────────────────────────────────────────── */
-
-._details_1eqkm_215 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-16);
-  padding: var(--space-16);
-  background: var(--color-surface-soft);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-18);
-  /* The design nests this card inside a second, one-step-darker ring. Drawn as a shadow
-     rather than a wrapper element: the two borders are coincident, so it renders the same. */
-  box-shadow: 0 0 0 1px var(--color-border-subtle);
-}
-
-._detailBlock_1eqkm_228 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
-}
-
-/* The payment block sits a step looser than the address one. */
-._detailBlock_1eqkm_228._payment_1eqkm_235 {
-  gap: var(--space-12);
-}
-
-._detailLabel_1eqkm_239 {
-  margin: 0;
-  font-size: var(--type-trimmed-sm-size);
+/* Cap-trimmed like everything else in this row: 11 on 16px, 10 on 14px. Untrimmed the
+   pair stood 52 tall and became what set the row's height, against a 48px thumbnail. */
+._paid_7mr8w_118 {
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
   font-weight: var(--font-weight-bold);
 }
 
-._detailValue_1eqkm_245 {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--space-8);
+._was_7mr8w_124 {
   font-size: var(--type-trimmed-sm-size);
-  line-height: var(--type-caption-sm-line);
-  color: var(--color-text-subtle);
-}
-
-/* The masked digits carry the same weight as the brand beside them. */
-._last4_1eqkm_256 {
-  font-weight: var(--font-weight-bold);
-}
-
-/* The brand as DAZN send it — lowercase on the wire, capitalised for display rather than
-   matched against a list, so an unfamiliar one still renders properly. */
-._brand_1eqkm_262 {
-  text-transform: capitalize;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-default);
-}
-
-._divider_1eqkm_268 {
-  height: 1px;
-  background: var(--color-border-default);
+  line-height: 10px;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
 }
 
-/* ── Order summary ─────────────────────────────────────────────────────────── */
+/* ── Cards ─────────────────────────────────────────────────────────────────── */
 
-._summaryCard_1eqkm_275 {
+/*
+ * The address and summary cards are one shape: a 60px titled header, a hairline, and a
+ * body. They differ only in ground, which is what `.summaryCard` below changes.
+ *
+ * The ring is an inset shadow rather than a border, and that is a measurement rather than
+ * a preference. Figma draws a frame's stroke INSIDE its box, so the address card is 113
+ * tall with its outline in that 113 — 60 of header and 53 of body. A CSS border sits
+ * outside the content and makes the same card 115. An inset shadow paints the same
+ * hairline and occupies no layout, so the card lands on the design's own number.
+ */
+._card_7mr8w_144 {
   display: flex;
   flex-direction: column;
-  background: var(--color-surface-soft);
-  border: 1px solid var(--color-border-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
   border-radius: var(--radius-18);
   overflow: hidden;
 }
 
-._summaryCard_1eqkm_275 ._cardTitle_1eqkm_108 {
+._cardTitle_7mr8w_152 {
   display: flex;
   align-items: center;
+  margin: 0;
   min-height: 60px;
   padding: 0 var(--space-16);
+  border-bottom: 1px solid var(--color-border-default);
+  font-size: var(--type-heading-md-size);
+  line-height: 1.38;
+  font-weight: var(--font-weight-bold);
 }
 
-/* The shared summary rows are drawn edge-to-edge in the cart; inside this card they need
-   the card's own gutter. */
-._summaryCard_1eqkm_275 > :last-child {
-  padding: 0 var(--space-16);
-}
-/*
- * Figma `5295:74053`. The page's own block starts at y=118 — under the 64px bar and the
- * 54px status bar the device draws above it — with 20px above the first heading, 24px
- * below the last control, and 32px between the five blocks.
+._cardBody_7mr8w_164 {
+  margin: 0;
+  padding: var(--space-16);
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 1.5;
+}
+
+/* `surface/full-color/soft` — the summary is the one card the design fills. */
+._summaryCard_7mr8w_136 {
+  background: var(--color-surface-soft);
+}
+
+/* The shared summary rows are drawn edge-to-edge in the cart; here they take the card's
+   own gutter, as they do on the tracking screen. */
+._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.
  */
-._page_8yxu9_6 {
+._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.
+ *
+ * The page's own block starts at y=138 — 20 under the 118 of status bar and header — and
+ * 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_opefg_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: var(--space-20) var(--space-16) var(--space-24);
 }
 
-/* ── Confirmation + timeline ───────────────────────────────────────────────── */
+/* ── Order number + timeline ───────────────────────────────────────────────── */
+
+/* `mobile/order/delivery-widget`: the title row, then the steps, 32 apart. */
+._widget_opefg_18 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-32);
+}
+
+/* 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_opefg_26 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+}
+
+/*
+ * `line-height: 14px` on 20px text, which is the frame's own number rather than a squeeze:
+ * every text layer here is `text-box-trim: trim-both` with a cap-alphabetic edge, so
+ * Figma's box stops at the cap height and its 14 is 14 of visible letter. A CSS line box
+ * carries the font's leading above and below, which renders the same heading as 26 and
+ * pushes everything below it down by the difference.
+ *
+ * Nothing clips it, so the cap-height box needs no descender protection.
+ */
+._headline_opefg_42 {
+  margin: 0;
+  min-width: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 14px;
+  font-weight: var(--font-weight-bold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * 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;
+}
 
-/* `mobile/order/delivery-widget`: the heading pair, then the timeline, 24px apart. */
-._confirmed_8yxu9_16 {
+._placeholder_1c7ro_133 {
+  width: 100%;
+  height: 100%;
+}
+
+._meta_1c7ro_138 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-24);
+  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);
 }
 
-._title_8yxu9_22 {
+._price_1c7ro_167 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-12);
+  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;
 }
 
 /*
- * Green, and the only green heading in the storefront: `semantic/state/text/success`
- * rather than `text/default`, which is the design saying this line is a result and not a
- * label. It is the same token the discount row and the "Free" shipping figure take, so
- * the screen has one success tone rather than three.
+ * 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.
  *
- * `line-height: 14px` on 20px text, and that is the frame's own number rather than a
- * squeeze: every text layer here is `text-box-trim: trim-both` with a cap-alphabetic
- * edge, so Figma's boxes stop at the cap height and its 14 is 14 of visible letter. A CSS
- * line box carries the font's leading above and below, which renders the same heading as
- * 26 and pushes all four blocks below it down by the difference.
- *
- * `text-box-trim` would let us write the design's own number and is Chrome 133+ only; this
- * package still supports the WebView in React 16-era DAZN builds. `OrderTimeline` and
- * `ProductTile` carry the same approximation for the same reason.
- *
- * Nothing clips it, so the cap-height box needs no descender protection — unlike the
- * subtitle below, which the design truncates.
+ * 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.
  */
-._headline_8yxu9_47 {
-  margin: 0;
-  font-size: var(--type-heading-md-size);
-  line-height: 14px;
+._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);
-  color: var(--color-state-text-success);
+  cursor: pointer;
 }
 
+._reasonSet_1c7ro_217 {
+  color: var(--color-text-default);
+}
+
+._reason_1c7ro_199:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 /*
- * 11px on 16px text, the same cap-height trim as the heading, and one line: the design's
- * own text layer is `overflow-hidden` with `text-ellipsis`, which is how it holds an
- * address of unknown length to a single row.
+ * Figma `Return flow` (4551:32294), screen 5 — the label and its instructions.
  *
- * The padding is what the trim costs. Clipping cuts in both directions, and an 11px box
- * beheads every descender — including the `g` in the `@gmail.com` the frame itself shows.
- * The padding gives the glyphs somewhere to go and the equal negative margin takes it back
- * out of the layout, leaving the box 11px and the letters whole.
+ * 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.
  */
-._subtitle_8yxu9_65 {
-  margin: -6px 0;
-  padding: 6px 0;
-  font-size: var(--type-paragraph-size);
+._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;
-  font-weight: var(--font-weight-regular);
+  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);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-/* ── Lines ─────────────────────────────────────────────────────────────────── */
+/* 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/checkout/cart-row`, and deliberately NOT inside a card.
+ * `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.
+ */
+._download_1r0ea_121 {
+  display: inline-flex;
+  align-items: center;
+  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;
+}
+
+._download_1r0ea_121:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* 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);
+}
+/*
+ * Figma `Return flow` (4551:32294), screens 6 to 8 — "Return in progress".
  *
- * The tracking screen puts its items in a bordered "Items" card with a count; this frame
- * lays them straight on the page between the timeline and the address. The same data, and
- * two designs — so the row is written here rather than either screen being bent to fit the
- * other, and `CartLineItem` is left alone because its copy of this component carries a
- * quantity stepper and a remove control that a receipt must not have.
+ * 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.
  */
-._lines_8yxu9_88 {
+._page_o44fl_8 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  padding: var(--space-20) var(--space-16) var(--space-24);
+}
+
+._titles_o44fl_15 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._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);
+}
+
+._items_o44fl_38 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1448,41 +2184,32 @@
   gap: var(--space-16);
 }
 
-._line_8yxu9_88 {
+._item_o44fl_38 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
 
-._thumb_8yxu9_103 {
+._thumb_o44fl_53 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
   height: 48px;
-  border-radius: var(--radius-8);
+  border-radius: var(--radius-6);
   overflow: hidden;
-  background: var(--color-surface-soft);
+  background: var(--color-surface-subtle);
 }
 
-._image_8yxu9_113 {
+._img_o44fl_63 {
   object-fit: cover;
 }
 
-._placeholder_8yxu9_117 {
+._placeholder_o44fl_67 {
   width: 100%;
   height: 100%;
 }
 
-._lineBody_8yxu9_122 {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-16);
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-._lineText_8yxu9_131 {
+._meta_o44fl_72 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -1490,116 +2217,139 @@
   min-width: 0;
 }
 
-/* Cap-trimmed to the frame's 11, with the same descender protection as the subtitle —
-   this one is ellipsised too, and a `p` or a `g` in a product name is not unusual. */
-._lineTitle_8yxu9_141 {
-  margin: -6px 0;
-  padding: 6px 0;
+._name_o44fl_80 {
   font-size: var(--type-trimmed-sm-size);
-  line-height: 11px;
+  line-height: 10px;
+  padding: 5px 0;
+  margin: -5px 0;
   font-weight: var(--font-weight-bold);
-  white-space: nowrap;
+  color: var(--color-text-default);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /*
- * The variant, then the sale badge beside it — 12px apart, vertically centred on it.
+ * "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.
  *
- * Cap-trimmed like the title above, which is what leaves the badge as the tallest thing in
- * the row and holds it to the 20px the frame gives it. Untrimmed the text alone was 22, so
- * the row stood 55 against the frame's 48 and the thumbnail stopped being what sets the
- * row's height.
+ * 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.
  */
-._lineMeta_8yxu9_160 {
+._attrs_o44fl_100 {
+  margin: 0;
   display: flex;
-  align-items: center;
-  gap: var(--space-12);
-  min-width: 0;
-  font-size: var(--type-trimmed-sm-size);
-  line-height: 11px;
+  align-items: center;
+  gap: var(--space-8);
   color: var(--color-text-subtle);
 }
 
-/*
- * Stacked, not in a row: the frame puts what was paid above what it would have cost, at
- * two different sizes. That is why this is written here rather than with `PriceBlock`,
- * which lays the pair out inline at one size for the product card and the PDP.
- */
-._linePrice_8yxu9_175 {
+._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;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
+  text-align: right;
 }
 
-/* Cap-trimmed like everything else in this row: 11 on 16px, 10 on 14px. Untrimmed the
-   pair stood 52 tall and became what set the row's height, against a 48px thumbnail. */
-._paid_8yxu9_187 {
+._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_8yxu9_193 {
+._was_o44fl_132 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
-  font-weight: var(--font-weight-regular);
   color: var(--color-text-disabled);
   text-decoration: line-through;
+  font-variant-numeric: tabular-nums;
 }
-
-/* ── Cards ─────────────────────────────────────────────────────────────────── */
-
 /*
- * The address and summary cards are one shape: a 60px titled header, a hairline, and a
- * body. They differ only in ground, which is what `.summaryCard` below changes.
- *
- * The ring is an inset shadow rather than a border, and that is a measurement rather than
- * a preference. Figma draws a frame's stroke INSIDE its box, so the address card is 113
- * tall with its outline in that 113 — 60 of header and 53 of body. A CSS border sits
- * outside the content and makes the same card 115. An inset shadow paints the same
- * hairline and occupies no layout, so the card lands on the design's own number.
+ * Figma `5295:74053`. The page's own block starts at y=118 — under the 64px bar and the
+ * 54px status bar the device draws above it — with 20px above the first heading, 24px
+ * below the last control, and 32px between the five blocks.
  */
-._card_8yxu9_213 {
+._page_1s8l9_6 {
   display: flex;
   flex-direction: column;
-  box-shadow: inset 0 0 0 1px var(--color-border-default);
-  border-radius: var(--radius-18);
-  overflow: hidden;
+  gap: var(--space-32);
+  padding: var(--space-20) var(--space-16) var(--space-24);
 }
 
-._cardTitle_8yxu9_221 {
+/* ── Confirmation + timeline ───────────────────────────────────────────────── */
+
+/* `mobile/order/delivery-widget`: the heading pair, then the timeline, 24px apart. */
+._confirmed_1s8l9_16 {
   display: flex;
-  align-items: center;
-  margin: 0;
-  min-height: 60px;
-  padding: 0 var(--space-16);
-  border-bottom: 1px solid var(--color-border-default);
-  font-size: var(--type-heading-md-size);
-  line-height: 1.38;
-  font-weight: var(--font-weight-bold);
+  flex-direction: column;
+  gap: var(--space-24);
 }
 
-._cardBody_8yxu9_233 {
-  margin: 0;
-  padding: var(--space-16);
-  font-size: var(--type-trimmed-sm-size);
-  line-height: 1.5;
+._title_1s8l9_22 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
 }
 
-/* `surface/full-color/soft` — the summary is the one card the design fills. */
-._summaryCard_8yxu9_205 {
-  background: var(--color-surface-soft);
+/*
+ * Green, and the only green heading in the storefront: `semantic/state/text/success`
+ * rather than `text/default`, which is the design saying this line is a result and not a
+ * label. It is the same token the discount row and the "Free" shipping figure take, so
+ * the screen has one success tone rather than three.
+ *
+ * `line-height: 14px` on 20px text, and that is the frame's own number rather than a
+ * squeeze: every text layer here is `text-box-trim: trim-both` with a cap-alphabetic
+ * edge, so Figma's boxes stop at the cap height and its 14 is 14 of visible letter. A CSS
+ * line box carries the font's leading above and below, which renders the same heading as
+ * 26 and pushes all four blocks below it down by the difference.
+ *
+ * `text-box-trim` would let us write the design's own number and is Chrome 133+ only; this
+ * package still supports the WebView in React 16-era DAZN builds. `OrderTimeline` and
+ * `ProductTile` carry the same approximation for the same reason.
+ *
+ * Nothing clips it, so the cap-height box needs no descender protection — unlike the
+ * subtitle below, which the design truncates.
+ */
+._headline_1s8l9_47 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 14px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-state-text-success);
 }
 
-/* The shared summary rows are drawn edge-to-edge in the cart; here they take the card's
-   own gutter, as they do on the tracking screen. */
-._summaryCard_8yxu9_205 > :last-child {
-  padding: 0 var(--space-16);
+/*
+ * 11px on 16px text, the same cap-height trim as the heading, and one line: the design's
+ * own text layer is `overflow-hidden` with `text-ellipsis`, which is how it holds an
+ * address of unknown length to a single row.
+ *
+ * The padding is what the trim costs. Clipping cuts in both directions, and an 11px box
+ * beheads every descender — including the `g` in the `@gmail.com` the frame itself shows.
+ * The padding gives the glyphs somewhere to go and the equal negative margin takes it back
+ * out of the layout, leaving the box 11px and the letters whole.
+ */
+._subtitle_1s8l9_65 {
+  margin: -6px 0;
+  padding: 6px 0;
+  font-size: var(--type-paragraph-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ── Done ──────────────────────────────────────────────────────────────────── */
@@ -1612,7 +2362,7 @@
  * which is what "max" means, and taking it from that token keeps the two in step if the
  * palette ever moves.
  */
-._done_8yxu9_261 {
+._done_1s8l9_87 {
   border-color: var(--color-surface-max);
 }
 /*
@@ -1650,8 +2400,8 @@
   background: var(--color-state-surface-critical-soft);
   color: var(--color-state-text-critical);
 }
-/* Figma `mobile/order/list` (4024:58594). */
-._page_y686q_2 {
+/* Figma `mobile/order/list` (4551:32241, in the `my orders` section 4551:32237). */
+._page_6xodo_2 {
   list-style: none;
   margin: 0;
   display: flex;
@@ -1660,18 +2410,28 @@
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
 
-._empty_y686q_11 {
+/*
+ * The design centres the empty state in the whole screen below the header, not at the top
+ * of an otherwise blank page: the block runs from the bar's bottom edge to 32px above the
+ * foot of the display, with its contents centred inside that.
+ *
+ * The frame's own numbers are 96 to 780 of 812, and 96 is where the bar ended when this
+ * screen was drawn — the cart's empty frame (4451:48190) has the same block at the same
+ * two numbers under a 96px header. The bar is 118 with the status bar now, so following
+ * the frame's literal 96 would tuck the heading under it. Measuring from the bar instead
+ * keeps the intent and lands the block 11px lower than the export.
+ */
+._empty_6xodo_22 {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* The design centres the empty state in the whole screen below the header, not at the
-     top of an otherwise blank page. */
-  min-height: 60dvh;
+  min-height: calc(100dvh - var(--header-height) - var(--space-32));
+  padding-bottom: var(--space-32);
 }
 
 /* `mobile/button`, the design's own dark CTA. Not the shared `Button` primary, whose
    shape is the cart's; this one is content-width with a 48px floor. */
-._cta_y686q_22 {
+._cta_6xodo_32 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1689,12 +2449,12 @@
   cursor: pointer;
 }
 
-._cta_y686q_22:focus-visible {
+._cta_6xodo_32:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-._card_y686q_45 {
+._card_6xodo_55 {
   display: flex;
   flex-direction: column;
   gap: var(--space-24);
@@ -1709,16 +2469,16 @@
   overflow: hidden;
 }
 
-._tappable_y686q_60 {
+._tappable_6xodo_70 {
   cursor: pointer;
 }
 
-._tappable_y686q_60:focus-visible {
+._tappable_6xodo_70:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-._head_y686q_69 {
+._head_6xodo_79 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -1726,7 +2486,7 @@
   width: 100%;
 }
 
-._heading_y686q_77 {
+._heading_6xodo_87 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -1735,7 +2495,7 @@
   color: var(--color-text-default);
 }
 
-._title_y686q_86 {
+._title_6xodo_96 {
   font-size: var(--type-heading-md-size);
   font-weight: var(--font-weight-bold);
   /* The frame's own 1.32, not the token's 1.25 — that value was set from a different
@@ -1746,12 +2506,20 @@
   white-space: nowrap;
 }
 
-._date_y686q_97 {
+/*
+ * 10px on 14px text: the date is `text-box-trim: trim-both` with a cap-alphabetic edge, so
+ * Figma's box stops at the cap height. The row's own height depends on it — untrimmed the
+ * card stood 160 against the frame's 156, and every card below it inherited the drift.
+ *
+ * Nothing clips this one, so it needs no descender protection: the comma and a Spanish
+ * "sept" hang below the box and are drawn, as they are in the frame.
+ */
+._date_6xodo_115 {
   font-size: var(--type-trimmed-sm-size);
-  line-height: 1;
+  line-height: 10px;
 }
 
-._bottom_y686q_102 {
+._bottom_6xodo_120 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1759,12 +2527,12 @@
   width: 100%;
 }
 
-._strip_y686q_110 {
+._strip_6xodo_128 {
   display: flex;
   gap: var(--space-6);
 }
 
-._tile_y686q_115 {
+._tile_6xodo_133 {
   position: relative;
   flex: 0 0 56px;
   width: 56px;
@@ -1774,18 +2542,18 @@
   background: var(--color-surface-subtle);
 }
 
-._image_y686q_125 {
+._image_6xodo_143 {
   object-fit: cover;
 }
 
-._placeholder_y686q_129 {
+._placeholder_6xodo_147 {
   /* No picture resolved for any line. A flat tile keeps the row's rhythm rather than
      collapsing the strip and shifting the chevron. */
   background: var(--color-surface-subtle);
 }
 
 /* The "+N" tile: the last thumbnail, dimmed, with the count over it. */
-._more_y686q_136 {
+._more_6xodo_154 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1798,24 +2566,28 @@
   line-height: 1;
 }
 
-._chevron_y686q_149 {
+._chevron_6xodo_167 {
   display: inline-flex;
   flex: 0 0 24px;
   width: 24px;
   height: 24px;
   color: var(--color-text-default);
 }
-/* 8 where Figma declares 12, for the reason set out on `.titlePrice` below: the gap sits
-   against a text layer whose CSS line box carries leading that Figma's does not. */
-._tile_1u9l8_3 {
+/*
+ * The frame's own 12, now that the text below it is trimmed to its cap height like the
+ * frame's. This was 8 — half the declared number — which put the glyphs in the right place
+ * 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_1io44_7 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
 
-._media_1u9l8_11 {
+._media_1io44_15 {
   position: relative;
   width: 100%;
   /* Product-card image is 165:220 (3:4), radius-6 (Figma), sharp not pill-round. */
@@ -1825,11 +2597,11 @@
   background: var(--color-surface-soft);
 }
 
-._image_1u9l8_21 {
+._image_1io44_25 {
   object-fit: cover;
 }
 
-._placeholder_1u9l8_25 {
+._placeholder_1io44_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
@@ -1837,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_1u9l8_33 {
+._topBadge_1io44_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1848,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;
@@ -1860,14 +2638,27 @@
   white-space: nowrap;
 }
 
-._saleBadge_1u9l8_56 {
+/*
+ * `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_1u9l8_63 {
+._oos_1io44_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1881,32 +2672,57 @@
 }
 
 /*
- * 8, where Figma declares 16 — and this is not a drift, so please do not "correct" it.
+ * Figma's own 16, both here and on `.titlePrice`.
  *
- * Every text layer in this card is `text-box-trim: trim-both` with a cap-alphabetic edge:
- * Figma's boxes stop at the cap height and the baseline, so its 16 is 16 of visible white.
- * A CSS line box carries the font's leading above and below the glyphs, so the same 16
- * renders as 23 — measured off both, title glyph bottom to price glyph top: Figma 15, ours
- * 23. Halving the declared gap puts ours at 15.
+ * These were 8 — half the declared number — and the halving was right about the cause and
+ * wrong about the cure. Every text layer in this card is `text-box-trim: trim-both` with a
+ * cap-alphabetic edge, so Figma's boxes stop at the cap height and its 16 is 16 of visible
+ * white, where a CSS line box carries the font's leading and renders the same 16 as 23.
+ * Halving the gap put the glyphs in the right place and left the BOX 11px too tall, which
+ * is invisible on one card and is the whole page by the bottom of the PCP: measured at
+ * 375, ours ran 3776 against the frame's 3384.
  *
- * `text-box-trim` would let us write the design's own number, and it is Chrome 133+ only.
- * This package still supports the WebView that ships with React 16-era DAZN builds.
+ * 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_1u9l8_88 {
+._bottom_1io44_113 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-16);
 }
 
-._titlePrice_1u9l8_1 {
+._titlePrice_1io44_100 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-16);
 }
 
-._title_1u9l8_1 {
+/*
+ * Trimmed to the cap height, in the only way that also keeps the leading BETWEEN two
+ * lines: `line-height` carries the design's line-to-line distance (11 of cap + 10 of
+ * leading = 21), and the padding/negative-margin pair takes the outer half-leading back
+ * out of the layout. The frame's two-line name box is 32 — 11 + 10 + 11 — and so is this.
+ *
+ * The padding is not decoration: `-webkit-line-clamp` needs `overflow: hidden`, which
+ * clips in both directions, and an 11px box beheads every descender — the `p` in
+ * "Zip-Up", the `y` in "Everyday". The padding gives them room inside the clip box and
+ * the margin removes it from the layout.
+ *
+ * `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_1io44_5 {
   font-size: var(--type-paragraph-size);
-  line-height: 1.3;
+  line-height: 21px;
+  padding: 5px 0;
+  /*
+   * Ten, not five: the margin has two jobs. Five cancels the padding above, which exists
+   * only to keep the clip box off the descenders; the other five is the half-leading the
+   * trim removes — (21 - 11) / 2 — above the first line and below the last. A single
+   * two-line name is then 32 in the layout and 52 on screen, which is where the padding
+   * went.
+   */
+  margin: -10px 0;
   font-weight: var(--font-weight-regular);
   color: var(--color-text-default);
   display: -webkit-box;
@@ -1917,30 +2733,46 @@
   /* Reserve both lines rather than only capping at two. The clamp stops a long title
      overflowing but lets a short one collapse to one line, and in a two-column grid that
      pulls its price up level with the neighbour's title — a ragged price baseline across
-     the row, which reads as broken alignment rather than as varying title lengths. */
-  min-height: calc(2 * 1.3em);
+     the row, which reads as broken alignment rather than as varying title lengths.
+     Two line boxes, which the margins above bring back to the frame's 32. */
+  min-height: calc(2 * 21px + 10px);
+}
+
+/*
+ * The price row, trimmed to its own cap: 11 on 16px, which is what makes the card's text
+ * block 32 + 16 + 11 = 59, as the frame draws it.
+ *
+ * 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_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_1u9l8_119 {
+._swatches_1io44_179 {
   display: flex;
   gap: var(--space-4);
   align-items: center;
 }
 
-._swatch_1u9l8_119 {
+/*
+ * 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_1io44_179 {
   display: inline-flex;
   padding: 2px;
-  border: 0.5px solid var(--color-border-subtle);
+  box-shadow: inset 0 0 0 0.5px var(--color-border-subtle);
   border-radius: var(--radius-2);
 }
 
-._swatchActive_1u9l8_132 {
-  border-color: var(--color-surface-max);
+._swatchActive_1io44_196 {
+  box-shadow: inset 0 0 0 0.5px var(--color-surface-max);
 }
 
-._swatchDot_1u9l8_136 {
+._swatchDot_1io44_200 {
   display: block;
   width: 14px;
   height: 14px;
@@ -1951,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_1u9l8_147 {
+._large_1io44_211 {
   padding: 0 var(--space-16);
 }
 
-._large_1u9l8_147 ._media_1u9l8_11 {
+._large_1io44_211 ._media_1io44_15 {
   aspect-ratio: 343 / 457;
 }
 
@@ -1964,11 +2796,181 @@
  * keep their prices on one baseline, and the spotlight card is alone on its row — there is
  * nothing to line up with, so all it reserves is empty space under a one-line title.
  * Figma's note on this variant is "height hugs".
+ *
+ * 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_1u9l8_147 ._title_1u9l8_1 {
+._large_1io44_211 ._title_1io44_5 {
   font-size: 18px;
+  line-height: 23px;
   min-height: 0;
 }
+
+/*
+ * The colours row is the spotlight card's alone.
+ *
+ * `mobile/product-card` carries one in every variant and **hides it on the small card**:
+ * the rail's instances and the grid's all draw the frame `hidden`, and only the 375-wide
+ * 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_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_1n5an_5 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  padding: var(--space-24) 0;
+}
+
+/*
+ * `heading/md` at 1.38, which is the rail's own heading rule — the two blocks instance the
+ * 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_1n5an_17 {
+  margin: 0;
+  padding: 0 var(--space-16);
+  font-size: var(--type-heading-md-size);
+  line-height: 1.38;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._link_1n5an_26 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  text-decoration: none;
+  color: inherit;
+}
+
+/*
+ * 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_1n5an_38 {
+  display: flex;
+  gap: var(--space-12);
+  list-style: none;
+  margin: 0;
+  padding: 0 var(--space-16);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  /* Keeps the 16px inset under mandatory snap: without it the first frame snaps to x=0
+     and the padding is scrolled away, so the row stops lining up with its heading. */
+  scroll-padding-inline: var(--space-16);
+  -webkit-overflow-scrolling: touch;
+  /* The row is its own indicator — a native scrollbar under it is not in the frame. */
+  scrollbar-width: none;
+}
+
+._track_1n5an_38::-webkit-scrollbar {
+  display: none;
+}
+
+._frame_1n5an_58 {
+  position: relative;
+  flex: 0 0 auto;
+  width: 165px;
+  height: 220px;
+  border-radius: var(--radius-6);
+  overflow: hidden;
+  background: var(--color-surface-soft);
+  scroll-snap-align: start;
+}
+
+._image_1n5an_69 {
+  object-fit: cover;
+}
+
+._placeholder_1n5an_73 {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * `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_1n5an_93 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  font-size: var(--type-trimmed-sm-size);
+  font-weight: var(--font-weight-bold);
+}
+
+/*
+ * 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_1n5an_109 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+  padding: 0 var(--space-16);
+}
+
+/*
+ * Trimmed to the cap, as every text layer in this block is: 23 carries the design's
+ * leading over an 18px face, the padding keeps the ellipsis off the descenders, and the
+ * margin takes back both that padding and the half-leading the trim removes. The frame's
+ * name box is 13.
+ */
+._name_1n5an_122 {
+  font-size: 18px;
+  line-height: 23px;
+  padding: 5px 0;
+  margin: -10px 0;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 11 on 16px, the same cap the product card's price row takes. */
+._price_1n5an_135 {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4);
+  font-size: var(--type-trimmed-md-size);
+  line-height: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+._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_1n5an_150 {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
+}
 ._bar_fn0g9_1 {
   display: flex;
   align-items: center;
@@ -2030,33 +3032,38 @@
   gap: var(--space-16);
 }
 /* The block owns its vertical rhythm (Figma padding 24/16) — the page stacks blocks flush. */
-._rail_5z5e9_2 {
+/*
+ * 24 above and 16 below, where the frame says 24 and 24 — because the track below carries
+ * 8 of its own so a focused card's ring is not clipped by its scroller. 24 + 28 + 12 +
+ * 291 + 8 + 16 is the frame's 379; leaving both at 24 made the block 387.
+ */
+._rail_11l7h_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
-  padding: var(--space-24) 0;
+  padding: var(--space-24) 0 var(--space-16);
 }
 
-._header_5z5e9_9 {
+._header_11l7h_14 {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   padding: 0 var(--space-16);
 }
 
-._title_5z5e9_16 {
+._title_11l7h_21 {
   font-size: var(--type-heading-md-size);
   /* Figma rail header: 20px, line-height 1.38. */
   line-height: 1.38;
 }
 
-._seeAll_5z5e9_22 {
+._seeAll_11l7h_27 {
   font-size: var(--type-trimmed-sm-size);
   color: var(--color-text-subtle);
   text-decoration: none;
 }
 
-._track_5z5e9_28 {
+._track_11l7h_33 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2073,7 +3080,7 @@
 
 /* Fixed 165px, as the card is drawn. At 375 two fit the 343 content width and the third
    peeks, which is the signal the design asks for. */
-._item_5z5e9_45 {
+._item_11l7h_50 {
   flex: 0 0 auto;
   width: 165px;
   scroll-snap-align: start;
@@ -2085,11 +3092,11 @@
  * parent supplies the 16px inset, so the header/track add none of their own, and tiles
  * size to show exactly two across the content width (per the PDP design: rail x16 w343).
  */
-._inset_5z5e9_57 ._header_5z5e9_9 {
+._inset_11l7h_62 ._header_11l7h_14 {
   padding: 0;
 }
 
-._inset_5z5e9_57 ._track_5z5e9_28 {
+._inset_11l7h_62 ._track_11l7h_33 {
   padding-left: 0;
   padding-right: 0;
   scroll-padding-inline: 0;
@@ -2100,11 +3107,11 @@
  * can sit between flush blocks on the home screen; the PDP content column already spaces
  * its blocks 32px apart, so keeping it here made the gap above the rail 56px.
  */
-._inset_5z5e9_57 {
+._inset_11l7h_62 {
   padding: 0;
 }
 
-._inset_5z5e9_57 ._item_5z5e9_45 {
+._inset_11l7h_62 ._item_11l7h_50 {
   /* Fixed 165px cards (Figma product-card size=default). At 375 two fit the 343 content
      width exactly; more scroll horizontally. */
   width: 165px;
@@ -2261,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;
@@ -2281,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);
 }
@@ -2305,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;
@@ -2318,7 +3371,7 @@
   font-weight: var(--font-weight-bold);
 }
 
-._info_1xbbn_58 {
+._info_1s2s6_104 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
@@ -2326,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;
@@ -2374,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;
@@ -2556,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);
@@ -2615,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;
@@ -2633,131 +3718,387 @@
   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);
 }
 /*
- * Size-guide bottom sheet. Uses the same scrim + rounded-top surface as the other PDP
- * overlays so it reads as one system. Fixed light surface: the PDP is light in every
- * theme, and an inverted sheet over a light page would be jarring.
+ * Figma `size-guide` (4882:58365): a bottom sheet over the PDP — a 48 `.sheet-header`,
+ * then `mobile/size-guide`, which is 806 tall at 375 for the hoodie chart.
+ *
+ * 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_8wz6r_6 {
+._scrim_ddqa4_8 {
   position: fixed;
   inset: 0;
   z-index: 60;
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  background: rgba(8, 14, 18, 0.5);
-  animation: _fade_8wz6r_1 160ms ease-out;
+  /* `semantic/base/surface/backdrop` — #0c161c at 32%, which is lighter than the 50% the
+     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_ddqa4_1 160ms ease-out;
 }
 
-._sheet_8wz6r_17 {
+._sheet_ddqa4_2 {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 480px;
-  max-height: 80vh;
-  overflow-y: auto;
-  padding: var(--space-8) var(--space-16) var(--space-24);
-  border-radius: var(--radius-18) var(--radius-18) 0 0;
+  max-height: 90dvh;
+  /* Clips the body's scroll to the rounded corners, so a chart scrolled to the top does
+     not square them off. */
+  overflow: hidden;
+  /* 16, and a literal because the design draws one: the library's radii here are `full`
+     and `xs`, and this corner is neither. */
+  border-radius: 16px 16px 0 0;
   background: #ffffff;
-  color: #16181a;
-  animation: _rise_8wz6r_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation: _rise_ddqa4_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-._grabber_8wz6r_29 {
-  width: 40px;
-  height: 4px;
-  margin: 0 auto var(--space-12);
-  border-radius: 2px;
-  background: #d8dcde;
+/* ── Body ──────────────────────────────────────────────────────────────────── */
+
+._body_ddqa4_40 {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-20);
+  padding: 0 var(--space-16) calc(var(--space-24) + var(--safe-area-bottom));
+  background: var(--color-surface-default);
+}
+
+/*
+ * A long guide is taller than 90dvh and the body scrolls — but a column flex container
+ * shrinks its items to fit before it will overflow, so every block lost a share of the
+ * excess and the chart came out 14 short of the 256 the design draws. The body scrolls;
+ * its blocks keep their size.
+ */
+._body_ddqa4_40 > * {
+  flex-shrink: 0;
 }
 
-._header_8wz6r_37 {
+._titles_ddqa4_60 {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-12);
-  margin-bottom: var(--space-16);
+  flex-direction: column;
+  gap: var(--space-2);
 }
 
-._title_8wz6r_45 {
+/* `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_ddqa4_60 {
   margin: 0;
-  font-size: var(--type-heading-sm-size, 20px);
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
   font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+._subtitle_ddqa4_76 {
+  margin: 0;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  color: var(--color-text-subtle);
+}
+
+/* ── cm / inches ───────────────────────────────────────────────────────────── */
+
+/*
+ * `Segmented Control` (4882:56556): 190 x 40, a 9 radius the scale does not carry, and 4
+ * of horizontal padding around two halves.
+ */
+._units_ddqa4_89 {
+  display: flex;
+  align-items: center;
+  width: 190px;
+  height: 40px;
+  padding: var(--space-2) var(--space-4);
+  border-radius: 9px;
+  background: var(--color-surface-soft);
 }
 
-._close_8wz6r_51 {
+/*
+ * 10 on 14px text: `text-box-trim: trim-both`, cap-alphabetic. The pill's height is fixed
+ * 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_ddqa4_89 {
+  flex: 1 1 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  border: none;
-  border-radius: 50%;
-  background: #f2f4f5;
-  color: #16181a;
+  height: 36px;
+  padding: 0 var(--space-8);
+  border: 0;
+  border-radius: var(--radius-6);
+  background: none;
+  color: var(--color-text-default);
+  font-family: inherit;
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
   cursor: pointer;
 }
-._close_8wz6r_51:focus-visible {
-  outline: 2px solid #16181a;
-  outline-offset: 2px;
+
+/* 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_ddqa4_123 {
+  height: 32px;
+  background: var(--color-surface-neutral);
+  font-weight: var(--font-weight-bold);
+}
+
+/* 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_ddqa4_131 {
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  font-weight: var(--font-weight-regular);
 }
 
-/* The chart can be wider than the sheet, so it scrolls inside its own container
-   rather than making the sheet scroll sideways. */
-._tableWrap_8wz6r_71 {
+/* ── The chart ─────────────────────────────────────────────────────────────── */
+
+/* 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_ddqa4_140 {
   overflow-x: auto;
-  margin-bottom: var(--space-16);
 }
 
-._table_8wz6r_71 {
+._table_ddqa4_140 {
   width: 100%;
-  border-collapse: collapse;
-  font-size: var(--type-trimmed-sm-size, 14px);
+  /* `separate` with no spacing, not `collapse`: collapsed borders cannot carry the
+     header's rounded top corners. */
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
 }
 
-._table_8wz6r_71 th,
-._table_8wz6r_71 td {
-  padding: var(--space-8) var(--space-12);
+/*
+ * The frame's five columns are equal at 63.8 across 343, and the table's 12 of inset lives
+ * INSIDE the first and last of them (75.8 = 63.8 + 12). Declared on the columns rather
+ * than as padding on every cell so that the centred headings land where the design puts
+ * them: as cell padding, the last column's centre drifts 4 left.
+ *
+ * Two mutually exclusive classes rather than a `col` rule plus an override for the edges.
+ * `.table col` is specificity (0,1,1) and a module class is (0,1,0), so the descendant
+ * selector won wherever the two met and every column came out 18.6006% — which sums to
+ * 93%, and Chrome scaled all five back up to an equal fifth. Same trap `ShopSurface`
+ * documents on its base headings.
+ */
+._col_ddqa4_165 {
+  width: 18.6006%;
+}
+
+._colEdge_ddqa4_169 {
+  width: 22.0991%;
+}
+
+/*
+ * 12 bold with the library's 1% tracking, cap-trimmed to 9 in a 36 row. `#f5f5f5` and
+ * `#6b6b6b` are literals because the designer drew them as literals — there is no library
+ * variable behind either, and `border/soft` and `text/subtle` are visibly different
+ * greys.
+ */
+._table_ddqa4_140 thead th {
+  height: 36px;
+  padding: 0;
+  background: #f5f5f5;
+  color: #6b6b6b;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 9px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.12px;
+  text-align: center;
+}
+
+._table_ddqa4_140 thead th:first-child {
+  padding-left: var(--space-12);
+  border-top-left-radius: var(--radius-8);
   text-align: left;
-  border-bottom: 1px solid #e2e6e8;
-  white-space: nowrap;
 }
 
-._table_8wz6r_71 thead th {
+._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_ddqa4_140 tbody th,
+._table_ddqa4_140 tbody td {
+  height: 44px;
+  padding: 0;
+  border-bottom: 1px solid var(--color-surface-soft);
+  color: #0d0d0d;
+  font-size: 13px;
+  line-height: 17px;
+  font-weight: var(--font-weight-regular);
+  text-align: center;
+}
+
+._table_ddqa4_140 tbody th {
+  padding-left: var(--space-12);
+  font-weight: var(--font-weight-bold);
+  text-align: left;
+}
+
+._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_ddqa4_140 tbody tr:last-child th,
+._table_ddqa4_140 tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+/* ── The note under the chart ──────────────────────────────────────────────── */
+
+/* `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_ddqa4_237 {
+  margin: 0;
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-8);
+  background: var(--color-surface-soft);
+  color: var(--color-text-subtle);
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+}
+
+/* ── How to measure ────────────────────────────────────────────────────────── */
+
+._how_ddqa4_249 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+._howTitle_ddqa4_255 {
+  margin: 0;
+  font-size: var(--type-heading-sm-size);
+  line-height: var(--type-heading-sm-line);
+  font-weight: var(--font-weight-bold);
+  color: #0d0d0d;
+}
+
+._howList_ddqa4_263 {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._howItem_ddqa4_270 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+/*
+ * The frame's `Line 9`, between rows and never under the last one.
+ *
+ * A Figma line has no height, so 8 above it and 8 below it means 16 between the rows it
+ * 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_ddqa4_270 + ._howItem_ddqa4_270 {
+  margin-top: -1px;
+  padding-top: var(--space-8);
+  border-top: 1px solid var(--color-surface-soft);
+}
+
+/*
+ * Cap-trimmed to 9 on a 12px face. Unlike the table header this box is content-sized, so
+ * the trim has to come off the text itself: the padding keeps the descenders of "Body
+ * 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_ddqa4_295 {
+  padding: 5px 0;
+  margin: -5px 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 9px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.12px;
+  color: #0d0d0d;
+}
+
+._howText_ddqa4_305 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+  color: #6b6b6b;
+}
+
+/* ── Fabric ────────────────────────────────────────────────────────────────── */
+
+._fabric_ddqa4_314 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* `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_ddqa4_322 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
   font-weight: var(--font-weight-bold);
-  background: #f7f8f9;
+  color: #0d0d0d;
+}
+
+._fabricText_ddqa4_330 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+  color: #6b6b6b;
 }
 
-._notes_8wz6r_95 {
+/* ── Fit notes ─────────────────────────────────────────────────────────────── */
+
+/* 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_ddqa4_341 {
   margin: 0;
   padding-left: var(--space-16);
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
-  font-size: var(--type-trimmed-sm-size, 14px);
-  color: #4a5257;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  color: var(--color-text-subtle);
 }
 
-@keyframes _fade_8wz6r_1 {
-  from { opacity: 0; }
-  to { opacity: 1; }
+@keyframes _fade_ddqa4_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-@keyframes _rise_8wz6r_1 {
-  from { transform: translateY(12%); }
-  to { transform: translateY(0); }
+
+@keyframes _rise_ddqa4_1 {
+  from {
+    transform: translateY(12%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._scrim_8wz6r_6,
-  ._sheet_8wz6r_17 {
+  ._scrim_ddqa4_8,
+  ._sheet_ddqa4_2 {
     animation: none;
   }
 }
@@ -2848,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);
@@ -2882,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;
@@ -2895,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);
@@ -2907,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);
@@ -2919,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;
@@ -2938,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;
@@ -3407,14 +4752,14 @@
 ._dotActive_9mquf_63 {
   background: #f9fafa;
 }
-._section_n8xka_1 {
+._section_kdf3c_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
 
-._track_n8xka_8 {
+._track_kdf3c_8 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -3429,7 +4774,7 @@
   scrollbar-width: none;
 }
 
-._track_n8xka_8::-webkit-scrollbar {
+._track_kdf3c_8::-webkit-scrollbar {
   display: none;
 }
 
@@ -3444,7 +4789,7 @@
  * is raised with DAZN's designers, and the card flips the moment they retune the token.
  * Everything else on this block follows Figma exactly.
  */
-._card_n8xka_38 {
+._card_kdf3c_38 {
   flex: 0 0 323px;
   max-width: calc(100% - var(--space-20));
   scroll-snap-align: start;
@@ -3456,7 +4801,7 @@
   background: #f9fafa;
 }
 
-._quote_n8xka_50 {
+._quote_kdf3c_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3464,38 +4809,46 @@
   color: #0c161c;
 }
 
-._author_n8xka_58 {
+._author_kdf3c_58 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   color: #3d4549;
 }
 
-._dots_n8xka_64 {
+/*
+ * `.slide-dots` is a 32-tall band in the frame, sitting straight under the quotes with no
+ * gap of its own — the dots are centred inside it. Ours was an 8px row 12 below the track,
+ * which put it 12 too close to the quote and 12 too far from the bottom of the block.
+ */
+._dots_kdf3c_69 {
   display: flex;
+  align-items: center;
   justify-content: center;
+  height: 32px;
+  margin-top: calc(-1 * var(--space-12));
   gap: var(--space-8);
 }
 
-._dot_n8xka_64 {
+._dot_kdf3c_69 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
 
-._dotActive_n8xka_77 {
+._dotActive_kdf3c_85 {
   background: #f9fafa;
 }
 
 /* Quiet, but present. Not in the Figma frame — the component's own note makes it
    mandatory, and staff quotes shown as reviews without one is the failure it guards. */
-._disclaimer_n8xka_83 {
+._disclaimer_kdf3c_91 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-trimmed-xs-size);
   color: var(--color-text-subtle);
 }
-._section_145t0_1 {
+._section_1tevp_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -3503,7 +4856,7 @@
 }
 
 /* Each benefit is a filled tile, not a bare row (Figma `mobile/why-us`). */
-._row_145t0_9 {
+._row_1tevp_9 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
@@ -3512,48 +4865,64 @@
   background: var(--color-surface-soft);
 }
 
-/* Figma `size/heading/sm`. Written out rather than taken from
-   `--type-heading-sm-size`, which is 20px here and 18px in the library — the token is
-   wrong and correcting it would move the PDP's size guide, which has its own design. */
-._title_145t0_21 {
+/* Figma `size/heading/sm`. This used to be written out because the token read 20px, the
+   library's heading/md; it is 18 now, and the size guide — the only other consumer, and
+   the reason the token was left wrong — asks for the same 18. */
+._title_1tevp_21 {
   margin: 0;
-  font-size: 18px;
-  line-height: 1.38;
+  font-size: var(--type-heading-sm-size);
+  line-height: var(--type-heading-sm-line);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
-._body_145t0_29 {
+/*
+ * 10 on 14px text: `text-box-trim: trim-both`, cap-alphabetic, as every small text layer
+ * in this file is. The frame's tile is 83 — 20 of padding, a 25px title, 8, this line, 20
+ * — and at a natural line box it was 21 rather than 10, which made every tile 11 too tall
+ * and the block 226 → 249.
+ *
+ * Nothing clips this one, so the descenders hang out of the box and are drawn, exactly as
+ * they are in the frame.
+ */
+._body_1tevp_38 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
   color: var(--color-text-subtle);
 }
-._section_opjfc_1 {
+._section_snuuj_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
 
-._title_opjfc_8 {
+/* 1.32, the design system's own figure for `heading/md`, which makes this line the
+   frame's 26 rather than the 25 the token's 1.25 gives. */
+._title_snuuj_10 {
   font-size: var(--type-heading-md-size);
-  line-height: var(--type-heading-md-line);
+  line-height: 1.32;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
-._list_opjfc_15 {
+._list_snuuj_17 {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 /*
- * 16px above and below a 14px label clears the 44px tap target on its own, so there is no
- * explicit floor here. That holds because of the type size — a smaller label would need
- * the min-height back.
+ * 48 tall, which the 16px chevron sets rather than the label: 16 of padding, the mark, 16.
+ * That only holds with the label trimmed to its cap (10 on 14px, as the frame draws it) —
+ * at a natural line box the text was the taller of the two and made the row 54.
+ *
+ * 16 above and below still clears the 44px tap target on its own, so there is no explicit
+ * floor here. That holds because of the type size and the mark beside it; a smaller label
+ * with no chevron would need the min-height back.
  */
-._row_opjfc_26 {
+._row_snuuj_32 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3561,15 +4930,16 @@
   text-decoration: none;
   color: var(--color-text-default);
   font-size: var(--type-trimmed-sm-size);
+  line-height: 10px;
   font-weight: var(--font-weight-bold);
 }
 
 /* Between rows only — a rule under the last one reads as a cut-off list. */
-._list_opjfc_15 li + li ._row_opjfc_26 {
+._list_snuuj_17 li + li ._row_snuuj_32 {
   border-top: 1px solid var(--color-border-transparent-soft);
 }
 
-._row_opjfc_26 svg {
+._row_snuuj_32 svg {
   flex-shrink: 0;
   color: var(--color-text-default);
 }