@nok-integration/storefront-react 0.17.1 → 0.17.2

package/dist/styles.css

@@ -32,8 +32,13 @@
   --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;
   --type-trimmed-md-size: 16px;
@@ -56,6 +61,10 @@
      --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;
   --color-border-default: #dddedf;
   --color-border-subtle: #ced0d2;
   /* semantic/base/border/transparent/soft. Alpha rather than a flat grey on purpose: it
@@ -491,40 +500,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;
@@ -1057,158 +1081,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,388 +1124,372 @@
   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);
+}
+
+._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; inside this card they need
-   the card's own gutter. */
-._summaryCard_1eqkm_275 > :last-child {
+/* 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 `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.
+ * 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_8yxu9_6 {
+._page_1vg5x_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 heading pair, then the timeline, 24px apart. */
-._confirmed_8yxu9_16 {
+/* `mobile/order/delivery-widget`: the title row, then the steps, 32 apart. */
+._widget_1vg5x_18 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-24);
+  gap: var(--space-32);
 }
 
-._title_8yxu9_22 {
+/* The number on the left, the carrier link hard right — and nothing between them, so a
+   long reference runs into the space the link is not using rather than under it. */
+._titleRow_1vg5x_26 {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--space-12);
 }
 
 /*
- * 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.
+ * `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 — unlike the
- * subtitle below, which the design truncates.
+ * Nothing clips it, so the cap-height box needs no descender protection.
  */
-._headline_8yxu9_47 {
+._headline_1vg5x_42 {
   margin: 0;
+  min-width: 0;
   font-size: var(--type-heading-md-size);
   line-height: 14px;
   font-weight: var(--font-weight-bold);
-  color: var(--color-state-text-success);
-}
-
-/*
- * 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_8yxu9_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;
 }
 
-/* ── Lines ─────────────────────────────────────────────────────────────────── */
-
 /*
- * `mobile/checkout/cart-row`, and deliberately NOT inside a card.
+ * 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.
  *
- * 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.
+ * 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.
  */
-._lines_8yxu9_88 {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-16);
-}
-
-._line_8yxu9_88 {
-  display: flex;
+._track_1vg5x_61 {
+  display: inline-flex;
   align-items: center;
-  gap: var(--space-12);
-}
-
-._thumb_8yxu9_103 {
-  position: relative;
+  gap: var(--space-6);
   flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-8);
-  overflow: hidden;
-  background: var(--color-surface-soft);
+  font-size: var(--type-trimmed-md-size);
+  line-height: 14px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  text-decoration: none;
 }
 
-._image_8yxu9_113 {
-  object-fit: cover;
+._track_1vg5x_61:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
 }
 
-._placeholder_8yxu9_117 {
-  width: 100%;
-  height: 100%;
+/*
+ * 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_1vg5x_86 {
+  height: 1px;
+  margin: 0 0 -1px;
+  border: 0;
+  background: var(--color-border-default);
 }
 
-._lineBody_8yxu9_122 {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-16);
-  flex: 1 1 0;
-  min-width: 0;
-}
+/* ── Need help? ────────────────────────────────────────────────────────────── */
 
-._lineText_8yxu9_131 {
+/* `mobile/explore`: the heading, then the rows, 6 apart. */
+._help_1vg5x_96 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-12);
-  flex: 1 1 0;
-  min-width: 0;
+  gap: var(--space-6);
 }
 
-/* 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;
-  font-size: var(--type-trimmed-sm-size);
-  line-height: 11px;
+._helpTitle_1vg5x_102 {
+  margin: 0;
+  font-size: var(--type-heading-md-size);
+  line-height: 1.32;
   font-weight: var(--font-weight-bold);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+._helpRows_1vg5x_109 {
+  display: flex;
+  flex-direction: column;
 }
 
 /*
- * 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.
+ * 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.
  */
-._lineMeta_8yxu9_160 {
+._helpRow_1vg5x_109 {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--space-12);
-  min-width: 0;
+  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: 11px;
-  color: var(--color-text-subtle);
+  line-height: 10px;
+  font-weight: var(--font-weight-bold);
+  text-align: left;
+  cursor: pointer;
 }
 
 /*
- * 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.
+ * `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.
  */
-._linePrice_8yxu9_175 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--space-6);
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-/* 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 {
-  font-size: var(--type-trimmed-md-size);
-  line-height: 11px;
-  font-weight: var(--font-weight-bold);
+._helpRow_1vg5x_109 + ._helpRow_1vg5x_109 {
+  border-top: 1px solid var(--color-border-subtle);
 }
 
-._was_8yxu9_193 {
-  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;
+._helpRow_1vg5x_109:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
-
-/* ── 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 +1502,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 +1540,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 +1550,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 +1589,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 +1609,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 +1626,7 @@
   width: 100%;
 }
 
-._heading_y686q_77 {
+._heading_6xodo_87 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -1735,7 +1635,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 +1646,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 +1667,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 +1682,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 +1706,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_1eiri_7 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
 
-._media_1u9l8_11 {
+._media_1eiri_15 {
   position: relative;
   width: 100%;
   /* Product-card image is 165:220 (3:4), radius-6 (Figma), sharp not pill-round. */
@@ -1825,11 +1737,11 @@
   background: var(--color-surface-soft);
 }
 
-._image_1u9l8_21 {
+._image_1eiri_25 {
   object-fit: cover;
 }
 
-._placeholder_1u9l8_25 {
+._placeholder_1eiri_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
@@ -1837,7 +1749,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_1eiri_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1860,14 +1772,14 @@
   white-space: nowrap;
 }
 
-._saleBadge_1u9l8_56 {
+._saleBadge_1eiri_60 {
   position: absolute;
   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_1eiri_67 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1881,32 +1793,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_1eiri_94 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
+  gap: var(--space-16);
 }
 
-._titlePrice_1u9l8_1 {
+._titlePrice_1eiri_81 {
   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_1eiri_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 +1854,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_1eiri_81 > :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_1eiri_160 {
   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_1eiri_160 {
   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_1eiri_177 {
+  box-shadow: inset 0 0 0 0.5px var(--color-surface-max);
 }
 
-._swatchDot_1u9l8_136 {
+._swatchDot_1eiri_181 {
   display: block;
   width: 14px;
   height: 14px;
@@ -1951,23 +1904,185 @@
  * 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_1eiri_192 {
   padding: 0 var(--space-16);
 }
 
-._large_1u9l8_147 ._media_1u9l8_11 {
-  aspect-ratio: 343 / 457;
+._large_1eiri_192 ._media_1eiri_15 {
+  aspect-ratio: 343 / 457;
+}
+
+/*
+ * No two-line reservation here. It exists so that neighbouring cards in a grid or rail
+ * 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_1eiri_192 ._title_1eiri_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_1eiri_7:not(._large_1eiri_192) ._swatches_1eiri_160 {
+  display: none;
+}
+/*
+ * Figma `mobile/limited edition` (5304:77067), 360 tall at 375:
+ * 24 above the heading, 28 of heading, 12, a 220 row, 12, a 40 caption, 24 below.
+ */
+._section_1fdjh_5 {
+  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_1fdjh_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_1fdjh_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_1fdjh_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_1fdjh_38::-webkit-scrollbar {
+  display: none;
+}
+
+._frame_1fdjh_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_1fdjh_69 {
+  object-fit: cover;
+}
+
+._placeholder_1fdjh_73 {
+  width: 100%;
+  height: 100%;
+}
+
+._saleBadge_1fdjh_78 {
+  position: absolute;
+  bottom: var(--space-8);
+  left: var(--space-8);
+}
+
+/* The whole picture dims, as it does on a product card — not a corner flag. */
+._oos_1fdjh_85 {
+  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_1fdjh_101 {
+  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_1fdjh_114 {
+  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_1fdjh_127 {
+  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_1fdjh_136 {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
 }
 
-/*
- * No two-line reservation here. It exists so that neighbouring cards in a grid or rail
- * 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".
- */
-._large_1u9l8_147 ._title_1u9l8_1 {
-  font-size: 18px;
-  min-height: 0;
+/* Struck, and at the same weight as the live price — `mobile/product-card` again. */
+._was_1fdjh_142 {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
 }
 ._bar_fn0g9_1 {
   display: flex;
@@ -2030,33 +2145,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 +2193,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 +2205,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 +2220,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;
@@ -2643,121 +2763,433 @@
   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_v44fk_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_v44fk_1 160ms ease-out;
 }
 
-._sheet_8wz6r_17 {
+._sheet_v44fk_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_v44fk_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-._grabber_8wz6r_29 {
-  width: 40px;
+/* ── .sheet-header ─────────────────────────────────────────────────────────── */
+
+/* Three slots, so the handle is centred on the sheet rather than on what is left of it
+   once the close control has taken its 48. */
+._header_v44fk_42 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+._slot_v44fk_48 {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+}
+
+/* `self-stretch` with 12 of padding: the handle sits 12 from the top of the 48, not
+   centred in it. */
+._handleSlot_v44fk_56 {
+  align-self: stretch;
+  padding: var(--space-12);
+}
+
+._handle_v44fk_56 {
+  width: 44px;
   height: 4px;
-  margin: 0 auto var(--space-12);
-  border-radius: 2px;
-  background: #d8dcde;
+  border-radius: var(--radius-full);
+  /* `semantic/base/surface/bold`. */
+  background: #6d7377;
 }
 
-._header_8wz6r_37 {
-  display: flex;
+._closeSlot_v44fk_69 {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space-12);
-  margin-bottom: var(--space-16);
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  background: none;
+  color: var(--color-text-default);
+  cursor: pointer;
+}
+
+/* `across-platform/icon-button`, fill: a 24 disc around the 16px cross box. */
+._close_v44fk_69 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-neutral);
+}
+
+/* ── Body ──────────────────────────────────────────────────────────────────── */
+
+._body_v44fk_96 {
+  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);
 }
 
-._title_8wz6r_45 {
+/*
+ * 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_v44fk_96 > * {
+  flex-shrink: 0;
+}
+
+._titles_v44fk_116 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* `heading/md` at 1.32 — the library's 1.32, not our `--type-heading-md-line`, which is
+   1.25 and is the base h2 default the whole package inherits. */
+._title_v44fk_116 {
   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_v44fk_132 {
+  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_v44fk_145 {
+  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_v44fk_145 {
+  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_v44fk_179 {
+  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_v44fk_187 {
+  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_v44fk_196 {
   overflow-x: auto;
-  margin-bottom: var(--space-16);
 }
 
-._table_8wz6r_71 {
+._table_v44fk_196 {
   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_v44fk_221 {
+  width: 18.6006%;
+}
+
+._colEdge_v44fk_225 {
+  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_v44fk_196 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_v44fk_196 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_v44fk_196 thead th:last-child {
+  padding-right: var(--space-12);
+  border-top-right-radius: var(--radius-8);
+}
+
+/* 13px, which is not on the type scale — the design uses a detached style here rather
+   than a token, and 12 or 14 both miss the row. */
+._table_v44fk_196 tbody th,
+._table_v44fk_196 tbody td {
+  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_v44fk_196 tbody th {
+  padding-left: var(--space-12);
+  font-weight: var(--font-weight-bold);
+  text-align: left;
+}
+
+._table_v44fk_196 tbody td:last-child {
+  padding-right: var(--space-12);
+}
+
+/* No rule under the last row: the table would otherwise be underlined, and the note that
+   follows is a separate block with its own ground. */
+._table_v44fk_196 tbody tr:last-child th,
+._table_v44fk_196 tbody tr:last-child td {
+  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_v44fk_293 {
+  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_v44fk_305 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+._howTitle_v44fk_311 {
+  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_v44fk_319 {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+._howItem_v44fk_326 {
+  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_v44fk_326 + ._howItem_v44fk_326 {
+  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_v44fk_351 {
+  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_v44fk_361 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+  color: #6b6b6b;
+}
+
+/* ── Fabric ────────────────────────────────────────────────────────────────── */
+
+._fabric_v44fk_370 {
+  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_v44fk_378 {
+  margin: 0;
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
   font-weight: var(--font-weight-bold);
-  background: #f7f8f9;
+  color: #0d0d0d;
+}
+
+._fabricText_v44fk_386 {
+  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_v44fk_397 {
   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_v44fk_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-@keyframes _rise_8wz6r_1 {
-  from { transform: translateY(12%); }
-  to { transform: translateY(0); }
+
+@keyframes _rise_v44fk_1 {
+  from {
+    transform: translateY(12%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._scrim_8wz6r_6,
-  ._sheet_8wz6r_17 {
+  ._scrim_v44fk_8,
+  ._sheet_v44fk_2 {
     animation: none;
   }
 }
@@ -3407,14 +3839,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 +3861,7 @@
   scrollbar-width: none;
 }
 
-._track_n8xka_8::-webkit-scrollbar {
+._track_kdf3c_8::-webkit-scrollbar {
   display: none;
 }
 
@@ -3444,7 +3876,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 +3888,7 @@
   background: #f9fafa;
 }
 
-._quote_n8xka_50 {
+._quote_kdf3c_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3464,38 +3896,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 +3943,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 +3952,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 +4017,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);
 }