/* Cart page (#/cart) + checkout dialog (components/checkout.js). Owner: commerce.
   This file is linked globally, so the checkout dialog is styled on every route.
   Flat CSS (no nesting). Breakpoints: mobile < 768, tablet 768–1099, desktop >= 1100. */

/* ==========================================================================
   Shared asset presentation (cart rows, order rows, checkout rows)
   ========================================================================== */
.asset-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #EEF2F8;   /* cool neutral tile: the transparent CS2 renders sit on it like in the references */
  overflow: hidden;
  color: var(--ink-3);
}
.asset-thumb img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
}
.asset-thumb--cover img { object-fit: cover; padding: 0; transform: scale(1.04); }
.asset-thumb__fallback { grid-area: 1 / 1; display: none; place-items: center; }
.asset-thumb__fallback svg { width: 22px; height: 22px; }
.asset-thumb.is-empty .asset-thumb__fallback,
.asset-thumb.is-broken .asset-thumb__fallback { display: grid; }
.asset-thumb.is-broken img { display: none; }

/* Separators hang in the column gap; overflow:hidden clips the one that would start a wrapped line. */
.asset-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 15px;
  row-gap: 2px;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.asset-meta > span { position: relative; }
.asset-meta > span + span::before {
  content: '·';
  position: absolute;
  left: -10px;
  color: var(--ink-3);
}
.asset-meta__id { color: var(--ink-2); font-weight: 500; }

.asset-transfer {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.asset-transfer svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--warning); }
.asset-transfer.is-instant svg { color: var(--success); }
/* «до 12 часов»: hourglass in the brand ink blue (instant ⇆ green, «с даты» clock amber) */
.asset-transfer.is-within svg { color: var(--accent-ink); }
.asset-transfer__note { color: var(--ink-3); }

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-page { padding-bottom: var(--space-6); }

.cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: var(--space-6);
}
.cart-head__title { padding-left: 4px; } /* the skew leans the first letter left */
.cart-head__count {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cart-head__count:empty { display: none; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "list" "summary" "orders";
  gap: 20px;
  align-items: start;
}
.cart-list { grid-area: list; }
.cart-summary { grid-area: summary; }
.cart-orders { grid-area: orders; }

.cart-list,
.cart-orders { padding: 24px 28px 8px; }

/* Panel heading (same geometry as «Экземпляры SKINAURA» on the product page) */
.cart-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 14px;
}
.cart-panel__heading { min-width: 0; max-width: 72ch; }
.cart-panel__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.cart-panel__count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 4px;
  font-variant-numeric: tabular-nums;
}
.cart-panel__sub { margin-top: 6px; color: var(--ink-3); font-size: var(--fs-base); line-height: 1.5; }
.cart-panel__title:focus,
.cart-head__title:focus,
.cart-empty .state__title:focus,
.cart-error .state__title:focus { outline: none; }

/* --- cart rows ----------------------------------------------------------- */
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 44px;
  grid-template-areas: "media body side actions";
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.cart-item__media { grid-area: media; display: block; border-radius: 12px; }
.cart-item__media .asset-thumb { transition: background-color var(--dur-fast) var(--ease-out); }
a.cart-item__media:hover .asset-thumb { background: #E6ECF6; }
.cart-item--skeleton .cart-item__media { aspect-ratio: 4 / 3; }

.cart-item__body { grid-area: body; display: grid; gap: 4px; min-width: 0; }
.cart-item__name {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
.cart-item__name a {
  position: relative;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.cart-item__name a::before { content: ''; position: absolute; inset: -14px -4px; } /* ≥ 44px hit target (one 18px line on phones) */
.cart-item__name a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .2em; }
.cart-item__name a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cart-item__hint { font-size: var(--fs-sm); color: var(--ink-3); }

.cart-item__side {
  grid-area: side;
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 112px;
  text-align: right;
}
.cart-item__price { font-size: var(--fs-xl); line-height: 1.1; color: var(--ink); }
.cart-item__price.is-struck { color: var(--ink-3); font-size: var(--fs-md); text-decoration: line-through; text-decoration-thickness: 1px; }
.cart-item__note { font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-3); max-width: 18ch; }
.cart-item__actions { grid-area: actions; justify-self: end; }
.cart-item__remove.btn--ghost { --btn-fg: var(--ink-3); }
.cart-item__remove:hover { --btn-fg: var(--danger); --btn-bg: var(--danger-tint); --btn-bd: transparent; }
.cart-item__remove.btn--secondary:hover { --btn-bd: var(--danger); }

.cart-item.is-out .asset-thumb img { opacity: .5; filter: grayscale(1); }
.cart-item.is-out .cart-item__name { color: var(--ink-2); }

/* --- summary ------------------------------------------------------------- */
.cart-summary {
  display: grid;
  gap: 16px;
  padding: 24px;
}
.cart-summary__title { font-size: var(--fs-xl); font-weight: 600; }
.cart-summary__rows { border-top: 1px solid var(--line); }
.cart-summary__rows .spec-list__row { font-size: var(--fs-base); }
.cart-summary__warn { color: var(--warning) !important; }
.cart-summary__total { display: grid; gap: 6px; padding-top: 2px; }
.cart-summary__label { font-size: var(--fs-sm); color: var(--ink-3); }
.cart-summary__value {
  font-size: clamp(2rem, 1.3rem + 1.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.cart-summary__skeleton { display: inline-block; width: 190px; height: 36px; vertical-align: middle; }
.cart-summary__hint { margin-top: -6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }

/* --- empty / error -------------------------------------------------------- */
/* The shared boxed state (components.css .state--boxed) replaces the white card: the list panel is just a
   landmark while it holds one, so the empty cart reads exactly like empty favorites / catalog / 404. */
.cart-layout.is-empty > .cart-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.cart-empty { padding: 64px 24px; }
.cart-error { padding: 40px 16px 48px; }

/* --- purchases («Покупки») ------------------------------------------------ */
/* A Steam trade's status line (cart rows + the checkout's success screen): a tone dot and the lifecycle text with
   its time; no pill, so a long line («Обмен отправлен · примите его в Steam до 14:05») wraps like text. */
.trade-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trade-status__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  transform: translateY(-1px);
}
.trade-status--success .trade-status__dot { background: var(--success); }
.trade-status--info .trade-status__dot { background: var(--accent); }
.trade-status--warning .trade-status__dot { background: #D99A0B; box-shadow: 0 0 0 3px var(--warning-tint); }
.trade-status--danger .trade-status__dot { background: var(--danger); }
.trade-status--neutral { color: var(--ink-2); font-weight: 500; }
.trade-status--danger { color: var(--danger); }
/* the offer waiting in Steam is the one moment the buyer has to act: its dot breathes (motion allowed only) */
@media (prefers-reduced-motion: no-preference) {
  .trade-status--warning .trade-status__dot { animation: trade-wait 1.8s var(--ease-out) infinite; }
}
@keyframes trade-wait { 50% { box-shadow: 0 0 0 5px rgba(217, 154, 11, .12); } }

.cart-orders__list { list-style: none; margin: 0; padding: 0; }
.cart-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "main status total"
    "items items items"
    "trades trades trades";
  align-items: start;
  column-gap: 24px;
  row-gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.cart-order__main { grid-area: main; min-width: 0; }
.cart-order__id { font-size: var(--fs-md); font-weight: 600; letter-spacing: .01em; }
.cart-order__date { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* the lines sit flush right as blocks; a line that wraps keeps its dot beside its first word */
.cart-order__status { grid-area: status; display: grid; justify-items: end; gap: 4px; max-width: 46ch; padding-top: 2px; }
.cart-order__total { grid-area: total; min-width: 112px; font-size: var(--fs-lg); text-align: right; color: var(--ink); }
.cart-order__refund {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.cart-order__refund svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.cart-order__items { grid-area: items; display: flex; align-items: center; gap: 14px; min-width: 0; }
.cart-order__thumbs { display: flex; flex: none; }
.cart-order__thumbs .asset-thumb {
  width: 60px;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--surface);
}
.cart-order__thumbs .asset-thumb + .asset-thumb { margin-left: -14px; }
.cart-order__names { min-width: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.cart-order__asset { color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* an order delivered in several Steam trades: one line per trade under the items */
.cart-order__trades {
  grid-area: trades;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
  border-left: 2px solid var(--line);
}
.cart-order__trade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 20px;
  padding: 6px 0;
}
.cart-order__trade-items { min-width: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }
.cart-order__trade-status { display: grid; justify-items: end; gap: 2px; max-width: 46ch; }
/* a finished purchase recedes; the one still on its way keeps full ink */
.cart-order.is-final .cart-order__thumbs { opacity: .7; }

.cart-orders__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-base);
}
.cart-orders__empty svg { width: 20px; height: 20px; flex: none; }
.cart-orders__signin { flex-wrap: wrap; }
.cart-orders__signin > span { flex: 1 1 260px; }
.cart-orders__signin .btn { flex: none; }

.cart-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--line);
}
.cart-reset__text { max-width: 62ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }
.cart-reset .btn { flex: none; }

/* --- layout breakpoints ---------------------------------------------------- */
@media (min-width: 1100px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px);
    grid-template-areas:
      "list summary"
      "orders summary";
  }
  .cart-layout.is-empty {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "list" "orders";
  }
  .cart-summary { position: sticky; top: 16px; }
}

@media (max-width: 767.98px) {
  .cart-head { margin-bottom: var(--space-4); gap: 2px 14px; }
  .cart-head__count { font-size: var(--fs-md); }
  .cart-layout { gap: 14px; }
  .cart-list,
  .cart-orders { padding: 18px 16px 4px; border-radius: 20px; }
  .cart-summary { padding: 18px 16px; border-radius: 20px; gap: 14px; }
  .cart-panel__title { font-size: var(--fs-xl); }
  .cart-panel__sub { font-size: var(--fs-sm); }
  .cart-panel__head .btn { width: 100%; }

  .cart-item {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas:
      "media body body"
      "media side actions";
    align-items: start;
    column-gap: 14px;
    row-gap: 10px;
    padding: 14px 0;
  }
  .cart-item__name { font-size: var(--fs-base); }
  .cart-item__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    min-width: 0;
    text-align: left;
    align-self: center;
  }
  .cart-item__price { font-size: var(--fs-lg); }
  .cart-item__note { max-width: none; }
  .cart-item__actions { align-self: center; }

  /* catalog first and full width, the two games as an even pair under it (no lone button on its own row) */
  .cart-empty .state__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 360px;
  }
  .cart-empty .state__actions .btn--primary { grid-column: 1 / -1; }

  .cart-order {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main total"
      "status status"
      "items items"
      "trades trades";
    column-gap: 14px;
    row-gap: 10px;
    padding: 16px 0;
  }
  .cart-order__status { justify-items: start; max-width: none; padding-top: 0; }
  .cart-order__total { min-width: 0; }
  .cart-order__thumbs .asset-thumb { width: 52px; }
  .cart-order__trade { grid-template-columns: minmax(0, 1fr); }
  .cart-order__trade-status { justify-items: start; max-width: none; }

  .cart-reset { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Checkout dialog (components/checkout.js) — dialog--lg + .checkout-dialog
   ========================================================================== */
.checkout { display: grid; gap: 16px; }
.checkout [tabindex='-1']:focus,
.checkout-dialog .dialog__title:focus { outline: none; }

.checkout-id { white-space: nowrap; font-variant-numeric: tabular-nums; } /* «SA-ORD-…» never splits */
.checkout__title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.checkout__lead { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-3); }
.checkout .notice strong { font-weight: 600; }

/* checking */
.checkout-wait {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
}
.checkout-wait__title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.checkout-wait__text { font-size: var(--fs-sm); color: var(--ink-2); }
.checkout-spinner {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(55, 129, 252, .22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sa-spin .8s linear infinite;
}

/* rows */
.checkout-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.checkout-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas: "media info price";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  padding: 12px 0;
}
.checkout-item + .checkout-item { border-top: 1px solid var(--line); }
.checkout-item > .asset-thumb { grid-area: media; border-radius: 10px; }
.checkout-item__info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.checkout-item__info .skeleton--text + .skeleton--text { margin-top: 6px; }
.checkout-item__name { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; color: var(--ink); }
.checkout-item__price {
  grid-area: price;
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}
.checkout-item__price .t-price { font-size: var(--fs-lg); color: var(--ink); }
.checkout-item__change { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-3); }
.checkout-item__change s { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.checkout-item__excluded { font-size: var(--fs-xs); color: var(--ink-3); }
.checkout-item.is-out .asset-thumb img { opacity: .45; filter: grayscale(1); }
.checkout-item.is-out .checkout-item__name { color: var(--ink-2); }

.checkout-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.checkout-total__label { color: var(--ink-2); font-size: var(--fs-base); }
.checkout-total__value { font-size: var(--fs-2xl); line-height: 1.1; color: var(--ink); }

ul.checkout-honest { /* beats base.css ul[role='list'] { padding: 0 } */
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.checkout-honest li { display: flex; align-items: flex-start; gap: 10px; }
.checkout-honest svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-3); }
.checkout-honest strong { font-weight: 600; color: var(--ink); }

/* the balance the purchase is paid from (or the Steam sign-in it needs) */
.checkout-pay {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.checkout-pay.is-short { border-color: #F0D9A6; background: #FFFCF4; }
.checkout-pay__rows { display: grid; gap: 4px; margin: 0; }
.checkout-pay__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-base);
  color: var(--ink-2);
}
.checkout-pay__row dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.checkout-pay__row--main { color: var(--ink); font-weight: 600; }
.checkout-pay__row--main dd { font-size: var(--fs-lg); }
.checkout-pay__row--sub { font-size: var(--fs-sm); color: var(--ink-3); }
.checkout-pay__row--sub dd { color: var(--ink-2); font-weight: 500; }
.checkout-pay__row--short,
.checkout-pay__row--short dd { color: var(--warning); }
.checkout-pay__row--short dd { font-size: var(--fs-lg); }
.checkout-pay__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #F0E3C4;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.checkout-pay__note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--warning); }
.checkout-pay--signin { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; background: var(--surface-2); }
.checkout-pay__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--rail-bg);
  color: #FFFFFF;
}
.checkout-pay__steam { width: 22px; height: 22px; }
.checkout-pay__body { display: grid; gap: 2px; min-width: 0; }
.checkout-pay__title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.checkout-pay__text { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); }

/* the Steam trade link the purchase goes to */
.checkout-link-saved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.checkout-link-saved > svg { width: 18px; height: 18px; flex: none; color: var(--success); }
.checkout-link-saved__edit,
.checkout-link__keep { position: relative; min-height: 32px; font-size: var(--fs-sm); }
.checkout-link-saved__edit::before,
.checkout-link__keep::before { content: ''; position: absolute; inset: -6px -4px; } /* 44px hit target */
.checkout-link__keep { justify-self: start; }
.checkout-link .field__hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }
.checkout-link__help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.checkout-link__help:hover { text-decoration: underline; text-underline-offset: .2em; }
.checkout-link__help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.checkout-link__input { font-size: var(--fs-sm); }

/* success */
.checkout-done {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.checkout-done__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--success-tint);
  color: var(--success);
}
.checkout-done__mark svg { stroke-width: 2.25; }
.checkout-done__text { display: grid; gap: 10px; min-width: 0; padding-top: 2px; }
.checkout-done__status {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.checkout-trades { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.checkout-trade { display: grid; gap: 2px; }
.checkout-trade__items { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.checkout-trade__refund {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-left: 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.checkout-trade__refund svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.checkout-done__balance { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.checkout-done__balance svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.checkout-done__balance strong { color: var(--ink); font-weight: 600; }

/* buttons in flight keep their own colour (the base disabled look would read as «unavailable») */
.checkout-dialog .btn--primary.is-loading[aria-disabled='true'] {
  --btn-bg: var(--accent-strong);
  --btn-bd: var(--accent-strong);
  --btn-fg: #FFFFFF;
}
.checkout-dialog .dialog__close:disabled { --btn-bg: transparent; opacity: .45; }
/* the base disabled rule drops box-shadow; a busy button keeps keyboard focus, so keep its ring */
.checkout-dialog .btn.is-loading[aria-disabled='true']:focus-visible,
.cart-summary__cta[aria-disabled='true']:focus-visible { box-shadow: var(--focus-ring); }

/* One authored moment: each step enters softly; the success mark draws itself. */
@media (prefers-reduced-motion: no-preference) {
  .checkout.is-entering { animation: checkout-step-in 260ms var(--ease-out); }
  .checkout.is-entering .checkout-done__mark path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: checkout-draw 460ms var(--ease-out) 140ms forwards;
  }
}
/* The global reduced-motion reset targets *, ::before, ::after — not ::backdrop, which kept a 220ms fade. */
@media (prefers-reduced-motion: reduce) {
  .dialog.checkout-dialog[open]::backdrop,
  .dialog.checkout-dialog.is-closing::backdrop,
  .dialog.cart-reset-dialog[open]::backdrop,
  .dialog.cart-reset-dialog.is-closing::backdrop { animation: none; }
}
@keyframes checkout-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes checkout-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 767.98px) {
  .checkout-dialog .dialog__footer { flex-direction: column-reverse; }
  .checkout-dialog .dialog__footer .btn { width: 100%; flex: none; white-space: normal; }
  .checkout-item {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "media info"
      "media price";
    align-items: start;
    column-gap: 12px;
  }
  .checkout-item__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 10px;
    text-align: left;
  }
  .checkout-wait { padding: 14px; }
  .checkout-done { gap: 12px; padding: 14px; }
  .checkout-done__mark { width: 40px; height: 40px; border-radius: 12px; }
  .checkout-done__mark svg { width: 24px; height: 24px; }
  .checkout-total__value { font-size: var(--fs-xl); }
  .checkout-pay { padding: 12px 14px; }
  .checkout-pay--signin { gap: 12px; }
  .checkout-pay__mark { width: 36px; height: 36px; border-radius: 10px; }
}