/* ==========================================================================
   PAGES-CHECKOUT · cart.html + checkout.html (Frontend Dev #3)
   DESIGN §7.15–7.17, §8.4. Tokens only. Everything here is on PAPER: the only
   glass on these pages is the capsule (T1). Inputs, summary cards and the
   mobile bottom bars are solid Paper.
   The 560 px form column is tokens.css --form-w (§7.16).
   ========================================================================== */


/* ---- Shared: summary card (Paper, radius 22, --shadow-card) -------------- */
.summary-card {
  display: grid; gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  border: var(--edge-soft);
}
/* contour signature: an Oat strip with the first coffee's altitude rings */
.summary-card__topo {
  block-size: var(--space-9);
  margin-inline: calc(var(--space-5) * -1);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--oat);
  color: color-mix(in oklab, var(--bag-dark, var(--pine)) var(--zone-glass-a), transparent);
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 55%, transparent);
          mask: linear-gradient(#000 55%, transparent);
}
.summary-card__topo svg { display: block; inline-size: 100%; block-size: 100%; }
.summary-card__h {
  margin-block-start: calc(var(--space-7) * -1);
  font-size: var(--fs-h5);
  position: relative;
}
.summary-card__small { font-size: var(--fs-label); color: var(--muted); }

.summary-rows { display: grid; gap: var(--space-2); margin: 0; }
.summary-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.summary-rows dt { font-size: var(--fs-ui); font-weight: var(--fw-strong); }
.summary-rows dd { margin: 0; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.summary-rows__total { padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule); }
.summary-rows__total dd { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-display); }

/* shipping method radio cards (look of the size cards) */
.ship-method, .co-delivery { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ship-method__opts, .co-delivery__opts { display: grid; gap: var(--space-2); }
.ship-card { min-block-size: var(--btn-h-lg); }
.ship-card .size-card__label { display: flex; justify-content: space-between; gap: var(--space-3); padding-inline-end: var(--space-2); }
.ship-card__cost { font-variant-numeric: tabular-nums; }
.ship-card .size-card__sub { font-size: var(--fs-label); }

/* order items (checkout summary + confirmation) */
.co-items { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.co-item { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.co-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  padding: var(--space-1) var(--space-2) 0;
  border-radius: var(--r-well);
  background: var(--oat);
}
.co-item__thumb .bag { block-size: 100%; inline-size: auto; margin-inline: auto; }
.co-item__qty {
  position: absolute; inset-block-start: calc(var(--space-2) * -1); inset-inline-end: calc(var(--space-2) * -1);
  display: grid; place-items: center;
  min-inline-size: var(--space-5); block-size: var(--space-5);
  padding-inline: var(--space-1);
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-micro); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums;
}
.co-item__body { display: grid; min-inline-size: 0; }
.co-item__name { font-weight: var(--fw-strong); text-decoration: none; }
a.co-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-item__meta { font-size: var(--fs-label); color: var(--muted); }
.co-item__price { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   CART PAGE
   ========================================================================== */
.cartpg { padding-block: var(--space-4) var(--section-y-tight); }
.cartpg__back { margin-block-end: var(--space-3); }
.cartpg__head { display: grid; gap: var(--space-4); max-inline-size: var(--form-w); }
.cartpg__head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.cartpg__count { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: var(--fw-strong); color: var(--muted); vertical-align: middle; }
.cartpg__ship { padding: var(--space-4); border-radius: var(--r-tile); background: var(--paper); border: var(--edge-soft); }

.cartpg__grid { display: grid; gap: var(--space-7); margin-block-start: var(--space-5); }
.cartpg__lines { display: grid; gap: var(--space-4); min-inline-size: 0; }
.cartpg__h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-block: var(--space-4) var(--space-5); }

/* cards (< 1024) */
.cartpg__cards .cart-line { grid-template-columns: var(--space-9) minmax(0, 1fr); padding: var(--space-4); }
.cartpg__card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.cartpg__card-top .cart-line__name { font-family: var(--font-display); font-size: var(--fs-h5); line-height: 1.2; font-weight: var(--fw-display-strong); }
.cartpg__meta { display: block; font-size: var(--fs-label); color: var(--muted); }
.cartpg__cards .cart-line__row { flex-wrap: wrap; }
/* C-16: long (German +35 %) names and prices wrap instead of pushing the card wider */
.cart-line__body .cartpg__card-top { min-inline-size: 0; flex-wrap: wrap; }
.cartpg__card-top .cart-line__name { min-inline-size: 0; overflow-wrap: anywhere; }
.cartpg__card-top .cart-line__price { min-inline-size: 0; overflow-wrap: anywhere; }
.cart-line__opts .select--sm { max-inline-size: 100%; }
.cart-bar .btn { white-space: normal; text-align: center; }
/* C-15: the size and grind selects share one width */
.cartpg .cart-line__opts .select--sm { inline-size: 100%; max-inline-size: 164px; }

/* ruled table (≥ 1024) */
.cart-table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; }   /* R2-1: never wider than its column */
.cart-table th, .cart-table td { padding: var(--space-4) var(--space-3); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--rule); }
.cart-table thead th { padding-block: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); letter-spacing: var(--tr-label); border-block-end-color: var(--rule-strong); }
.cart-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-table th:first-child, .cart-table td:first-child { padding-inline-start: 0; }
.cart-table th:last-child, .cart-table td:last-child { padding-inline-end: 0; }
.cart-table__item { display: flex; align-items: center; gap: var(--space-4); font-weight: var(--fw-body); }
.cart-table__item .cart-line__thumb { inline-size: var(--thumb); flex: none; }
.cart-table__name { display: grid; gap: var(--space-1); }
.cart-table .cart-line__name { font-family: var(--font-display); font-size: var(--fs-h5); line-height: 1.2; font-weight: var(--fw-display-strong); }
.cart-table .cart-line__opts { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* R2-1: stacked, so the fixed column stays narrow */
/* R2-1: fixed layout, so explicit widths; Coffee takes what is left */
.cart-table thead th:nth-child(2) { inline-size: calc(164px + var(--space-3) * 2); }
.cart-table thead th:nth-child(3) { inline-size: 5.5rem; }
.cart-table thead th:nth-child(4) { inline-size: calc(var(--tap) * 3 + var(--space-3) * 2); }
.cart-table thead th:nth-child(5) { inline-size: 6rem; }
.cart-table .cartpg__meta { display: none; }   /* the two selects show size and grind right beside it */
.cart-table .cart-line__name { overflow-wrap: normal; }
.cartpg__summary > .cartpg__ship { margin-block-end: var(--space-4); }

.cartpg__nudge { max-inline-size: var(--form-w); }
.cartpg__note { margin: 0; }

.cartpg__summary .summary-card { position: relative; }

@media (min-width: 1024px) {
  .cartpg__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-8); align-items: start; }
  /* 1024–1279: the ruled table needs the full width; the summary card sits
     under it on the right (cols 7–12) */
  .cartpg__lines, .cartpg__pairs { grid-column: 1 / -1; }
  .cartpg__summary { grid-column: 7 / -1; }
  .cartpg__head { grid-template-columns: minmax(0, 1fr); max-inline-size: none; }
  .cartpg__head .cartpg__ship { max-inline-size: var(--form-w); }
  .cartpg__note { position: absolute; inset-inline-end: var(--page-x); }
  .cartpg__head { position: relative; }
}
@media (min-width: 1200px) {
  .cartpg__note { inset-inline-end: 0; }
}
@media (min-width: 1280px) {
  .cartpg__lines, .cartpg__pairs { grid-column: 1 / span 8; }
  .cartpg__summary { grid-column: 9 / span 4; grid-row: 1 / span 2; position: sticky; top: var(--chrome-clear); }
}

/* mobile bottom bar: solid Paper, NOT glass (DESIGN §7.16) */
.cart-bar {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--page-x) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-block-start: var(--edge-strong);
  box-shadow: var(--shadow-sheet);
  transition: transform var(--t-hide) var(--ease-std);
}
.cart-bar.is-tucked { transform: translateY(110%); }
.cart-bar__total { display: grid; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted); line-height: 1.2; }
.cart-bar__total strong { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-bar .btn { flex: 1; max-inline-size: 16rem; }
@media (prefers-reduced-motion: reduce) { .cart-bar { transition: none; } }
@media (min-width: 1024px) { .cart-bar { display: none; } }
/* room for the bar; toasts sit above it, never over Check out */
@media (max-width: 1023.98px) {
  body[data-page="cart"] main:has(.cart-bar:not([hidden])) { padding-block-end: calc(var(--btn-h-md) + var(--space-7)); }
  body[data-page="cart"] .toasts { inset-block-end: calc(var(--btn-h-md) + var(--space-6) + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) { .cart-bar { position: static; } }

/* empty state */
.cartpg__empty { position: relative; display: grid; justify-items: start; gap: var(--space-5); padding-block: var(--space-6) var(--space-7); max-inline-size: 46rem; }
.cartpg__empty h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.cartpg__empty .lead { margin: 0; }
.cartpg__slip { justify-self: end; }
.cartpg__empty-topo {
  inline-size: 100%; block-size: var(--space-10);
  color: color-mix(in oklab, var(--pine) var(--zone-glass-a), transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
          mask: linear-gradient(90deg, transparent, #000 var(--zone-feather), #000 calc(100% - var(--zone-feather)), transparent);
}
.cartpg__empty-topo svg { inline-size: 100%; block-size: 100%; display: block; }

/* reassurance row */
.reassure {
  display: grid; gap: var(--space-3);
  margin-block-start: var(--section-y-tight);
  padding: var(--space-5) 0 0;
  border-block-start: 1px solid var(--rule);
  list-style: none;
}
.reassure li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-strong); }
.reassure .icon { color: var(--pine); }
@media (min-width: 768px) { .reassure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }


/* ==========================================================================
   CHECKOUT
   ========================================================================== */
/* minimal capsule (C-17): back plate left · logo centred · lock + "Secure demo checkout" right */
.co-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.co-header__bar > .capsule__logo { justify-self: center; grid-column: 2; grid-row: 1; }
.co-header__bar > .co-header__back { justify-self: start; grid-column: 1; grid-row: 1; }
.co-header__bar > .co-header__secure { grid-column: 3; grid-row: 1; }
.co-header__secure {
  justify-self: end;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: var(--tap); margin: 0;
  padding-inline: var(--space-3);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label);
  white-space: nowrap;
}
/* phones: the lock alone says it; the words stay for screen readers */
@media (max-width: 599.98px) {
  .co-header__secure { padding-inline: var(--space-2); }
  .co-header__secure span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* icon-only back plate on phones so the centred logo never collides; the name stays "Back to cart" */
  .co-header__back { inline-size: var(--tap); justify-content: center; padding-inline: 0; }
  .co-header__back span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.co-header__back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-inline: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: var(--tr-label);
  text-decoration: none;
  white-space: nowrap;
}

.co { padding-block: var(--space-4) var(--section-y-tight); }
.co-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-input);
  background: var(--saffron-tint);
  border: var(--edge-soft);
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong);
  color: var(--ink);
}
.co-banner .icon { margin-block-start: -1px; }

.co__layout { display: grid; gap: var(--space-5); margin-block-start: var(--space-5); }
.co__head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-block-start: var(--space-3); }

/* mobile summary: <details> in an Oat band, full bleed */
.co-mini {
  margin-inline: calc(var(--page-x) * -1);
  background: var(--oat);
  border-block: 1px solid var(--rule);
}
.co-mini__summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--row-h);
  padding-inline: var(--page-x);
  font-size: var(--fs-ui); font-weight: var(--fw-strong);
  cursor: pointer;
  list-style: none;
}
.co-mini__summary::-webkit-details-marker { display: none; }
.co-mini__summary strong { font-variant-numeric: tabular-nums; }
.co-mini__summary .icon { margin-inline-start: auto; transition: transform var(--t-fast) var(--ease-std); }
.co-mini[open] .co-mini__summary .icon { transform: rotate(180deg); }
.co-mini__body { display: grid; gap: var(--space-4); padding: var(--space-2) var(--page-x) var(--space-5); }
.co-mini__body .co-item__thumb { background: var(--paper); }

.co-form { max-inline-size: var(--form-w); min-inline-size: 0; }
.co-section { margin-block-start: var(--space-7); }
.co-section:first-of-type { margin-block-start: var(--space-5); }
.co-section__h { font-size: var(--fs-h5); line-height: 1.25; font-weight: var(--fw-display-strong); margin-block-end: var(--space-5); padding: 0; }
legend.co-section__h { float: inline-start; inline-size: 100%; }
legend.co-section__h + * { clear: both; }
.co-section > .field + .field, .co-pair, .co-pair + .field { margin-block-start: 20px; }
.co-pair { display: grid; gap: 20px; }
.co-pair .field + .field { margin: 0; }
@media (min-width: 480px) { .co-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); } }
.co-country { margin-block-start: var(--space-3); font-size: var(--fs-label); color: var(--muted); }

/* the error line: Clay icon + Ink text (components.css), plus the field rule */
.co-form .field__error[hidden] { display: none; }
.co-form .field--error { margin-inline-start: calc(var(--space-3) * -1 - 2px); }

.co-errors { margin-block-start: var(--space-5); }
.co-errors:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.co-errors__h { font-size: 1.25rem; line-height: 1.3; font-weight: var(--fw-display-strong); }
.co-errors__list { display: grid; gap: var(--space-1); margin-block-start: var(--space-3); padding: 0; list-style: none; }
.co-errors__list a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--clay); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-strong); }

.co-delivery__note { margin-block-start: var(--space-4); }

/* switched-off payment panel: an Oat notice card */
.co-pay { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--r-tile); background: var(--oat); border: var(--edge-soft); }
.co-pay__text { font-weight: var(--fw-strong); }
.co-pay__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.co-pay__pills li {
  display: inline-flex; align-items: center;
  min-block-size: var(--badge-h);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--r-pill);
  border: 1px dashed color-mix(in oklab, var(--ink) 40%, transparent);
  color: var(--muted);   /* C-07: informational text, ≥ 4.5:1 on Oat */
  font-size: var(--fs-label); font-weight: var(--fw-strong);
}

/* ---- gift option (C-08) ---- */
.co-gift { border: 0; margin: var(--space-6) 0 0; padding: var(--space-4); min-inline-size: 0; border-radius: var(--r-tile); border: var(--edge-soft); background: var(--paper); }
.co-gift.is-on { border-color: var(--pine); }
.co-check { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap); }
.co-check__input {
  appearance: none; flex: none; margin: 0;
  inline-size: var(--check); block-size: var(--check);
  border-radius: var(--r-check); border: var(--edge-strong); background: var(--paper);
  display: grid; place-items: center; cursor: pointer;
}
.co-check__input::after { content: ""; inline-size: 6px; block-size: 11px; margin-block-start: -2px; border: solid var(--on-pine); border-width: 0 2px 2px 0; transform: rotate(45deg); visibility: hidden; }
.co-check__input { position: relative; z-index: 1; }   /* above the label's tap overlay */
.co-check__input:checked { background: var(--pine); border-color: var(--pine); }
.co-check__input:checked::after { visibility: visible; }
.co-check__input:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: var(--focus-shadow); }
/* the whole row is the tap target (≥ 44 px) */
.co-check__label { font-weight: var(--fw-strong); cursor: pointer; padding-block: var(--space-2); }
.co-check__label::before { content: ""; position: absolute; inset: 0; }
.co-check__help { margin-block-start: 0; padding-inline-start: calc(var(--check) + var(--space-3)); }
.co-gift__opts { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.co-gift__opts[hidden] { display: none; }
.co-gift__note { inline-size: 100%; min-block-size: 96px; }
.co-gift__count { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; }
.co-giftline { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--ink); }
.co-giftline .icon { flex: none; margin-block-start: 2px; color: var(--pine); }

/* C-06 (WCAG 2.4.11): anything focused stays clear of the sticky Place order bar */
@media (max-width: 1023.98px) and (min-height: 600.02px) {
  html:has(.co-submit) { scroll-padding-bottom: calc(81px + 16px + env(safe-area-inset-bottom)); }
  .co-form :is(.field, input, select, textarea, .co-check, .co-delivery, .co-errors) { scroll-margin-block-end: calc(81px + 16px); }
}

/* Place order: sticky solid Paper bar on mobile */
.co-submit { margin-block-start: var(--space-7); }
@media (max-width: 1023.98px) {
  .co-submit {
    position: sticky; inset-block-end: 0;
    z-index: var(--z-sticky);
    margin-inline: calc(var(--page-x) * -1);
    padding: var(--space-3) var(--page-x) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--paper);
    border-block-start: var(--edge-strong);
  }
}
@media (max-height: 600px) { .co-submit { position: static; } }   /* C-22: short screens keep the bar in flow */
.co-submit .btn[aria-busy="true"] { cursor: progress; }
.co-submit .btn[aria-disabled="true"] { opacity: .85; }

.co-aside { display: none; }
@media (min-width: 1024px) {
  .co__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .co__head, .co-form { grid-column: 1 / span 7; }
  .co-mini { display: none; }
  .co-aside { display: block; grid-column: 8 / span 5; grid-row: 1 / span 3; position: sticky; top: var(--chrome-clear); }
}
@media (min-width: 1200px) { .co-aside { grid-column: 9 / span 4; } }

/* empty cart */
.co-empty { display: grid; justify-items: start; gap: var(--space-5); padding-block: var(--space-6); }
.co-empty h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.co-empty__h { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.co-empty .lead { margin: 0; }

/* confirmation: the one centred layout besides 404 */
.co-done { padding-block: var(--space-6) 0; }
.co-done__panel {
  display: grid; gap: var(--space-5); justify-items: center; text-align: center;
  max-inline-size: 42rem; margin-inline: auto;
  padding: 0 var(--space-5) var(--space-7);
  border-radius: var(--r-card);
  background: var(--paper);
  border: var(--edge-soft);
  box-shadow: var(--shadow-card);
}
.co-done__head { position: relative; display: grid; justify-items: center; gap: var(--space-3); inline-size: calc(100% + var(--space-5) * 2); padding: var(--space-8) var(--space-5) var(--space-2); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.co-done__topo {
  position: absolute; inset: 0;
  background: var(--oat);
  color: color-mix(in oklab, var(--pine) var(--zone-glass-a), transparent);
  -webkit-mask: linear-gradient(#000 40%, transparent);
          mask: linear-gradient(#000 40%, transparent);
  z-index: 0;
}
.co-done__topo svg { inline-size: 100%; block-size: 100%; display: block; }
.co-done__head > :not(.co-done__topo) { position: relative; }
.co-done__head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); max-inline-size: 16ch; text-wrap: balance; }
.co-done__head h1:focus { outline: none; }
.co-done__head h1:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.co-done__lead { max-inline-size: 40ch; margin: 0; }
.co-done__slip { overflow-wrap: anywhere; }
.co-done__sec { inline-size: 100%; display: grid; gap: var(--space-4); text-align: start; padding-block-start: var(--space-5); border-block-start: 1px solid var(--rule); }
.co-done__h2 { font-size: var(--fs-h5); line-height: 1.25; font-weight: var(--fw-display-strong); }
.co-steps { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.co-step { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.co-step__icon {
  position: relative; display: grid; place-items: center;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: 50%;
  background: var(--oat);
  color: color-mix(in oklab, var(--pine) var(--zone-glass-a), transparent);
  overflow: hidden;
}
.co-step__icon svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.co-step__n { position: relative; font-family: var(--font-display); font-size: var(--fs-numeral); font-weight: var(--fw-display); color: var(--clay); font-variant-numeric: lining-nums tabular-nums; }
.co-done__cta { margin-block-start: var(--space-2); }
@media (min-width: 768px) {
  .co-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-step { grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: start; }
}

/* minimal footer (Ink, dark zone) */
.co-footer {
  margin-block-start: auto;
  padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--on-ink-muted);
  font-size: var(--fs-label);
}
.co-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.co-footer .switch { color: var(--paper); inline-size: auto; }
.co-footer .switch__track { border-color: color-mix(in oklab, var(--paper) 60%, transparent); }
.co-footer :focus-visible { outline-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--paper); }
body[data-page="checkout"] main { flex: 1 0 auto; }
.co-aside [data-co-summary] { display: grid; gap: var(--space-4); }