/* Checkout page specific styles - keep minimal and complementary to base.css */
.page-hero { padding: var(--space-10) 0 var(--space-8); }
.section-checkout { padding: var(--space-8) 0 var(--space-10); }

.checkout-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 1080px) { .checkout-grid { grid-template-columns: 1fr; } }

.summary-sticky { position: sticky; top: calc(var(--header-height) + var(--space-4)); }

/* Line items */
.line-items { display: grid; gap: var(--space-4); }
.line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.line .price { white-space: nowrap; font-weight: 700; }

/* Totals */
.totals .row { display: flex; align-items: center; justify-content: space-between; margin-block: var(--space-2); }
.totals .total { font-size: var(--font-size-xl); }

/* Shipping options */
.shipping-options { display: grid; gap: var(--space-2); padding: var(--space-3) 0; }
.ship-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--color-surface); }
.ship-option input { transform: translateY(1px); }
.ship-option .price { font-weight: 700; }
.ship-option:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--gray-300)); }

/* Payment options */
.pay-option { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--color-surface); }
.pay-option:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--gray-300)); }

/* Gift */
.gift-wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; }

/* Cards in sidebar */
.summary-card { margin-bottom: var(--space-6); }

/* Form helpers */
.grid-span-2 { grid-column: 1 / -1; }

/* Alert spacing in confirm block */
#order-confirmation { margin-top: var(--space-2); }

/* Promo hint spacing */
.promo-hint { margin-top: var(--space-3); }