/* Checkout Page Layout */ .checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start; } /* Address grid: city / state / zip */ .address-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; } /* Order Summary Sidebar */ .checkout-summary { position: sticky; top: 100px; } /* Scrollable cart preview in sidebar */ .checkout-items-preview { max-height: 250px; overflow-y: auto; margin-bottom: 1rem; } .checkout-item { display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .checkout-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .checkout-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; } .checkout-item-info { flex: 1; } .checkout-item-info p { font-weight: 500; margin-bottom: 0.25rem; } .checkout-item-info small { color: var(--color-text-muted); font-size: 0.875rem; } .checkout-item-total { text-align: right; font-weight: 600; } .checkout-summary-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .checkout-summary-total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600; } .secure-badge { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; margin-top: 1rem; } @media (max-width: 768px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; order: -1; } .address-grid { grid-template-columns: 1fr 1fr; } }