/* Checkout auf Lesbreite zentrieren, große schwarze Typo, großzügige Abstände. */
.checkout {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--section) var(--pad-x);
  color: var(--ink);
}
/* Nur drei Stufen: H1, Zwischenüberschrift (h2), Body (--fs-base). */
.checkout > h1 { margin-bottom: 2.5rem; }
.checkout .form-headline,
.checkout .payment-methods h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 1.5rem 0 0.5rem; }

.checkout label,
.checkout input[type="text"], .checkout input[type="email"], .checkout select, .checkout textarea,
.checkout .field[data-type="radio"] label,
.checkout .button,
.checkout .checkbox-row {
  font-size: var(--fs-base);
}
.checkout label { font-weight: var(--fw-medium); color: var(--ink); text-transform: none; letter-spacing: 0; margin-bottom: 0.5rem; }
.checkout input[type="text"], .checkout input[type="email"], .checkout select, .checkout textarea { padding: 0.95rem 1rem; }
.checkout select { padding-right: 2.4rem; }
.checkout .button { padding: 1.15rem 1.5rem; }
.checkout .checkbox-row { color: var(--ink); }

/* Warenkorb-Übersicht oben mit Abstand zum Formular, etwas größere Schrift. */
.checkout .cart { margin-bottom: 3rem; }
.checkout .cart table { font-size: var(--fs-base); }
.checkout .cart tbody small { font-size: var(--fs-sm); color: var(--muted); }

/* Formular: zweispaltiges Raster über data-width, großzügige Lücken. */
.checkout #checkout-form.grid,
.checkout .payment-methods.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.75rem 1.5rem;
  align-items: start;
}
.checkout [data-width] { grid-column: span 12; }
.checkout [data-width="1/2"] { grid-column: span 6; }
.checkout [data-width="1/3"] { grid-column: span 4; }
.checkout [data-width="2/3"] { grid-column: span 8; }
.checkout [data-width="4/12"] { grid-column: span 4; }
.checkout .form-row { margin-bottom: 0; }

.checkout .payment-section { margin-top: 2rem; }
.checkout .payment-section h2 { margin-bottom: 1rem; }
.checkout #payment-element { min-height: 2.5rem; }
.checkout .payment-message {
  font-size: var(--fs-sm); color: var(--error); margin-top: 0.75rem;
}
.checkout .payment-message[hidden] { display: none; }
.checkout #checkout-submit.is-busy { opacity: 0.6; cursor: progress; }
/* Liefergebiet-Hinweis: schlicht als schwarzer Text, keine Box. */
.checkout .form-info {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.checkout .form-info a { text-decoration: underline; text-underline-offset: 0.14em; }
.checkout .checkout-legal { margin: 1.5rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Sticky-Gesamtsumme: bleibt beim Scrollen sichtbar, sitzt über dem Button. */
.checkout .checkout-total-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: 0.5rem;
  padding: 1rem 0;
  background: var(--bg);          /* deckend, damit nichts durchblitzt */
  border-top: 1px solid var(--ink);
}
.checkout .checkout-total-bar[hidden] { display: none; }
.checkout .checkout-total-label { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.checkout .checkout-total-value { font-size: var(--fs-h2); font-weight: var(--fw-bold); }

@media (max-width: 40rem) {
  .checkout [data-width="1/2"],
  .checkout [data-width="1/3"],
  .checkout [data-width="2/3"],
  .checkout [data-width="4/12"] { grid-column: span 12; }
}