.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; padding: 24px 0 60px; }
@media (max-width: 900px){ .checkout-layout { grid-template-columns: 1fr; } }
.co-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.co-steps .step { padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); font-weight: 700; }
.co-steps .step.active { background: var(--color-primary); color: #fff; border-color: transparent; }
.co-steps .step.done { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }

.co-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.co-card h2 { font-size: 20px; margin-bottom: 14px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }

.co-summary { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.co-summary .row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--color-text-muted); }
.co-summary .row.total { border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 8px; color: var(--color-text); font-weight: 800; font-size: 18px; }
.co-summary .items { max-height: 260px; overflow-y: auto; margin-bottom: 12px; }
.co-summary .item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.co-summary .item img { width: 48px; height: 48px; object-fit: contain; background: var(--color-surface-light); border-radius: 6px; }
.co-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

.pay-methods-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px){ .pay-methods-select { grid-template-columns: 1fr; } }
.pay-methods-select label { padding: 14px; border: 1px solid var(--color-border-strong); border-radius: 10px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.pay-methods-select input[type=radio] { accent-color: var(--color-primary); }
.pay-methods-select label:has(input:checked) { border-color: var(--color-primary); background: rgba(227,6,19,.08); }