/* Checkout page specific styles */
.page-header { margin-block: var(--space-9) var(--space-7); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--gray-600); margin-block: var(--space-7); }
.breadcrumbs a { color: var(--gray-600); }
.breadcrumbs li+li::before { content: "/"; margin-inline: 6px; color: var(--gray-400); }

.checkout-steps { margin-bottom: var(--space-8); }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
.stepper .step { display: flex; align-items: center; gap: 10px; color: var(--gray-500); font-weight: 600; }
.stepper .step .step-num { width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--gray-300); display: inline-grid; place-items: center; font-size: var(--fs-sm); }
.stepper .step.is-active, .stepper .step.is-complete { color: var(--gray-900); }
.stepper .step.is-active .step-num { border-color: var(--color-primary); color: var(--color-primary); }
.stepper .step.is-complete .step-num { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.checkout-grid { display: grid; gap: var(--space-9); grid-template-columns: 1.7fr 1fr; align-items: start; }
.checkout-main { display: grid; gap: var(--space-9); }
.checkout-aside .sticky { position: sticky; top: 92px; }

.section-inner { padding: var(--space-7); }

.grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.align-end { display: grid; align-items: end; }

.shipping-option { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.shipping-option + .shipping-option { margin-top: var(--space-5); }
.shipping-option input { transform: translateY(1px); }
.shipping-option label { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; cursor: pointer; }
.shipping-option .opt-title { font-weight: 700; }
.shipping-option .opt-desc { color: var(--gray-500); font-size: var(--fs-sm); }
.shipping-option .opt-price { font-weight: 700; }

.promo-form .promo-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); }
.promo-message { margin-top: var(--space-4); font-size: var(--fs-sm); }

.totals { display: grid; gap: 10px; margin-top: var(--space-7); }
.totals > div { display: flex; align-items: center; justify-content: space-between; }
.total-row { padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--fs-xl); }
.note-small { color: var(--gray-600); font-size: var(--fs-sm); margin-top: var(--space-6); }

.cart-items { display: grid; gap: var(--space-6); }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-6); align-items: center; }
.item-media { width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-muted); }
.item-info .item-name { font-weight: 700; margin: 0 0 4px; }
.item-meta { color: var(--gray-600); font-size: var(--fs-sm); margin: 0; }

.form-error { color: var(--color-danger); font-weight: 600; margin-top: var(--space-4); }
.secure-note { background: var(--gray-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-7); }

.checkbox-row { display: inline-flex; align-items: center; gap: 10px; }

.processing { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: auto 1fr; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--gray-300); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.review-block { line-height: 1.8; }
.review-block + .review-block { margin-top: 6px; }

/* Responsive */
@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-aside .sticky { position: static; }
}
@media (max-width: 720px) {
  .grid.two-col { grid-template-columns: 1fr; }
  .grid.three-col { grid-template-columns: 1fr 1fr; }
  .stepper { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
}