/* ==========================================================================
   ATLETIKA — Checkout & confirmation
   Loaded after the shared sheets. Every colour, duration and easing is a
   token from tokens.css. The handful of page-specific dimensions (thumb,
   bars, count bubble) are declared once here as page-scoped properties so
   they can be audited in one place and never repeat as raw values.
   ========================================================================== */
.page-checkout {
  --co-max:      1200px;                                 /* narrower than --container: forms read better */
  --co-logo:     20px;                                   /* wordmark optical size, same as the global header */
  --co-head-h:   var(--header-h);                        /* 56 */
  --co-bar-h:    var(--s-14);                            /* 56 — mobile summary bar */
  --co-cta-h:    calc(var(--s-16) + var(--s-2));         /* 72 — fixed bottom order bar */
  --co-row:      var(--s-14);                            /* 56 — option rows */
  --co-thumb:    var(--s-16);                            /* 64 — line-item thumb (3:4 → 85 tall) */
  --co-bubble:   calc(var(--s-4) + var(--bw-thick));     /* 18 — count bubble */
  --co-mark:     var(--s-6);                             /* 24 — payment / card-brand marks */
  --co-tap:      calc(var(--s-10) + var(--s-1));         /* 44 — minimum tap height */
  --co-icon:     var(--s-4);                             /* 16 — inline icons */
  --co-postcode: 12ch;
  --co-split:    58fr 42fr;

  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--c-surface);
}

/* A narrower container than the site's 1600. */
.co-container {
  width: 100%;
  max-width: var(--co-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   HEAD — not the global header. No nav, no search, no bag. Not sticky.
   ========================================================================== */
.checkout-head { border-block-end: var(--bw) solid var(--c-line); }
.checkout-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--co-head-h);
  gap: var(--s-4);
}
.checkout-head__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--co-tap);
  font-size: var(--co-logo);
  justify-self: start;
}
.checkout-head__secure {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  letter-spacing: var(--track-ui);   /* h1 inherits --track-tight from base; restore the UI voice */
}
.checkout-head__secure svg { flex: none; width: var(--co-icon); height: var(--co-icon); }
.checkout-head__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--co-tap);
  justify-self: end;
  white-space: nowrap;
}
/* Below 480 the three items do not fit on one line; the lock stays, the
   words become screen-reader-only (the h1 text is still announced). */
@media (max-width: 479px) {
  .checkout-head__secure span {
    position: absolute;
    width: var(--bw); height: var(--bw);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   PAGE LAYOUT
   Mobile: summary bar → form (the summary is moved into the bar by JS).
   ≥1024: form 58% / sticky summary 42%.
   ========================================================================== */
.checkout-page {
  flex: 1;
  padding-block-end: calc(var(--section-gap) + var(--co-cta-h));
}
.checkout-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.checkout-wrap__aside { min-width: 0; }
.checkout-wrap__aside:empty { display: none; }

@media (min-width: 1024px) {
  .checkout-page { padding-block: var(--s-10) var(--section-gap); }
  .checkout-wrap {
    display: grid;
    grid-template-columns: var(--co-split);
    gap: var(--gutter);
    align-items: start;
  }
  .checkout-wrap__aside { position: sticky; top: var(--s-6); }
  .summary-bar { display: none; }
}

/* ==========================================================================
   MOBILE SUMMARY BAR (≤1023) — 56px, sunken, total always visible
   ========================================================================== */
.summary-bar {
  margin-inline: calc(var(--gutter) * -1);
  background: var(--c-surface-sunken);
  border-block-end: var(--bw) solid var(--c-line);
}
.no-js .summary-bar { display: none; }
.summary-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--co-bar-h);
  padding-inline: var(--gutter);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  text-align: left;
}
.summary-bar__toggle:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
.summary-bar__label { display: inline-flex; align-items: center; gap: var(--s-2); }
.summary-bar__label svg {
  width: var(--co-icon); height: var(--co-icon);
  transition: transform var(--dur-quick) var(--ease-standard);
}
.summary-bar__toggle[aria-expanded="true"] .summary-bar__label svg { transform: rotate(180deg); }
.summary-bar__total { white-space: nowrap; }
.summary-bar__total b { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* grid-template-rows animates height without a measured px value. */
.summary-bar__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-standard);
}
.summary-bar__panel[data-open="true"] { grid-template-rows: 1fr; }
.summary-bar__panel > * {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}
.summary-bar__panel[data-open="true"] > * { visibility: visible; transition-delay: 0s; }
.summary-bar .checkout-summary { padding: var(--s-2) var(--gutter) var(--s-6); }

/* ==========================================================================
   FORM
   ========================================================================== */
.checkout { display: flex; flex-direction: column; min-width: 0; }
.checkout__intro {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--c-ink-muted);
  margin-block-end: var(--s-6);
}
.checkout__alert { margin-block-end: var(--s-6); }
.checkout__alert p { font-weight: var(--fw-medium); }
.checkout__alert ul { margin: var(--s-2) 0 0; padding-inline-start: var(--s-4); }
.checkout__alert li + li { margin-block-start: var(--s-1); }
.checkout__alert a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Sections: 48px apart. A hidden section (express, when unavailable) does
   not leave a gap behind. */
.checkout__section { position: relative; min-width: 0; }
.checkout__section:not([hidden]) ~ .checkout__section { margin-block-start: var(--s-12); }
.checkout__section > legend { padding-block-end: var(--s-5); }
.checkout__section-link {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--lh-xl);
}
.checkout__body { display: flex; flex-direction: column; gap: var(--s-5); }

/* Express row (capability-gated; the whole fieldset is removed when unavailable) */
.checkout__express .express { margin-block-end: var(--s-5); }
/* One capable wallet → its button takes the full row. */
.checkout__express .express:has(> [hidden]) > .express__btn { grid-column: 1 / -1; }
.express__mark { font-weight: var(--fw-bold); }

/* Field rows */
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 480px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
/* Postcode before city, 12ch wide. The two .field wrappers become grid
   contents so a long error can span the full row instead of wrapping
   inside the narrow postcode column. */
.field--postcode .input { width: var(--co-postcode); min-width: var(--co-postcode); }
@media (min-width: 480px) {
  .field-row--postcode {
    display: grid;
    grid-template-columns: var(--co-postcode) 1fr;
    gap: var(--s-2) var(--s-4);
    align-items: start;
  }
  .field-row--postcode > .field { display: contents; }
  .field-row--postcode .field__label { grid-row: 1; align-self: end; }
  .field-row--postcode .input,
  .field-row--postcode .select { grid-row: 2; }
  .field-row--postcode .field__error,
  .field-row--postcode .field__hint { grid-column: 1 / -1; }
}

/* Error message: hidden while empty (the "!" glyph is a ::before), fades in
   over --dur-fast when it gets content. Links inside are underlined. */
.field__error:empty { display: none; }
.field__error { animation: co-fade var(--dur-fast) var(--ease-standard); }
.field__error a { text-decoration: underline; text-underline-offset: 0.2em; color: inherit; }
@keyframes co-fade { from { opacity: 0; } }

/* Reveal links ("Add apartment…", "Add discount code") */
.checkout__reveal, .sum-code__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--s-6);
  color: var(--c-ink);
  cursor: pointer;
}

/* Option rows — delivery method radios with dates and prices */
.opts { display: flex; flex-direction: column; gap: var(--s-2); }
.opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--co-row);
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--c-line-input);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.opt:hover { border-color: var(--c-ink); }
.opt:has(.check__input:checked) { border-color: var(--c-ink); }
.opt .check__input { margin: 0; }
.opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opt__title { font-size: var(--t-base); line-height: var(--lh-base); }
.opt__date { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-ink-muted); }
.opt__price {
  font-size: var(--t-base);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Delivery method / billing sub-groups */
.subgroup { display: flex; flex-direction: column; gap: var(--s-3); }
.subgroup > legend { padding-block-end: var(--s-3); }

/* ==========================================================================
   PAYMENT — encapsulated block
   ========================================================================== */
.pay {
  border: var(--bw) solid var(--c-ink);
  background: var(--c-surface-sunken);
  padding: var(--s-6);
}
.pay__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block-end: var(--s-4);
  border-block-end: var(--bw) solid var(--c-line-strong);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--c-ink-muted);
}
.pay__head svg { flex: none; width: var(--co-icon); height: var(--co-icon); color: var(--c-ink); }
.pay__methods { display: flex; flex-direction: column; }
.pay__opt + .pay__opt { border-block-start: var(--bw) solid var(--c-line-strong); }
.pay__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--co-row);
  cursor: pointer;
}
.pay__row .check__label { flex: 1; order: 0; }
.pay__row .pay__marks { order: 1; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pay__row .check__input { order: 2; margin: 0; background-color: var(--c-surface); }
.pay__row .check__input:checked { background-color: var(--c-ink); }
.pay__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-1) var(--s-5);
}
.pay__note { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-ink-secondary); }
.pay__note b { color: var(--c-ink); font-weight: var(--fw-medium); }

/* Card number with the auto-detected brand mark inside the field */
.cc__wrap { position: relative; }
.cc .input { padding-inline-end: calc(var(--s-4) * 2 + var(--s-12)); }
.cc__brand {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: var(--co-mark);
  padding-inline: var(--s-2);
  border: var(--bw) solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink-secondary);
  font-size: var(--t-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  pointer-events: none;
}
.cc__brand:empty { display: none; }

/* Bank tiles */
.paybanks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
@media (min-width: 480px) { .paybanks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .paybanks { grid-template-columns: repeat(5, 1fr); } }
.paybank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--co-row);
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line-input);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.paybank:hover { border-color: var(--c-ink); }
.paybank[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-inverse); border-color: var(--c-ink); }
.paybank__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--co-mark); height: var(--co-mark);
  border: var(--bw) solid currentColor;
  font-size: var(--t-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
}
.paybank__name { white-space: nowrap; }

/* ==========================================================================
   REVIEW — terms sentence, order button, assurance line
   ========================================================================== */
.checkout__terms {
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-secondary);
}
.checkout__terms a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.checkout__submit { margin-block-start: var(--s-5); }
.checkout__assure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-block-start: var(--s-4);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--c-ink-muted);
}
.checkout__assure span { display: inline-flex; align-items: center; gap: var(--s-1); }
.checkout__assure svg { width: var(--co-icon); height: var(--co-icon); }

/* ==========================================================================
   SUMMARY — sunken, 24px
   ========================================================================== */
.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-surface-sunken);
}
.checkout-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.sum-list { display: flex; flex-direction: column; gap: var(--s-4); }
.sum-item {
  display: grid;
  grid-template-columns: var(--co-thumb) 1fr auto;
  gap: var(--s-3);
  align-items: start;
}
.sum-item__media {
  position: relative;
  width: var(--co-thumb);
  aspect-ratio: var(--ratio-product);
  background: var(--c-surface);
}
.sum-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sum-item__count {
  position: absolute;
  top: calc(var(--co-bubble) / -2);
  right: calc(var(--co-bubble) / -2);
  min-width: var(--co-bubble);
  height: var(--co-bubble);
  padding-inline: var(--s-1);
  display: grid;
  place-items: center;
  background: var(--c-ink);
  color: var(--c-on-inverse);
  border-radius: var(--radius-full);
  font-size: var(--t-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.sum-item__body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sum-item__title { font-size: var(--t-base); line-height: var(--lh-base); }
.sum-item__meta { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--c-ink-muted); }
.sum-item__price { text-align: right; }
.sum-item__price .price { flex-direction: column; align-items: flex-end; gap: 0; }

.sum-code { display: flex; flex-direction: column; gap: var(--s-3); }
.sum-code__panel { display: flex; gap: var(--s-2); align-items: flex-start; }
.sum-code__panel .field { flex: 1; min-width: 0; }
.sum-code__panel .btn { flex: none; }
.sum-code__applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); line-height: var(--lh-xs); }
.sum-code__applied b { font-weight: var(--fw-medium); }

.sum-totals { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-base); line-height: var(--lh-base); }
.sum-totals__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.sum-totals__row dt { color: var(--c-ink-secondary); }
.sum-totals__row dd { font-variant-numeric: tabular-nums; text-align: right; }
.sum-totals__total {
  align-items: baseline;
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: var(--bw) solid var(--c-line-strong);
}
.sum-totals__total dt { color: var(--c-ink); font-weight: var(--fw-medium); }
.sum-totals__total dd { display: flex; flex-direction: column; align-items: flex-end; }
.sum-totals__total .t-lg { font-weight: var(--fw-medium); }

.sum-trust { display: flex; align-items: center; gap: var(--s-2); }
.sum-trust svg { flex: none; width: var(--co-icon); height: var(--co-icon); }

/* ==========================================================================
   FIXED BOTTOM ORDER BAR (≤1023) — 72px; hidden while the real button
   is in view. aria-hidden + inert are toggled by JS.
   ========================================================================== */
.cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  height: var(--co-cta-h);
  padding: var(--s-2) var(--gutter);
  background: var(--c-surface);
  border-block-start: var(--bw) solid var(--c-line);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--dur-exit) var(--ease-exit),
              visibility 0s linear var(--dur-exit);
}
.cta-bar[data-visible="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-enter) var(--ease-enter);
}
@media (min-width: 1024px) { .cta-bar { display: none; } }

/* ==========================================================================
   LEGAL FOOT — one line
   ========================================================================== */
.checkout-foot { border-block-start: var(--bw) solid var(--c-line); }
.checkout-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--c-ink-muted);
}
.checkout-foot__inner p { margin: 0; }
.checkout-foot__inner a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.checkout-foot__inner .cluster { --cluster-gap: var(--s-4); }

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.confirm {
  width: 100%;
  max-width: calc(var(--container-text) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--section-gap-sm) var(--gutter) var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.confirm__head { display: flex; flex-direction: column; gap: var(--s-3); }
.confirm__lead { font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-ink-secondary); }
.confirm__lead b { color: var(--c-ink); font-weight: var(--fw-medium); }
.confirm .checkout-summary { gap: var(--s-4); }
.confirm__delivery { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-base); line-height: var(--lh-base); }
.confirm__delivery svg { flex: none; width: var(--co-icon); height: var(--co-icon); margin-block-start: var(--s-1); }
.confirm__delivery span { color: var(--c-ink-secondary); }
.track {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border: var(--bw) solid var(--c-line-strong);
}
.track__text { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--c-ink-muted); }
.track__form { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 480px) {
  .track__form { flex-direction: row; align-items: flex-end; }
  .track__form .field { flex: 1; }
}
.confirm__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Bank tiles with official artwork; initials remain where none is available. */
.paybank__logo { height: 24px; width: auto; max-width: 72px; object-fit: contain; }