.cart [hidden], .payment-panel [hidden] { display: none !important; }
.cart-payment-state { margin: 2px 0 0; color: var(--fg-2); font-size: 13px; line-height: 1.45; text-align: center; }
.cart-payment-state[data-tone="error"] { color: #ff8d8d; }
.cart-payment-state[data-tone="ok"] { color: var(--warm-2); }
.cart-pay, .cart-quote { width: 100%; }
.cart-pay:disabled { cursor: not-allowed; opacity: .55; }
.cart-pay.busy { cursor: progress; }
.payment-badge { width: fit-content; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; font: 600 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--warm); background: var(--bg-2); }

.payment-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; color: var(--fg); background: radial-gradient(circle at 50% 15%, var(--spot-1), transparent 34%), var(--bg); }
.payment-shell { width: min(100%, 640px); display: grid; gap: 20px; }
.payment-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; text-decoration: none; font-weight: 650; }
.payment-brand img { width: 42px; height: 42px; }
.payment-panel { display: grid; gap: 20px; padding: clamp(24px, 6vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); box-shadow: var(--shadow); }
.payment-panel h1 { font: 600 clamp(30px, 7vw, 48px)/1.05 var(--display); letter-spacing: -.03em; }
.payment-panel > p { color: var(--fg-2); }
.payment-detail { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); }
.payment-detail div { display: flex; justify-content: space-between; gap: 20px; }
.payment-detail span { color: var(--fg-3); }
.payment-detail strong { text-align: right; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-actions .btn { flex: 1; }
.payment-help { font-size: 13px; color: var(--fg-3); }

@media (max-width: 760px) {
  .payment-actions { display: grid; }
}