/* =========================================================================
   Rambler Safety — interface design system
   =========================================================================

   One stylesheet for the whole system: the public catalogue, the ordering
   grid, the cart, checkout, the portal, the back office and the sign-in
   screens. It layers on top of BASE_CSS in src/platform/html.ts, which ships
   inline in every document so a page is legible before this file arrives.
   BASE_CSS owns the tokens and the document chrome; this file owns the
   components.

   WHO THIS IS FOR
   ---------------
   A buyer at a PPE shop or hardware store, often on a phone at a trade
   counter, ordering a full size run. They are purchasing stock, not browsing.
   Everything below optimises for: scan fast, type fast, trust the numbers.

   FIVE RULES THAT ARE NOT NEGOTIABLE
   ----------------------------------
   1. YELLOW IS A SIGNAL. --yellow is bound to `.btn--commit` (one per screen:
      Add to order / Place order / Approve) and to the focus ring. Nothing
      else. A page that spends it twice has stopped meaning "press this".
   2. SENTENCE CASE. Uppercase is reserved for `.eyebrow` and other labels at
      <= 11px with letter-spacing. Product names, headings, buttons and nav are
      set as written. Caps at reading size destroys word shape and scanability.
   3. NUMBERS ARE TABULAR AND RIGHT-ALIGNED. `font-variant-numeric:
      tabular-nums` is on `body`; money and counts use `.numeric`. Money is
      never centred.
   4. CORNERS STAY CONTROLLED. Every radius is `var(--radius)` (6px) or 0;
      there are no oversized generic pill cards.
   5. DENSE AND CALM. Whitespace separates sections; it never pads out a table.

   TOKENS — use these as the component contract
   ----------------------------------------------
   Ink & surface   --ink --ink-2 --ink-3 --muted
                   --surface --card --sunk --hairline --hairline-strong
   Signal          --yellow --yellow-hi --yellow-deep
   Accent          --teal --teal-deep --teal-wash
   Status          --ok --ok-wash --warn --warn-wash --danger --danger-wash
   Type            --display (Barlow Condensed stack, headings/labels)
                   --body (Inter stack, everything read or typed)
                   --mono (SKUs, references, hashes)
   Type scale      --fs-xs 11 --fs-sm 12 --fs-md 13 --fs-base 14 --fs-lg 16
                   --fs-xl 19 --fs-2xl 24 --fs-3xl 30 --fs-4xl 38
   Space scale     --space-1 4 --space-2 8 --space-3 12 --space-4 16
                   --space-5 24 --space-6 32 --space-7 48 --space-8 64
   Measures        --measure 1180 --measure-wide 1380 --measure-prose 70ch
                   --measure-form 26rem --header-h 72
   Form            --radius 6px --dur 180ms
   Added here      --line-1 --line-2 (hairline shorthands) --shadow-sticky
                   --thumb (row thumbnail size) --z-sticky --z-summary

   COMPONENT CLASSES — the vocabulary other surfaces reuse
   -------------------------------------------------------
   Shell        .site-header .site-header__inner .brand .brand__mark
                .brand__word .site-nav .site-actor .site-actor__who
                .site-actor__name .site-actor__meta .site-link .site-footer
                .site-footer__inner .skip-link .page[data-layout]
   Layout       .wrap .band .band--lead .band--tint .band--ink
                .page-head .page-head__text .page-head--stacked
                .section-head .section-head__meta .split .stack .crumbs
   Actions      .btn .btn--commit .btn--primary .btn--secondary .btn--ghost
                .btn--danger .btn--sm .btn--block .btn--on-ink .actions
                .link-quiet
   Forms        .form .field .field__label .field__hint .field__error
                .field--invalid .fieldrow .input .select .checkbox-row
                .form-actions .auth-card .auth-card__head
   Data         .table-scroll .table-scroll--pane .data-table
                .data-table--frozen .data-table--zebra .numeric .num-strong
                .row-identity .thumb .thumb--empty .sku .code .stamp
   Product      .product-grid .product-card .product-card__link
                .product-card__body .product-card__title .product-card__colour
                .product-card__facts .media .media--card .media--hero
                .media--empty .media__code .media__note
                .product .product__media .product__detail .product__colours
                .product__colourway .price-band .price-band__value
                .price-band__label .facts .fact .swatches .swatch .chip
   Status       .pill .pill--in .pill--low .pill--out .pill--unknown
                .pill--ok .pill--warn .pill--bad .pill--idle
                .badge .marks .mark .mark--muted
   Feedback     .banner .banner--info .banner--success .banner--warn
                .banner--error .notice .violation .note .note--rule
                .empty-state .empty-state__title .empty-state__note
   Commit bar   .summary-bar .summary-bar__figures .figure .figure__label
                .figure__value .figure--grand .summary-bar__actions
   Cards        .card .card__head .card__body .card__meta .card__title
                .panel .panel--flush
   Steps        .steps .step .step__number
   Callout      .callout .callout__text

   ACCESSIBILITY COMMITMENTS
   -------------------------
   - Every interactive element keeps a visible :focus-visible ring that reads
     on white, on the card fill and on the black header (ink outline + yellow
     halo, inverted on ink).
   - Colour never carries meaning alone: an out-of-stock size says "Out of
     stock" in words as well as going grey.
   - prefers-reduced-motion removes every transition, not just decorative ones.
   - Tap targets are >= 38px, and >= 44px at the phone breakpoint.
   - No outline is ever removed anywhere in this file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens added on top of BASE_CSS
   ---------------------------------------------------------------------- */

:root {
  --line-1: 1px solid var(--hairline);
  --line-2: 1px solid var(--hairline-strong);
  --shadow-sticky: 0 -1px 0 var(--hairline), 0 -8px 24px rgba(0, 0, 0, 0.08);
  --shadow-frozen: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
  --thumb: 44px;
  --z-sticky: 10;
  --z-summary: 20;
}

/* =========================================================================
   2026 visual refresh — premium industrial wholesale

   The shared application keeps its dense data behaviour, while the public
   shell gains an editorial product hierarchy: warm material surfaces, a real
   product-led hero, larger touch targets and quieter borders. Yellow remains
   a signal, not a decorative fill.
   ========================================================================= */

:root {
  --ink: #171916;
  --ink-2: #3f433d;
  --ink-3: #676c64;
  --surface: #fffefa;
  --card: #f5f2e9;
  --sunk: #ebe7dc;
  --hairline: #d9d5ca;
  --hairline-strong: #aaa69c;
  --radius: 6px;
  --measure-wide: 1380px;
  --header-h: 72px;
  --dur: 180ms;
}

body {
  background: #f8f6ef;
}

.site-header {
  background: rgba(255, 254, 250, 0.96);
  color: var(--ink);
  border-top: 4px solid var(--yellow);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 8px 28px rgba(23, 25, 22, 0.06);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  min-height: var(--header-h);
}

.brand {
  color: var(--ink);
  gap: 10px;
}

.brand__mark {
  width: 8px;
  height: 32px;
}

.brand__lockup {
  display: grid;
  line-height: 1;
}

.brand__word {
  font-size: 21px;
  letter-spacing: 0.01em;
}

.brand__word em {
  color: var(--ink-3);
}

.brand__descriptor {
  margin-top: 4px;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-nav a,
.site-link,
.site-actor__meta {
  color: var(--ink-3);
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-link:hover,
.site-actor__name {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--yellow-deep);
}

.site-header :focus-visible {
  outline-color: var(--ink);
}

.home-hero {
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
  border-bottom: 0;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  min-height: 610px;
  padding-right: 0;
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vw, 120px) clamp(32px, 6vw, 90px) clamp(56px, 7vw, 96px) 0;
  position: relative;
  z-index: 1;
}

.home-hero .eyebrow {
  color: var(--yellow);
}

.home-hero h1 {
  max-width: 12ch;
  margin: 0 0 22px;
  color: var(--surface);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.home-hero .lede {
  max-width: 54ch;
  color: #d7d7d0;
  font-size: clamp(17px, 1.5vw, 20px);
}

.home-hero__actions {
  margin-top: 30px;
}

.home-hero .btn--secondary {
  color: var(--surface);
  border-color: #6f716b;
  background: transparent;
}

.home-hero .btn--secondary:hover {
  border-color: var(--surface);
  background: rgba(255,255,255,0.08);
}

.home-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #444740;
}

.home-proof li {
  display: grid;
  gap: 3px;
  padding-right: 18px;
}

.home-proof strong {
  color: var(--surface);
  font-family: var(--display);
  font-size: 16px;
}

.home-proof span {
  color: #aeb1a9;
  font-size: 12px;
}

.home-hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 56px clamp(24px, 5vw, 72px);
  /* A clean studio grey, not khaki: the shoe's own colour is the colour. */
  background:
    radial-gradient(circle at 50% 45%, rgba(251,205,10,0.22), transparent 34%),
    linear-gradient(160deg, #f7f7f4 0%, #e4e4df 100%);
}

.home-hero__visual::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(23,25,22,0.16);
  pointer-events: none;
}

.home-hero__visual .media {
  position: relative;
  z-index: 1;
  min-height: 380px;
  border: 0;
  background: transparent;
}

.home-hero__visual .media img {
  filter: drop-shadow(0 28px 25px rgba(23,25,22,0.28));
  transform: rotate(-3deg) scale(1.06);
}

.home-hero__label {
  position: absolute;
  top: 48px;
  left: 44px;
  z-index: 2;
  display: grid;
  color: var(--ink);
  font-family: var(--display);
  text-transform: uppercase;
}

.home-hero__label span {
  font-size: 12px;
  letter-spacing: .18em;
}

.home-hero__label strong {
  font-size: 32px;
  line-height: 1;
}

.home-hero__visual > a {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
}

.band {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.section-head {
  align-items: flex-end;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

.section-head h2 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.product-card {
  overflow: hidden;
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(23,25,22,0.07);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--hairline);
  box-shadow: 0 22px 44px rgba(23,25,22,0.13);
}

.product-card .media--card {
  aspect-ratio: 4 / 3;
  min-height: 250px;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(145deg, #f3f0e6, #e8e2d4);
}

.product-card .media--card img {
  object-fit: contain;
  filter: drop-shadow(0 15px 15px rgba(23,25,22,0.16));
  transition: transform var(--dur) ease;
}

.product-card:hover .media--card img {
  transform: scale(1.035);
}

.product-card__body {
  gap: 10px;
  padding: 22px;
}

.product-card__title {
  font-size: 25px;
}

.product-card:hover .product-card__title {
  text-decoration: none;
}

.product-card__facts {
  padding-top: 14px;
  margin-top: 8px;
}

.product-card__action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 12px;
  color: var(--ink);
  font-weight: 700;
  border-top: 1px solid var(--hairline);
}
.product-card__prepack { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); background: #fff7c7; color: var(--ink); font-weight: 800; text-decoration: none; }
.product-card__prepack:hover { background: var(--yellow); color: var(--ink); }

.product-card__action span {
  font-size: 20px;
}

.product {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 84px);
}

.product__media > .media--hero {
  min-height: 520px;
  padding: clamp(24px, 4vw, 56px);
  border: 0;
  background: linear-gradient(160deg, #f7f7f4, #e6e6e1);
}

.product__media > .media--hero img {
  filter: drop-shadow(0 24px 24px rgba(23,25,22,0.18));
}

.product__detail h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.btn,
button,
input,
select {
  min-height: 44px;
}

.card,
.panel,
.auth-card,
.buy-box,
.summary-bar {
  box-shadow: 0 10px 28px rgba(23,25,22,0.055);
}

/* The size run. Numbers big, tiles tappable, the run visible whole. */
.buy-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
}
.buy-box__head .buy-box__title { margin: 0; }
.buy-box__price {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.buy-box__price span {
  font-family: var(--body);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-left: 4px;
}
.size-run {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}
.size-run__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px 4px;
  border: var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.size-run__tile input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.size-run__size {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.size-run__note {
  font-size: 10px;
  line-height: 1.1;
  margin-top: 3px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.size-run__tile:hover { border-color: var(--ink); }
.size-run__tile:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.size-run__tile:has(input:checked) .size-run__note { color: var(--hairline-strong); }
.size-run__tile:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--yellow);
}
.size-run__tile--low .size-run__note { color: var(--warn); }
.size-run__tile--out {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--muted);
  background: var(--sunk);
}
.size-run__tile--out .size-run__size { text-decoration: line-through; opacity: .55; }
.buy-box__help { margin: 0 0 var(--space-3); }
.buy-box--sizes .buy-box__row { align-items: flex-end; }
.btn--grow { flex: 1 1 auto; min-height: 48px; }
@media (max-width: 720px) {
  .size-run { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
  .size-run__tile { min-height: 52px; }
  .btn--grow { min-height: 52px; font-size: var(--fs-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .size-run__tile { transition: none; }
}

@media (max-width: 960px) {
  .home-hero__grid {
    grid-template-columns: 1fr;
    padding-right: var(--space-4);
  }

  .home-hero__content {
    padding-right: 0;
  }

  .home-hero__visual {
    min-height: 420px;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius);
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
  }

  .site-nav {
    border-top-color: var(--hairline);
  }

  .home-hero__grid {
    min-height: 0;
  }

  .home-hero__content {
    padding-top: 52px;
    padding-bottom: 44px;
  }

  .home-hero h1 {
    font-size: clamp(42px, 14vw, 62px);
  }

  .home-proof {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 34px;
  }

  .home-proof li {
    grid-template-columns: 110px 1fr;
    align-items: baseline;
  }

  .home-hero__visual {
    min-height: 330px;
    padding: 40px 18px 24px;
  }

  .home-hero__visual .media {
    min-height: 250px;
  }

  .home-hero__label {
    top: 26px;
    left: 26px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product__media > .media--hero {
    min-height: 360px;
  }
}

/* -------------------------------------------------------------------------
   2. Layout
   Data screens use the viewport. Prose and forms use a measure. Nothing is
   ever left stranded in the top-left corner of a blank page.
   ---------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.wrap--narrow {
  max-width: var(--measure);
}

.band {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--line-1);
}

.band--lead {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  background: var(--surface);
}

.band--tint {
  background: var(--card);
}

.band--ink {
  background: var(--ink);
  color: var(--surface);
  border-bottom: none;
}

.band:last-of-type {
  border-bottom: none;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.page-head--stacked {
  display: block;
  margin-bottom: var(--space-5);
}

.page-head__text {
  min-width: 0;
  max-width: 68ch;
}

.page-head h1 {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--space-2);
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0;
}

.band--ink .lede {
  color: #d8d8d8;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
}

.section-head h2 {
  margin: 0;
  font-size: var(--fs-2xl);
}

.section-head h2 a {
  color: var(--ink);
  text-decoration: none;
}

.section-head h2 a:hover {
  border-bottom: 2px solid var(--yellow);
}

.section-head__meta {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* A wide main beside a narrow aside — the basket and the checkout.
   .split alone gives them equal halves, and half of a laptop screen is not
   enough for a five-column table of order lines: it scrolled sideways while the
   summary column beside it sat half empty. So the two panes split only once
   there is genuinely room for both, and the table is the one that gets the
   space. min-width: 0 because a grid child defaults to min-content, which a
   table refuses to go below. */
.split--main-aside {
  grid-template-columns: minmax(0, 1fr);
}

.split--main-aside > * {
  min-width: 0;
}

@media (min-width: 1040px) {
  .split--main-aside {
    grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 0.8fr);
  }
}

.stack > * + * {
  margin-top: var(--space-3);
}

.crumbs {
  font-size: var(--fs-md);
  color: var(--muted);
  padding-top: var(--space-3);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.crumbs span {
  padding: 0 var(--space-2);
  color: var(--hairline-strong);
}

/* -------------------------------------------------------------------------
   3. Type
   ---------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.band--ink .eyebrow {
  color: var(--yellow);
}

.code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.sku {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.stamp {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--space-2);
}

.note {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 72ch;
  margin: var(--space-3) 0 0;
}

.note--rule {
  border-left: 2px solid var(--hairline-strong);
  padding-left: var(--space-3);
}

.link-quiet {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
}

.link-quiet:hover {
  color: var(--ink);
  text-decoration-color: var(--yellow);
}

/* -------------------------------------------------------------------------
   4. Actions
   Five kinds, one job each. `commit` is the yellow one and there is exactly
   one per screen; `primary` is the strong-but-not-committing action (ink);
   `secondary` is the outlined default; `ghost` disappears into its
   surroundings; `danger` is destructive and says so.
   ---------------------------------------------------------------------- */

.actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  font-family: var(--body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) linear, border-color var(--dur) linear,
    color var(--dur) linear;
}

.btn:hover {
  background: var(--sunk);
}

/* The one yellow thing. See rule 1 at the top of this file. */
.btn--commit {
  background: var(--yellow);
  border-color: var(--yellow-deep);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}

.btn--commit:hover {
  background: var(--yellow-hi);
}

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.btn--primary:hover {
  background: var(--ink-2);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink-2);
}

.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

/* The outline that survives a black band (the masthead, the summary bar). It
   must clear the base `.btn` white fill itself: relying on a companion class
   to do that made it invisible the moment it was used on its own. */
.btn--on-ink {
  background: transparent;
  border-color: #4a4a4a;
  color: var(--surface);
}

.btn--on-ink:hover {
  border-color: var(--surface);
  background: rgba(255, 255, 255, 0.08);
  color: var(--surface);
}

.btn--danger {
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
}

.btn--danger:hover {
  background: var(--danger);
  color: var(--surface);
}

.btn--sm {
  min-height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--sunk);
  border-color: var(--hairline);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   5. Focus
   Ink ring with a yellow halo: legible on white, on the card fill and on a
   photograph. Inverted on the black chrome. Never removed.
   ---------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--yellow);
}

.site-header :focus-visible,
.site-footer :focus-visible,
.band--ink :focus-visible,
.summary-bar :focus-visible {
  outline-color: var(--surface);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* -------------------------------------------------------------------------
   6. Document chrome
   The header carries identity, navigation and the signed-in actor. On a phone
   the nav drops to its own scrollable row rather than hiding behind a toggle:
   a menu that needs JavaScript is a menu that fails at the trade counter.
   ---------------------------------------------------------------------- */

.site-header {
  background: var(--ink);
  color: var(--surface);
  border-bottom: 2px solid var(--yellow);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--surface);
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  white-space: nowrap;
}

.brand__mark {
  width: 10px;
  height: 20px;
  background: var(--yellow);
  flex: 0 0 auto;
}

.brand__word em {
  font-style: normal;
  font-weight: 400;
  color: var(--hairline-strong);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-header[data-workspace="staff"] { position: relative; }
.site-header[data-workspace="staff"] .site-header__inner { flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-header[data-workspace="staff"] .site-nav { order: 3; flex: 1 0 100%; width: 100%; flex-wrap: wrap; overflow: visible; gap: var(--space-2) var(--space-4); border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
.site-header[data-workspace="staff"] .site-nav a { min-height: 44px; display: inline-flex; align-items: center; white-space: normal; }
.site-header[data-workspace="staff"] .site-actor { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.site-header[data-workspace="staff"] .site-actor__name { overflow-wrap: anywhere; white-space: normal; }

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  color: #cfcfcf;
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--surface);
}

.site-nav a[aria-current="page"] {
  color: var(--surface);
  border-bottom-color: var(--surface);
}

.site-actor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.site-actor__who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
  min-width: 0;
}

.site-actor__name {
  color: var(--surface);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Truncates for the same reason the name above it does. "Approved trade
   account · Boksburg Safety Supplies" is longer than a phone masthead, and
   `.site-actor` is `nowrap`, so without this the line runs out of its own box
   and under the sign-out button. */
.site-actor__meta {
  color: var(--hairline-strong);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-actor form {
  margin: 0;
}

.site-link {
  color: var(--surface);
  text-decoration: none;
  border: 1px solid #4a4a4a;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: var(--fs-sm);
}

.site-link:hover {
  border-color: var(--surface);
  color: var(--surface);
}

.site-footer {
  border-top: var(--line-1);
  background: var(--card);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer a {
  color: var(--ink-3);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Operational pages use the available screen; prose and forms stay readable.
 * The grid owns horizontal overflow, so the page never needs a fixed width. */
.page[data-layout="app"] {
  max-width: none;
  padding-inline: clamp(12px, 1.6vw, 32px);
  min-width: 0;
}

body:has(.page[data-layout="app"]) .site-header__inner,
body:has(.page[data-layout="app"]) .site-footer__inner {
  max-width: none;
  padding-inline: clamp(12px, 1.6vw, 32px);
}

/* The storefront lays out its own bands; other surfaces get the container. */
.page[data-layout="flush"] {
  max-width: none;
  padding: 0;
}

.page[data-layout="prose"] {
  max-width: var(--measure-prose);
}

/* A single narrow column, centred on both axes. Sign-in, password reset and
   the trade application are one short form each; stranding them in the
   top-left of a 1,460px page is what made the sign-in screen look broken. */
.page[data-layout="form"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(var(--measure-form) + var(--space-8));
  padding: var(--space-7) var(--space-4) var(--space-8);
}

/* -------------------------------------------------------------------------
   7. Media
   Photographs are `contain`, never `cover`: cropping a toe cap out of frame
   is exactly the detail this catalogue is selling.
   ---------------------------------------------------------------------- */

.media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-bottom: var(--line-1);
  overflow: hidden;
}

.media img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Catalogue photographs are studio shots with a wide white margin baked in.
   In a card that margin is dead space, so the card crops to fill and the boot
   arrives at a scannable size. The product page does the opposite: it contains
   the whole photograph, because that is the page where a buyer is checking the
   toe cap and the sole, and a crop there would hide the thing being bought. */
.media--card {
  aspect-ratio: 4 / 3;
}

.media--card img {
  object-fit: cover;
  object-position: center;
}

/* The hero is the one box that CONTAINS the photograph rather than cropping it,
   so it is the one box whose fill the photograph's own backdrop has to meet.
   Every approved shot is cut out on white; against the card grey the shot read
   as a white rectangle sitting inside a grey square, with a hard seam across
   the frame that looked like a rendering fault. White on white has no seam. */
.media--hero {
  aspect-ratio: 1 / 1;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
}

.media--hero img {
  object-fit: contain;
}

/* No photograph yet. Say so, rather than showing an empty grey rectangle that
   reads as "this product looks like nothing". */
.media--empty {
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    rgba(0, 0, 0, 0.035) 10px 20px
  );
  color: var(--muted);
  text-align: center;
}

.media__code {
  font-family: var(--mono);
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.media__note {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Row thumbnail: the single highest-impact element in the ordering grid and
   the cart. Fixed square so rows keep their rhythm whatever the photograph. */
.thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--thumb);
  height: var(--thumb);
  flex: 0 0 auto;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb--empty {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.1;
  color: var(--muted);
  text-align: center;
  padding: 2px;
  word-break: break-all;
}

.row-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* -------------------------------------------------------------------------
   8. Product cards
   ---------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card {
  display: flex;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) linear;
}

.product-card:hover {
  border-color: var(--ink);
}

.product-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1 1 auto;
}

.product-card__body .eyebrow {
  margin: 0;
}

.product-card__title {
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.product-card:hover .product-card__title {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
}

.product-card__colour {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-md);
}

.product-card__colour .code {
  margin-left: auto;
}

.product-card__facts {
  display: flex;
  gap: var(--space-4);
  margin: auto 0 0;
  padding-top: var(--space-2);
  border-top: var(--line-1);
}

.product-card__facts > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-card__facts dt {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-card__facts dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   9. Product page
   ---------------------------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.product__media {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.product__colours {
  margin-top: var(--space-4);
}

.product__detail h1 {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--space-2);
}

.product__colourway {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}

.product__detail .marks {
  margin-bottom: var(--space-4);
}

.product__detail .actions {
  margin-top: var(--space-5);
}

.price-band {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  border-top: 2px solid var(--ink);
  border-bottom: var(--line-1);
  padding: var(--space-3) 0;
  margin: 0 0 var(--space-4);
}

.price-band__value {
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-band__label {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* THE RETAIL BUY BOX.
   A member of the public buying one pair should never have to meet the size
   grid, so the product page carries this instead: pick a size, type a number,
   add it. It sits directly under the price it charges, boxed and tinted, so it
   reads as the one thing on the page that does something rather than as another
   paragraph of specification.

   The row wraps rather than shrinking: on a phone the size selector is the full
   width, the quantity sits under it, and the button is last — which is the order
   the decision is actually made in. */
.buy-box {
  border: var(--line-1);
  border-left: 3px solid var(--ink);
  background: var(--card);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0 0 var(--space-4);
}

.buy-box__title {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.buy-box__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.buy-box__row .field {
  flex: 1 1 14rem;
  margin: 0;
}

/* Pairs is at most three digits. A box the width of the size selector invites
   somebody to think it wants something longer than "2". */
.buy-box__row .field--narrow {
  flex: 0 0 6rem;
}

.field--narrow input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A specification list, not a table: these are label/value pairs, and a table
   of two columns is a list wearing a costume. */
.facts {
  margin: 0 0 var(--space-4);
  border-top: var(--line-1);
}

.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--line-1);
}

.fact dt {
  font-family: var(--display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fact dd {
  margin: 0;
  font-size: var(--fs-md);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   10. Swatches and colour chips
   The chip colours approximate the colour code so a row of variants can be
   scanned. They are never the only label: the name is always beside them.
   ---------------------------------------------------------------------- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: var(--line-1);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}

.swatch:hover,
.swatch[aria-current="page"] {
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--yellow);
}

.chip {
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-3);
  flex: 0 0 auto;
  background: var(--muted);
}

/* Sampled from the photographs, not guessed: the Shark's blue is a bright
   royal, its red a signal red, the black/grey a warm mid grey. */
.chip[data-colour="GRY"] { background: linear-gradient(135deg, #1a1a1a 0 50%, #7d8187 50% 100%); }
.chip[data-colour="BLU"] { background: #1f63d6; }
.chip[data-colour="RED"] { background: #d0202a; }
.chip[data-colour="WHT"] { background: #ffffff; border-color: var(--hairline-strong); }
.chip[data-colour="BLK"] { background: #0b0b0b; }
.chip[data-colour="BRN"] { background: #6b4a2b; }
.chip[data-colour="GRO"] { background: linear-gradient(135deg, #6f7378 0 50%, #ef7d1a 50% 100%); }

/* -------------------------------------------------------------------------
   11. Compliance marks and status pills
   NRCS and SABS are why a safety buyer picks one boot over another
   (docs/brand-identity.md), so they are a component, not a sentence.
   ---------------------------------------------------------------------- */

.marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  color: var(--teal);
  background: var(--teal-wash);
  padding: 2px var(--space-2);
  min-height: 24px;
}

.mark::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  flex: 0 0 auto;
}

.mark--muted {
  border-color: var(--hairline);
  color: var(--muted);
  background: var(--surface);
}

.band--ink .mark {
  background: transparent;
  border-color: var(--surface);
  color: var(--surface);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 1px var(--space-2);
  min-height: 22px;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  flex: 0 0 auto;
}

.pill--in,
.pill--ok {
  color: var(--teal);
  background: var(--teal-wash);
}

.pill--low,
.pill--warn {
  color: var(--warn);
  background: var(--warn-wash);
}

.pill--out,
.pill--bad {
  color: var(--danger);
  background: var(--danger-wash);
}

.pill--unknown,
.pill--idle {
  color: var(--muted);
  background: var(--card);
}

/* A badge is a label without a state: a reference, a count, a category. */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-2);
  padding: 2px var(--space-2);
}

/* -------------------------------------------------------------------------
   12. Data tables
   The densest thing in the system. Sticky header and frozen first column so
   the sizes across the top and the identity down the left survive any scroll
   — the pattern every wholesale size-run grid uses, for the same reason.
   ---------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

/* Give the pane a height and the sticky header has something to stick to. */
.table-scroll--pane {
  overflow: auto;
  max-height: calc(100vh - 260px);
  min-height: 220px;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  border: 0;
  border-bottom: var(--line-1);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-bottom: 0;
}

/* Money and counts go right, and they go right harder than the table's own
   left default — a class that loses to an element selector is a class that
   silently centres a rand value. */
.data-table th.numeric,
.data-table td.numeric {
  text-align: right;
}

.data-table tbody tr:hover {
  background: var(--card);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table--zebra tbody tr:nth-child(even) {
  background: var(--card);
}

.data-table tfoot th,
.data-table tfoot td {
  background: var(--card);
  font-weight: 600;
  border-top: 2px solid var(--ink);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Frozen identity column. The first cell of every row keeps its own
   background so the size cells slide underneath it, not through it. */
.data-table--frozen thead th:first-child,
.data-table--frozen tbody th:first-child,
.data-table--frozen tfoot th:first-child,
.data-table--frozen .identity {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  text-align: left;
  box-shadow: var(--shadow-frozen);
}

.data-table--frozen thead th:first-child {
  z-index: 4;
  background: var(--ink);
}

.data-table--frozen tfoot th:first-child {
  background: var(--card);
}

/* A figure never breaks across lines. "R 2,898.00" wrapping after the R — as
   it did in the exceptions table, where the value column is the narrowest —
   reads as two numbers, and a buyer who has to reassemble an amount does not
   trust it. If the column is too narrow the table scrolls; the number does
   not fold. */
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.num-strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The public size run. Same bones as the ordering grid so the two read as one
   system: size down the left, availability in words, money on the right. */
.run {
  min-width: 460px;
}

.run .size {
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  width: 1%;
  white-space: nowrap;
}

.run tr[data-state="out"] {
  color: var(--muted);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    rgba(0, 0, 0, 0.035) 6px 12px
  );
}

/* -------------------------------------------------------------------------
   13. The ordering grid
   Classes owned by src/views/grid.ts. Styled here so the grid inherits the
   system rather than carrying a second one.
   ---------------------------------------------------------------------- */

.size-grid-form {
  margin: 0;
}

.grid-scroll {
  overflow: auto;
  max-height: calc(100vh - 280px);
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.grid-scroll:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

table.size-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

table.size-grid th,
table.size-grid td {
  border: 0;
  border-bottom: var(--line-1);
  border-right: var(--line-1);
  padding: var(--space-2);
  vertical-align: middle;
}

table.size-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

table.size-grid th.identity {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  text-align: left;
  min-width: 230px;
  max-width: 280px;
  box-shadow: var(--shadow-frozen);
}

table.size-grid thead th.identity {
  z-index: 4;
  background: var(--ink);
  color: var(--surface);
}

table.size-grid tbody tr:hover td {
  background: var(--card);
}

table.size-grid tbody th.identity {
  border-right: 2px solid var(--ink);
}

table.size-grid tfoot th.identity,
table.size-grid tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--card);
  font-weight: 600;
  border-top: 2px solid var(--ink);
}

.identity .style-name {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.15;
}

.identity .colourway {
  display: block;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.identity .sku,
.identity .terms {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.identity .marks {
  display: block;
  font-size: var(--fs-xs);
  color: var(--teal);
  letter-spacing: 0.04em;
}

/* The unit price a buyer orders against. Right-aligned, tabular, never
   centred, and quiet enough not to compete with the quantity they are typing. */
.identity .unit-price,
.unit-price {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.size-head {
  min-width: 52px;
}

.qty-cell {
  text-align: right;
  padding: var(--space-1);
}

.qty {
  width: 100%;
  min-width: 44px;
  max-width: 72px;
  min-height: 36px;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}

.qty:hover {
  border-color: var(--ink-3);
}

.qty[value]:not([value=""]) {
  font-weight: 600;
}

.qty-cell.sold-out {
  background: var(--sunk);
}

.qty-cell.blocked {
  background: var(--sunk);
  color: var(--muted);
  text-align: center;
}

.qty-cell.invalid {
  background: var(--danger-wash);
  box-shadow: inset 0 0 0 2px var(--danger);
}

.avail {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cell-note {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--danger);
}

.row-pairs,
.row-cartons {
  font-weight: 600;
  background: var(--card);
}

.row-notes {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.row-note {
  border-left: 3px solid var(--danger);
  background: var(--danger-wash);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
}

.paste {
  margin: var(--space-3) 0;
}

/* -------------------------------------------------------------------------
   14. The sticky summary bar
   Pairs, cartons, value and the commit action, always on screen. A buyer
   should never scroll to find out what they are about to spend.
   ---------------------------------------------------------------------- */

.summary-bar,
.totals {
  position: sticky;
  bottom: 0;
  z-index: var(--z-summary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  background: var(--ink);
  color: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  box-shadow: var(--shadow-sticky);
}

.summary-bar__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  flex: 1 1 auto;
}

.summary-bar__actions {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  align-items: center;
}

.figure {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}

.figure__label,
.totals .unit {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hairline-strong);
}

.figure__value,
.totals .figure b {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.figure--grand .figure__value,
.totals .grand b {
  color: var(--yellow);
}

/* -------------------------------------------------------------------------
   15. Cards, panels, steps, callouts
   ---------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
}

.card:hover {
  border-color: var(--hairline-strong);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line-1);
  background: var(--card);
}

.card__title {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
}

.card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: var(--line-1);
  padding-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.panel {
  background: var(--card);
  border: var(--line-1);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
}

.step {
  padding: var(--space-4);
  border-left: var(--line-1);
}

.step:first-child {
  border-left: none;
}

.step h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-1);
}

.step p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

.step__number {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.callout {
  border: var(--line-1);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.callout__text {
  max-width: 68ch;
}

.callout h2,
.callout h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xl);
}

.callout p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   16. Forms
   Label above field, hint under the label, error under the field and tied to
   it. A trade application is a long form and a long form is where a system
   loses people.
   ---------------------------------------------------------------------- */

.form {
  max-width: 34rem;
}

.field,
.fieldrow {
  display: block;
  margin: 0 0 var(--space-4);
  max-width: 34rem;
}

.field__label,
.fieldrow label {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--ink);
}

.field__hint,
.fieldrow .muted {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 var(--space-1);
}

.field input,
.field select,
.field textarea,
.fieldrow input,
.fieldrow select,
.fieldrow textarea,
.input,
.select {
  width: 100%;
  border: var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 10px;
  min-height: 40px;
  font-family: var(--body);
  font-size: var(--fs-base);
}

.field__error,
.fieldrow .violation {
  display: block;
  margin: var(--space-1) 0 0;
  padding: 4px 8px;
  border-left: 3px solid var(--danger);
  background: var(--danger-wash);
  color: var(--ink);
  font-size: var(--fs-sm);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--danger);
  background: var(--danger-wash);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.checkbox-row input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--line-1);
}

/* The sign-in screen. A single card on a calm page, not a paragraph stranded
   in the top-left corner. Use with page({ layout: "form" }). */
.auth-card {
  width: 100%;
  max-width: var(--measure-form);
  margin: 0 auto;
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-5);
}

.auth-card__head {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}

.auth-card__head h1 {
  font-size: var(--fs-2xl);
  margin: 0;
}

.auth-card .form,
.auth-card .field,
.auth-card .fieldrow {
  max-width: none;
}

.signout {
  margin-top: var(--space-6);
}

/* -------------------------------------------------------------------------
   17. Feedback
   ---------------------------------------------------------------------- */

.banner {
  border: var(--line-1);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.banner h2,
.banner h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
}

.banner ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--fs-md);
}

.banner--info {
  border-left-color: var(--teal);
  background: var(--teal-wash);
}

.banner--success {
  border-left-color: var(--ok);
  background: var(--ok-wash);
}

.banner--warn {
  border-left-color: var(--warn);
  background: var(--warn-wash);
}

/* Anything announced as an alert is a problem; it should not have to opt in. */
.banner--error,
.banner[role="alert"] {
  border-left-color: var(--danger);
  background: var(--danger-wash);
}

.banner[hidden] {
  display: none;
}

.notice {
  border-left: 3px solid var(--teal);
  background: var(--teal-wash);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
}

.violation {
  border-left: 3px solid var(--danger);
  background: var(--danger-wash);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}

.empty-state {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
}

.empty-state__title {
  font-family: var(--display);
  font-size: var(--fs-xl);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.empty-state__note {
  margin: 0 auto var(--space-4);
  max-width: 52ch;
  font-size: var(--fs-md);
}

/* -------------------------------------------------------------------------
   17b. Cart, checkout and confirmation
   Classes already emitted by src/views/cart.ts, checkout.ts and portal.ts.
   They are styled here so those surfaces can drop their private CSS and
   inherit the system instead of maintaining a second one.
   ---------------------------------------------------------------------- */

.checkout-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-6);
  align-items: start;
}

.line-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.line-table th,
.line-table td {
  border: 0;
  border-bottom: var(--line-1);
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

.line-table thead th {
  background: var(--card);
  font-family: var(--display);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
}

.line-table th.numeric,
.line-table td.numeric {
  text-align: right;
}

.summary-panel {
  border: var(--line-1);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-4);
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.reference {
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}

.right {
  text-align: right;
}

@media (max-width: 900px) {
  .checkout-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-panel {
    position: static;
  }
}

/* -------------------------------------------------------------------------
   18. Responsive
   Breakpoints follow the content: the product page stacks when the size table
   would be squeezed, the grid loosens its tap targets on a phone, and the
   identity column stays frozen at every width.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .product__media {
    position: static;
    max-width: 420px;
  }

  .step {
    border-left: none;
    border-top: var(--line-1);
  }

  .step:first-child {
    border-top: none;
  }

  .site-header {
    position: static;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
  }

  .site-nav {
    order: 3;
    width: 100%;
    border-top: 1px solid #2e2e2e;
    padding-top: 2px;
  }

  .site-actor__who {
    max-width: 46vw;
  }
}

@media (max-width: 560px) {
  .band {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .page-head h1,
  .product__detail h1 {
    font-size: var(--fs-2xl);
  }

  .lede {
    font-size: var(--fs-base);
  }

  .actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
  }

  .product-card__title {
    font-size: var(--fs-lg);
  }

  /* Fingers, not cursors. */
  .qty {
    min-height: 44px;
    max-width: none;
  }

  .swatch {
    min-height: 44px;
  }

  .summary-bar,
  .totals {
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
  }

  .summary-bar__actions {
    width: 100%;
  }

  .summary-bar__actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .figure__value,
  .totals .figure b {
    font-size: var(--fs-xl);
  }

  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* Product evidence stays beside the product instead of being hidden in a
   general downloads page. The video keeps its native aspect ratio and never
   grows wider than the document column. */
.product-resources {
  scroll-margin-top: var(--space-6);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.resource-panel {
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}

.resource-panel h3 {
  margin-top: 0;
}

.resource-panel video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--ink);
}

.insole-explorer {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, #fff 0%, var(--sunk) 100%);
}

.insole-explorer > img { width: 100%; max-height: 520px; object-fit: contain; }
.insole-layers { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.insole-layers details { border: 1px solid var(--hairline); background: #fff; padding: var(--space-3); }
.insole-layers summary { cursor: pointer; font-weight: 700; }
.insole-layers details[open] { border-left: 4px solid var(--yellow); }
.packaging-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.resource-panel--missing { border-style: dashed; background: var(--sunk); }
.prebook-head { margin-bottom: var(--space-5); }
.prebook-matrix { display: grid; gap: var(--space-4); padding-bottom: 92px; }
.prebook-controls { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); padding: var(--space-4); }
.prebook-month { min-width: min(100%, 430px); padding: 0; border: 0; }
.prebook-month legend, .prebook-quick > span { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prebook-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.prebook-months label { position: relative; cursor: pointer; }
.prebook-months input { position: absolute; opacity: 0; pointer-events: none; }
.prebook-months span { display: grid; place-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: #fff; font-weight: 700; }
.prebook-months label:has(input:checked) span { border-color: var(--yellow-deep); background: #fff7c7; box-shadow: inset 0 0 0 1px var(--yellow-deep); }
.prebook-months label:focus-within span { outline: 3px solid var(--focus); outline-offset: 2px; }
.prebook-quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.prebook-quick > span { flex-basis: 100%; text-align: right; }
.prebook-table-panel { padding: 0; overflow: hidden; }
.prebook-table { width: 100%; min-width: 1030px; border-collapse: separate; border-spacing: 0; }
.prebook-table th, .prebook-table td { padding: var(--space-3); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.prebook-table thead th { position: sticky; top: 0; z-index: 2; background: var(--ink); color: #fff; font-size: var(--fs-sm); }
.prebook-table tbody tr:nth-child(even) { background: var(--sunk); }
.prebook-table .prebook-product { position: sticky; left: 0; z-index: 1; width: 190px; background: inherit; box-shadow: 1px 0 0 var(--hairline-strong); }
.prebook-product > div { display: flex; align-items: center; gap: var(--space-3); }
.prebook-product .thumb { flex: 0 0 48px; }
.prebook-product strong, .prebook-product small { display: block; }
.prebook-product small { margin-top: var(--space-1); color: var(--muted); }
.prebook-pack-cell { width: 280px; }
.prebook-pack-cell > label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.prebook-pack-cell > label span { color: var(--muted); font-size: var(--fs-xs); }
.prebook-qty { display: grid; grid-template-columns: 38px 64px 38px; gap: var(--space-1); width: max-content; margin: var(--space-2) 0; }
.qty-step { min-height: 38px; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: #fff; font-size: var(--fs-lg); font-weight: 800; cursor: pointer; }
.qty-step:hover { border-color: var(--teal); color: var(--teal-deep); }
.prebook-pack-qty { width: 64px; min-height: 38px; padding: var(--space-1); text-align: center; font-weight: 800; }
.pack-curve, .pack-unit-price, .pack-line-total { display: block; margin-top: var(--space-1); }
.pack-curve { color: var(--muted); font-size: 11px; white-space: nowrap; }
.pack-unit-price { color: var(--teal-deep); font-size: var(--fs-xs); }
.pack-line-total { font-variant-numeric: tabular-nums; }
.prebook-insole { width: 170px; }
.prebook-insole label, .prebook-insole small { display: block; }
.prebook-insole input { width: 84px; margin: var(--space-2) 0; }
.prebook-insole small { color: var(--muted); font-size: 11px; }
.prebook-row-summary { width: 120px; text-align: right !important; }
.prebook-row-summary strong, .prebook-row-summary span, .prebook-row-summary small { display: block; }
.prebook-row-summary strong { font-family: var(--display); font-size: var(--fs-xl); }
.prebook-row-summary span, .prebook-row-summary small { color: var(--muted); font-size: var(--fs-xs); }
.prebook-table-panel > .hint { margin: 0; padding: var(--space-3) var(--space-4); background: #fffbed; }
.return-calculator { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, .65fr); gap: var(--space-4) var(--space-6); align-items: end; border-left: 5px solid var(--teal); }
.return-calculator h2 { margin: var(--space-1) 0 var(--space-2); }
.return-calculator label { display: grid; gap: var(--space-2); font-weight: 800; }
.return-calculator input { min-height: 46px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.return-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: var(--space-2); margin: 0; }
.return-results > div { padding: var(--space-3); border: 1px solid var(--hairline); background: var(--sunk); }
.return-results dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.return-results dd { margin: var(--space-1) 0 0; font-family: var(--display); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.return-calculator > .hint { grid-column: 1 / -1; margin: 0; }
.prebook-summary { position: sticky; bottom: var(--space-2); z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(92px, auto)) minmax(150px, 1fr) minmax(210px, 1.2fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 4px solid var(--yellow); background: var(--ink); color: #fff; box-shadow: 0 -10px 30px rgb(0 0 0 / .18); }
.prebook-summary > div span, .prebook-summary > div strong { display: block; }
.prebook-summary > div span { color: #bfc4c1; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.prebook-summary > div strong { margin-top: 2px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.prebook-summary__grand strong { color: var(--yellow); font-size: var(--fs-xl) !important; }
.prebook-summary__message { color: #d8dbd9; font-size: var(--fs-xs); line-height: 1.35; }
.prebook-summary .btn { justify-self: end; white-space: nowrap; }

.supply-proof__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.supply-proof__inner > div { max-width: 70ch; }
.supply-proof__inner h2 { margin: var(--space-2) 0; }
.location-search { padding: var(--space-5); background: var(--sunk); border: 1px solid var(--hairline); }
.location-search > div { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.location-search input { flex: 1; min-width: 0; }
.location-group { margin-top: var(--space-6); }
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; }
.location-grid > li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hairline); background: #fff; scroll-margin-top: var(--space-6); }
.location-grid > li small { display: block; color: var(--muted); margin-top: var(--space-1); }
.location-pin { color: var(--teal); }
.location-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-7); }
.stockist-map { height: min(68vh, 620px); min-height: 480px; margin: var(--space-5) 0; overflow: hidden; border: 1px solid var(--hairline-strong); background: #dcebe8; }
.stockist-map__fallback { padding: var(--space-5); }
.stockist-map-data { display: none; }
.stockist-marker { background: transparent; border: 0; }
.stockist-marker__label { display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff; border-radius: var(--radius); background: var(--teal); color: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .35); font-size: var(--fs-xs); font-weight: 800; }
.stockist-marker__label::after { content: ""; position: absolute; left: 9px; top: 24px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--teal); }
.leaflet-popup-content strong { display: block; font-family: var(--display); font-size: var(--fs-lg); }
.leaflet-popup-content p { margin: var(--space-1) 0 var(--space-2); }
.stockist-map-popup__names { display: grid; gap: var(--space-2); min-width: 210px; margin: var(--space-2) 0 var(--space-3); padding: 0; list-style: none; }
.stockist-map-popup__names li { display: grid; gap: 1px; border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
.stockist-map-popup__names strong { font-size: var(--fs-base); }
.stockist-map-popup__names a { font-size: var(--fs-sm); }
.leaflet-control-attribution { font-size: 10px; }
.stockist-names { display: grid; gap: var(--space-2); list-style: none; padding: var(--space-3) 0 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--hairline); }
.stockist-names li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); }
.stockist-names li strong { color: var(--ink); }
.stockist-names li span { grid-column: 1; color: var(--teal-deep); font-size: var(--fs-xs); }
.stockist-names li a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-sm); }
.stockist-join { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-7); border-left: 5px solid var(--yellow); background: var(--ink); color: #fff; }
.stockist-join .eyebrow { color: var(--yellow); }
.stockist-join h2, .stockist-join p { margin-bottom: var(--space-1); }
.stockist-join p { max-width: 70ch; color: #d8d8d8; }

.resource-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.resource-images a {
  display: grid;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.resource-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
}

.shark-poster-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-block: var(--space-6);
  border-top: 4px solid var(--yellow);
}

.shark-poster-download > div {
  flex: 1 1 20rem;
  min-width: 0;
}

.shark-poster-download > .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.kestrel-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.kestrel-size-grid label {
  display: grid;
  gap: var(--space-2);
  font-weight: 700;
}

.kestrel-size-grid input {
  width: 100%;
  min-height: 48px;
  text-align: center;
  font-size: var(--fs-lg);
}

.payment-set {
  border-color: var(--yellow);
  background: #fffbed;
}

.checkout-confirmation {
  margin-bottom: var(--space-5);
  border-left: 4px solid var(--yellow);
}

@media (max-width: 760px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .insole-explorer, .packaging-grid { grid-template-columns: 1fr; }
  .prebook-controls { align-items: stretch; flex-direction: column; }
  .prebook-month { width: 100%; }
  .prebook-quick { justify-content: flex-start; }
  .prebook-quick > span { text-align: left; }
  .prebook-summary { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .return-calculator { grid-template-columns: 1fr; }
  .return-results { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prebook-summary__message, .prebook-summary .btn { grid-column: 1 / -1; justify-self: stretch; }
  .prebook-matrix { padding-bottom: 0; }
  /* Keep pack controls on-screen on phones instead of a wide spreadsheet. */
  .prebook-table { min-width: 0; width: 100%; }
  .prebook-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prebook-table tbody { display: grid; gap: 16px; }
  .prebook-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--paper, #fff); }
  .prebook-table .prebook-product { position: static; width: auto; border-bottom: 1px solid var(--hairline); padding: 16px; }
  .prebook-table .prebook-pack-cell, .prebook-table .prebook-insole, .prebook-table .prebook-row-summary { width: auto; border-right: 0; padding: 16px; }
  .prebook-table .prebook-pack-cell { border-bottom: 1px solid var(--hairline); }
  .prebook-table .prebook-row-summary { text-align: left; background: #f3f4ee; }
  .prebook-qty { grid-template-columns: 44px 72px 44px; }
  .prebook-qty button, .prebook-qty .prebook-pack-qty { min-height: 44px; }
  .prebook-quick .btn { min-height: 44px; }
  .supply-proof__inner, .location-contact, .stockist-join, .location-search > div { align-items: stretch; flex-direction: column; }
  .stockist-map { min-height: 360px; }
}

/* -------------------------------------------------------------------------
   19. Motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   20. Print
   Order confirmations get printed and filed against a purchase order, so the
   printed page has to be a document: no chrome, no sticky anything, tables
   that keep their rules and do not break across a row.
   ---------------------------------------------------------------------- */

@media print {
  :root {
    --hairline: #999999;
    --muted: #444444;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .site-header,
  .site-footer,
  .site-nav,
  .site-actor,
  .skip-link,
  .actions,
  .form-actions,
  .summary-bar__actions,
  .crumbs,
  .paste,
  .btn,
  button {
    display: none !important;
  }

  .page,
  .page[data-layout="form"],
  .page[data-layout="prose"] {
    max-width: none;
    padding: 0;
    display: block;
  }

  .band {
    padding: 0 0 12pt;
    border-bottom: none;
    background: none;
    color: #000000;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .summary-bar,
  .totals {
    position: static;
    background: none;
    color: #000000;
    border: 1pt solid #000000;
    box-shadow: none;
    padding: 8pt;
  }

  .figure__label,
  .totals .unit {
    color: #444444;
  }

  .figure--grand .figure__value,
  .totals .grand b {
    color: #000000;
  }

  .table-scroll,
  .table-scroll--pane,
  .grid-scroll {
    overflow: visible;
    max-height: none;
    border: none;
  }

  .data-table thead th,
  table.size-grid thead th {
    position: static;
    background: none;
    color: #000000;
    border-bottom: 1pt solid #000000;
  }

  .data-table--frozen .identity,
  table.size-grid th.identity {
    position: static;
    box-shadow: none;
    background: none;
  }

  .data-table tfoot th,
  .data-table tfoot td {
    position: static;
  }

  tr,
  .card,
  .panel,
  .callout,
  .banner {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .media--hero {
    max-width: 60mm;
  }

  .media--card,
  .thumb {
    display: none;
  }

  a[href]::after {
    content: "";
  }
}

/* Keep the visual refresh last in the cascade. The component rules above are
   intentionally complete fallbacks; these declarations are the authored
   finish for the live interface. */
.site-header {
  background: rgba(255, 254, 250, 0.96);
  color: var(--ink);
  border-top: 4px solid var(--yellow);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 8px 28px rgba(23, 25, 22, 0.06);
  backdrop-filter: blur(12px);
}

.site-header__inner { min-height: var(--header-h); }
.brand { color: var(--ink); gap: 10px; }
.brand__mark { width: 8px; height: 32px; }
.brand__word em { color: var(--ink-3); }
.site-nav a, .site-link, .site-actor__meta { color: var(--ink-3); }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-link:hover, .site-actor__name { color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--yellow-deep); }
.site-header :focus-visible { outline-color: var(--ink); }
.site-header .btn--on-ink {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: transparent;
}
.site-header .btn--on-ink:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--card);
}

.protection-cutaway {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: var(--space-6);
  padding: clamp(24px, 4vw, 56px);
  overflow: hidden;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius);
}

.protection-cutaway figure { margin: 0; min-width: 0; }
.protection-cutaway figure img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.34));
}
.protection-cutaway figcaption { margin-top: var(--space-2); color: #aeb1a9; font-size: var(--fs-xs); }
.protection-cutaway .eyebrow { color: var(--yellow); }
.protection-cutaway h3 { margin: 0 0 var(--space-3); max-width: 12ch; font-size: clamp(32px, 4vw, 52px); line-height: 1; }
.protection-cutaway__copy > p:not(.eyebrow):not(.note) { color: #d7d7d0; }
.protection-facts { margin: var(--space-5) 0; }
.protection-facts > div { padding: var(--space-3) 0; border-top: 1px solid #444740; }
.protection-facts dt { font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; }
.protection-facts dd { margin: var(--space-1) 0 0; color: #bec1b9; }
.protection-cutaway .note { color: #d7d7d0; border-color: var(--yellow); }

.reseller-margin { background: var(--surface); }
.margin-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.margin-story article { min-width: 0; padding: clamp(22px, 3vw, 36px); background: var(--surface); }
.margin-story__number { display: block; margin-bottom: var(--space-6); font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.margin-story h3 { margin: 0 0 var(--space-2); font-size: var(--fs-2xl); }
.margin-story p { margin: 0; color: var(--ink-3); }
.margin-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-5); padding: clamp(24px, 4vw, 44px); background: var(--card); border-left: 5px solid var(--yellow); }
.margin-callout > div { max-width: 66ch; }
.margin-callout h3 { margin: 0 0 var(--space-2); font-size: clamp(26px, 3vw, 38px); }
.margin-callout p { margin-bottom: 0; }

@media (max-width: 760px) {
  .protection-cutaway, .margin-story { grid-template-columns: 1fr; }
  .protection-cutaway { padding: var(--space-4); }
  .protection-cutaway h3 { max-width: none; }
  .margin-callout { align-items: stretch; flex-direction: column; }
}

.band {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.section-head {
  align-items: flex-end;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

.section-head h2 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.product-card {
  overflow: hidden;
  border-color: transparent;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(23,25,22,0.07);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--hairline);
  box-shadow: 0 22px 44px rgba(23,25,22,0.13);
}

.product-card .media--card {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  background: #ededed;
}

.product-card .media--card img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 2%;
  mix-blend-mode: multiply;
  filter: none;
  transition: transform var(--dur) ease;
}

.product-card:hover .media--card img { transform: scale(1.02); }
.product-card__body { gap: 10px; padding: 22px; }
.product-card__title { font-size: 25px; }
.product-card:hover .product-card__title { text-decoration: none; }
.product-card__facts { padding-top: 14px; margin-top: 8px; }

.product {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 84px);
}

.product__media > .media--hero {
  min-height: 520px;
  padding: clamp(24px, 4vw, 56px);
  border: 0;
  background: linear-gradient(145deg, #f2eee3, #e3dccb);
}

.product__media > .media--hero img { filter: drop-shadow(0 24px 24px rgba(23,25,22,0.18)); }
.product__detail h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.btn, button, input, select { min-height: 44px; }
.card, .panel, .auth-card, .buy-box, .summary-bar { box-shadow: 0 10px 28px rgba(23,25,22,0.055); }

@media (max-width: 720px) {
  .site-header { position: static; }
  .site-nav { border-top-color: var(--hairline); }
  .product-grid { grid-template-columns: 1fr; }
  .product__media > .media--hero { min-height: 360px; }
}

.site-header .btn--on-ink {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: transparent;
}

.site-header .btn--on-ink:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--card);
}

/* Trust strip: the four answers under the buy box, and the WhatsApp line. */
.trust {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}
.trust__item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trust__k {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.trust__v { font-size: var(--fs-md); color: var(--ink-2); }
.trust__item--ask { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.trust__hint { font-size: var(--fs-sm); color: var(--muted); }
.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  color: var(--teal-deep);
  background: var(--teal-wash);
  font-weight: 600;
  text-decoration: none;
}
.whatsapp:hover { background: var(--teal); color: var(--surface); }
.whatsapp__mark { width: 1.2em; height: 1.2em; flex: 0 0 auto; display: block; color: #25d366; }

/* Reviews: the number, the bars, the words. */
.reviews__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin: 0 0 var(--space-5);
}
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; }
.reviews__average { font-family: var(--display); font-size: var(--fs-4xl); font-weight: 700; line-height: 1; }
.reviews__of { font-size: var(--fs-sm); color: var(--muted); }
.stars { display: inline-flex; gap: 1px; color: var(--hairline-strong); font-size: 1.1em; line-height: 1; }
.stars__star--full { color: var(--yellow-deep); }
.stars__star--half { background: linear-gradient(90deg, var(--yellow-deep) 50%, var(--hairline-strong) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.histogram { display: grid; gap: 4px; }
.histogram__row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2em; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.histogram__label { color: var(--ink-2); white-space: nowrap; }
.histogram__bar { height: 8px; background: var(--sunk); border-radius: var(--radius); overflow: hidden; }
.histogram__fill { display: block; height: 100%; background: var(--yellow-deep); }
.histogram__count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.review { padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
.review__title { margin: 0; font-size: var(--fs-lg); }
.review__body { margin: 0 0 var(--space-2); color: var(--ink-2); }
.review__who { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.review__author { color: var(--ink); font-weight: 600; }
.review__verified { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius); background: var(--ok-wash); color: var(--ok); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.doc-totals__row--discount dd { color: var(--ok); }
.stat--discount .stat__value { color: var(--ok); }
.note--good { color: var(--ok); }
@media (max-width: 720px) {
  .reviews__summary { grid-template-columns: 1fr; gap: var(--space-4); }
  .trust { grid-template-columns: 1fr; }
}

/* Product pages need a little more breathing room than the global breakpoint
   gives them. At tablet widths the photograph and buy controls stack before
   either column becomes cramped or overlaps in embedded/mobile browsers. */
@media (max-width: 1100px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .product__media { position: static; width: min(100%, 680px); max-width: 680px; margin: 0 auto; }
  .product__media > .media--hero { min-height: 420px; }
}

@media (max-width: 560px) {
  .product { gap: var(--space-4); }
  .product__media > .media--hero { min-height: 300px; padding: 16px; }
  .product__detail h1 { font-size: clamp(30px, 8vw, 42px); }
  .buy-box { padding: 14px; }
  .buy-box__head { align-items: flex-start; }
  .buy-box__price { font-size: var(--fs-xl); }
  .buy-box__row { flex-wrap: wrap; gap: 10px; }
  .buy-box__row .field { flex: 1 1 100%; }
  .buy-box__row .btn--grow { flex: 1 1 calc(50% - 5px); min-width: 0; font-size: var(--fs-base); }
  .trust { grid-template-columns: 1fr; gap: var(--space-3); }
  .trust__item--ask { grid-column: 1; align-items: flex-start; flex-direction: column; gap: 8px; }
  .whatsapp { width: 100%; justify-content: center; min-height: 46px; }
  .trust__hint { padding-left: 2px; }
}

/* Masthead: search and basket on a retail deployment. */
.site-search { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-search input[type="search"] { min-height: 34px; padding: 4px 10px; font-size: var(--fs-md); width: 200px; max-width: 40vw; background: var(--ink-2); color: var(--surface); border-color: var(--hairline-strong); }
.site-search input[type="search"]::placeholder { color: var(--hairline-strong); }
.site-search + .site-actor { margin-left: 0; }
.site-basket { display: inline-flex; align-items: center; gap: 6px; color: var(--surface); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.site-basket__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius); background: var(--yellow); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; }
@media (max-width: 720px) {
  .site-search { order: 4; width: 100%; margin: 0; padding-bottom: var(--space-2); }
  .site-search input[type="search"] { flex: 1 1 auto; width: auto; max-width: none; }
}

/* Search page and range filters. */
.search-form { display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); max-width: 620px; }
.search-form input[type="search"] { flex: 1 1 auto; min-height: 44px; font-size: var(--fs-lg); }
.empty-state { padding: var(--space-6) var(--space-4); border: 1px dashed var(--hairline-strong); border-radius: var(--radius); background: var(--card); }
.empty-state h2, .empty-state h3 { margin-top: 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: var(--fs-md); }
.filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter-bar__label { font-family: var(--display); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 2px; }
.filter-bar a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.filter-bar a:hover { border-color: var(--ink); }
.filter-bar a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.filter-bar__count { margin: 0 0 0 auto; color: var(--muted); }

/* Home: reviews strip and the trade door. */
.review-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.review-strip__item { padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); }
.review-strip__body { margin: var(--space-2) 0; color: var(--ink-2); }
.review-strip__who { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.bulk-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.bulk-band__inner > div:first-child { max-width: 62ch; }
.bulk-band__inner p { margin: 0; }
.stars__star--none { color: var(--hairline-strong); }
.content-page .prose { max-width: 70ch; }
.content-page .prose h2 { margin-top: var(--space-6); }
.content-page .prose table { margin: var(--space-3) 0; }
.content-page .prose details { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); }
.content-page .prose summary { cursor: pointer; }
.contact-form { margin-top: var(--space-6); max-width: 560px; }
.banner--ok { border-left: 3px solid var(--ok); background: var(--ok-wash); padding: var(--space-3) var(--space-4); }
/* Also in the inline base sheet; here so every emitted class is accounted for. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Language switcher in the footer, and the product name on a general review. */
.site-lang { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.site-lang a { color: var(--ink-3); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.site-lang a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--yellow); font-weight: 600; }
.review__product { margin: 0 0 var(--space-1); font-family: var(--display); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ---- Inside the Shark: the exploded rendering with numbered callouts ---- */
.anatomy { background: var(--ink); color: var(--surface); overflow: hidden; }
.anatomy--product { background: var(--card); color: var(--ink); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.anatomy__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); grid-template-areas: "head head" "figure list" "figure facts" "insole insole" "cta cta"; gap: var(--space-4) clamp(24px, 5vw, 72px); align-items: start; }
.anatomy__head { grid-area: head; max-width: 60ch; }
.anatomy__head h2 { font-size: clamp(var(--fs-3xl), 4.2vw, 52px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 var(--space-2); }
.anatomy__lede { margin: 0; color: var(--hairline-strong); font-size: var(--fs-lg); }
.anatomy--product .anatomy__lede { color: var(--muted); }
.anatomy--product .eyebrow { color: var(--muted); }
.anatomy .eyebrow { color: var(--yellow); }
.anatomy__figure { grid-area: figure; position: relative; margin: 0; }
.anatomy__figure img { width: 100%; height: auto; display: block; }
/* Circles: the radius token rule allows only var(--radius), so the disc is a clip-path and the pulse is a scaling disc behind it. */
.anatomy__marker { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); }
.anatomy__marker > span { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--yellow); clip-path: circle(50% at 50% 50%); }
.anatomy__marker::before { content: ""; position: absolute; inset: -8px; background: rgba(251,205,10,.35); clip-path: circle(50% at 50% 50%); }
.anatomy__marker:hover > span, .anatomy__marker:focus-visible > span { background: var(--yellow-hi); }
@media (prefers-reduced-motion: no-preference) {
  .anatomy__marker::before { animation: anatomy-pulse 2.4s ease-out infinite; }
  .anatomy__marker:nth-child(3)::before { animation-delay: .4s; }
  .anatomy__marker:nth-child(4)::before { animation-delay: .8s; }
  .anatomy__marker:nth-child(5)::before { animation-delay: 1.2s; }
  @keyframes anatomy-pulse { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
}
.anatomy__caption { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--hairline-strong); text-transform: uppercase; letter-spacing: .08em; }
.anatomy--product .anatomy__caption { color: var(--muted); }
.anatomy__list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.anatomy__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: start; scroll-margin-top: 80px; }
.anatomy__item h3 { margin: 0 0 4px; font-size: var(--fs-xl); }
.anatomy__item p { margin: 0; color: var(--hairline-strong); font-size: var(--fs-md); }
.anatomy--product .anatomy__item p { color: var(--ink-2); }
.anatomy__item:target h3 { color: var(--yellow); }
.anatomy--product .anatomy__item:target h3 { color: var(--teal-deep); }
.anatomy__num { width: 40px; height: 40px; clip-path: circle(50% at 50% 50%); background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center; }
.anatomy__facts { grid-area: facts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.anatomy--product .anatomy__facts { border-top-color: var(--hairline); }
.anatomy__facts div { display: flex; flex-direction: column; gap: 2px; }
.anatomy__facts dt { font-family: var(--display); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--hairline-strong); }
.anatomy--product .anatomy__facts dt { color: var(--muted); }
.anatomy__facts dd { margin: 0; font-family: var(--display); font-size: var(--fs-xl); font-weight: 600; }
.anatomy__insole { grid-area: insole; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.anatomy__insole img { width: 100%; height: auto; display: block; }
.anatomy__insole h3 { margin: 0 0 var(--space-2); font-size: var(--fs-2xl); }
.anatomy__insole p { margin: 0; color: var(--ink-2); }
.anatomy__cta { grid-area: cta; display: flex; justify-content: flex-start; margin-top: var(--space-3); }
@media (max-width: 860px) {
  .anatomy__inner { grid-template-columns: 1fr; grid-template-areas: "head" "figure" "list" "facts" "insole" "cta"; }
  .anatomy__insole { grid-template-columns: 1fr; }
  .anatomy__marker { width: 34px; height: 34px; font-size: var(--fs-base); }
}

/* ---- Six colours, one shoe ---- */
.colour-strip { background: var(--surface); }
.colour-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.colour-strip__item a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease; }
.colour-strip__item a:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 16px 34px rgba(23,25,22,.12); }
.colour-strip__item img { width: 100%; max-width: 176px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.colour-strip__empty { display: block; width: 100%; max-width: 176px; aspect-ratio: 1 / 1; background: var(--sunk); border-radius: var(--radius); }
.colour-strip__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; }
.colour-strip__item--current a { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---- Product page: image swatches ---- */
.swatches--images { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch--image { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); font-size: var(--fs-xs); }
.swatch--image img { width: 64px; height: 64px; object-fit: contain; }
.swatch--image .chip--large { width: 64px; height: 64px; border-radius: var(--radius); }
.swatch--image:hover { border-color: var(--ink); }
.swatch--current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch__name { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ---- Sticky "pick a size" bar on phones ---- */
.buy-bar { display: none; }
@media (max-width: 720px) {
  .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--ink); color: var(--surface); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
  .buy-bar__price { font-size: var(--fs-md); }
  .buy-bar__price strong { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 700; margin-right: 4px; }
  .buy-bar .btn { min-height: 44px; }
  body:has(.buy-bar) { padding-bottom: 72px; }
  #buy { scroll-margin-top: 72px; }
}
.btn--large { min-height: 48px; padding: 0 22px; font-size: var(--fs-lg); }

/* Phones: the product page is one column, media first, whatever earlier rules say. */
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .product__media { max-width: none; }
  .buy-bar__price strong { font-size: var(--fs-xl); }
}

/* ---- Checkout: the honest payment line and the province select ---- */
.checkout-pay-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--teal); background: var(--teal-wash); color: var(--ink-2); font-size: var(--fs-md); }
.field select { width: 100%; min-height: 44px; }

/* ---- Five stars, in their words ---- */
.five-star { background: var(--yellow); color: var(--ink); }
.five-star .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.five-star .stars { color: var(--ink); }
.five-star .stars__star--full { color: var(--ink); }
.five-star .section-head { border-bottom-color: rgba(0,0,0,.18); }
.five-star .section-head__meta a { color: var(--ink); }
.five-star__track { list-style: none; margin: 0; padding: 4px 0 var(--space-3); display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.five-star__card { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; background: var(--surface); border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.five-star__card blockquote { margin: 0; }
.five-star__quote { margin: 0 0 var(--space-3); font-family: var(--display); font-size: var(--fs-xl); line-height: 1.25; }
.five-star__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }
.five-star__author { color: var(--ink); font-weight: 600; }
.five-star__product { width: 100%; font-family: var(--display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.reviews-filter { display: flex; gap: var(--space-2); padding-top: var(--space-5); }
.reviews-filter a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.reviews-filter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* ---- The retail range's colours ---- */
.chip[data-colour="CAM"] { background: linear-gradient(135deg, #5b6b3a 0 40%, #8a7a52 40% 70%, #3e4a2e 70% 100%); }
.chip[data-colour="DES"] { background: #c9a36b; }
.chip[data-colour="OLV"] { background: #5b6b3a; }
.chip[data-colour="ONX"] { background: #1b1b1d; }
.chip[data-colour="GRE"] { background: #8b8f94; }
.chip[data-colour="GSU"] { background: #9a9a9a; }

/* ---- The retail card: photograph, name, colour, price ---- */
.product-grid--retail { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.rcard { margin: 0; }
.rcard__link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease; }
.rcard__link:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 18px 40px rgba(23,25,22,.12); }
.rcard__media { display: block; aspect-ratio: 1 / 1; background: linear-gradient(160deg, #f7f7f4, #eceae4); padding: 8%; }
.rcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--dur) ease; }
.rcard__link:hover .rcard__media img { transform: scale(1.04); }

/* Trade workspace: clear surfaces, navy navigation and consistent controls. */
body:has(.order-layout, .order-start, .prebook-matrix, .site-header[data-workspace="staff"]) {
  --ink: #172b43;
  --ink-2: #41556a;
  --muted: #607286;
  --hairline: #dbe3eb;
  --card: #ffffff;
  --sunk: #edf2f7;
  --radius: 8px;
  background: #f3f6fa;
}
.site-header[data-workspace="staff"] { background: #172b43; color: #fff; border-top: 0; border-bottom: 0; }
.site-header[data-workspace="staff"] .brand,
.site-header[data-workspace="staff"] .brand__word,
.site-header[data-workspace="staff"] .site-actor__name { color: #fff; }
.site-header[data-workspace="staff"] .site-actor__meta { color: #bccbda; }
.site-header[data-workspace="staff"] .brand__descriptor,
.site-header[data-workspace="staff"] .brand__word span { color: #bccbda; }
.site-header[data-workspace="staff"] .btn--on-ink { color: #fff; background: transparent; border-color: #8296ab; }
.site-header[data-workspace="staff"] .btn--on-ink:hover { color: #fff; background: #304963; }
.site-header[data-workspace="staff"] .site-nav { gap: 4px; border-color: #35485e; }
:root { --radius-control: 6px; --radius-panel: 10px; }
.site-header[data-workspace="staff"] .site-nav a { color: #d4dfeb; padding: 8px 12px; border: 0; border-radius: var(--radius-control); min-height: 40px; }
.site-header[data-workspace="staff"] .site-nav a:hover,
.site-header[data-workspace="staff"] .site-nav a[aria-current="page"] { color: #fff; background: #304963; }
.order-mode-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-bottom: 24px; width: fit-content; max-width: 100%; background: #e6edf4; border-radius: var(--radius-panel); }
.order-mode-switch a { padding: 12px 20px; border-radius: var(--radius-control); color: #41556a; font-weight: 650; text-decoration: none; }
.order-mode-switch a[aria-current="page"] { color: #172b43; background: #fff; box-shadow: 0 2px 5px #172b4314; }
.prebook-head, .prebook-controls, .prebook-table-panel, .return-calculator { background: #fff; border-radius: var(--radius-panel); box-shadow: 0 3px 14px #172b4306; }
.incoming-summary { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-control); background: #edf5f7; }
.payment-timeline { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hairline); }
.payment-timeline li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.payment-timeline li > span { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid var(--hairline); border-radius: var(--radius-control); color: var(--muted); font-size: var(--fs-sm); }
.payment-timeline li.is-done > span { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.payment-timeline strong, .payment-timeline small { display: block; }
.payment-timeline small { margin-top: 2px; color: var(--muted); }
.prebook-table thead, .order-layout thead { background: #172b43; color: #fff; }
.order-layout__main, .order-layout__aside { min-width: 0; }
.checkout-form { padding: 24px; background: #fff; border: 1px solid #dbe3eb; border-radius: var(--radius-panel); }
.order-layout .po-field { margin-bottom: 20px; }
@media (max-width: 640px) {
  .checkout-form { padding: 16px; }
  .order-mode-switch { width: 100%; }
  .order-mode-switch a { flex: 1; text-align: center; padding: 12px 8px; }
}
.rcard__media--empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; }
.rcard__body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4) var(--space-4); }
.rcard__name { font-family: var(--display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; }
.rcard__colour, .rcard__colours { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--ink-2); }
.rcard__colours .chip { width: 14px; height: 14px; }
.rcard__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.rcard__price { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 700; }
.rcard__rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.rcard__rating .stars { font-size: .95em; }
.rcard__mark { font-family: var(--display); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--teal-deep); }
@media (max-width: 720px) {
  .product-grid--retail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .rcard__body { padding: var(--space-3); }
  .rcard__name { font-size: var(--fs-lg); }
  .rcard__price { font-size: var(--fs-xl); }
}

/* ---- Retail checkout: clear, Shopify-style purchase review ---- */
.split--main-aside > .shop-main { min-width: 0; }
.split--main-aside > .shop-main > .table-scroll {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(23,25,22,.05);
}
.split--main-aside > .shop-main > .table-scroll .data-table { min-width: 0; }
.split--main-aside > .shop-main > .table-scroll .data-table th,
.split--main-aside > .shop-main > .table-scroll .data-table td { padding: 14px 16px; }
.split--main-aside > .shop-main > .table-scroll .data-table tbody th { font-weight: 600; }
.split--main-aside > .shop-main .row-identity .thumb { width: 72px; height: 72px; }
.split--main-aside > .shop-main .row-identity { gap: 12px; }
.split--main-aside > .shop-main > .form { max-width: none; }
.split--main-aside > .shop-main > .form .fieldset {
  max-width: none;
  margin: 18px 0 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(23,25,22,.045);
}
.split--main-aside > .shop-main > .form .fieldset:first-of-type { margin-top: 20px; }
.split--main-aside > .shop-main > .form .fieldset > legend {
  padding: 0 8px;
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
}
.split--main-aside > .shop-main > .form .fieldset .field { max-width: none; }
.split--main-aside > .shop-main > .form .fieldset .field input,
.split--main-aside > .shop-main > .form .fieldset .field select { min-height: 48px; }
.split--main-aside > .shop-main > .form .form-actions { margin-top: 20px; }
.split--main-aside > .shop-side { min-width: 0; }
.split--main-aside > .shop-side .totals { position: sticky; top: calc(var(--header-h) + 20px); }

@media (max-width: 1040px) {
  .split--main-aside { grid-template-columns: minmax(0, 1fr); }
  .split--main-aside > .shop-side { order: -1; }
  .split--main-aside > .shop-side .totals { position: static; }
}

@media (max-width: 560px) {
  .split--main-aside > .shop-main > .table-scroll { overflow-x: auto; }
  .split--main-aside > .shop-main > .table-scroll .data-table { min-width: 620px; }
  .split--main-aside > .shop-main > .form .fieldset { padding: 16px; }
  .split--main-aside > .shop-main .row-identity .thumb { width: 60px; height: 60px; }
}

/* Live courier rates at the checkout (src/ordering/live-rates.ts). */
/**
 * LIVE COURIER RATES AT THE RETAIL CHECKOUT.
 *
 * Three small pieces and nothing else: the button that asks The Courier Guy
 * what it costs to this address, the sentence under it, and the line above the
 * form saying where the prices came from. The delivery choices themselves are
 * the ordinary `.choice` component from app.css and are not re-styled here —
 * a live option and a rate-card option must look identical, because to the
 * customer they are the same decision.
 *
 * MERGE TARGET: public/app.css. Nothing links this file; it is written
 * separately so it can be read as a change rather than found in a diff.
 *
 * Every colour is a token, every corner is var(--radius), and there is not a
 * hex value in the file.
 */

.live-rates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

/*
 * The button is `.btn .btn--secondary` and inherits everything that matters.
 * All this adds is the promise that it will not stretch to the width of the
 * address fieldset on a phone and read like the button that places the order.
 */
.live-rates__button {
  flex: 0 0 auto;
  border-radius: var(--radius);
}

.live-rates__hint {
  flex: 1 1 14rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/*
 * "Rates from The Courier Guy for Sandton 2196."
 *
 * A statement, not an alert: the customer asked for this and got it. It sits
 * above the form in the ordinary note voice, marked only by a quiet rule down
 * the left so it is findable after the page reloads.
 */
.live-rates__notice {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--sunk);
  color: var(--ink);
}

@media (max-width: 480px) {
  .live-rates__button {
    /* One tap target across the column, where there is no room beside it. */
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------
   Retail checkout — one calm, conversion-focused page
   ---------------------------------------------------------------------- */
body:has(.retail-checkout),
body:has(.payment-transition) {
  background: #fff;
}

.retail-checkout {
  max-width: 1280px;
  margin-inline: auto;
  padding-bottom: clamp(48px, 8vw, 96px);
}

.retail-checkout > .page-head {
  margin-bottom: 10px;
}

.retail-checkout > .page-head h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.045em;
}

.checkout-steps {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: checkout-step;
}

.checkout-steps li {
  position: relative;
  flex: 1;
  padding-top: 13px;
  border-top: 2px solid #d8d8d3;
  color: #72726c;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .02em;
}

.checkout-steps li.is-current {
  border-color: #111;
  color: #111;
}

.retail-checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(38px, 6vw, 84px);
  align-items: start;
}

.retail-checkout__main,
.retail-checkout__aside {
  min-width: 0;
}

.checkout-form-retail {
  max-width: none;
  margin: 0;
}

.checkout-section {
  margin: 0;
  padding: 30px 0;
  border-top: 1px solid #deded8;
}

.checkout-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.checkout-section__heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.checkout-section__heading > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--radius-control);
  background: #111;
  color: #fff;
  font-size: .8rem;
  font-weight: 750;
}

.checkout-section__heading h2 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.checkout-section__heading p {
  margin: 4px 0 0;
  color: #686862;
  font-size: .92rem;
}

.checkout-form-retail .fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-form-retail .fieldset > legend,
.checkout-form-retail .fieldset > .note:first-of-type {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checkout-form-retail .field {
  max-width: none;
  margin-bottom: 14px;
}

.checkout-form-retail .field__label {
  margin-bottom: 6px;
  color: #242420;
  font-size: .84rem;
  font-weight: 650;
}

.checkout-form-retail input,
.checkout-form-retail select {
  min-height: 52px;
  border: 1px solid #a7a79f;
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: none;
}

.checkout-form-retail input:focus,
.checkout-form-retail select:focus {
  border-color: #111;
  outline: 2px solid #111;
  outline-offset: 1px;
}

.checkout-who__signin {
  margin: -2px 0 18px;
}

.checkout-form-retail .choice-grid,
.checkout-form-retail .choices {
  gap: 10px;
}

.checkout-form-retail .choice {
  border-color: #b9b9b2;
  border-radius: var(--radius-control);
  box-shadow: none;
}

.checkout-form-retail .choice:has(input:checked) {
  border-color: #111;
  outline: 1px solid #111;
}

.checkout-secure-note {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid #d8d8d2;
  border-radius: var(--radius-control);
  background: #f7f7f4;
}

.checkout-secure-note__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  background: #fff;
}

.checkout-secure-note strong,
.checkout-secure-note small {
  display: block;
}

.checkout-secure-note small {
  margin-top: 3px;
  color: #686862;
  line-height: 1.45;
}

.checkout-submit {
  padding-top: 8px;
}

.checkout-submit__button,
.payment-transition__button {
  width: 100%;
  min-height: 56px;
  border: 1px solid #111;
  border-radius: var(--radius-control);
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
}

.checkout-submit__button:hover,
.payment-transition__button:hover {
  background: #2a2a27;
  color: #fff;
}

.checkout-submit p {
  margin: 12px auto 0;
  max-width: 58ch;
  color: #707069;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}

.checkout-summary {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid #deded8;
  border-radius: var(--radius-panel);
  background: #f7f7f4;
}

.checkout-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}

.checkout-summary__head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.checkout-summary__head a {
  color: #111;
  font-size: .82rem;
  font-weight: 650;
}

.checkout-summary__lines {
  display: grid;
  gap: 16px;
}

.checkout-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.checkout-line__image {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-control);
  background: #fff;
  overflow: visible;
}

.checkout-line__image .thumb {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-control);
  object-fit: contain;
}

.checkout-line__qty {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-control);
  background: #111;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.checkout-line__copy {
  min-width: 0;
}

.checkout-line__copy strong,
.checkout-line__copy span {
  display: block;
}

.checkout-line__copy strong {
  margin-bottom: 3px;
  line-height: 1.25;
}

.checkout-line__copy span {
  color: #696963;
  font-size: .8rem;
  line-height: 1.45;
}

.checkout-line__price {
  align-self: start;
  white-space: nowrap;
  font-size: .88rem;
}

.checkout-free-delivery {
  margin: 24px 0 20px;
  padding: 16px 0;
  border-top: 1px solid #deded8;
  border-bottom: 1px solid #deded8;
}

.checkout-free-delivery strong {
  display: block;
  margin-bottom: 10px;
  font-size: .82rem;
}

.checkout-free-delivery__track {
  display: block;
  height: 5px;
  border-radius: var(--radius-control);
  background: #dddcd6;
  overflow: hidden;
}

.checkout-free-delivery__track span {
  display: block;
  height: 100%;
  border-radius: var(--radius-control);
  background: #008a79;
}

.checkout-summary__totals {
  margin: 0;
}

.checkout-summary__totals > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.checkout-summary__totals dt,
.checkout-summary__totals dd {
  margin: 0;
  font-size: .9rem;
}

.checkout-summary__totals dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.checkout-summary__totals .is-discount {
  color: #007b6d;
}

.checkout-summary__totals .checkout-summary__grand {
  align-items: baseline;
  margin-top: 10px;
  padding-top: 17px;
  border-top: 1px solid #bdbdb6;
}

.checkout-summary__grand dt {
  font-size: 1.05rem;
  font-weight: 750;
}

.checkout-summary__grand dd {
  font-size: 1.45rem;
  font-weight: 750;
}

.checkout-summary__grand small {
  color: #6d6d67;
  font-size: .68rem;
  font-weight: 600;
}

.checkout-summary__trust {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  color: #5f5f59;
  font-size: .76rem;
}

.payment-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
  min-height: 62vh;
  margin: 0 auto;
  padding: clamp(70px, 12vh, 130px) 24px 60px;
  text-align: center;
}

.payment-transition__spinner {
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  border: 4px solid #deded8;
  border-top-color: #111;
  border-radius: var(--radius-control);
  animation: payment-spin .85s linear infinite;
}

@keyframes payment-spin { to { transform: rotate(360deg); } }

.payment-transition__eyebrow {
  margin: 0 0 9px;
  color: #66665f;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.payment-transition h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.04em;
}

.payment-transition > p:not(.note):not(.payment-transition__eyebrow) {
  margin: 12px 0 24px;
  color: #62625d;
}

.payment-transition__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: #007b6d;
  font-size: .85rem;
  font-weight: 650;
}

.payment-transition form {
  width: 100%;
}

.payment-transition .note {
  margin: 12px 0 0;
}

.payment-transition__back {
  margin-top: 24px;
  color: #5f5f59;
  font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
  .payment-transition__spinner { animation: none; }
}

@media (max-width: 920px) {
  .retail-checkout__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .retail-checkout__aside {
    order: -1;
  }

  .checkout-summary {
    position: static;
  }
}

@media (max-width: 600px) {
  .retail-checkout > .page-head .page-head__lede { display: none; }
  .checkout-steps { margin-bottom: 24px; }
  .checkout-summary { margin-inline: -8px; padding: 20px 16px; border-radius: 0; }
  .checkout-line { grid-template-columns: 66px minmax(0, 1fr); }
  .checkout-line__image { width: 66px; height: 66px; }
  .checkout-line__price { grid-column: 2; margin-top: -8px; }
  .checkout-section { padding: 26px 0; }
  .checkout-section__heading { margin-bottom: 18px; }
  .live-rates__hint { font-size: .78rem; }
}

/* =========================================================================
   THE TRADE SITE — 16 September 2026
   The owner's direction: the wholesale site should stand beside a Nike store
   for polish. The discipline is subtraction: a white surface, the product on
   a quiet grey tile, black type at a medium weight, one black pill to commit,
   grey for everything that is not the shoe, and room around all of it. What
   stays Rambler's own: the yellow brand mark, the condensed campaign voice on
   the home page, the certification marks, and the size grid — a trade buyer
   is still filling a size run, not browsing.

   Scope: `body[data-shop="trade"]` — the wholesale deployment's customer
   pages. The retail store (`retail`) and the back office (`staff`) do not
   see a rule from this block. The ordering screens load grid.css after this
   file; their part of the same layer is at the end of that file.
   ========================================================================= */

body[data-shop="trade"] {
  --tile: #f5f5f5;
  --hairline: #e5e5e5;
  --hairline-strong: #cacacb;
  --muted: #707072;
  --ink: #111111;
  --ink-2: #2b2b2b;
  --ink-3: #4b4b4d;
  --card: #f5f5f5;
  --radius: 4px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --pill: 30px;
  --header-h: 60px;
  --measure: 1200px;
  --measure-wide: 1440px;
  background: var(--surface);
  color: var(--ink);
}
body[data-shop="trade"] .page { background: var(--surface); }

/* ---- Type. The reading voice is the UI face; the display face is kept for
        the campaign hero. Sentence case, medium weight, tight leading. ---- */
body[data-shop="trade"] h1,
body[data-shop="trade"] h2,
body[data-shop="trade"] h3 {
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
body[data-shop="trade"] h1 { font-size: 28px; }
body[data-shop="trade"] h2 { font-size: 24px; }
body[data-shop="trade"] h3 { font-size: 18px; }
body[data-shop="trade"] .lede { font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
body[data-shop="trade"] a { color: var(--ink); }
body[data-shop="trade"] a:hover { color: var(--ink-2); }
body[data-shop="trade"] .eyebrow { color: var(--muted); font-family: var(--body); letter-spacing: 0.12em; }
body[data-shop="trade"] .note,
body[data-shop="trade"] .muted { color: var(--muted); }

/* ---- The masthead: white, sixty pixels, the brand at the left, the nav in
        the middle, the account at the right. The hairline does the work. ---- */
body[data-shop="trade"] .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  color: var(--ink);
  border-top: 0;
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
  backdrop-filter: none;
}
body[data-shop="trade"] .site-header__inner { min-height: var(--header-h); gap: 32px; padding: 0 48px; max-width: none; }
body[data-shop="trade"] .brand { color: var(--ink); gap: 10px; font-size: 22px; flex: 0 0 auto; }
body[data-shop="trade"] .brand__mark { width: 10px; height: 26px; background: var(--yellow); }
body[data-shop="trade"] .brand__word em { color: var(--muted); }
body[data-shop="trade"] .site-nav { justify-content: flex-start; gap: 22px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
body[data-shop="trade"] .site-nav a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 19px 0;
  border-bottom: 2px solid transparent;
}
body[data-shop="trade"] .site-nav a:hover,
body[data-shop="trade"] .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
body[data-shop="trade"] .site-actor { gap: 16px; font-size: 14px; flex: 0 0 auto; }
body[data-shop="trade"] .site-actor__who { max-width: 220px; }
body[data-shop="trade"] .site-actor__name { color: var(--ink); font-weight: 500; }
body[data-shop="trade"] .site-actor__meta { color: var(--muted); }
body[data-shop="trade"] .site-basket,
body[data-shop="trade"] .site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  padding: 8px 0;
}
body[data-shop="trade"] .site-basket:hover,
body[data-shop="trade"] .site-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
body[data-shop="trade"] .site-header .btn--on-ink {
  color: var(--ink);
  background: transparent;
  border-color: var(--hairline-strong);
}
body[data-shop="trade"] .site-header .btn--on-ink:hover {
  color: var(--ink);
  background: var(--tile);
  border-color: var(--ink);
}

/* ---- Buttons: pills. One black one commits; the rest are outlined. ---- */
body[data-shop="trade"] .btn,
body[data-shop="trade"] button.btn {
  --radius-control: var(--pill);
  border-radius: var(--radius-control);
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1.5px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
body[data-shop="trade"] .btn:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
body[data-shop="trade"] .btn--commit {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
body[data-shop="trade"] .btn--commit:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--surface);
}
body[data-shop="trade"] .btn--secondary {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
body[data-shop="trade"] .btn--secondary:hover { background: var(--surface); border-color: var(--ink); }
body[data-shop="trade"] .btn--on-ink {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink);
}
body[data-shop="trade"] .btn--on-ink:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
body[data-shop="trade"] .btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
body[data-shop="trade"] .btn--ghost {
  min-height: 32px;
  padding: 0 8px;
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-shop="trade"] .btn--ghost:hover { background: transparent; border-color: transparent; color: var(--ink-2); }

/* ---- Controls: tall, rounded, quiet until touched. ---- */
body[data-shop="trade"] input:not([type="radio"]):not([type="checkbox"]):not(.qty),
body[data-shop="trade"] select,
body[data-shop="trade"] textarea {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  min-height: 48px;
  padding: 10px 16px;
  font-size: 16px;
  background: var(--surface);
  color: var(--ink);
}
body[data-shop="trade"] input:hover,
body[data-shop="trade"] select:hover,
body[data-shop="trade"] textarea:hover { border-color: var(--ink); }
body[data-shop="trade"] label { font-size: 14px; font-weight: 500; color: var(--ink); }
body[data-shop="trade"] .field__hint { color: var(--muted); font-size: 13px; }

/* ---- The page: one measure, generous gutters, air between bands. ---- */
body[data-shop="trade"] .wrap { max-width: var(--measure-wide); margin: 0 auto; padding: 0 48px; }
body[data-shop="trade"] .band { padding: 48px 0; }
body[data-shop="trade"] .band--lead { padding-top: 24px; }
body[data-shop="trade"] .band--tint { background: var(--tile); }
body[data-shop="trade"] .crumbs { margin: 16px auto 0; font-size: 14px; color: var(--muted); }
body[data-shop="trade"] .crumbs a { color: var(--muted); text-decoration: none; }
body[data-shop="trade"] .crumbs a:hover { color: var(--ink); text-decoration: underline; }
body[data-shop="trade"] .crumbs span { color: var(--hairline-strong); margin: 0 8px; }
body[data-shop="trade"] .page-head { margin: 0 0 24px; }
body[data-shop="trade"] .page-head h1 { font-size: 28px; }
body[data-shop="trade"] .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 16px;
  padding: 0;
  border: 0;
}
body[data-shop="trade"] .section-head:first-of-type { margin-top: 8px; }
body[data-shop="trade"] .section-head h2 { font-size: 24px; margin: 0; }
body[data-shop="trade"] .section-head h2 a { color: var(--ink); text-decoration: none; }
body[data-shop="trade"] .section-head h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
body[data-shop="trade"] .section-head__meta { margin: 0; font-size: 14px; color: var(--muted); }
body[data-shop="trade"] .notice {
  background: var(--tile);
  border: 0;
  border-left: 3px solid var(--ink);
  color: var(--ink);
  padding: 14px 18px;
  font-size: 14px;
}
body[data-shop="trade"] .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-panel); padding: 24px; }
body[data-shop="trade"] .empty-state {
  padding: 64px 24px;
  text-align: center;
  background: var(--tile);
  border: 0;
  border-radius: var(--radius-panel);
}
body[data-shop="trade"] .empty-state__title { font-size: 20px; font-weight: 500; }
body[data-shop="trade"] .empty-state__note { color: var(--muted); }

/* ---- The campaign hero. White, and the one place the display face shouts.
        The yellow is a rule under the eyebrow, not a band. ---- */
body[data-shop="trade"] .home-hero {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
body[data-shop="trade"] .home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  min-height: 70vh;
  padding-top: 40px;
  padding-bottom: 40px;
}
body[data-shop="trade"] .home-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  margin: 0 0 20px;
}
body[data-shop="trade"] .home-hero .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 4px; background: var(--yellow); }
body[data-shop="trade"] .home-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: none;
}
body[data-shop="trade"] .home-hero .lede { font-size: 18px; color: var(--ink-2); max-width: 44ch; margin: 0 0 32px; }
body[data-shop="trade"] .home-hero__actions { gap: 12px; margin: 0; }
body[data-shop="trade"] .home-hero .btn--secondary { background: var(--surface); border-color: var(--hairline-strong); color: var(--ink); }
body[data-shop="trade"] .home-hero .btn--secondary:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
body[data-shop="trade"] .home-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}
body[data-shop="trade"] .home-proof li { display: flex; flex-direction: column; gap: 2px; }
body[data-shop="trade"] .home-proof strong { font-family: var(--body); font-size: 16px; font-weight: 500; color: var(--ink); }
body[data-shop="trade"] .home-proof span { font-size: 14px; color: var(--muted); }
body[data-shop="trade"] .home-hero__visual {
  position: relative;
  background: var(--tile);
  border: 0;
  box-shadow: none;
  padding: 32px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-shop="trade"] .home-hero__visual::after { content: none; }
body[data-shop="trade"] .home-hero__visual .media { background: transparent; border: 0; box-shadow: none; padding: 0; width: 100%; }
body[data-shop="trade"] .home-hero__visual .media img { width: 100%; height: auto; object-fit: contain; }
body[data-shop="trade"] .home-hero__label { position: absolute; top: 24px; left: 24px; color: var(--ink); font-family: var(--body); }
body[data-shop="trade"] .home-hero__label span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
body[data-shop="trade"] .home-hero__label strong { display: block; font-size: 20px; font-weight: 500; }
body[data-shop="trade"] .home-hero__visual > a {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- "How trade ordering works": three quiet columns, numbered because it
        is a sequence the buyer walks once. ---- */
body[data-shop="trade"] .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-shop="trade"] .step {
  padding: 24px 0 0;
  border-top: 1px solid var(--ink);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
body[data-shop="trade"] .step__number {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
body[data-shop="trade"] .step h3 { font-size: 18px; margin: 0 0 8px; }
body[data-shop="trade"] .step p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
body[data-shop="trade"] .supply-proof__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
body[data-shop="trade"] .supply-proof h2 { margin: 4px 0 8px; }
body[data-shop="trade"] .supply-proof p { margin: 0; color: var(--ink-2); max-width: 60ch; }
body[data-shop="trade"] .callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  background: var(--tile);
  border: 0;
  border-radius: 0;
}
body[data-shop="trade"] .callout h2 { font-size: 24px; margin: 4px 0 8px; }
body[data-shop="trade"] .callout p { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* ---- The range grid: the shoe on a tile, then quiet lines. No card frame,
        no lift, no shadow — the grid is the design. ---- */
body[data-shop="trade"] .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-shop="trade"] .product-card {
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
body[data-shop="trade"] .product-card:hover { transform: none; box-shadow: none; border-color: transparent; }
body[data-shop="trade"] .product-card__link { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0; }
body[data-shop="trade"] .product-card .media--card {
  min-height: 250px;
  padding: 18px;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-shop="trade"] .product-card:hover .media--card img { transform: none; }
body[data-shop="trade"] .product-card__body { padding: 12px 0 0; gap: 4px; }
body[data-shop="trade"] .product-card__body .eyebrow { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0; }
body[data-shop="trade"] .product-card__title { font-size: 16px; font-weight: 500; margin: 0; }
body[data-shop="trade"] .product-card:hover .product-card__title { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
body[data-shop="trade"] .product-card__colour { font-size: 14px; color: var(--muted); margin: 0; }
body[data-shop="trade"] .product-card__colour .code { color: var(--muted); }
body[data-shop="trade"] .product-card .marks { margin: 4px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; list-style: none; }
body[data-shop="trade"] .product-card .mark,
body[data-shop="trade"] .product__detail .mark,
body[data-shop="trade"] .marks .mark {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 5px 10px;
  border: 1px solid var(--hairline-strong);
  --radius-control: var(--pill);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
body[data-shop="trade"] .marks .mark--muted { color: var(--muted); border-style: dashed; }
body[data-shop="trade"] .product-card__facts { font-size: 14px; margin: 8px 0 0; gap: 4px 16px; }
body[data-shop="trade"] .product-card__facts dt { color: var(--muted); font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 13px; }
body[data-shop="trade"] .product-card__facts dd { color: var(--ink); font-weight: 500; }
body[data-shop="trade"] .product-card__action { font-size: 14px; font-weight: 500; color: var(--ink); margin: 8px 0 0; }
body[data-shop="trade"] .product-card__prepack {
  order: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
body[data-shop="trade"] .product-card__prepack:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* ---- The product page: the photograph at the left, a sticky column at the
        right in the order a trade buyer needs it: name, range, colour, marks,
        the facts, the one action. ---- */
body[data-shop="trade"] .product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 48px 64px;
  align-items: start;
}
body[data-shop="trade"] .product__media > .media--hero {
  background: var(--tile);
  border: 0;
  box-shadow: none;
  padding: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body[data-shop="trade"] .product__media > .media--hero img { width: 100%; height: 100%; object-fit: contain; }
body[data-shop="trade"] .product__colours { margin: 16px 0 0; }
body[data-shop="trade"] .product__colours > .eyebrow { font-size: 12px; margin: 0 0 8px; }
body[data-shop="trade"] .swatches--images { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body[data-shop="trade"] .swatch--image {
  display: block;
  width: 72px;
  height: 72px;
  padding: 4px;
  background: var(--tile);
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
}
body[data-shop="trade"] .swatch--image:hover { border-color: var(--hairline-strong); }
body[data-shop="trade"] .swatch--current { border-color: var(--ink); }
body[data-shop="trade"] .swatch--image img { width: 100%; height: 100%; object-fit: contain; display: block; }
body[data-shop="trade"] .swatch--image .swatch__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-shop="trade"] .product__detail { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; }
body[data-shop="trade"] .product__detail > * { order: 20; margin: 0; }
body[data-shop="trade"] .product__detail h1 { order: 1; font-size: 24px; line-height: 1.25; }
body[data-shop="trade"] .product__detail > .eyebrow {
  order: 2;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin: 4px 0 0;
}
body[data-shop="trade"] .product__colourway { order: 3; font-size: 16px; color: var(--muted); margin: 2px 0 0; }
body[data-shop="trade"] .product__detail .marks { order: 4; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
body[data-shop="trade"] .product__detail .lede { order: 5; margin: 24px 0 0; }
body[data-shop="trade"] .product__detail .notice { order: 6; margin: 24px 0 0; }
body[data-shop="trade"] .product__detail .facts { order: 7; margin: 24px 0 0; }
body[data-shop="trade"] .product__detail .actions { order: 8; margin: 24px 0 0; }
body[data-shop="trade"] .product__detail .actions .btn { width: 100%; min-height: 60px; }
body[data-shop="trade"] .facts { display: flex; flex-direction: column; gap: 0; }
body[data-shop="trade"] .fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  margin: 0;
}
body[data-shop="trade"] .fact:last-child { border-bottom: 1px solid var(--hairline); }
body[data-shop="trade"] .fact dt { color: var(--muted); font-weight: 400; font-family: var(--body); letter-spacing: 0; text-transform: none; }
body[data-shop="trade"] .fact dd { margin: 0; color: var(--ink); text-align: right; }

/* ---- The portal: the credit position as four plain figures, the orders as
        a hairlined table. ---- */
body[data-shop="trade"] .card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  box-shadow: none;
  padding: 24px;
}
body[data-shop="trade"] .card__head { padding: 0; border: 0; margin: 0 0 16px; }
body[data-shop="trade"] .card__title { font-size: 18px; margin: 0; }
body[data-shop="trade"] .card__body { padding: 0; }
body[data-shop="trade"] .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin: 0; }
body[data-shop="trade"] .stat { padding: 0; border: 0; margin: 0; }
body[data-shop="trade"] .stat__label {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
body[data-shop="trade"] .stat__value { font-family: var(--body); font-size: 22px; font-weight: 500; color: var(--ink); }
body[data-shop="trade"] .stat__note { display: block; font-size: 13px; color: var(--muted); margin: 4px 0 0; }
body[data-shop="trade"] .stat dd { margin: 0; }
body[data-shop="trade"] thead th {
  background: var(--surface);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
body[data-shop="trade"] th,
body[data-shop="trade"] td { padding: 12px 10px; border-bottom: 1px solid var(--hairline); }

/* ---- Forms: sign in, apply, account. A single quiet column. ---- */
body[data-shop="trade"] .form-section {
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
  box-shadow: none;
}
body[data-shop="trade"] .form-section:first-of-type { border-top: 0; padding-top: 0; }
body[data-shop="trade"] .form-section h2 { font-size: 20px; margin: 0 0 4px; }
body[data-shop="trade"] .form-actions { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; }
body[data-shop="trade"] .form-actions .btn--commit { min-height: 56px; padding: 0 32px; }

/* ---- The footer: the same links, quietly. ---- */
body[data-shop="trade"] .site-footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 14px;
}
body[data-shop="trade"] .site-footer__inner { padding: 40px 48px; gap: 24px 40px; }
body[data-shop="trade"] .site-footer a { color: var(--ink); }
body[data-shop="trade"] .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Smaller screens. ---- */
@media (max-width: 1024px) {
  body[data-shop="trade"] .product { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 32px; }
  body[data-shop="trade"] .home-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  body[data-shop="trade"] .home-hero__visual { aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
  body[data-shop="trade"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  body[data-shop="trade"] .product { grid-template-columns: minmax(0, 1fr); }
  body[data-shop="trade"] .product__detail { position: static; }
  body[data-shop="trade"] .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body[data-shop="trade"] .supply-proof__inner,
  body[data-shop="trade"] .callout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  body[data-shop="trade"] .site-header__inner { padding: 8px 16px; gap: 8px 16px; }
  body[data-shop="trade"] .site-nav { justify-content: flex-start; gap: 20px; border-top: 1px solid var(--hairline); overflow-x: auto; }
  body[data-shop="trade"] .site-nav a { padding: 12px 0; }
  body[data-shop="trade"] .site-footer__inner { padding: 32px 16px; }
  body[data-shop="trade"] .wrap { padding: 0 16px; }
  body[data-shop="trade"] .band { padding: 24px 0; }
  body[data-shop="trade"] .home-hero h1 { font-size: clamp(44px, 14vw, 72px); }
  body[data-shop="trade"] .home-proof { gap: 12px; }
  body[data-shop="trade"] .callout { padding: 24px; }
  body[data-shop="trade"] .product-grid { gap: 24px 8px; }
  body[data-shop="trade"] .product-card .media--card { min-height: 0; padding: 12px; }
}

/* -------------------------------------------------------------------------
   Retail finish — September 2026

   The shop is product-led: large photographs, plain white space and the same
   restrained information order used by leading footwear stores. Product art
   blends into one neutral stage instead of appearing as a white square inside
   a beige card.
   ---------------------------------------------------------------------- */
body[data-shop="retail"] {
  --retail-tile: #f1f1ef;
  --retail-ink: #111;
  --retail-muted: #70706b;
  background: #fff;
  color: var(--retail-ink);
}

body[data-shop="retail"] .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-top: 0;
  border-bottom: 1px solid #e5e5e2;
  background: rgba(255,255,255,.96);
  box-shadow: none;
}
body[data-shop="retail"] .site-header__inner {
  min-height: 64px;
  padding-block: 8px;
}
body[data-shop="retail"] .brand__mark { width: 7px; height: 34px; }
body[data-shop="retail"] .site-nav { gap: clamp(16px, 2vw, 30px); }
body[data-shop="retail"] .site-nav a {
  color: #393936;
  font-size: .86rem;
  font-weight: 560;
}
body[data-shop="retail"] .site-nav a:hover,
body[data-shop="retail"] .site-nav a[aria-current="page"] { color: #000; }

body[data-shop="retail"] .band { padding-block: clamp(36px, 5vw, 68px); }
body[data-shop="retail"] .section-head {
  align-items: end;
  margin-bottom: 24px;
  padding-bottom: 14px;
}
body[data-shop="retail"] .section-head h2 {
  color: #111;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 680;
  letter-spacing: -.035em;
}
body[data-shop="retail"] .section-head__meta {
  max-width: 62ch;
  color: var(--retail-muted);
  font-size: .78rem;
  text-align: right;
}

body[data-shop="retail"] .product-grid--retail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(12px, 1.6vw, 24px);
}
body[data-shop="retail"] .rcard,
body[data-shop="retail"] .rcard__link {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-shop="retail"] .rcard__link:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
body[data-shop="retail"] .rcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background: var(--retail-tile);
}
body[data-shop="retail"] .rcard__media img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: none;
  transform-origin: center;
  transition: transform 240ms ease;
}
body[data-shop="retail"] .rcard__link:hover .rcard__media img { transform: none; }
body[data-shop="retail"] .rcard__body {
  gap: 3px;
  padding: 13px 1px 0;
}
body[data-shop="retail"] .rcard__name {
  color: #171717;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.32;
}
body[data-shop="retail"] .rcard__colour,
body[data-shop="retail"] .rcard__colours {
  color: var(--retail-muted);
  font-size: .86rem;
}
body[data-shop="retail"] .rcard__colours .chip,
body[data-shop="retail"] .rcard__colour .chip { width: 11px; height: 11px; }
body[data-shop="retail"] .rcard__row {
  align-items: center;
  margin-top: 7px;
}
body[data-shop="retail"] .rcard__price {
  color: #171717;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 650;
}
body[data-shop="retail"] .rcard__rating { font-size: .76rem; }
body[data-shop="retail"] .rcard__mark {
  width: fit-content;
  margin-top: 5px;
  color: #006f62;
  font-family: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .075em;
}

body[data-shop="retail"] .crumbs {
  padding-block: 16px 4px;
  color: #7b7b76;
  font-size: .74rem;
}
body[data-shop="retail"] .band--lead { padding-top: 22px; }
body[data-shop="retail"] .product {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}
body[data-shop="retail"] .product__media > .media--hero {
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--retail-tile);
  box-shadow: none;
}
body[data-shop="retail"] .product__media > .media--hero img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: none;
  transform: none;
}
body[data-shop="retail"] .product__detail {
  position: sticky;
  top: 92px;
  padding-top: 2px;
}
body[data-shop="retail"] .product__detail > .eyebrow {
  color: var(--retail-muted);
  font-family: inherit;
  font-size: .72rem;
  letter-spacing: .085em;
}
body[data-shop="retail"] .product__detail h1 {
  margin-top: 8px;
  color: #111;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}
body[data-shop="retail"] .product__colourway { margin-top: 9px; color: var(--retail-muted); }
body[data-shop="retail"] .product__detail .lede { max-width: 55ch; color: #4f4f4b; line-height: 1.6; }
body[data-shop="retail"] .price-band {
  margin-top: 20px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid #dededb;
  border-bottom: 1px solid #dededb;
  background: transparent;
  box-shadow: none;
}
body[data-shop="retail"] .facts { margin-top: 18px; }
body[data-shop="retail"] .fact { padding-block: 10px; font-size: .82rem; }
body[data-shop="retail"] .buy-box {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #dededb;
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: none;
}
body[data-shop="retail"] .size-choice label { border-radius: var(--radius-control); }
body[data-shop="retail"] .buy-box .btn--commit { border-radius: var(--radius-control); }
body[data-shop="retail"] .trust { margin-top: 22px; }
body[data-shop="retail"] .swatch--image {
  border-radius: 0;
  background: var(--retail-tile);
}
body[data-shop="retail"] .swatch--image img { mix-blend-mode: multiply; }

body[data-shop="retail"] .site-footer {
  margin-top: 20px;
  border-top: 1px solid #e4e4e1;
  background: #f7f7f5;
}

@media (max-width: 980px) {
  body[data-shop="retail"] .product-grid--retail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-shop="retail"] .product { grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 34px; }
}

@media (max-width: 720px) {
  body[data-shop="retail"] .site-header { position: static; }
  body[data-shop="retail"] .site-header__inner { min-height: 56px; padding: 7px 16px; }
  body[data-shop="retail"] .site-nav { gap: 22px; overflow-x: auto; flex-wrap: nowrap; }
  body[data-shop="retail"] .section-head { align-items: flex-start; }
  body[data-shop="retail"] .section-head__meta { text-align: left; }
  body[data-shop="retail"] .product-grid--retail { gap: 28px 8px; }
  body[data-shop="retail"] .rcard__body { padding: 10px 1px 0; }
  body[data-shop="retail"] .rcard__name { font-size: .92rem; }
  body[data-shop="retail"] .rcard__price { font-size: .9rem; }
  body[data-shop="retail"] .rcard__rating { width: 100%; }
  body[data-shop="retail"] .product { grid-template-columns: minmax(0, 1fr); }
  body[data-shop="retail"] .product__detail { position: static; }
  body[data-shop="retail"] .product__media > .media--hero { aspect-ratio: 1 / 1; }
  body[data-shop="retail"] .product__detail h1 { font-size: 34px; }
  body[data-shop="retail"] .buy-box { padding: 16px; }
}

/* Focused checkout: delivery on the left, a quiet product summary on the right. */
body[data-shop="retail"]:has(.retail-checkout) .site-nav,
body[data-shop="retail"]:has(.retail-checkout) .site-search,
body[data-shop="retail"]:has(.retail-checkout) .site-footer { display: none; }
body[data-shop="retail"]:has(.retail-checkout) .site-header__inner { justify-content: space-between; }
body[data-shop="retail"]:has(.retail-checkout) .page { padding-top: 36px; }
body[data-shop="retail"] .retail-checkout { max-width: 1080px; }
body[data-shop="retail"] .retail-checkout > .page-head h1 { font-size: 30px; font-weight: 550; letter-spacing: -.025em; }
body[data-shop="retail"] .retail-checkout > .page-head .lede { font-size: 15px; color: #707070; }
body[data-shop="retail"] .checkout-steps { margin-bottom: 40px; max-width: 560px; }
body[data-shop="retail"] .retail-checkout__layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; }
body[data-shop="retail"] .checkout-form-retail { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
body[data-shop="retail"] .checkout-section { padding-block: 32px; border-color: #e5e5e5; }
body[data-shop="retail"] .checkout-section:first-of-type { padding-top: 0; }
body[data-shop="retail"] .checkout-section__heading > span { display: none; }
body[data-shop="retail"] .checkout-section__heading h2 { font-size: 24px; font-weight: 550; letter-spacing: -.02em; }
body[data-shop="retail"] .checkout-section__heading p { font-size: 14px; }
body[data-shop="retail"] .checkout-form-retail .field__label { font-weight: 450; font-size: 14px; }
body[data-shop="retail"] .checkout-form-retail input:not([type="radio"]):not([type="checkbox"]),
body[data-shop="retail"] .checkout-form-retail select { min-height: 56px; border-color: #a8a8a8; border-radius: var(--radius-control); }
body[data-shop="retail"] .checkout-summary { top: 96px; padding: 0; border: 0; border-radius: 0; background: #fff; }
body[data-shop="retail"] .checkout-summary__head { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
body[data-shop="retail"] .checkout-summary__head h2 { font-size: 24px; font-weight: 550; }
body[data-shop="retail"] .checkout-line { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 4px 16px; }
body[data-shop="retail"] .checkout-line__image { grid-row: span 2; width: 96px; height: 96px; background: var(--retail-tile); border-radius: 0; }
body[data-shop="retail"] .checkout-line__image .thumb { background: transparent; mix-blend-mode: multiply; border-radius: 0; }
body[data-shop="retail"] .checkout-line__copy strong { font-size: 15px; font-weight: 550; }
body[data-shop="retail"] .checkout-line__copy span { overflow-wrap: anywhere; }
body[data-shop="retail"] .checkout-line__price { grid-column: 2; font-weight: 500; }
body[data-shop="retail"] .checkout-summary__grand { border-block: 1px solid #e5e5e5; padding-block: 20px; }
body[data-shop="retail"] .checkout-summary__grand dd { font-size: 20px; }
body[data-shop="retail"] .checkout-summary__trust { color: #777; font-size: 12px; }
body[data-shop="retail"] .checkout-secure-note { background: #f7f7f7; border-color: #e5e5e5; }
body[data-shop="retail"] .checkout-submit__button { --radius-control: 30px; min-height: 60px; border-radius: var(--radius-control); font-weight: 600; box-shadow: none; }
body[data-shop="retail"] .checkout-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #e5e5e5; font-size: 13px; color: #707070; }
body[data-shop="retail"] .checkout-help a { color: inherit; }
@media (max-width: 800px) {
  body[data-shop="retail"] .retail-checkout__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body[data-shop="retail"] .retail-checkout__aside { grid-row: 1; }
  body[data-shop="retail"] .checkout-summary { position: static; padding: 20px; background: #f7f7f7; }
  body[data-shop="retail"] .checkout-summary__head { margin-bottom: 16px; padding-bottom: 12px; }
  body[data-shop="retail"] .checkout-summary__head h2 { font-size: 20px; }
  body[data-shop="retail"] .checkout-line { grid-template-columns: 72px minmax(0, 1fr); }
  body[data-shop="retail"] .checkout-line__image { width: 72px; height: 72px; }
  body[data-shop="retail"] .checkout-summary__trust { display: none; }
  body[data-shop="retail"] .checkout-free-delivery { margin-block: 16px; padding-block: 12px; }
  body[data-shop="retail"] .checkout-steps { margin-bottom: 24px; }
  body[data-shop="retail"]:has(.retail-checkout) .page { padding-top: 24px; }
}