/* Checkout and receipts (/shop summary, /pay/return). Builds on ui.css tokens. */
.buy-shell { max-width: 608px; }
.buy-intro h1 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 650; }
.buy-intro p { margin-top: 4px; }
.buy-intro { margin-bottom: 16px; }
.card > h2, .card > h3 { margin-bottom: 12px; }
.opt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .opt-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
.opt .tag { align-self: flex-start; margin-top: 4px; }
.opt-qty { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }

/* Receipt rows: labels left in ink-2, tabular amounts right, a hairline above the total */
.summary, .kv { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px 0; margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.summary dt, .kv dt { color: var(--text-2); }
.summary dd, .kv dd { margin: 0; padding-left: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.summary dt.total-k, .summary dd.total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; }
.summary dd.total { justify-content: flex-end; }
.summary dt.total-k { color: var(--text); font-weight: 600; font-size: var(--fs-body); }
.summary .total { font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.summary-foot { margin-top: 20px; }
.summary-foot .hint { margin-top: 8px; text-align: center; }
.summary-foot .hint + .hint { margin-top: 2px; }
.kv .strong { font-weight: 650; font-size: var(--fs-md); color: var(--success-text); }

.result-links .label { margin-top: 12px; }
.result-links .copy-field .btn { flex: none; }
.result-links > h2 { margin-bottom: 12px; }
.opt-grid + .hint { margin-top: 8px; }
.allow-note { display: block; margin-top: 8px; }
.state .btn { margin-top: 20px; }
.wait-bar { max-width: 240px; margin: 20px auto 0; }
.wait-bar + .hint { margin-top: 12px; }
.state .amount-lg { display: inline-block; }

/* /pay/return done: one receipt card, the result on top, the rows under a perforation */
.receipt { padding: 0; overflow: hidden; }
.receipt > .state { padding: 40px 24px 28px; }
.receipt .receipt-links { margin-top: 12px; }
.receipt-rows { position: relative; padding: 24px; }
.receipt-rows::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 1px dashed var(--border-input); }
.receipt-rows::after { content: ""; position: absolute; top: -7px; left: -7px; right: -7px; height: 14px; pointer-events: none;
  background: radial-gradient(circle at 7px 7px, var(--bg) 5.5px, var(--border) 6px, transparent 6.5px), radial-gradient(circle at calc(100% - 7px) 7px, var(--bg) 5.5px, var(--border) 6px, transparent 6.5px); }
.receipt-rows h2 { margin-bottom: 12px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); font-weight: 500; }