/* Cart page, checkout, order confirmation and lookup. Tokens only; mobile-first. */

.page-head { display: grid; gap: var(--space-2); padding-block: var(--space-6); }
.page-head p { margin: 0; }

/* ---------- order summary pieces (shared) ---------- */
.summary-lines { list-style: none; margin: 0; padding: 0; }
.summary-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.summary-line:not(:has(.summary-line__media)) { grid-template-columns: minmax(0, 1fr) auto; }
.summary-line__media { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-md); }
.summary-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; mix-blend-mode: multiply; }
.summary-line__body { display: grid; gap: 0.125rem; min-width: 0; }
.summary-line__name { font-weight: 600; line-height: 1.3; color: var(--color-text-strong); overflow-wrap: anywhere; }
.summary-line__options, .summary-line__qty { font-size: var(--text-sm); color: var(--color-muted-text); overflow-wrap: anywhere; }
.summary-totals { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.summary-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.summary-totals dt { color: var(--color-muted-text); }
.summary-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary-totals__total { padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-weight: 600; }
.summary-totals__total dt { color: var(--color-text-strong); }

.summary-card { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); }
.summary-card__title { font-size: var(--text-xl); }
.summary-card__note { margin: 0; font-size: var(--text-sm); color: var(--color-muted-text); }
.summary-card .summary-line { border-color: color-mix(in srgb, var(--color-text-strong) 12%, transparent); }

/* ---------- cart page ---------- */
.cart-page { display: grid; gap: var(--space-8); }
.cart-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--color-border); }
.cart-line { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.cart-line__media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-subtle-text); }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; mix-blend-mode: multiply; }
.cart-line__body { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.cart-line__name { display: flex; align-items: center; min-height: var(--tap); font-weight: 600; line-height: 1.3; color: var(--color-text-strong); text-decoration: none; overflow-wrap: anywhere; }
.cart-line__options { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--color-muted-text); }
.cart-line__unit, .cart-line__changed { margin: 0; font-size: var(--text-sm); color: var(--color-muted-text); }
.cart-line__changed { font-weight: 600; color: var(--color-text-strong); }
.cart-line__issue { margin: var(--space-1) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.cart-line__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cart-line__qty { display: flex; align-items: center; gap: var(--space-2); }
.cart-line__total { margin: 0; }
.cart-line__remove { color: var(--color-muted-text); }
.cart-line__remove .icon { width: 1.125rem; height: 1.125rem; }
@media (min-width: 48rem) {
  .cart-line { grid-template-columns: 7rem minmax(0, 1fr) auto; }
  .cart-line__actions { grid-column: auto; display: grid; justify-items: end; align-content: start; }
}
@media (min-width: 64rem) {
  .cart-page { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-12); align-items: start; }
  .cart-page .summary-card { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ---------- checkout ---------- */
.checkout { display: grid; gap: var(--space-8); }
.checkout__form { display: grid; gap: var(--space-6); min-width: 0; }
.form-section { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section__title { padding: 0; margin-bottom: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--color-text-strong); }
.form-row { display: grid; gap: var(--space-4); }
.checkout__submit { margin-top: var(--space-2); }
.checkout__fine { margin: 0; font-size: var(--text-sm); color: var(--color-muted-text); }
.field__error .icon { width: 1rem; height: 1rem; flex: none; }
.error-summary { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.error-summary:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.error-summary__title { margin: 0 0 var(--space-2); font-weight: 600; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary a { color: var(--color-text-strong); }
.summary-card--desktop { display: none; }
.summary-toggle { margin-bottom: var(--space-6); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); }
.summary-toggle > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.5rem; padding: 0 var(--space-4); font-weight: 600; list-style: none; }
.summary-toggle > summary::-webkit-details-marker { display: none; }
.summary-toggle > summary span { flex: 1; }
.summary-toggle[open] > summary .icon { transform: rotate(180deg); }
.summary-toggle > :not(summary) { margin-inline: var(--space-4); }
.summary-toggle > .summary-totals { margin-bottom: var(--space-4); }
@media (min-width: 30rem) { .form-row { grid-template-columns: 1fr 2fr; } }
@media (min-width: 64rem) {
  .checkout { grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--space-12); align-items: start; }
  .summary-toggle { display: none; }
  .summary-card--desktop { display: grid; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ---------- order confirmation ---------- */
.order-banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); }
.order-banner h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.order-banner p { margin: 0 0 var(--space-2); }
@media (min-width: 30rem) { .order-banner { grid-template-columns: auto minmax(0, 1fr); } }
.order-banner__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-success); color: var(--btn-primary-text); }
.order-number { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.order__grid { display: grid; gap: var(--space-8); }
.order__heading { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); }
.order__side { display: grid; gap: var(--space-4); align-content: start; }
.order-facts { display: grid; gap: var(--space-3); margin: 0; }
.order-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.order-facts dt { color: var(--color-muted-text); }
.order-facts dd { margin: 0; font-weight: 600; text-align: right; }
.badge--status { background: var(--color-text-strong); color: var(--color-background); }
.order-address { font-style: normal; line-height: 1.6; }
.order-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 64rem) { .order__grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-12); align-items: start; } }

/* ---------- lookup ---------- */
.lookup__form { display: grid; gap: var(--space-5); max-width: 28rem; }
.lookup__form .btn { justify-self: start; }

@media print {
  .site-header, .site-footer, .action-bar, [data-print], .order__side .cluster, .skip-link { display: none !important; }
  .order__grid { grid-template-columns: 1fr; }
}

/* payment step: one bordered row per method (the check--radio component inside) */
.pay-options { display: grid; gap: var(--space-2); }
.pay-option { align-items: flex-start; min-height: var(--tap); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); cursor: pointer; transition: border-color var(--dur-fast); }
.pay-option[hidden] { display: none; }
.pay-option:has(input:checked) { border-color: var(--btn-primary-bg); box-shadow: inset 0 0 0 1px var(--btn-primary-bg); }
.pay-option__name { display: block; font-weight: 600; color: var(--color-text-strong); }
.pay-option__hint { display: block; font-size: var(--text-sm); color: var(--color-muted-text); }
.pay-options__empty { margin: 0; }
@media (hover: hover) { .pay-option:hover { border-color: var(--color-input-border); } }

/* order page: how to pay a manual-payment order */
.pay-box { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.pay-box h2 { margin: 0; font-size: var(--text-lg); }
.pay-box p { margin: 0; }
.pay-box__instructions { white-space: pre-wrap; }
.pay-box__bank { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.pay-box__bank dt { color: var(--color-muted-text); font-size: var(--text-sm); }
.pay-box__bank dd { margin: 0; font-family: var(--font-hud-mono); overflow-wrap: anywhere; }
.pay-box__proof { display: grid; gap: var(--space-3); }