.checkout-progress { display: flex; justify-content: space-between; margin-bottom: var(--spacing-8); }
.checkout-progress .step { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-md); background-color: var(--color-gray-300); color: var(--color-gray-700); position: relative; }
.checkout-progress .step.completed { background-color: var(--color-gray-200); color: var(--color-gray-900); }
.checkout-progress .step.completed::before { content: '✓'; position: absolute; left: var(--spacing-1); top: 50%; transform: translateY(-50%); color: var(--color-gray-400); }
.checkout-progress .step.active { background-color: var(--color-primary); color: var(--color-background); }
.checkout-form { display: flex; flex-direction: column; gap: var(--spacing-6); }
.form-group { margin-bottom: var(--spacing-4); }
.form-group label { display: block; margin-bottom: var(--spacing-1); font-weight: 600; }
.shipping-options, .payment-options { flex-direction: column; gap: var(--spacing-2); }
.shipping-image, .payment-image { max-width: 200px; margin-top: var(--spacing-4); }
.order-summary .order-image { width: 100%; margin-bottom: var(--spacing-4); }
.order-items { margin-bottom: var(--spacing-4); }
.order-items .item { margin-bottom: var(--spacing-2); }
.totals { margin-bottom: var(--spacing-4); }
.totals .total-item { margin-bottom: var(--spacing-1); }
#place-order { width: 100%; margin-top: var(--spacing-4); }
@media (max-width: 768px) { .checkout-content { grid-template-columns: 1fr; } .checkout-progress { flex-direction: column; } }