/* Express-Checkout „Sofort kaufen" auf der Produktseite (docs/18 Etappe 6).
   Ausgelagerte Plain-CSS (filemtime-Cachebust, kein Vite) — nur geladen, wenn der Express-Block gerendert
   wird (Gate an). Farben aus den Shop-Tokens (var(--line) & Co.), Abstände px (CSS-Datei, nicht Inline). */

.pdp-express { margin-top: 14px; }
/* D9-Falle: .pdp-express hat display:flex → die UA-Regel [hidden]{display:none} würde NICHT greifen.
   Deshalb explizit — sonst bliebe der Block trotz hidden sichtbar (bei ungültiger/ausverkaufter Auswahl). */
.pdp-express[hidden] { display: none; }
.pdp-express { display: block; }

.pdp-express-sep {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 13px; margin-bottom: 12px;
}
.pdp-express-sep::before, .pdp-express-sep::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--line);
}

/* Zwei gleiche Spalten in EINER Zeile (PayPal | Amazon). Auf breiten Screens nebeneinander; sind die
   Spalten zu schmal (mobil), bricht es sauber auf gestapelt um (flex-wrap + Basis-Breite). */
.pdp-express-slots { display: flex; flex-flow: row wrap; gap: 10px; align-items: stretch; }
.pdp-express-slot { flex: 1 1 220px; min-width: 0; min-height: 44px; }
/* Amazon-/PayPal-Buttons rendern in ihre Slots; jede Spalte volle Breite ausnutzen. */
.pdp-express-slot > * { width: 100% !important; }

.pdp-express-note {
  margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.4;
}