/**
 * Cart and checkout — a narrow paper sheet, one column, like a booking page:
 * quiet eyebrow, serif title, order card, then the action.
 * Tokens from site.css. Do not set color: var(--brass).
 */
.pay-sheet { padding: var(--sp-7) 0 var(--sp-8); max-width: 40rem; }
.pay-sheet > .eyebrow { margin-bottom: var(--sp-2); }
.pay-sheet > h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.pay-sheet > .lede { color: var(--ink-2); max-width: 42ch; margin-bottom: var(--sp-5); }
.pay-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-6); padding: 0;
  list-style: none; font-size: var(--fs-xs); color: var(--mute);
}
.pay-trust li { display: flex; align-items: center; gap: var(--sp-2); }
.pay-trust .g { color: var(--pine); font-weight: 700; }

.pay-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-4);
}
.pay-card h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }

.pay-save {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--holds-bg);
  border: 1px solid var(--holds);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
  color: var(--pine);
  font-size: var(--fs-s);
}
.pay-save b { color: var(--ink); }
.was { color: var(--mute); text-decoration: line-through; font-weight: 400; }

.basket { list-style: none; margin: 0; padding: 0; }
.basket li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  margin: 0 0 var(--sp-3);
  background: var(--holds-bg);
  border: 1px solid var(--holds);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
}
.basket li > * { min-width: 0; }
.basket b { font: 600 var(--fs-b)/1.25 var(--display); color: var(--pine); }
.basket p { margin: var(--sp-1) 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.basket .amt { font: 600 var(--fs-l)/1.2 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.basket .line-remove { margin-top: var(--sp-2); }

.cadence { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.cadence .btn[aria-pressed="true"] { border-color: var(--brass); color: var(--pine); background: var(--holds-bg); }
.cadence .btn[data-cadence="year"][aria-pressed="true"] { background: var(--gap-bg); border-color: var(--brass); }
.auth-alt { margin: var(--sp-4) 0 0; }
.or-rule { margin: var(--sp-4) 0 0; text-align: center; color: var(--mute); font-size: var(--fs-s); }
.adds { margin: var(--sp-4) 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.adds p { margin: var(--sp-2) 0 0; }

.sum { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sum .total { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.sum .total b { font: 600 var(--fs-h3)/1.2 var(--display); color: var(--pine); font-variant-numeric: tabular-nums; }
.sum .vat { margin: var(--sp-3) 0 0; font-size: var(--fs-s); color: var(--mute); }

.pay-act .this { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-s); }
.pay-act .field { width: 100%; }
.pay-act .btnrow { margin-top: var(--sp-4); }
.pay-act form .lbl { display: block; }
.pay-stack { display: grid; gap: var(--sp-3); }
.pay-stack .btn { justify-self: stretch; width: 100%; }

.pay-card .btn.btn--primary {
  background: #123e2f;
  border: 2px solid #123e2f;
  color: #f4efe4;
}
.pay-card .btn.btn--primary:hover {
  background: #1b5541;
  border-color: #1b5541;
  color: #f4efe4;
}
.pay-card .btn.btn--secondary,
.pay-card .btn.btn--quiet {
  background: #fff;
  border: 2px solid #123e2f;
  color: #123e2f;
}
.pay-card .btn.btn--secondary:hover,
.pay-card .btn.btn--quiet:hover {
  background: #e9f2ec;
  border-color: #123e2f;
  color: #123e2f;
}
.pay-card .cadence .btn[aria-pressed="true"] {
  background: #f8f0dc;
  border-color: #765b28;
  color: #123e2f;
}
.pay-card .fx-as { margin: .15em 0 0; font-size: var(--fs-xs); color: var(--mute); font-weight: 400; text-decoration: none; }
.pay-card .fx-note { margin: var(--sp-2) 0 0; font-size: var(--fs-s); color: var(--ink-2); }

.empty h2 { color: #123e2f; }
.empty p { color: #15201a; }
.empty .btnrow { margin-top: var(--sp-4); }