/* ==========================================================================
   ShopFront — Basket & checkout
   --------------------------------------------------------------------------
   Loaded by cart.html and checkout.html, in that order of appearance. They
   are one flow with one summary panel, one step rail and one set of line
   rows, so they are one stylesheet — the same call that gave the three
   policy documents a single legal.css and the two blog pages a single
   blog.css.

   The form system these pages type into is forms.css, and the chrome under
   the breadcrumb is page.css. Neither is re-implemented here.

   Same rules as styles.css, and they are not negotiable:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", so inline-start = right);
     · the design is FLAT. Surfaces separate by border and tone.

   Contents
     01 · FLOW HEAD & STEPS
     02 · PANEL
     03 · BASKET LAYOUT & LINES
     04 · COUPON
     05 · SHIPPING PICKER
     06 · SUMMARY
     07 · HELP CARDS
     08 · CHECKOUT FORM
     09 · ORDER PLACED
     10 · RESPONSIVE
     11 · MOTION, CONTRAST, PRINT
   ========================================================================== */


/* ==========================================================================
   01 · FLOW HEAD & STEPS
   --------------------------------------------------------------------------
   No brand-gradient hero on either page. A visitor in a checkout is reading
   numbers and pressing one button; a full-bleed panel would push the first
   of those numbers under the fold on a laptop.
   ========================================================================== */

.flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8);
  margin-block-start: var(--space-6);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.flow-head__copy {
  min-inline-size: 0;
}

.flow-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-1-5) var(--space-4);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.flow-head__title {
  margin-block-start: var(--space-3);
  color: var(--fg-default);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.flow-head__lede {
  max-inline-size: 62ch;
  margin-block-start: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

/* Four steps, and the visitor is always on one of them. An <ol> because the
   order is the meaning; `aria-current="step"` marks the position rather than
   colour alone. */
.flow-steps {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
}

.flow-step {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

/* The connector between two steps. Drawn on the item rather than between
   them so it mirrors with the writing direction for free. */
.flow-step + .flow-step::before {
  content: "";
  inline-size: var(--space-6);
  block-size: var(--border-hairline);
  background: var(--border-default);
}

.flow-step__mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-circle);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.flow-step__label {
  font-weight: var(--weight-medium);
}

.flow-step[aria-current="step"] {
  color: var(--brand-text);
}
.flow-step[aria-current="step"] .flow-step__mark {
  border-color: transparent;
  background: var(--brand);
  color: var(--fg-on-brand);
}

/* A step already behind the visitor is complete, not pending. */
.flow-step[data-done="true"] {
  color: var(--fg-body);
}
.flow-step[data-done="true"] .flow-step__mark {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}


/* ==========================================================================
   02 · PANEL
   --------------------------------------------------------------------------
   The one surface both pages build from: basket, coupon, shipping picker,
   every checkout section and the review block are all this box.
   ========================================================================== */

.panel {
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.panel + .panel {
  margin-block-start: var(--gap-grid);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.panel__lede {
  margin-block-start: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

/* Everything a panel holds under its heading. One rule so a grid, a chip
   row and a form all clear the title by the same amount. */
.panel__body {
  margin-block-start: var(--space-5);
}

/* A block with the icon lifted out of flow, not a flex row. Most of these
   notes end in a link, and in a flex container every inline child is a flex
   item — the anchor would be given a column of its own and break the
   sentence across two lines. Absolute positioning keeps the hanging icon
   and lets the text wrap as text. */
.panel__note {
  position: relative;
  display: block;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  padding-inline-start: calc(var(--icon-md) + var(--gap-inline-sm));
  border-block-start: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
/* `display: flex` above outranks the UA's `[hidden] { display: none }`, and
   the dashboard hides three of these notes the moment their list has
   something in it. */
.panel__note[hidden] {
  display: none;
}

.panel__note .icon {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--space-4) + 0.15em);
  color: var(--fg-subtle);
}
.panel__note a {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* ==========================================================================
   03 · BASKET LAYOUT & LINES
   ========================================================================== */

.basket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  align-items: start;
  gap: var(--gap-grid);
}

.basket-main {
  min-inline-size: 0;
}

.basket {
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.basket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.basket__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.basket__count {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.basket__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  min-block-size: var(--btn-height);
  padding-inline: var(--space-4);
  border-radius: var(--btn-radius);
  color: var(--danger-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.basket__clear:hover {
  background: var(--danger-subtle);
}
.basket__clear[hidden] {
  display: none;
}
/* Armed by the first click and cleared by the second — see the note in
   cart.js about why this is not a confirm(). */
.basket__clear.is-armed {
  border: var(--border-hairline) solid var(--danger);
  background: var(--danger-subtle);
}

/* Only ever seen with scripting off — the basket is browser state, and an
   empty panel would read as an empty basket. */
.basket__nojs {
  display: none;
}
html:not(.js) .basket__nojs {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.basket__nojs .icon {
  flex: none;
  margin-block-start: 0.15em;
  color: var(--fg-subtle);
}

.basket__list {
  display: grid;
}
/* An author `display` outranks the UA's `[hidden] { display: none }`; the
   list is hidden whenever the basket is empty. */
.basket__list[hidden] {
  display: none;
}

/* One row: art, copy, stepper, line total, remove. The columns are named in
   the layout rather than left to auto, so a long title and a short one give
   the same grid — and every price stays under the price above it. */
.basket-line {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--gap-inline-lg);
  padding-block: var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}
.basket-line:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.basket-line__art {
  inline-size: 6rem;
  block-size: 5rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  object-fit: contain;
  padding: var(--space-2);
}

/* A line added from the product page carries no card art. */
.basket-line__art--blank {
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
}

.basket-line__body {
  min-inline-size: 0;
}

.basket-line__title {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.basket-line__title a:hover {
  color: var(--brand-text);
}

.basket-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-sm) var(--gap-inline-md);
  margin-block-start: var(--space-2);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}
.basket-line__meta .icon {
  font-size: var(--icon-sm);
}

.basket-line__unit {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.basket-line__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-3);
}

.basket-line__action {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: var(--transition-colors);
}
.basket-line__action:hover {
  color: var(--brand-text);
}
.basket-line__action--danger:hover {
  color: var(--danger-text);
}

/* The stepper is the mini-cart's, at the size a full page can afford. */
.basket-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
}

.basket-qty__btn {
  display: grid;
  place-items: center;
  inline-size: var(--space-9);
  block-size: var(--space-9);
  border-radius: var(--radius-circle);
  background: var(--bg-surface);
  color: var(--fg-body);
  font-size: var(--icon-sm);
  transition: var(--transition-colors);
}
.basket-qty__btn:hover:not(:disabled) {
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.basket-qty__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.basket-qty__value {
  min-inline-size: var(--space-8);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.basket-line__sum {
  min-inline-size: 8rem;
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  text-align: end;
  white-space: nowrap;
}
.basket-line__sum small {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
.basket-line__sum del {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.basket__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-14) var(--space-6);
  text-align: center;
}
.basket__empty[hidden] {
  display: none;
}

.basket__empty-mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-20);
  block-size: var(--space-20);
  border-radius: var(--radius-circle);
  background: var(--bg-brand-subtle);
  color: var(--brand);
}

.basket__empty b {
  color: var(--fg-default);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
}

.basket__empty p {
  max-inline-size: 42ch;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.basket__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-2);
}

.basket__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}
.basket__foot[hidden] {
  display: none;
}

.basket__foot-note {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}


/* ==========================================================================
   04 · COUPON
   ========================================================================== */

.coupon-form {
  display: flex;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-5);
}

.coupon-form__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: var(--btn-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
  transition: var(--transition-colors);
}
.coupon-form__input::placeholder {
  color: var(--fg-subtle);
  font-weight: var(--weight-normal);
  letter-spacing: normal;
  text-transform: none;
}
.coupon-form__input:hover {
  border-color: var(--border-strong);
}
.coupon-form__input:focus-visible {
  border-color: var(--brand);
}

/* Empty by default and never given a reserved height: an empty status line
   that always takes a row is an empty row on a page of dense numbers. */
.coupon-feedback {
  margin-block-start: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.coupon-feedback[data-state="error"] {
  color: var(--danger-text);
  font-weight: var(--weight-bold);
}
.coupon-feedback[data-state="ok"] {
  color: var(--success-text);
  font-weight: var(--weight-bold);
}

.coupon-applied {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--radius-lg);
  background: var(--bg-brand-subtle);
}
.coupon-applied[hidden] {
  display: none;
}

.coupon-applied__mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--fg-on-brand);
}

.coupon-applied__body {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}
.coupon-applied__body b {
  color: var(--brand-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
}
.coupon-applied__body span {
  color: var(--fg-body);
  font-size: var(--text-sm);
}

.coupon-applied__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.coupon-applied__remove:hover {
  color: var(--danger-text);
}

.coupon-list {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

/* A button, not a decorated <li>: tapping one applies it, and a row that
   does something has to be reachable from the keyboard. */
.coupon-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-md);
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  text-align: start;
  transition: var(--transition-colors);
}
.coupon-chip:hover {
  border-color: var(--border-brand);
}

.coupon-chip code {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
}

/* Set by cart.js on a code the current basket already qualifies for. */
.coupon-chip[data-ready="true"] {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}


/* ==========================================================================
   05 · SHIPPING PICKER
   ========================================================================== */

.ship-picker {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  border: 0;
}

/* The whole row is the label, so the tap target is the row and not the
   12px dot inside it. */
.ship-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition-colors);
}
.ship-option:hover {
  border-color: var(--border-strong);
}

.ship-option input {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  accent-color: var(--brand);
}

.ship-option__body {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}
.ship-option__body b {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.ship-option__body span {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.ship-option__fee {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  white-space: nowrap;
}
.ship-option__fee small {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
.ship-option__fee del {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

/* :has() carries the selected state, so the input remains the source of
   truth and nothing has to write a class onto the label. */
.ship-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--bg-brand-subtle);
}
.ship-option:has(input:focus-visible) {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}

/* A destination the option cannot serve — the courier outside Tehran. */
.ship-option:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.ship-weight {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  margin-block-start: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.ship-weight[hidden] {
  display: none;
}


/* ==========================================================================
   06 · SUMMARY
   ========================================================================== */

.summary {
  position: sticky;
  inset-block-start: calc(var(--header-height-compact) + var(--space-6));
  display: grid;
  gap: var(--space-5);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.summary__title {
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.summary__rows {
  display: grid;
  gap: var(--space-3);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  color: var(--fg-body);
  font-size: var(--text-lg);
}
.summary__row[hidden] {
  display: none;
}
.summary__row dt {
  color: var(--fg-muted);
}
.summary__row dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.summary__row dd b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}
.summary__row dd small {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.summary__row--save dd,
.summary__row--save dd b {
  color: var(--success-text);
}

.summary__qty {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.summary__free {
  color: var(--success-text);
  font-weight: var(--weight-bold);
}

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--border-default);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.summary__total b {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}
.summary__total small {
  color: var(--fg-subtle);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
}

.summary__assurances {
  display: grid;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}
.summary__assurances li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.summary__assurances .icon {
  flex: none;
  color: var(--brand);
}

/* ---- Free-shipping meter ---------------------------------------------
   The gap to the free-shipping floor is the one number on this panel the
   visitor can do something about, so it gets a bar rather than a sentence. */
.freeship {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}
.freeship[hidden] {
  display: none;
}

.freeship__text {
  color: var(--fg-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.freeship__text b {
  color: var(--brand-text);
  font-weight: var(--weight-black);
}

.freeship__track {
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  overflow: hidden;
}

.freeship__fill {
  display: block;
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand-vivid);
  transition: inline-size var(--duration-slow) var(--ease-out);
}


/* ==========================================================================
   07 · SUGGESTIONS & HELP CARDS
   ========================================================================== */

/* Plain grid of the shared product card. Not .deals__grid — that one is a
   rail tuned for the saturated promo panel on the home page, and its cards
   drop their border to sit on it. */
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
}


.help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.help-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-2) var(--gap-inline-md);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.help-card:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.help-card .icon-tile {
  grid-row: span 2;
}

.help-card b {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.help-card > span:not(.icon-tile) {
  grid-column: 2 / -1;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.help-card__go {
  color: var(--fg-subtle);
  transition: var(--transition-transform), var(--transition-colors);
}
.help-card:hover .help-card__go {
  color: var(--brand);
  translate: -0.25rem 0;
}


/* ==========================================================================
   08 · CHECKOUT FORM
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  align-items: start;
  gap: var(--gap-grid);
}
/* Hidden whole when the basket is empty and the page has nothing to check
   out — and a grid ignores [hidden] without this. */
.checkout-layout[hidden] {
  display: none;
}

.checkout-main {
  min-inline-size: 0;
}

/* Each step of the form is a .panel with a number in front of its heading,
   the same numbering the policy documents use for their clauses. */
.checkout-step__number {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-circle);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.checkout-step .form-grid {
  margin-block-start: var(--space-5);
}

/* ---- Saved addresses --------------------------------------------------- */

.addr-picker {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  border: 0;
}
/* No saved addresses means no picker at all. */
.addr-picker[hidden] {
  display: none;
}

.addr-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition-colors);
}
.addr-option:hover {
  border-color: var(--border-strong);
}
.addr-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--bg-brand-subtle);
}
.addr-option:has(input:focus-visible) {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}

.addr-option input {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin-block-start: 0.15em;
  accent-color: var(--brand);
}

.addr-option__body {
  display: grid;
  gap: var(--space-1-5);
  min-inline-size: 0;
}

.addr-option__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.addr-option__text {
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.addr-option__meta {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

/* ---- Payment ----------------------------------------------------------- */

.pay-picker {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  border: 0;
}

.pay-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition-colors);
}
.pay-option:hover {
  border-color: var(--border-strong);
}
.pay-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--bg-brand-subtle);
}
.pay-option:has(input:focus-visible) {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}
.pay-option:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.pay-option input {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  accent-color: var(--brand);
}

.pay-option__body {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}
.pay-option__body b {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.pay-option__body span {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ---- Extras ------------------------------------------------------------ */

.extras {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

/* ---- Review ------------------------------------------------------------ */

.review-lines {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.review-line {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  padding-block: var(--space-3);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}
.review-line:last-child {
  border-block-end: 0;
}

.review-line__art {
  inline-size: 3.5rem;
  block-size: 3rem;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  object-fit: contain;
}

.review-line__title {
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.review-line__qty {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}
.review-line__sum {
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The bar that carries the submit button. Sticky at the bottom of the form
   column on a narrow screen, where the summary panel has moved below the
   fold and the only way to pay would otherwise be to scroll back. */
.checkout-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  margin-block-start: var(--gap-grid);
  padding: var(--space-5) var(--card-pad);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--card-radius);
  background: var(--bg-brand-subtle);
}

.checkout-submit__note {
  flex: 1 1 18rem;
  color: var(--fg-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.checkout-submit__note b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   09 · ORDER PLACED
   --------------------------------------------------------------------------
   Replaces the whole form. Not a toast and not a redirect: an order number
   is the one string the visitor may need to write down, and it has to stay
   on screen until they leave.
   ========================================================================== */

.order-done {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-8);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--card-radius);
  background: var(--bg-brand-subtle);
  text-align: center;
}
.order-done[hidden] {
  display: none;
}

.order-done__mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-20);
  block-size: var(--space-20);
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--fg-on-brand);
  font-size: var(--icon-2xl);
}

.order-done__title {
  color: var(--fg-default);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
}

.order-done__text {
  max-inline-size: 56ch;
  color: var(--fg-body);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

.order-done__code {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-3) var(--space-6);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--brand-text);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.order-done__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
  inline-size: 100%;
  max-inline-size: 52rem;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-hairline) solid var(--border-brand);
}

.order-done__fact {
  display: grid;
  gap: var(--space-1-5);
  justify-items: center;
}
.order-done__fact b {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
}
.order-done__fact span {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.order-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline-md);
}


/* ==========================================================================
   10 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .suggest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1150px) {
  .basket-layout,
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sticky on a full-width block would pin the summary over the page. */
  .summary {
    position: static;
  }
  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-steps {
    flex-wrap: wrap;
  }
}

@media (max-width: 800px) {
  .basket-line {
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-areas:
      "art body"
      "qty sum";
    row-gap: var(--space-4);
  }
  .basket-line__art,
  .basket-line__art--blank { grid-area: art; }
  .basket-line__body { grid-area: body; }
  .basket-line__qty  { grid-area: qty; }
  .basket-line__sum  { grid-area: sum; }

  .basket-line__art {
    inline-size: 5rem;
    block-size: 4.5rem;
  }

  .order-done__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-done {
    padding: var(--space-10) var(--space-5);
  }

  .suggest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .help-grid,
  .suggest-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .coupon-form {
    flex-wrap: wrap;
  }
  .coupon-form .btn {
    flex: 1 1 100%;
  }
  /* Four numbered steps do not fit a phone row; the current one is the only
     one that has to be legible, so the rest keep their marks and lose their
     labels. */
  .flow-step:not([aria-current="step"]) .flow-step__label {
    display: none;
  }
  .ship-option,
  .pay-option {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ship-option__fee {
    grid-column: 2;
    text-align: start;
  }
  .summary__total b {
    font-size: var(--text-4xl);
  }
}


/* ==========================================================================
   11 · MOTION, CONTRAST, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .help-card,
  .help-card__go,
  .freeship__fill {
    transition: none;
  }
  .help-card:hover {
    transform: none;
  }
  .help-card:hover .help-card__go {
    translate: none;
  }
}

@media (prefers-contrast: more) {
  .panel,
  .basket,
  .summary,
  .ship-option,
  .addr-option,
  .pay-option,
  .help-card,
  .coupon-chip {
    border-color: var(--fg-muted);
  }
}

@media print {
  /* A printed basket or confirmation is a receipt: the lines and the totals
     matter, every control on the page does not. */
  .flow-steps,
  .basket__clear,
  .basket__foot,
  .coupon-form,
  .coupon-list,
  .ship-picker,
  .checkout-submit,
  .summary__assurances,
  .freeship,
  .help-grid,
  .basket-line__actions,
  .basket-qty__btn,
  .order-done__actions {
    display: none;
  }
  .basket-layout,
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .summary {
    position: static;
  }
}