/* ──────────────────────────────────────────────────────────────────────
   AnsaSkin checkout — its own design system.

   The storefront is cream, deep green and serif. Checkout is deliberately
   not: white surfaces, a restrained purple-to-blue gradient, cool borders
   and a modern grotesque, because a payment surface should read as precise
   and current rather than editorial.

   Everything is scoped under .sr-checkout so none of it leaks into the
   storefront, and the only brand elements carried across are the real ones:
   the official AnsaSkin logo on the gradient header, and a success green
   that is close enough to the brand's own deep green to feel like the same
   company saying "done".

   Tokens first, components after. No component invents a colour.
   ────────────────────────────────────────────────────────────────────── */

.sr-checkout {
  /*
   * The accents are the storefront's own, not a payment-app purple.
   *
   * Every primary button on this site is the brand ink on cream, the header
   * is that same ink, and the mark in the logo is a deep green. Checkout
   * keeps its clean modern STRUCTURE — white cards, crisp fields, one
   * accent — but takes its COLOUR from the shop, so the gradient CTA stops
   * looking like a different company's checkout bolted on.
   *
   * These mirror the tokens in creme.css rather than referencing them, so
   * the checkout still renders correctly if it is ever used on its own.
   */
  --sr-accent: var(--brand-cta, #252522);          /* --ink: every primary action on the site */
  --sr-accent-deep: var(--brand-chrome, #252522);     /* neutral brand chrome */
  --sr-accent-warm: #BB853C;     /* --gold, for small emphasis only */
  --sr-gradient: var(--sr-accent);

  /* Kept as aliases: the component rules below were written against these,
     and one definition of the accent is easier to trust than twenty. */
  --sr-purple: var(--sr-accent);
  --sr-blue: var(--sr-accent-deep);

  /* Ink */
  --sr-ink: #252522;
  --sr-ink-soft: #44423C;
  --sr-ink-faint: #6A665F;

  /* Surfaces */
  --sr-surface: #FFFFFF;
  --sr-surface-sunk: #FAF7F2;    /* --ivory, the page the shop sits on */
  --sr-surface-tint: #F0F0EE;    /* --sage-tint, for a selected choice */

  /* Lines */
  --sr-line: #E4DCD0;
  --sr-line-strong: #CFC4B4;

  /* States */
  --sr-success: #252522;         /* neutral confirmation ink */
  --sr-success-soft: #F0F0EE;
  --sr-error: #A64B3C;           /* --danger */
  --sr-error-soft: #F7EAE4;

  /* Geometry — one scale, used everywhere */
  --sr-r-sm: 8px;
  --sr-r: 12px;
  --sr-r-lg: 16px;
  --sr-r-xl: 20px;
  --sr-control-h: 48px;
  --sr-cta-h: 52px;
  --sr-touch: 44px;

  /* Rhythm */
  --sr-gap-1: 6px;
  --sr-gap-2: 10px;
  --sr-gap-3: 14px;
  --sr-gap-4: 20px;
  --sr-gap-5: 28px;

  --sr-shadow: 0 1px 2px rgba(37, 37, 34, .04), 0 8px 24px rgba(37, 37, 34, .07);
  --sr-shadow-lift: 0 18px 48px rgba(37, 37, 34, .22);

  --sr-font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  font-family: var(--sr-font);
  color: var(--sr-ink);
  -webkit-font-smoothing: antialiased;
}

.sr-checkout *,
.sr-checkout *::before,
.sr-checkout *::after { box-sizing: border-box; }

/* The storefront sets a display serif and its own heading ink on h1-h4.
   Checkout is the one place that is deliberately not editorial, so the
   headings inside it take the checkout's own type and colour. */
.sr-checkout h1,
.sr-checkout h2,
.sr-checkout h3,
.sr-checkout h4,
.sr-checkout label,
.sr-checkout input,
.sr-checkout select,
.sr-checkout textarea,
.sr-checkout button,
.sr-checkout summary { font-family: var(--sr-font); }

.sr-checkout h1,
.sr-checkout h2,
.sr-checkout h3,
.sr-checkout h4 { color: var(--sr-ink); letter-spacing: -0.01em; }

.sr-checkout .sr-head h1,
.sr-checkout .sr-head h2 { color: #fff; }

/* ── Dialog shell ──────────────────────────────────────────────────── */

dialog.sr-checkout {
  padding: 0;
  border: 0;
  background: transparent;
  width: min(1040px, calc(100vw - 48px));
  max-width: 100%;
  max-height: min(var(--sheet-vh, 90vh), calc(100vh - 48px));
  overflow: visible;
}
dialog.sr-checkout::backdrop {
  background: rgba(25, 25, 22, .55);
  backdrop-filter: blur(3px);
}

.sr-shell {
  display: flex;
  flex-direction: column;
  max-height: min(var(--sheet-vh, 90vh), calc(100vh - 48px));
  background: var(--sr-surface);
  border-radius: var(--sr-r-xl);
  box-shadow: var(--sr-shadow-lift);
  overflow: hidden;
}

/* ── Header: back | logo | close, genuinely centred ────────────────── */

.sr-head {
  flex: 0 0 auto;
  background: var(--brand-chrome, #252522);
  color: #fff;
  padding: var(--sr-gap-3) var(--sr-gap-4);
  /* Three columns with equal outer tracks, so the logo sits on the
     modal's centre line and not in the space left over between two
     controls of different widths. */
  display: grid;
  grid-template-columns: var(--sr-touch) 1fr var(--sr-touch);
  align-items: center;
  gap: var(--sr-gap-2);
}
.sr-head__logo {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* The official white wordmark. Natural aspect ratio, never stretched. */
.sr-head__logo img {
  height: 26px;
  width: auto;
  max-width: min(200px, 100%);
  object-fit: contain;
  display: block;
}
.sr-head__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
  color: #fff;
}
.sr-iconbtn {
  width: var(--sr-touch);
  height: var(--sr-touch);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .16s ease;
}
.sr-iconbtn:hover { background: rgba(255, 255, 255, .22); }
.sr-iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sr-head__back { grid-column: 1; justify-self: start; }
.sr-head__close { grid-column: 3; justify-self: end; }

/* ── Progress: Details → Shipping → Payment ────────────────────────── */

.sr-progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sr-gap-2);
  padding: var(--sr-gap-3) var(--sr-gap-4);
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-line);
  list-style: none;
  margin: 0;
}
.sr-progress__step {
  display: flex;
  align-items: center;
  gap: var(--sr-gap-1);
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sr-ink-faint);
  white-space: nowrap;
}
.sr-progress__dot {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--sr-line-strong);
  background: var(--sr-surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--sr-ink-faint);
}
.sr-progress__step[data-state="current"] { color: var(--sr-ink); }
.sr-progress__step[data-state="current"] .sr-progress__dot {
  background: var(--sr-gradient);
  border-color: transparent;
  color: var(--brand-cta-text, #fff);
}
.sr-progress__step[data-state="done"] { color: var(--sr-ink-soft); }
.sr-progress__step[data-state="done"] .sr-progress__dot {
  background: var(--sr-success);
  border-color: transparent;
  color: #fff;
}
.sr-progress__rule {
  flex: 1 1 auto;
  height: 1.5px;
  min-width: 12px;
  background: var(--sr-line);
  border-radius: 2px;
}

/* ── Body: one scrolling region, no nested scrollers ───────────────── */

.sr-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-surface-sunk);
  padding: var(--sr-gap-4);
  padding-bottom: max(var(--sr-gap-4), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sr-gap-4);
  align-items: start;
  /* align-items governs each item inside its row; align-content governs
     the rows themselves. Without this the default `stretch` spreads the
     auto rows to fill a sheet taller than its content, which opened a
     dead band between the summary and the first card on tablets. */
  align-content: start;
}
.sr-main { grid-column: 1; grid-row: 1; min-width: 0; display: grid; gap: var(--sr-gap-3); }

/* The same grid on its own page rather than in the dialog: no sunk
   background or padding of its own, and the summary sticks below the site
   header instead of to the top of the viewport. */
.sr-body--page { background: transparent; padding: 0; overflow: visible; }
.sr-body--page .sr-aside { top: calc(var(--header-h, 66px) + 16px); }
.sr-aside { grid-column: 2; grid-row: 1; position: sticky; top: 0; min-width: 0; }

/* ── Cards ─────────────────────────────────────────────────────────── */

.sr-card {
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r-lg);
  padding: var(--sr-gap-4);
}
.sr-card__title {
  display: flex;
  align-items: center;
  gap: var(--sr-gap-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 var(--sr-gap-3);
  color: var(--sr-ink);
}
.sr-card__title svg { color: var(--sr-accent-deep); flex: 0 0 auto; }
.sr-hint { font-size: 12.5px; line-height: 1.5; color: var(--sr-ink-soft); margin: var(--sr-gap-1) 0 0; }

/* ── Fields ────────────────────────────────────────────────────────── */

.sr-field { display: grid; gap: var(--sr-gap-1); min-width: 0; }
.sr-field > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sr-ink-soft);
}
.sr-input,
.sr-select {
  width: 100%;
  min-width: 0;
  min-height: var(--sr-control-h);
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--sr-ink);
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r);
  transition: border-color .14s ease, box-shadow .14s ease;
  appearance: none;
}
.sr-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344423C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}
.sr-input::placeholder { color: var(--sr-ink-faint); }
.sr-input:focus,
.sr-select:focus {
  outline: none;
  border-color: var(--sr-accent-deep);
  box-shadow: 0 0 0 3px rgba(37, 37, 34, .13);
}
.sr-input[aria-invalid="true"] {
  border-color: var(--sr-error);
  box-shadow: 0 0 0 3px rgba(166, 75, 60, .14);
}
/* The wizard writes its messages into .field-error; styled here so an
   error is never hidden behind the sticky footer or the summary. */
.sr-checkout .field-error {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sr-error);
  margin: 2px 0 0;
}
.sr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sr-gap-3); }

/* Phone with a fixed country code, as the reference shows. */
.sr-phone { display: grid; grid-template-columns: auto 1fr; gap: var(--sr-gap-2); align-items: stretch; }
.sr-phone__code {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-height: var(--sr-control-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--sr-ink-soft);
  background: var(--sr-surface-sunk);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r);
  white-space: nowrap;
}

/* ── Choice tiles (address label, shipping, payment) ────────────────── */

.sr-choices { display: grid; gap: var(--sr-gap-2); }
.sr-choice {
  display: flex;
  align-items: center;
  gap: var(--sr-gap-3);
  min-height: 56px;
  padding: var(--sr-gap-3);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r);
  background: var(--sr-surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.sr-choice:hover { border-color: var(--sr-line-strong); }
.sr-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sr-choice__mark {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid var(--sr-line-strong);
  display: grid;
  place-items: center;
  transition: border-color .14s ease;
}
.sr-choice__mark::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sr-gradient);
  transform: scale(0);
  transition: transform .14s ease;
}
.sr-choice__icon { flex: 0 0 auto; color: var(--sr-ink-soft); display: grid; place-items: center; }
.sr-choice__body { flex: 1 1 auto; min-width: 0; }
.sr-choice__body strong { display: block; font-size: 14.5px; font-weight: 600; }
.sr-choice__body small { display: block; font-size: 12.5px; color: var(--sr-ink-soft); margin-top: 2px; }
.sr-choice__meta { flex: 0 0 auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sr-choice:has(input:checked) {
  border-color: var(--sr-accent-deep);
  background: var(--sr-surface-tint);
}
.sr-choice:has(input:checked) .sr-choice__mark { border-color: var(--sr-accent-deep); }
.sr-choice:has(input:checked) .sr-choice__mark::after { transform: scale(1); }
.sr-choice:has(input:checked) .sr-choice__icon { color: var(--sr-accent-deep); }
.sr-choice:has(input:focus-visible) { outline: 2px solid var(--sr-accent-deep); outline-offset: 2px; }

/* A method that exists but is not switched on yet. */
.sr-choice--soon { cursor: default; background: var(--sr-surface-sunk); border-style: dashed; }
.sr-choice--soon:hover { border-color: var(--sr-line); }
.sr-choice--soon .sr-choice__body strong,
.sr-choice--soon .sr-choice__body small { color: var(--sr-ink-faint); }
.sr-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sr-ink-soft);
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Compact pair for Home / Work */
.sr-labels { display: flex; gap: var(--sr-gap-2); flex-wrap: wrap; }
.sr-labels .sr-choice { flex: 1 1 140px; min-height: var(--sr-control-h); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--sr-cta-h);
  padding: 0 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  border-radius: var(--sr-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter .14s ease, background .14s ease, border-color .14s ease;
}
.sr-btn--primary { background: var(--sr-gradient); color: var(--brand-cta-text, #fff); width: 100%; }
.sr-btn--primary:hover { filter: brightness(1.07); }
.sr-btn--primary:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.sr-btn--ghost { background: var(--sr-surface); color: var(--sr-ink); border-color: var(--sr-line); }
.sr-btn--ghost:hover { border-color: var(--sr-line-strong); }
.sr-btn:focus-visible { outline: 2px solid var(--sr-accent-deep); outline-offset: 2px; }
.sr-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.sr-actions { display: grid; gap: var(--sr-gap-2); }
.sr-actions--split { grid-template-columns: auto 1fr; align-items: center; }
/* The storefront's own link affordance: ink, with a rule under it that
   darkens on hover. Now that the accent IS the ink, a link with no rule
   would be indistinguishable from the text beside it. */
.sr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sr-line-strong);
  padding: 0 0 2px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sr-ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.sr-link:hover { border-color: var(--sr-ink); color: var(--sr-ink); }
.sr-link:focus-visible { outline: 2px solid var(--sr-accent-deep); outline-offset: 3px; }

/* ── Coupon ────────────────────────────────────────────────────────── */

.sr-coupon { display: grid; grid-template-columns: 1fr auto; gap: var(--sr-gap-2); }
.sr-coupon .sr-btn { min-height: var(--sr-control-h); padding: 0 18px; }
.sr-applied {
  display: flex;
  align-items: center;
  gap: var(--sr-gap-2);
  padding: var(--sr-gap-3);
  border-radius: var(--sr-r);
  background: var(--sr-success-soft);
  border: 1px solid rgba(22, 128, 61, .25);
  color: var(--sr-success);
  font-size: 13.5px;
  font-weight: 600;
}
.sr-applied__value { margin-left: auto; white-space: nowrap; }

/* ── Order summary ─────────────────────────────────────────────────── */

.sr-summary { background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); }
.sr-summary > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sr-gap-4);
  border-radius: var(--sr-r-lg);
}
.sr-summary > summary::-webkit-details-marker { display: none; }
.sr-summary__bar { display: flex; align-items: center; gap: var(--sr-gap-2); }
.sr-summary__title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; }
.sr-summary__total { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-summary__chevron { flex: 0 0 auto; color: var(--sr-ink-faint); display: grid; place-items: center; transition: transform .18s ease; }
.sr-summary[open] .sr-summary__chevron { transform: rotate(180deg); }
/* The collapsed state still carries every name and quantity. */
.sr-summary__names {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: var(--sr-gap-2);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sr-ink-soft);
}
.sr-summary__name { min-width: 0; overflow-wrap: anywhere; }
.sr-summary__name + .sr-summary__name::before { content: "·"; margin-right: 10px; color: var(--sr-line-strong); }
.sr-summary__qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-summary__body { padding: 0 var(--sr-gap-4) var(--sr-gap-4); border-top: 1px solid var(--sr-line); margin-top: var(--sr-gap-3); }
.sr-summary > summary:focus-visible { outline: 2px solid var(--sr-accent-deep); outline-offset: -2px; }

.sr-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sr-gap-3); padding: var(--sr-gap-3) 0; border-bottom: 1px solid var(--sr-line); align-items: start; }
.sr-line:last-of-type { border-bottom: 0; }
.sr-line__media { width: 56px; height: 68px; border-radius: var(--sr-r-sm); overflow: hidden; background: var(--sr-surface-sunk); }
.sr-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-line__name { font-size: 13.5px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.sr-line__meta { font-size: 12.5px; color: var(--sr-ink-soft); margin: 2px 0 0; }
.sr-line__price { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sr-totals { display: grid; gap: var(--sr-gap-2); padding-top: var(--sr-gap-3); border-top: 1px solid var(--sr-line); margin-top: var(--sr-gap-3); }
.sr-total { display: flex; justify-content: space-between; gap: var(--sr-gap-3); font-size: 13.5px; color: var(--sr-ink-soft); }
.sr-total strong { color: var(--sr-ink); font-variant-numeric: tabular-nums; }
.sr-total--discount strong { color: var(--sr-success); }
.sr-total--grand { padding-top: var(--sr-gap-2); border-top: 1px solid var(--sr-line); font-size: 16px; font-weight: 700; color: var(--sr-ink); }

/* ── Status strips ─────────────────────────────────────────────────── */

.sr-note { display: flex; gap: var(--sr-gap-2); padding: var(--sr-gap-3); border-radius: var(--sr-r); font-size: 13px; line-height: 1.5; }
.sr-note svg { flex: 0 0 auto; margin-top: 1px; }
.sr-note--info { background: var(--sr-surface-tint); color: var(--sr-accent-deep); }
.sr-note--ok { background: var(--sr-success-soft); color: var(--sr-success); }
.sr-note--bad { background: var(--sr-error-soft); color: var(--sr-error); }
.sr-note--quiet { background: var(--sr-surface-sunk); color: var(--sr-ink-soft); }

/* ── Confirmation ──────────────────────────────────────────────────── */

.sr-done { text-align: center; padding: var(--sr-gap-5) var(--sr-gap-4); display: grid; gap: var(--sr-gap-3); justify-items: center; }
.sr-done__mark { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--sr-success-soft); color: var(--sr-success); }
.sr-done h2 { font-size: 22px; font-weight: 700; margin: 0; }
.sr-done__facts { display: grid; gap: var(--sr-gap-2); width: 100%; max-width: 360px; margin-top: var(--sr-gap-2); }
.sr-done__fact { display: flex; justify-content: space-between; gap: var(--sr-gap-3); font-size: 13.5px; color: var(--sr-ink-soft); }
.sr-done__fact strong { color: var(--sr-ink); font-variant-numeric: tabular-nums; }
.sr-done__actions { display: grid; gap: var(--sr-gap-2); width: 100%; max-width: 360px; margin-top: var(--sr-gap-3); }

/* ── Background lock ───────────────────────────────────────────────── */

.has-sheet-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ── Tablet ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  dialog.sr-checkout {
    inset: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    height: var(--sheet-vh, 100dvh);
    max-height: var(--sheet-vh, 100dvh);
  }
  .sr-shell { height: 100%; max-height: 100%; border-radius: 0; }
  .sr-body { grid-template-columns: minmax(0, 1fr); }
  /* Summary first on a narrow screen: the total is what a shopper checks
     before they start typing, and it must not be a scroll away. */
  .sr-aside { grid-column: 1; grid-row: 1; position: static; }
  .sr-main { grid-column: 1; grid-row: 2; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .sr-row { grid-template-columns: 1fr; }
  .sr-body { padding: var(--sr-gap-3); padding-bottom: max(var(--sr-gap-3), env(safe-area-inset-bottom)); }
  .sr-card { padding: var(--sr-gap-3); }
  .sr-head__logo img { height: 22px; }
  .sr-progress { padding: var(--sr-gap-2) var(--sr-gap-3); gap: var(--sr-gap-1); }
  .sr-progress__step { font-size: 11.5px; }
  .sr-progress__rule { min-width: 8px; }
  .sr-coupon { grid-template-columns: 1fr; }
}

/* At the narrowest widths the step words crowd the dots; the dots and the
   current step's name carry the meaning on their own. */
@media (max-width: 380px) {
  .sr-progress__step:not([data-state="current"]) span:last-child { display: none; }
}

/* ── Motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  dialog.sr-checkout[open] { animation: sr-in .22s cubic-bezier(.2, .7, .3, 1); }
  dialog.sr-checkout[open]::backdrop { animation: sr-fade .22s ease; }
  .sr-panel[data-active] { animation: sr-step .2s ease; }
}
@keyframes sr-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-step { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }