/* ═══ Warenkorb und Schublade (Uebergabe 3.13, 3.14) ══════════════
   Was das Register nicht selbst hat: die Abstaende der Seite (in der
   Referenz als style-Attribut), die Gliederung der Zeile in vier Felder,
   das Gutscheinfeld und die Schublade als Ebene. Kein Radius, kein Schatten. */

.woocommerce-cart .site-main { padding-top: 28px; }
/* Warenkorb und Kasse stehen im Seiteninhalt; der ist im Theme als
   Fliesstext gesetzt (68ch, Sekundaerton). Hier ist er eine Anwendung. */
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content { max-width: none; color: var(--sh-text); }
.woocommerce-cart .entry-content > * + *, .woocommerce-checkout .entry-content > * + * { margin-top: 0; }
.sh-korb-kopf { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }

/* Die Zeile: Platte | Text | Preis, darunter die Handlungen.
   Das Register stellt drei Spalten; die Kinder sitzen hier ausdruecklich,
   weil die Zeile im Korb ein Kind mehr hat als in der Schublade. */
.sh-korb-zeilen { margin-top: 16px; }
.sh-zeile > .sh-platte { grid-column: 1; grid-row: 1 / span 2; }
.sh-zeile-klein > .sh-platte { grid-row: 1; }
.sh-zeile-text { grid-column: 2; min-width: 0; }
.sh-zeile-preis { grid-column: 3; grid-row: 1; }
.sh-zeile-tun { grid-row: 2; }
.sh-zeile-bestand { margin-top: 6px; }
.sh-zeile-zusatz .wc-gzd-cart-info { margin: 4px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--sh-text-2); }
.sh-zeile-zusatz .wc-gzd-cart-info + .wc-gzd-cart-info { margin-top: 2px; }
.sh-zeile .sh-preis { flex-direction: column; align-items: flex-end; gap: 2px; }
.sh-zeile-tun .sh-verweis .sh-symbol { width: 16px; height: 16px; }
.sh-zeile-tun .sh-verweis[aria-pressed='true'] .sh-symbol { fill: currentColor; }
.sh-zeile-tun .product-remove { display: inline-flex; }
/* Merken und Entfernen: Tippziel 44 px hoch (D14 der Gegenpruefung). */
.sh-zeile-tun .sh-verweis { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* Ein ungueltiges Mengenfeld haelt cart.js an; es bekommt den Fehlerrand. */
.sh-menge input:invalid { color: var(--sh-fehler); }
.sh-zeile.cart_item .blockUI, .cart_totals .blockUI { background: var(--sh-grund) !important; opacity: .55 !important; }

@media (max-width: 599px) {
  .sh-zeile { grid-template-columns: 76px minmax(0, 1fr); }
  .sh-zeile .sh-platte { width: 76px; }
  .sh-zeile-preis { grid-column: 2; grid-row: auto; }
  .sh-zeile .sh-preis { align-items: flex-start; justify-content: flex-start; text-align: left; }
  .sh-zeile .sh-preis-zeile { text-align: left; }
  .sh-zeile-tun { grid-column: 1 / -1; grid-row: auto; }
  .sh-zeile-klein { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .sh-zeile-klein .sh-zeile-preis { grid-column: 3; grid-row: 1; }
  .sh-zeile-klein .sh-preis { align-items: flex-end; }
}

.sh-korb-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
/* Mit Skript aktualisiert der Korb von selbst; der Knopf bleibt fuer den
   Fall ohne Skript (cart.js setzt ihn sonst ohnehin auf disabled). */
body.sh-korb-js .sh-korb-aktualisieren { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Rechte Spalte: Summe, Gutschein, Kassenknopf, Zusagen. */
.sh-korb-rechts .cart-collaterals { width: auto; float: none; }
@media (min-width: 1024px) { .sh-korb-rechts { position: sticky; top: 100px; } }
.sh-summe-titel { margin-bottom: 12px; }
.sh-summe-steuer { text-align: right; margin-top: 6px; }
.sh-summe-nachlass dt a { margin-left: 6px; font-size: .75rem; }
.sh-gutschein { display: flex; gap: 8px; margin: 18px 0; }
.sh-gutschein .sh-eingabe { min-height: 44px; }
.sh-gutschein .coupon-error-notice { flex-basis: 100%; margin: 6px 0 0; font-size: .8125rem; color: var(--sh-fehler); }
.sh-gutschein { flex-wrap: wrap; }
.sh-gutschein .sh-eingabe { flex: 1; width: auto; }
.wc-proceed-to-checkout { padding: 0; }
.wc-proceed-to-checkout .checkout-button { margin: 0; }
.sh-korb-rechts .sh-zusagen { margin-top: 20px; }

/* "Dazu passt" unter dem Warenkorb. */
.sh-dazu-passt { margin-top: 48px; }
.sh-dazu-passt .sh-h2 { margin-bottom: 18px; }

/* Leerer Warenkorb */
.sh-korb-leer { padding: 8px 0 var(--sh-takt); }
.sh-korb-leer .cart-empty { margin: 0 0 20px; }
.sh-korb-leer-weiter { margin-top: 8px; }

/* ── Schublade ─────────────────────────────────────────────────
   Das Register stellt Lage, Breite und Gliederung (.sh-schublade);
   hier nur, was zur Ebene gehoert. Der Schleier liegt unter der
   Schublade (z-index 20 bzw. 50 im Register), ueber dem klebenden Kopf. */
.sh-schublade-schleier { z-index: 45; }
.sh-schublade { animation: sh-schublade-ein .22s ease; }
.sh-schublade:focus { outline: 0; }
.sh-schublade-titel { display: flex; align-items: center; gap: 8px; }
.sh-schublade-inhalt .sh-versandziel { margin-top: 12px; }
.sh-schublade-passt { margin: 22px 0 4px; }
.sh-schublade .sh-zeile-klein .sh-preis-gross .sh-preis-jetzt { font-size: 1.375rem; }
body.sh-schublade-offen { overflow: hidden; }
@keyframes sh-schublade-ein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sh-schublade { animation: none; } }

/* Das Mengenfeld ist Teil von .sh-menge - die allgemeine Feldregel aus
   wc.css (Rand, 48 px, Polster) gehoert hier nicht hin. */
.sh-seite .sh-menge input[type="number"] { min-height: 0; padding: 0; border: 0; background: transparent; outline-offset: -2px; }

/* ── Leiste "Zur Kasse" unter 1024 px ───────────────────────────
   Fest am unteren Rand, solange die Uebersicht nicht im Bild ist. Sie
   wiederholt nur Gesamt und Knopf; fuer Vorleser ist sie verborgen
   (aria-hidden, tabindex -1), denn die Uebersicht steht vollstaendig im
   Dokument. */
.sh-korb-leiste { display: none; }
@media (max-width: 1023px) {
  .sh-korb-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--sh-grund); border-top: 1px solid var(--sh-linie);
    transform: translateY(0); transition: transform .2s ease;
  }
  .sh-korb-leiste-betrag { display: flex; flex-direction: column; line-height: 1.1; }
  .sh-korb-leiste-betrag b { font-size: 1.375rem; font-weight: var(--pc-gewicht-sport); font-stretch: var(--pc-breite-sport); font-variant-numeric: tabular-nums; }
  .sh-korb-leiste .sh-tat { flex: none; }
  body.sh-uebersicht-sichtbar .sh-korb-leiste, body.sh-schublade-offen .sh-korb-leiste { transform: translateY(110%); }
  /* Platz, damit die Leiste den Fuss nicht verdeckt. */
  .woocommerce-cart .site-content { padding-bottom: calc(var(--sh-takt) + 72px); }
}
@media (prefers-reduced-motion: reduce) { .sh-korb-leiste { transition: none; } }