@nok-integration/storefront-react 0.16.4 → 0.17.0

package/dist/styles.css

@@ -49,7 +49,7 @@
   --color-text-default: #0c161c;
   --color-text-subtle: #3d4549;
   --color-text-disabled: #9ea2a4;
-  --color-text-strong: #f9fafb;
+  --color-text-strong: #f9fafa;
   --color-surface-default: #f9fafa;
   --color-surface-soft: #f0f2f2;
   /* semantic/base/surface/full-color/subtle — one step darker than `soft`. Same value as
@@ -94,6 +94,15 @@
 
   /* ── Interaction ──────────────────────────────────────────────────────── */
   --tap-target-min: 44px;
+  /* DS `sizing/inline/inline-xxl` — the height every `mobile/button` is drawn at, in the
+     PDP CTA bar (5241:71430) and the cart alike. Deliberately NOT `--tap-target-min`:
+     that is the accessibility floor for any control and it is 44, so a button sized from
+     it came out 4px short of the design everywhere. Two numbers, two jobs. */
+  --control-height: 48px;
+  /* The nav row of Figma `mobile/header`, without the status bar the device draws above
+     it. Shared, because the menu sheet hangs from the bar's lower edge and has to move
+     with it rather than repeat the number. */
+  --header-height: 64px;
   --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-surface-max);
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
 }
@@ -138,7 +147,7 @@
 [data-shop-theme='light'] {
   --color-text-default: #0c161c;
   --color-text-subtle: #3d4549;
-  --color-text-strong: #f9fafb;
+  --color-text-strong: #f9fafa;
   --color-text-disabled: #9ea2a4;
   --color-surface-default: #f9fafa;
   --color-surface-soft: #f0f2f2;
@@ -204,12 +213,14 @@
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._button_vvcmd_1 {
+._button_tdhm8_1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-8);
-  min-height: var(--tap-target-min);
+  /* The DS draws `mobile/button` at 48. `--tap-target-min` is 44 and is the floor for
+     any control, not this control's size — sizing from it left every button 4px short. */
+  min-height: var(--control-height);
   min-width: var(--tap-target-min);
   padding: 0 var(--space-20);
   /* DS button corners are radius-8 (not a pill), per the Figma mobile/button. */
@@ -226,51 +237,54 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-._fullWidth_vvcmd_23 {
+._fullWidth_tdhm8_25 {
   width: 100%;
 }
 
-._primary_vvcmd_27 {
+._primary_tdhm8_29 {
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
 
-._secondary_vvcmd_32 {
+._secondary_tdhm8_34 {
   background: transparent;
   color: var(--color-text-default);
   border-color: var(--color-border-default);
 }
 
-._ghost_vvcmd_38 {
+._ghost_tdhm8_40 {
   background: transparent;
   color: var(--color-text-default);
   border-color: transparent;
 }
 
-._button_vvcmd_1:disabled {
+._button_tdhm8_1:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-._button_vvcmd_1:focus-visible {
+._button_tdhm8_1:focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
 }
 
-._spinner_vvcmd_54 {
-  width: 16px;
-  height: 16px;
+/*
+ * Figma `mobile/button` state=loading (438:7004): a 20px ring in a 24px box, beside a
+ * label at full strength. The DS had no spinner variant when this was first built — the
+ * 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 {
+  width: 20px;
+  height: 20px;
+  margin: 2px;
   border-radius: var(--radius-full);
   border: 2px solid currentColor;
   border-top-color: transparent;
-  animation: _spin_vvcmd_54 700ms linear infinite;
+  animation: _spin_tdhm8_62 700ms linear infinite;
 }
 
-._labelLoading_vvcmd_63 {
-  opacity: 0.85;
-}
-
-@keyframes _spin_vvcmd_54 {
+@keyframes _spin_tdhm8_62 {
   to {
     transform: rotate(360deg);
   }
@@ -531,11 +545,24 @@
   color: var(--color-text-subtle);
   max-width: 34ch;
 }
-._viewport_1lt9i_1 {
+/*
+ * The viewport sits at the TOP now, not the bottom.
+ *
+ * Figma `Add to cart flow` (5295:75091) puts the confirmation directly under the header,
+ * pointing at the cart icon, where the old frame (4432:35943) floated it above the sticky
+ * CTA bar. That is the whole idea of the redesign: the message and the thing it is about
+ * are next to each other, so the fan's eye ends up on the cart badge rather than back on
+ * the button they just pressed.
+ *
+ * `--toast-top` is measured (see `Toast.tsx`). The 12px default is the design's own gap
+ * below the header — and it is also exactly right in the embed, where DAZN's header is
+ * native chrome OUTSIDE the webview, so our viewport already begins under it.
+ */
+._viewport_5aafz_14 {
   position: fixed;
+  top: var(--toast-top, var(--space-12));
   left: 0;
   right: 0;
-  bottom: calc(var(--space-16) + var(--safe-area-bottom));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -545,40 +572,115 @@
   z-index: 1000;
 }
 
-._toast_1lt9i_15 {
+/*
+ * One wrapper per toast, so the caret can be placed against the card's own right edge
+ * rather than the viewport's. They differ as soon as `max-width` binds.
+ *
+ * `box-sizing` is stated here, and it is not belt and braces.
+ *
+ * The package's reset is scoped to `ShopSurface` (`.surface *`), and the toast viewport
+ * is mounted OUTSIDE any surface — it is a sibling of the provider's children, which is
+ * what lets it float over every screen. So the card gets `content-box` in any host
+ * without a reset of its own, and `width: 100%` plus 32px of padding made it 32px wider
+ * than the space it was given: it hung off the right edge, taking "View cart" with it.
+ * Our own app hides this, because its `globals.css` resets everything.
+ */
+._anchor_5aafz_41 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: 420px;
+}
+
+/*
+ * The pointer at the cart icon — Figma `.base/indicator` (24x10), the exported path
+ * rather than a CSS border triangle, which cannot round the apex the way the asset does.
+ *
+ * `--toast-caret-right` is the distance from the card's right edge to the caret's CENTRE,
+ * so the margin backs off by half the caret's width. The 60px default is the design's own
+ * geometry: 16px screen inset + 32px overflow button + 16px gap + 12px half-icon, less
+ * the 16px the card is itself inset by.
+ */
+._caret_5aafz_59 {
+  display: block;
+  width: 24px;
+  height: 10px;
+  margin-left: auto;
+  margin-right: max(0px, calc(var(--toast-caret-right, 60px) - 12px));
+}
+
+/*
+ * `block`, and this is the whole reason the caret looked like a nub.
+ *
+ * An `<svg>` is an inline replaced element, so it sits on the text baseline and the line
+ * box reserves room for descenders beneath it. In a 10px-tall parent that pushed the
+ * 24x10 triangle about 4px down: its lower half slid behind the card, which paints after
+ * it, and what was left on screen was the narrow 6px tip. Every measurement said 24x10 —
+ * the span, the svg box, the path's own bounding box — because nothing was resized. It
+ * was in the right place and drawn in the wrong one, which is why this had to be caught
+ * by comparing pixels against the frame rather than by reading numbers out of the DOM.
+ */
+._caret_5aafz_59 svg {
+  display: block;
+}
+
+._toast_5aafz_82 {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-12);
   width: 100%;
-  max-width: 420px;
   padding: var(--space-12) var(--space-16);
   border-radius: var(--radius-12);
+  /*
+   * Type stated here, not inherited.
+   *
+   * The viewport is mounted OUTSIDE `ShopSurface` — that is what lets it float over every
+   * screen — so it never picked up the surface's `font-family` or line-height and rendered
+   * in whatever the host's body happened to be. Invisible in our own app, where the body
+   * is already DAZN Oscine, and wrong in every other host. `leading-[normal]` is also what
+   * the frame sets, and it is what makes the card 64px rather than whatever a host's
+   * paragraph leading works out to.
+   */
+  font-family: var(--font-family-base);
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
+  line-height: normal;
   box-shadow: 0 6px 24px rgba(8, 14, 18, 0.24);
   /* The viewport is click-through so it never blocks the page beneath; the toast
      itself must not be, or an actionable toast's button would be unclickable. */
   pointer-events: auto;
 }
 
-._text_1lt9i_32 {
+._text_5aafz_111 {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  /* spacer/spacer-xxs between the two lines. Was 2px, which set them closer than the
+     frame and made the pair read as one wrapped sentence. */
+  gap: var(--space-6);
   min-width: 0;
 }
 
-._message_1lt9i_39 {
+._message_5aafz_120 {
   min-width: 0;
 }
 
-/* Meets the 44px tap target via padding while staying visually inline with the text. */
-._action_1lt9i_44 {
+/*
+ * The tap target is an overlay, not padding.
+ *
+ * It used to be `min-height: 44px` plus negative margins, and both changed the drawing:
+ * 44px against a 40px thumbnail made the card 68px tall where the frame says 64, and the
+ * -8px margin against a 12px padding put "View cart" 20px from the right edge where the
+ * frame says 16. A pseudo-element gives the same 44px of reachable area and occupies no
+ * layout — the pattern `ShopHeader`'s `.iconBtn::after` already uses.
+ */
+._action_5aafz_133 {
+  position: relative;
   flex-shrink: 0;
-  min-height: var(--tap-target-min);
-  padding: 0 var(--space-12);
-  margin: calc(var(--space-12) * -1) calc(var(--space-8) * -1);
+  padding: 0;
   border: none;
   background: none;
   color: inherit;
@@ -587,50 +689,65 @@
   cursor: pointer;
 }
 
-._action_1lt9i_44:focus-visible {
+._action_5aafz_133::after {
+  content: '';
+  position: absolute;
+  /* 18px of text, grown to the 44px minimum: 13px above and below. */
+  inset: -13px -12px;
+}
+
+._action_5aafz_133:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
 
-._neutral_1lt9i_63 {
+._neutral_5aafz_158 {
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
 
-._success_1lt9i_68 {
+._success_5aafz_163 {
   background: var(--color-state-text-success);
   color: var(--color-text-strong);
 }
 
-._critical_1lt9i_73 {
+._critical_5aafz_168 {
   background: var(--color-state-surface-critical-default);
   color: var(--color-text-strong);
 }
 
-/* Figma `toast-added-to-cart` (4432:35943). Fixed palette rather than theme tokens: the
-   card is dark in every state, and it renders over any screen, light or dark. The hexes
-   are the design's own — #c7cccf is not in our token set. */
-._rich_1lt9i_81 {
+/*
+ * Figma `toast-added-to-cart` (5295:75095). Fixed palette rather than theme tokens: the
+ * card is dark in every state and renders over any screen, light or dark. The frame
+ * builds it from `semantic/base/surface/full-color/max` — the "full-color" set is the one
+ * that does NOT invert with the mode, which is why the token names cannot be mapped onto
+ * our `--color-surface-max`, whose whole job is to invert.
+ *
+ * The three hexes moved with the redesign: #0c161c -> #080e12, #ffffff -> #f9fafa,
+ * #c7cccf -> #b3b9bb.
+ */
+._rich_5aafz_183 {
   justify-content: flex-start;
   gap: var(--space-12);
   padding: var(--space-12) var(--space-16) var(--space-12) var(--space-12);
-  background: #0c161c;
-  color: #ffffff;
+  background: #080e12;
+  color: #f9fafa;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
 }
 
-._rich_1lt9i_81 ._message_1lt9i_39 {
+._rich_5aafz_183 ._message_5aafz_120 {
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
   line-height: normal;
 }
 
-._rich_1lt9i_81 ._description_1lt9i_96 {
+._rich_5aafz_183 ._description_5aafz_198 {
   font-size: var(--type-trimmed-xs-size);
   font-weight: var(--font-weight-regular);
   line-height: normal;
-  color: #c7cccf;
+  letter-spacing: 0.12px;
+  color: #b3b9bb;
   /* Truncate rather than wrap — a long title would otherwise push "View cart" off. */
   overflow: hidden;
   text-overflow: ellipsis;
@@ -638,12 +755,12 @@
 }
 
 /* Trailing edge, without a justify-content that would also split thumb from text. */
-._rich_1lt9i_81 ._action_1lt9i_44 {
+._rich_5aafz_183 ._action_5aafz_133 {
   margin-left: auto;
   text-decoration: none;
 }
 
-._thumb_1lt9i_113 {
+._thumb_5aafz_216 {
   position: relative;
   flex-shrink: 0;
   width: 40px;
@@ -654,7 +771,7 @@
   background: rgba(255, 255, 255, 0.08);
 }
 
-._thumbImage_1lt9i_124 {
+._thumbImage_5aafz_227 {
   object-fit: cover;
 }
 /* Figma mobile/badge/sale (sm): success-soft bg, success text, icon + -NN%, radius-4. */
@@ -730,7 +847,7 @@
  * 32 and the circles land on a 64px rhythm.
  */
 
-._timeline_1j37h_7 {
+._timeline_1cum7_7 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -738,19 +855,19 @@
   flex-direction: column;
 }
 
-._row_1j37h_15 {
+._row_1cum7_15 {
   display: flex;
   flex-direction: column;
 }
 
-._line_1j37h_20 {
+._line_1cum7_20 {
   display: flex;
   align-items: center;
   gap: var(--space-8);
   height: 32px;
 }
 
-._marker_1j37h_27 {
+._marker_1cum7_27 {
   position: relative;
   flex-shrink: 0;
   width: 32px;
@@ -758,7 +875,7 @@
 }
 
 /* Drawn at 28 inside a 32 column: the disc reads 24px and the plate behind it 26px. */
-._tick_1j37h_35 {
+._tick_1cum7_35 {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -767,7 +884,7 @@
 }
 
 /* A step still to come: a 24px ring with an 18px well, not a filled dot. */
-._pending_1j37h_44 {
+._pending_1cum7_44 {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -778,7 +895,7 @@
   background: var(--color-surface-subtle);
 }
 
-._pending_1j37h_44::after {
+._pending_1cum7_44::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -791,7 +908,7 @@
 }
 
 /* Its own 32px block between two rows, centred on the marker column. */
-._connector_1j37h_68 {
+._connector_1cum7_68 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -799,7 +916,7 @@
   height: 32px;
 }
 
-._connector_1j37h_68::before {
+._connector_1cum7_68::before {
   content: '';
   width: 1px;
   height: 24px;
@@ -807,7 +924,7 @@
   background: var(--color-surface-subtle);
 }
 
-._text_1j37h_84 {
+._text_1cum7_84 {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -824,7 +941,7 @@
  * "Packing your order". 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 text uncut.
  */
-._label_1j37h_101 {
+._label_1cum7_101 {
   font-size: var(--type-trimmed-md-size);
   line-height: 11px;
   white-space: nowrap;
@@ -836,22 +953,32 @@
   margin-bottom: -6px;
 }
 
-._past_1j37h_113 {
+._past_1cum7_113 {
   font-weight: var(--font-weight-regular);
   color: var(--color-text-subtle);
 }
 
-._current_1j37h_118 {
+._current_1cum7_118 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
 
-._future_1j37h_123 {
+/*
+ * Subtle, not disabled, and the same tone as a step that has already happened.
+ *
+ * `mobile/order/delivery-widget` is ONE component with status variants, instanced by both
+ * the tracking screen and the confirmation, and on the confirmation frame (5295:74053)
+ * "On the way" and "Estimated delivery" are both `semantic/base/text/subtle`. What
+ * separates a step that has happened from one that has not is the marker beside it and
+ * whether it carries a date — not the weight of its label. Ours was `text/disabled`,
+ * which greys a step that is genuinely coming as though it were unavailable.
+ */
+._future_1cum7_133 {
   font-weight: var(--font-weight-regular);
-  color: var(--color-text-disabled);
+  color: var(--color-text-subtle);
 }
 
-._date_1j37h_128 {
+._date_1cum7_138 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   font-weight: var(--font-weight-regular);
@@ -859,13 +986,22 @@
   white-space: nowrap;
 }
 /* Figma mobile/checkout/summary-row: 45px rows, hairline between, both sides bold. */
-._summary_1h18y_2 {
+._summary_1hsxt_2 {
   margin: 0;
   display: flex;
   flex-direction: column;
 }
 
-._row_1h18y_8 {
+/*
+ * 45 including the hairline, not 45 plus it.
+ *
+ * `mobile/checkout/summary-row` is 45px tall with its rule drawn inside that height, so a
+ * four-row card is exactly 180. Ours measured 46 and 47: the border sat outside the
+ * min-height, and the label inherited the surface's leading where the figure beside it
+ * states its own. Two pixels a row, four rows, on three screens.
+ */
+._row_1hsxt_16 {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -877,32 +1013,50 @@
   color: var(--color-text-default);
 }
 
-._row_1h18y_8 + ._row_1h18y_8 {
-  border-top: 1px solid var(--color-border-default);
+/*
+ * The hairline is an inset shadow, not a border, for the same reason the order cards' ring
+ * is: the design's row is 45px WITH its rule inside that height, and a CSS border adds to
+ * it. Four rows of 46 is a summary card 4px taller than the one drawn.
+ */
+._row_1hsxt_16 + ._row_1hsxt_16 {
+  box-shadow: inset 0 1px 0 var(--color-border-default);
 }
 
-._row_1h18y_8 dt,
-._row_1h18y_8 dd {
+._row_1hsxt_16 dt,
+._row_1hsxt_16 dd {
   margin: 0;
+  /* Stated on both, so the row's height comes from the design rather than from whatever
+     leading the host's body happens to carry. */
+  line-height: var(--type-caption-sm-line);
 }
 
-._row_1h18y_8 dd {
+._row_1hsxt_16 dd {
   line-height: var(--type-caption-sm-line);
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
 
 /* "Free" is a merchandising signal, not a number — success tone, per the design. */
-._free_1h18y_36 {
+._free_1hsxt_53 {
   color: var(--color-state-text-success);
   font-weight: var(--font-weight-bold);
 }
 
 /* "Calculated at checkout". Set quieter than a real figure so it never reads as one. */
-._pending_1h18y_42 {
+._pending_1hsxt_59 {
   font-size: var(--type-trimmed-xs-size);
   color: var(--color-text-subtle);
 }
+
+/*
+ * The discount row, both sides in the success tone (Figma `5295:74073`). It is the only
+ * row in the card that is not `text/default`, which is the point: a saving is the one
+ * figure on a receipt the fan is meant to notice.
+ */
+._row_1hsxt_16._discount_1hsxt_69 dt,
+._row_1hsxt_16._discount_1hsxt_69 dd {
+  color: var(--color-state-text-success);
+}
 ._page_1eqkm_1 {
   display: flex;
   flex-direction: column;
@@ -1198,6 +1352,269 @@
 ._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.
+ */
+._page_8yxu9_6 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-32);
+  padding: var(--space-20) var(--space-16) var(--space-24);
+}
+
+/* ── Confirmation + timeline ───────────────────────────────────────────────── */
+
+/* `mobile/order/delivery-widget`: the heading pair, then the timeline, 24px apart. */
+._confirmed_8yxu9_16 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+}
+
+._title_8yxu9_22 {
+  display: flex;
+  flex-direction: column;
+  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.
+ *
+ * Nothing clips it, so the cap-height box needs no descender protection — unlike the
+ * subtitle below, which the design truncates.
+ */
+._headline_8yxu9_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);
+}
+
+/*
+ * 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 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.
+ */
+._lines_8yxu9_88 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+._line_8yxu9_88 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+._thumb_8yxu9_103 {
+  position: relative;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-8);
+  overflow: hidden;
+  background: var(--color-surface-soft);
+}
+
+._image_8yxu9_113 {
+  object-fit: cover;
+}
+
+._placeholder_8yxu9_117 {
+  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 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  flex: 1 1 0;
+  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;
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 11px;
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * 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_8yxu9_160 {
+  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);
+}
+
+/*
+ * 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 {
+  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);
+}
+
+._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;
+}
+
+/* ── 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.
+ */
+._card_8yxu9_213 {
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  border-radius: var(--radius-18);
+  overflow: hidden;
+}
+
+._cardTitle_8yxu9_221 {
+  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_8yxu9_233 {
+  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_8yxu9_205 {
+  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_8yxu9_205 > :last-child {
+  padding: 0 var(--space-16);
+}
+
+/* ── Done ──────────────────────────────────────────────────────────────────── */
+
+/*
+ * `mobile/button`, outlined: `border/full-color/max` on the page's own ground.
+ *
+ * `--color-surface-max` and not `--color-border-default`, which is the #dddedf hairline
+ * the cards are drawn with. This border is the same value as the primary button's fill,
+ * which is what "max" means, and taking it from that token keeps the two in step if the
+ * palette ever moves.
+ */
+._done_8yxu9_261 {
+  border-color: var(--color-surface-max);
+}
 /*
  * Figma `mobile/order/status-badge` — 24px tall, 2px radius, 12px bold uppercase.
  * Squarer and tighter than the catalogue `Badge`, which is a pill; they are separate
@@ -2002,7 +2419,7 @@
   height: 1px;
   background: var(--color-border-default);
 }
-._bar_1aly7_1 {
+._bar_xqpxa_1 {
   position: sticky;
   bottom: 0;
   left: 0;
@@ -2016,30 +2433,46 @@
   z-index: 50;
 }
 
-/* Figma mobile/pdp/cta-bar — a 6% lift, not the heavy shelf we had. */
-._floating_1aly7_16 {
+/*
+ * Figma `mobile/pdp/cta-bar` (5241:71430): `drop-shadow(0 -4px 12px rgba(206,206,206,.48))`.
+ *
+ * This was 6% for a week. The August pass read the shadow off `pdp` (3601:2479) and
+ * reduced it eightfold on the grounds that ours was "eight times the drawn opacity"; the
+ * frame of record is `full PDP` now (ADR-0022) and it draws the lift at 48% over 12px.
+ * Figma's own export settles it: the 28px above the bar shade from #f9fafa down to about
+ * #ececec, which is a lift you can see. At 6% there was nothing there at all, and the bar
+ * sat on the page with no separation from a background of exactly its own colour.
+ *
+ * `filter: drop-shadow`, not `box-shadow`, because the two do not mean the same thing by
+ * "12px". A filter blurs with a Gaussian of that radius and carries a long tail; a
+ * box-shadow ramps over the length itself. Given the same 12, box-shadow reached full
+ * strength 8px later and the lift stopped short of the frame. This is also what the file
+ * says, so there is nothing to translate.
+ */
+._floating_xqpxa_31 {
   border-radius: var(--radius-12) var(--radius-12) 0 0;
-  box-shadow: 0 -4px 6px rgba(176, 176, 176, 0.06);
+  filter: drop-shadow(0 -4px 12px rgba(206, 206, 206, 0.48));
 }
 
 /* Figma cart. */
-._divider_1aly7_22 {
+._divider_xqpxa_37 {
   border-top: 1px solid var(--color-border-default);
 }
 
-._info_1aly7_26 {
+._info_xqpxa_41 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: var(--font-weight-bold);
 }
 
-._actions_1aly7_33 {
+/* `spacer-xs` between actions, per the `button-group` the bar wraps. */
+._actions_xqpxa_49 {
   display: flex;
-  gap: var(--space-12);
+  gap: var(--space-8);
 }
 
-._actions_1aly7_33 > * {
+._actions_xqpxa_49 > * {
   flex: 1 1 0;
 }
 /*
@@ -2771,7 +3204,7 @@
  * the SMALL viewport (browser chrome expanded), so the hero never grows taller than the
  * visible area and push the first rail off-screen on load.
  */
-._hero_2mcnp_10 {
+._hero_pi6qp_10 {
   --hero-height: clamp(480px, 100svh, 812px);
 
   position: relative;
@@ -2798,12 +3231,12 @@
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
 
-._image_2mcnp_37 {
+._image_pi6qp_37 {
   position: absolute;
   inset: 0;
 }
 
-._image_2mcnp_37 img {
+._image_pi6qp_37 img {
   object-fit: cover;
 }
 
@@ -2812,13 +3245,13 @@
  * top third, so darkening the whole frame would only mute the photograph without helping
  * the words. Fixed colour — it darkens a photograph, not a themed surface.
  */
-._scrim_2mcnp_51 {
+._scrim_pi6qp_51 {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0) 70%);
 }
 
-._text_2mcnp_57 {
+._text_pi6qp_57 {
   position: absolute;
   top: 106px;
   left: 0;
@@ -2833,7 +3266,16 @@
 
 /* Fixed light values on both counts: this text is over a photograph, so it does not
    follow the surface palette. */
-._title_2mcnp_72 {
+/*
+ * The frame gives the two lines fixed boxes, 327 and 224, and centres the text inside
+ * them. Their centring parent sizes children to their content, so without a width stated
+ * each line came out as wide as its own words: "Hoodies" measured 143 against 327. It
+ * looks identical while the text fits and diverges the moment it does not, which is the
+ * same shape as the shop entry's headline.
+ */
+._title_pi6qp_79 {
+  width: 327px;
+  max-width: 100%;
   margin: 0;
   font-size: 40px;
   line-height: 1;
@@ -2842,7 +3284,9 @@
   text-wrap: balance;
 }
 
-._subtitle_2mcnp_81 {
+._subtitle_pi6qp_90 {
+  width: 224px;
+  max-width: 100%;
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: 1;
@@ -2855,7 +3299,7 @@
  * be one: it collapses to the height of its own text on the page background rather than
  * holding a screen-tall empty box.
  */
-._noImage_2mcnp_94 {
+._noImage_pi6qp_105 {
   height: auto;
   min-height: 0;
   max-height: none;
@@ -2863,13 +3307,13 @@
   margin-bottom: 0;
 }
 
-._noImage_2mcnp_94 ._text_2mcnp_57 {
+._noImage_pi6qp_105 ._text_pi6qp_57 {
   position: static;
   padding-top: var(--space-24);
 }
 
-._noImage_2mcnp_94 ._title_2mcnp_72,
-._noImage_2mcnp_94 ._subtitle_2mcnp_81 {
+._noImage_pi6qp_105 ._title_pi6qp_79,
+._noImage_pi6qp_105 ._subtitle_pi6qp_90 {
   color: var(--color-text-default);
 }
 /*
@@ -3192,10 +3636,11 @@
   row-gap: var(--space-24);
 }
 /*
- * Figma "homepage v2" (node 2795:98786): a full-screen, snap-scrolling editorial
- * showcase. Each panel is a full-bleed photo with a bottom overlay (title + subtitle +
- * outline CTA). Always dark (#080e12), independent of theme. Measurements are taken
- * from Figma: overlay pad 24, gap 16, title 32, subtitle 16/1.55, button h48 radius 8.
+ * Figma `homepage` (4533:31350) on the page of record: a full-screen, snap-scrolling
+ * editorial showcase. Each panel is a full-bleed photo with a bottom overlay (title +
+ * subtitle + outline CTA). Always dark (#080e12), independent of theme. Measurements are
+ * taken from `slide/default` (4564:47655): overlay pad 24, gap 16, title 32/1.2, subtitle
+ * 16/1.55, button h48 radius 8 with a 1px #f9fafa rule.
  */
 
 /*
@@ -3220,7 +3665,7 @@
  * `--showcase-top` is measured at mount and on resize (see HomeShowcase.tsx) rather than
  * assumed: whatever the host puts above us, we take the rest.
  */
-._showcase_ems17_30 {
+._showcase_1sarz_31 {
   height: calc(100svh - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
@@ -3235,11 +3680,11 @@
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_ems17_30::-webkit-scrollbar {
+._showcase_1sarz_31::-webkit-scrollbar {
   display: none;
 }
 
-._panel_ems17_49 {
+._panel_1sarz_50 {
   position: relative;
   /* Matches the scroller exactly, or snapping has nothing to align to. */
   height: calc(100svh - var(--showcase-top, 0px));
@@ -3249,34 +3694,134 @@
   background: #080e12;
 }
 
-._image_ems17_59 {
+._image_1sarz_60 {
   object-fit: cover;
   object-position: center;
 }
 
-/* Bottom scrim so overlay text stays legible over any photo. */
-._panel_ems17_49::after {
+/*
+ * The category panels carry NO scrim, and that is measured rather than assumed.
+ *
+ * Each `slide/default` box is 375x812, which is `hoodies.jpg` and its siblings at their
+ * exact natural size at 375 wide — so the frame's own export IS the raw file plus whatever
+ * the design puts over it, and the overlay can be solved with no geometry to get wrong.
+ * Against the raw assets it comes out at zero the whole way down, on two slides:
+ *
+ *   Hoodies    12% 0.003   32% 0.003   57% 0.010   81% 0.007   96% 0.008
+ *   All items  12% 0.005   42% 0.009   52% 0.005   62% 0.002
+ *
+ * The 0.85 gradient this replaced was ours, added for legibility and never in the design.
+ * The five designed photographs are dark where the copy sits, which is how the frames stay
+ * readable without one.
+ *
+ * **That makes the foot of a slide image a content rule.** These panels are CMS-authored
+ * (ADR-0016), and white copy over a bright photograph fails contrast with nothing to catch
+ * it — WCAG AA is a launch gate. Whoever picks a slide has to pick one with a dark foot.
+ */
+
+/* ── Hero ── */
+/*
+ * 31px down, and running past the foot of the panel.
+ *
+ * `edit_9 1` sits at y=85, height 674, in an 812 frame whose first 54px are the status bar
+ * the device draws and whose last 90px are the browser's own bottom bar. Against the page
+ * itself that is 31px below the top, leaving a band of bare #080e12 that the bar is drawn
+ * over, and carrying on 37px behind the chrome at the foot.
+ *
+ * The band is deliberate: it is what the frame draws, and DAZN confirmed it on 20 Aug over
+ * the alternative of filling the panel.
+ *
+ * **The box takes the photograph's own aspect rather than the panel's**, which is what makes
+ * the hero identical rather than merely similar. `hero.jpg` is 750x1348, so at 375 wide it
+ * is 674 tall and lands on exactly the frame's box. Running the box to the foot of the
+ * panel instead handed `cover` a shape the picture does not have, and on anything taller
+ * than the artboard it cropped the sides to fill: at 393x852 the panel wants 821 where the
+ * photograph is 706, so the model came out zoomed and 32px was lost from each edge.
+ *
+ * Nothing shows below it. The panel's ground is the same `#080e12` the gradient is running
+ * to, and the gradient is at 0.95 by the row the picture ends on, so the seam is invisible
+ * at any height.
+ */
+._heroImageBox_1sarz_108 {
+  position: absolute;
+  top: 31px;
+  left: 0;
+  right: 0;
+  aspect-ratio: 750 / 1348;
+  overflow: hidden;
+}
+
+/*
+ * TWO gradients, and the top one is why the photograph bleeds in rather than starting on a
+ * hard edge.
+ *
+ * Solved against the raw file the same way as the foot, and it is the tighter fit of the
+ * two. Straight from full `#080e12` at 39px to nothing at 119px, residuals inside 0.03:
+ *
+ *      47px  0.901 (fit .900)     79px  0.517 (fit .500)    111px  0.126 (fit .100)
+ *      63px  0.703 (fit .700)     95px  0.327 (fit .300)    119px  0.000 (fit .000)
+ *
+ * The picture begins at 31 and the scrim is still solid at 39, so its first rows are painted
+ * out completely: there is no top edge to see, which is the whole point of it. Without this
+ * the shot started abruptly under the bar, and it got worse the taller the screen.
+ *
+ * Stated in pixels, not percentages, because what it exists for is a fixed height: it is the
+ * dark the header's glyphs are read against while the bar itself is clear. That also makes
+ * the pair consistent with what `Scroll` shows — scrolled, this gradient has travelled up
+ * out of the frame with the panel it belongs to, and the bar switches on its own flat 0.6
+ * instead. Two mechanisms, one job, never both at once.
+ *
+ * The two layers do not overlap and so cannot double up: this one is spent by 119px and the
+ * foot's begins at 18%, which is 120px at the artboard height and further down on anything
+ * taller.
+ */
+
+/*
+ * The scrim at the foot is its own, and much stronger than a category panel's.
+ *
+ * Solved rather than eyeballed. The photograph and its placement are identical to the frame
+ * — cross-correlated over scale and offset the best alignment is 1.00 and 0 — so every
+ * remaining difference is the darkening, and that can be recovered per pixel: undo our own
+ * gradient to get the ungraded value, then solve what the frame applied. Across 24 rows the
+ * answer is a straight line, and the residuals are within 0.01 the whole way down:
+ *
+ *     18%  0.000      45%  0.378 (fit 0.375)      75%  0.790 (fit 0.792)
+ *     30%  0.176      60%  0.586 (fit 0.583)      90%  1.007 (fit 1.000)
+ *
+ * The end stop is the tell that this is real and not a curve bent to fit: the gradient
+ * reaches full `#080e12` at 90%, and 90% of 668 is 601 — which is where the opaque swipe
+ * cue starts. The photograph is drawn to go completely black exactly as the bar takes over.
+ */
+._hero_1sarz_108::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, rgba(8, 14, 18, 0) 45%, rgba(8, 14, 18, 0.85) 100%);
+  background:
+    linear-gradient(to bottom, rgba(8, 14, 18, 1) 39px, rgba(8, 14, 18, 0) 119px),
+    linear-gradient(to bottom, rgba(8, 14, 18, 0) 18%, rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
 
-/* ── Hero ── */
 /*
- * Unlike the category panels (`edit_6 1`, full-bleed 375x812), the hero photo in Figma
- * (`edit_9 1`) is 375x674 and stops where the opaque "swipe down" bar starts. Giving it
- * its own box keeps the shot at its native aspect instead of cover-cropping the sides.
+ * Anchored to its top edge, not its centre.
+ *
+ * The frame hangs the photo from y=31 at its natural height and lets the foot run off the
+ * screen; `cover` centred instead splits the overflow between top and bottom, which moved
+ * the whole shot up by half of it and put the model's eyeline in the wrong place. Same box,
+ * same crop amount, wrong half.
  */
-._heroImageBox_ems17_79 {
-  position: absolute;
-  inset: 0 0 82px;
-  overflow: hidden;
+._hero_1sarz_108 ._image_1sarz_60 {
+  object-position: top;
 }
-._hero_ems17_79 ._heroContent_ems17_84 {
+._hero_1sarz_108 ._heroContent_1sarz_179 {
   position: absolute;
-  bottom: 15px;
+  /*
+   * Flush. The frame's content block ends at y=722, and 722 is where the page ends — the
+   * 90px below it is the browser bar, which is chrome in the mock and outside the viewport
+   * on a device. The 15px this replaced was a strip of bare panel under an opaque bar, and
+   * it read as nothing only because both are #080e12.
+   */
+  bottom: 0;
   left: 0;
   right: 0;
   z-index: 1;
@@ -3285,7 +3830,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_ems17_95 {
+._heroText_1sarz_196 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3293,47 +3838,85 @@
   padding: 0 24px;
   text-align: center;
 }
-._logo_ems17_103 {
+/*
+ * `.heroText .logo`, and the extra selector is the whole point.
+ *
+ * `ShopSurface` resets content images with `.surface img { max-width: 100%; height: auto }`
+ * — one class and one type, which outranks a bare module class, so the 48px height here
+ * never applied. It looked right only because `dazn-logo.svg` happens to be square: the
+ * mark was being sized by the file's own intrinsic aspect rather than by the design, and
+ * anything else in that slot, or the same file before it loads, comes out a different
+ * height and takes the whole hero text block with it. Rendered against a missing asset it
+ * is 48x41, and the block sits 7px short of where the frame puts it.
+ */
+._heroText_1sarz_196 ._logo_1sarz_205 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_ems17_107 {
+/*
+ * Full width, not shrink-to-fit. `.heroText` centres its children, which in a column flex
+ * container sizes them to their content — so the heading came out as wide as the words
+ * happened to be rather than the 327 the frame gives it. Centred either way while it fits;
+ * the frame clips at 327 and this would have overflowed instead.
+ */
+._heroTitle_1sarz_225 {
+  width: 100%;
   margin: 0;
+  /*
+   * The one string in the shop not set on the brand face, and that is the frame's doing.
+   *
+   * `Meta` (4564:47781) is drawn in SF Pro Display Bold, where the line beneath it and every
+   * other string on the screen resolve `font/primary-font` to DAZN Oscine. It measures 308
+   * wide there against 276 in Oscine, which is the last thing separating this screen from
+   * the frame. We follow the frame; whether that layer is a decision or an unlinked text
+   * style is a question back to DAZN, and Oscine is a one-line change if they say so.
+   *
+   * SF Pro is not a webfont anyone can serve, so this is the system stack: it is the real
+   * face on the iOS webview the shop ships in, and the platform's own display face
+   * everywhere else. Weight is stated because `system-ui` resolves to a different family
+   * per platform and none of them synthesise the same bold.
+   */
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   font-size: 56px;
   line-height: 1.3;
   font-weight: 700;
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_ems17_115 {
+._heroSub_1sarz_249 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_ems17_122 {
+/*
+ * `Component 24`: 8px of padding, a 14px label, 6px, and a 24px chevron — 60px, not 82.
+ * Stated as padding rather than a height so the bar is the sum of its parts; at 82 with
+ * the contents centred the cue sat 11px lower than the frame puts it and the gap above it
+ * closed by the same amount.
+ */
+._swipe_1sarz_262 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  height: 82px;
-  justify-content: center;
+  padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_ems17_131 {
+._swipeLabel_1sarz_270 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_ems17_137 {
+._chevron_1sarz_276 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_ems17_1 1.8s ease-in-out infinite;
+  animation: _bob_1sarz_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_ems17_1 {
+@keyframes _bob_1sarz_1 {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(4px); }
 }
@@ -3344,7 +3927,7 @@
  * only at the bottom. That is what gives the stretched CTA below something panel-sized to
  * stretch against, which is how the design's "whole card = tap target" is honoured.
  */
-._overlay_ems17_154 {
+._overlay_1sarz_293 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3355,25 +3938,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_ems17_165 {
+._copy_1sarz_304 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_ems17_170 {
+._title_1sarz_309 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_ems17_177 {
+._subtitle_1sarz_316 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_ems17_183 {
+._cta_1sarz_322 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3391,57 +3974,156 @@
  * The hit area, stretched over the whole card. The button stays exactly where the design
  * puts it and keeps its own visual state; the tappable region is everything above it.
  */
-._cta_ems17_183::after {
+._cta_1sarz_322::after {
   content: '';
   position: absolute;
   inset: 0;
 }
 
-._cta_ems17_183:active {
+._cta_1sarz_322:active {
   background: rgba(249, 250, 250, 0.12);
 }
 
 /* Keyboard users get the outline on the button itself, not on the invisible card-sized
    region — a focus ring the size of the viewport communicates nothing. */
-._cta_ems17_183:focus-visible {
+._cta_1sarz_322:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 /*
- * Figma `mobile/header`, context=shop. The component is 96px: a 40px status bar the
- * device draws, and the 56px `top.navigation` below it that is the part we can render.
- * 16px inset both sides, 24px icons.
+ * Figma `mobile/header`, context=shop (5130:62877 on the page of record). The component is
+ * 118px: a 54px status bar the device draws, and the 64px nav row below it that is the
+ * part we can render. 16px inset both sides, 24px icons.
+ *
+ * **The row is 64, not 56.** The old number came from this same component on the page
+ * ADR-0022 retired, where the mock device drew a 40px status bar and a 56px row. On the
+ * page of record it is 54 + 64, and two frames agree to the pixel: the glyph centre sits
+ * at y=86 with the bar ending at 118, on the dark homepage (4564:47652) and on the light
+ * PDP header (5295:75116) alike. At 56 every screen's content started 8px high.
  */
-._header_7rinq_6 {
+/*
+ * Pinned, because the design pins it: inside `mobile/header` the `Slot/Header` that
+ * carries the bar is `position: sticky; top: 0`, and the header instance is the LAST
+ * child of the page frame — drawn over everything else rather than scrolled past.
+ *
+ * It is also what makes the rest of the screen work. The cart badge is the feedback for
+ * adding something, and the added-to-cart card points a caret at it; both are useless
+ * from halfway down a 1751px product page if the bar they live in has scrolled away.
+ *
+ * `z-index: 40` places it above page content and below everything designed to cover it:
+ * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
+ * toast (1000).
+ */
+._header_1hcuj_25 {
+  position: sticky;
+  top: 0;
+  z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 56px;
+  height: var(--header-height);
   padding: 0 var(--space-16);
   background: var(--color-surface-default);
+  /*
+   * semantic/base/border/full-color/default, drawn under the bar in the current frame
+   * (5295:75116). It is what separates the header from a white PDP, which otherwise runs
+   * into it with nothing between them.
+   *
+   * An inset shadow, not a border, because Figma draws the rule INSIDE the component's
+   * 118px and a CSS border adds to it. As a border the bar stood 65 and every screen under
+   * it began a pixel low — measurable against `5295:74053`, where shifting our whole render
+   * up by one takes the difference from the frame from 5.7 of 255 to 3.6. It also put the
+   * menu sheet 15px below the bar where `--header-height` plus `--space-16` says 16.
+   */
+  box-shadow: inset 0 -1px 0 var(--color-border-default);
 }
 
 /*
  * Overlaid rather than stacked, for screens whose artwork runs to the top of the display.
  *
+ * `absolute`, so this deliberately opts OUT of the sticky default above: the category
+ * hero scrolls away under its own title and a bar pinned over a photograph that is no
+ * longer there would be a bar floating on nothing.
+ *
  * `mobile/hero` carries its own `mobile/header` instance at y=0, hidden, and positions the
  * category title at y=106 — measured from the top of the SCREEN, not from under a bar. In
- * flow the header pushes the picture down and every measurement inside it lands 56px low,
+ * flow the header pushes the picture down and every measurement inside it lands a bar
+ * height low,
  * which is how the category page shipped.
  *
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_7rinq_26 {
+._floating_1hcuj_65 {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 5;
+  /*
+   * Clear at rest. The scrim belongs to `.scrolled` below.
+   */
   background: none;
+  transition: background-color 160ms ease;
+  /* No rule over artwork: it exists to separate the bar from the page below it, and there
+     is no page below it here. */
+  box-shadow: none;
+}
+
+/*
+ * Once anything has scrolled under it, the overlaid bar takes a 60% scrim.
+ *
+ * Both halves are drawn. `full screen` (4564:47652) is the shop entry at rest and the bar
+ * shows the ground straight through; `Scroll` (5130:62654) is the same screen moved 154px
+ * and the photograph comes through darkened. The second is solvable rather than a matter of
+ * taste, because `Scroll[y]` must equal `full screen[y+154]` wherever nothing overlays:
+ * below the bar they match exactly, above it they do not, and the ratio is the same to
+ * three places across the whole bar and every sampled pixel:
+ *
+ *   y=80,  x=150   clean (193,172,157)  scrimmed (82,77,74)   t = .600 / .601 / .597
+ *   y=100, x=150   clean (181,157,137)  scrimmed (77,71,65)   t = .601 / .601 / .605
+ *   y=40,  x=80    clean  (61, 67, 72)  scrimmed (29,35,39)   t = .604
+ *
+ * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
+ * and does not follow the surface.
+ */
+._floating_1hcuj_65._scrolled_1hcuj_72 {
+  background: rgba(8, 14, 18, 0.6);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._floating_1hcuj_65 {
+    transition: none;
+  }
+}
+
+/*
+ * `DAZN Shop`, at the width the frame gives it.
+ *
+ * 222 with `justify-content: space-between` is what places it: 375 less the 16px insets,
+ * the 24px back control and the 72px icon cluster leaves 25px of free space, split into two
+ * 12.5px gaps, which puts the text box at x=52.5. Measured off the frame's export the "D"
+ * lands at 55, which is the glyph's own side bearing.
+ *
+ * `semantic/base/text/static-light` is #f9fafa, and taking it from the theme instead is
+ * the same colour everywhere the frame actually draws it — the bar carries a title only on
+ * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
+ * as a static white it would be invisible the first time a host passed one on a light page.
+ */
+._title_1hcuj_121 {
+  flex: 0 0 auto;
+  width: 222px;
+  min-width: 0;
+  font-size: var(--type-caption-sm-size);
+  line-height: var(--type-caption-sm-line);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-._right_7rinq_35 {
+._right_1hcuj_134 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -3454,12 +4136,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_7rinq_48 {
+._spacer_1hcuj_147 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_7rinq_53 {
+._iconBtn_1hcuj_152 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -3475,7 +4157,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_7rinq_53::after {
+._iconBtn_1hcuj_152::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -3486,12 +4168,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_7rinq_80 {
+._menuBtn_1hcuj_179 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_7rinq_80::after {
+._menuBtn_1hcuj_179::after {
   inset: -6px;
 }
 
@@ -3499,18 +4181,22 @@
  * Cart count, anchored where the design anchors it: 14px in and 6px above the icon's own
  * box, so the circle overhangs the trolley's top-right corner.
  *
- * Fixed colours on both counts. The pill is `#dddedf` with `#080e12` on it in the frame —
- * light on the dark category header — and it reads over a photograph there, so it does not
- * follow the surface palette any more than the hero title does. Sampled from the frame
- * rather than taken from the token dump, which resolved the same DAZN token two different
- * ways depending on which node was asked.
+ * **The pill is red now.** It was `#dddedf` with `#080e12` on it, sampled off the frame
+ * at the time; `.cart.icon` has since been rebuilt on
+ * `semantic/state/surface/critical/default` with white on it (5295:75116, 20 Aug 2026),
+ * and the DS component is one component — so it is red on the light PDP header and on the
+ * dark category one alike.
+ *
+ * Still fixed rather than tokenised: it reads over a photograph on the category hero, so
+ * it does not follow the surface palette any more than the hero title does. `--color-…`
+ * would be the same hex today and would invert the day somebody adds a critical remap.
  *
  * `min-width` rather than a fixed circle so a two- or three-character value ("99+") grows
  * leftwards instead of being clipped.
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_7rinq_104 {
+._badge_1hcuj_207 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -3523,8 +4209,8 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-full);
-  background: #dddedf;
-  color: #080e12;
+  background: #d12424;
+  color: #ffffff;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1;
   letter-spacing: 0.12px;
@@ -3532,43 +4218,79 @@
   font-variant-numeric: tabular-nums;
   pointer-events: none;
 }
+
 /*
- * Figma `Settings` (636:51006): the card is anchored under the 96px header, inset 16px on
+ * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
+ * left one empty, so the title centres on the screen rather than on what is left over.
+ */
+._closeSlot_1hcuj_234 {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+}
+
+._closeSlot_1hcuj_234._iconBtn_1hcuj_152::after {
+  inset: -6px;
+}
+
+/*
+ * The checkout title takes the middle instead of the shop entry's fixed 222px: the frame
+ * centres "Order #2304" between two equal slots, so it is the free space, not a measured
+ * width. Same size, weight and colour as the shop entry's — one text style, two positions.
+ */
+._centred_1hcuj_249 {
+  flex: 1 1 auto;
+  width: auto;
+  text-align: center;
+}
+/*
+ * Figma `menu-open` (4613:58644): the card is anchored under the header, inset 16px on
  * each side, and sized by its content — not a bottom sheet, despite the frame's name.
  */
-._overlay_lm5qk_5 {
+._overlay_1i5ok_5 {
   position: fixed;
   inset: 0;
   z-index: 900;
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  /* Clears the header the design draws this beneath. `env()` on top so a notch does not
-     put the card under the status bar in the embed. */
-  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-16);
+  /* Clears the header the design draws this beneath: the frame puts the card's top edge
+     at 134 with the bar ending at 118, which is the 16px inset below it. `env()` on top so
+     a notch does not put the card under the status bar in the embed. The 96 this replaced
+     was a 40px status bar plus a 56px row, and it counted the status bar twice — once as a
+     literal and again through `env()`. */
+  padding: calc(var(--header-height) + var(--space-16) + env(safe-area-inset-top, 0px))
+    var(--space-16) var(--space-16);
 }
 
-._scrim_lm5qk_17 {
+._scrim_1i5ok_21 {
   position: absolute;
   inset: 0;
-  background: rgba(8, 14, 18, 0.5);
+  /* `semantic/base/surface/backdrop`. Measured off the frame rather than read off a
+     token name: the photo behind the card comes through at exactly 0.32 of the way to
+     #0c161c on every sampled pixel. At 0.5 the shop behind the menu went noticeably
+     darker than the design draws it. */
+  background: rgba(12, 22, 28, 0.32);
 }
 
-._sheet_lm5qk_23 {
+._sheet_1i5ok_31 {
   position: relative;
   width: 100%;
   max-width: 343px;
   max-height: calc(100dvh - 128px);
   overflow-y: auto;
-  background: var(--color-surface-default);
+  /* `semantic/base/surface/full-color/soft` — #f0f2f2, not the page's default #f9fafa.
+     The card is deliberately a shade off white so its rows, which carry no visible rule
+     between them, still read as a stack. */
+  background: var(--color-surface-soft);
   border: 1px solid var(--color-border-transparent-soft);
   border-radius: var(--radius-12);
   display: flex;
   flex-direction: column;
-  animation: _menu-in_lm5qk_1 160ms ease;
+  animation: _menu-in_1i5ok_1 160ms ease;
 }
 
-@keyframes _menu-in_lm5qk_1 {
+@keyframes _menu-in_1i5ok_1 {
   from {
     opacity: 0;
     transform: translateY(-8px);
@@ -3580,20 +4302,26 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._sheet_lm5qk_23 {
+  ._sheet_1i5ok_31 {
     animation: none;
   }
 }
 
 /* `.sheet-header`: 48px, its own bottom rule, and the close control alone on the right.
-   The left and centre slots the component defines are empty in this instance. */
-._header_lm5qk_56 {
+   The left and centre slots the component defines are empty in this instance.
+
+   The rule is `semantic/base/border/transparent-static-light` and it is nearly invisible
+   over the card: rgba(249,250,250,.2) on #f0f2f2 lands on #f2f4f4, which is what the frame
+   renders. Written literally rather than through `--color-border-transparent-soft`, whose
+   light value is rgba(0,0,0,.1) — a line four times the contrast the design draws, and the
+   wrong way round. Static because the card is light in every theme. */
+._header_1i5ok_73 {
   display: flex;
   justify-content: flex-end;
-  border-bottom: 1px solid var(--color-border-transparent-soft);
+  border-bottom: 1px solid rgba(249, 250, 250, 0.2);
 }
 
-._close_lm5qk_62 {
+._close_1i5ok_79 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3606,13 +4334,13 @@
   cursor: pointer;
 }
 
-._close_lm5qk_62:focus-visible {
+._close_1i5ok_79:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
 }
 
-._list_lm5qk_81 {
+._list_1i5ok_98 {
   list-style: none;
   margin: 0;
   padding: var(--space-6) 0;
@@ -3620,14 +4348,20 @@
   flex-direction: column;
 }
 
-._row_lm5qk_89 {
+/*
+ * No rule between rows, and that is what the frame draws rather than an omission. The
+ * design gives each row a bottom border in `semantic/base/border/soft` — #f0f2f2, the card's
+ * own colour — so it never appears; sampled down the frame clear of the text there is no
+ * divider anywhere in the list. The separation comes from the card being a shade off white,
+ * which is why `.sheet` is `--color-surface-soft`.
+ */
+._row_1i5ok_113 {
   display: flex;
   align-items: center;
   gap: var(--space-8);
   width: 100%;
   padding: var(--space-12) var(--space-16);
   border: 0;
-  border-bottom: 1px solid var(--color-border-transparent-soft);
   background: none;
   color: inherit;
   font-family: inherit;
@@ -3641,16 +4375,16 @@
  * yet on either side, which is our problem and not something to dress up as their
  * permission. `aria-disabled` carries the truth to a screen reader.
  */
-._row_lm5qk_89[disabled] {
+._row_1i5ok_113[disabled] {
   cursor: default;
 }
 
-._row_lm5qk_89:focus-visible {
+._row_1i5ok_113:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-._icon_lm5qk_119 {
+._icon_1i5ok_142 {
   display: inline-flex;
   flex: 0 0 24px;
   width: 24px;
@@ -3658,7 +4392,7 @@
   color: var(--color-text-default);
 }
 
-._text_lm5qk_127 {
+._text_1i5ok_150 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -3666,20 +4400,20 @@
   min-width: 0;
 }
 
-._title_lm5qk_135 {
+._title_1i5ok_158 {
   font-size: var(--type-paragraph-size);
   font-weight: var(--font-weight-bold);
   line-height: 1;
   color: var(--color-text-default);
 }
 
-._subtitle_lm5qk_142 {
+._subtitle_1i5ok_165 {
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
   color: var(--color-text-subtle);
 }
 
-._chevron_lm5qk_148 {
+._chevron_1i5ok_171 {
   display: inline-flex;
   flex: 0 0 16px;
   width: 16px;