/* ============================================================================
   SD-Link — Stilbrücke WooCommerce-Funktionsstrecke (Warenkorb · Kasse · Konto)
   ----------------------------------------------------------------------------
   PRODUKTIV. Wird AUSSCHLIESSLICH auf Cart/Checkout/Account enqueued
   (inc/woocommerce.php → is_cart() || is_checkout() || is_account_page()).
   Tokens liegen site-weit (sdlink-tokens.css) — hier nur var(--*), keine
   Neudefinition.

   Diese Datei ist die Übersetzung der Design-Vorlage
   docs/design_handoff_woocommerce/.../mock/site/woocommerce.css (Mock-Klassen
   wie .cart-row, .woo-money, .order-review) auf die ECHTE Ausgabe:

     - Warenkorb / Kasse  = WooCommerce Cart-/Checkout-BLÖCKE
       (.wc-block-cart, .wc-block-checkout, .wc-block-components-*)
     - Mein Konto         = klassischer Shortcode [woocommerce_my_account]
       (.woocommerce-account, .woocommerce-MyAccount-*)

   WICHTIG (Handoff §5): Die Block-Klassen variieren je nach WooCommerce-
   Version leicht. Diese Selektoren sind nach dem dokumentierten Block-DOM
   (Woo 8/9) gesetzt und MÜSSEN am Live-DEV-DOM nachgezogen werden
   (DevTools), bevor PROD. Alles ist defensiv (Tokens + Fallbacks), damit ein
   abweichender Selektor höchstens „ungestylt", nie „kaputt" bedeutet.

   Wir STYLEN nur — Block-Struktur, Germanized-/DHL-Felder, Pflicht-Checkboxen
   und Reihenfolge bleiben unangetastet (Handoff §7).
   ============================================================================ */

/* ===========================================================================
   0. Gemeinsame Basis (alle drei Seiten)
   =========================================================================== */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
  background: var(--bg-page, #fafbfc);
}

.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area {
  font-family: var(--font-body);
  color: var(--fg-1);
}

/* Inhalts-Container auf Mock-Breite (woo-wrap: 1280px) bringen.
   Storefront begrenzt sonst enger; Full-Width-Body kommt aus body_class.
   margin-inline: auto zentriert den Container wie der Mock-.woo-wrap
   (sonst klebt der Inhalt linksbündig); padding-inline hält auf
   Zwischenbreiten Abstand zu den Rändern (Mock: 24px). */
.woocommerce-cart .col-full,
.woocommerce-checkout .col-full,
.woocommerce-account .col-full {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Storefront rendert Cart-/Checkout-Block mit .alignwide. Storefronts eigene
   Regel (gutenberg-blocks.css, Spezifität 5 Klassen) bricht den Block per
   negativem Margin breiter aus als der zentrierte Container:
     .storefront-align-wide.storefront-full-width-content .hentry
       .entry-content .alignwide { margin-inline: calc(25% - 25vw);
                                    max-width: 1000%; padding-inline: 1.41575em }
   Dadurch beginnt der Block weiter links als H1/Breadcrumb (siehe DEV).
   Ausbruch zurücknehmen — Selektor bewusst mit 6 Klassen (echte Body-Klassen),
   damit er Storefronts Regel unabhängig von der Ladereihenfolge schlägt. Der
   Block sitzt dann bündig im 1280er-Container, auf einer Linie mit dem Titel.
   Das padding-inline aus dem .col-full (24px) hält den Randabstand. */
.storefront-align-wide.storefront-full-width-content.woocommerce-cart .hentry .entry-content .alignwide,
.storefront-align-wide.storefront-full-width-content.woocommerce-checkout .hentry .entry-content .alignwide,
.storefront-align-wide.storefront-full-width-content.woocommerce-account .hentry .entry-content .alignwide {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* H1 (Seitentitel „Warenkorb"/„Kasse"/„Mein Konto") = Mock .woo-h1.
   Storefront rendert den Seitentitel als .entry-title bzw. .page-title-wrapper. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-account .page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-brand);
  margin: 6px 0 24px;
  text-align: left;
}
.woocommerce-cart .entry-title::after,
.woocommerce-checkout .entry-title::after,
.woocommerce-account .entry-title::after { content: none; }

/* Breadcrumb (Woo/Storefront) = Mock .sd-breadcrumb */
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-checkout .woocommerce-breadcrumb,
.woocommerce-account .woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 16px;
}
.woocommerce-cart .woocommerce-breadcrumb a,
.woocommerce-checkout .woocommerce-breadcrumb a,
.woocommerce-account .woocommerce-breadcrumb a {
  color: var(--fg-2);
  text-decoration: none;
}
.woocommerce-cart .woocommerce-breadcrumb a:hover,
.woocommerce-checkout .woocommerce-breadcrumb a:hover,
.woocommerce-account .woocommerce-breadcrumb a:hover { color: var(--sd-navy-600); }

/* Notices (Woo .woocommerce-error / -message / -info) = Mock .woo-notice */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-account .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error,
.wc-block-components-notice-banner {
  padding: 12px 15px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 18px;
  background: var(--sd-info-bg);
  color: var(--sd-sky-700);
  border-color: rgba(26, 140, 216, .28);
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  background: var(--sd-success-bg) !important;
  color: var(--sd-success) !important;
  border-color: rgba(31, 138, 91, .28) !important;
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  background: var(--sd-danger-bg) !important;
  color: var(--sd-danger) !important;
  border-color: rgba(179, 50, 42, .28) !important;
}
/* Storefront rendert das WooCommerce-Font-Icon als absolut positioniertes
   ::before (left: 1.5em) und reserviert dafuer 3.5em Innenabstand links. Unsere
   kompakte Box (12px 15px) hat diesen Platz nicht → das „!"-Icon lag ueber dem
   Text. Unser Notice-Design (Mock .woo-notice) kommt ohne Schrift-Icon aus, also
   blenden wir es aus; der Text startet sauber am 15px-Innenrand. */
.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-account .woocommerce-error::before {
  content: none;
}
/* Die Inline-Aktion (z. B. „Warenkorb ansehen") floatet bei Storefront rechts
   und klebte ohne Abstand am Text. Abstand links + vertikaler Puffer (Umbruch). */
.woocommerce-cart .woocommerce-message .button.wc-forward,
.woocommerce-checkout .woocommerce-message .button.wc-forward,
.woocommerce-account .woocommerce-message .button.wc-forward,
.woocommerce-cart .woocommerce-info .button.wc-forward,
.woocommerce-checkout .woocommerce-info .button.wc-forward,
.woocommerce-account .woocommerce-info .button.wc-forward {
  margin: 0 0 4px 16px;
}

/* Geld-Beträge monospace, tabular (Mock .woo-money).
   Block: .wc-block-components-formatted-money-amount; Klassik: .woocommerce-Price-amount */
.woocommerce-cart .wc-block-components-formatted-money-amount,
.woocommerce-checkout .wc-block-components-formatted-money-amount,
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount,
.woocommerce-account .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* ===========================================================================
   1. WARENKORB (Cart-Block)
   =========================================================================== */
/* Zweispaltiges Grid: Positionsliste | Summe (Mock .cart-layout 1fr / 360px).
   Der Cart-Block setzt das Grid normalerweise selbst über sein Flex-Layout
   (.wc-block-cart__main / __sidebar) — wir justieren nur Abstände/Breite. */
.wc-block-cart .wc-block-cart__sidebar { flex-basis: 360px; }
.wc-block-cart .wc-block-cart__main { padding-right: 28px; }

/* Positionsliste als Karte (Mock .cart-card) */
.wc-block-cart-items {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  border-collapse: separate;
}
.wc-block-cart-items__header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--sd-line-soft);
}
.wc-block-cart-items__header th { padding: 14px 22px; }
.wc-block-cart-items__row td {
  padding: 20px 22px;
  border-top: 1px solid var(--sd-line-soft);
  vertical-align: top;
}
.wc-block-cart-items__row:first-child td { border-top: 0; }

/* Produktbild (Mock .cart-prod-img) */
.wc-block-cart-item__image img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: var(--sd-navy-050);
  border-radius: 10px;
  padding: 8px;
}

/* Produktname (Mock .cart-info .pn) */
.wc-block-components-product-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sd-navy-600);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--sd-amber-600); }

/* Einzelpreis / Beschreibung / Variante (Mock .unit / .desc / .spec) */
.wc-block-cart-item__prices { font-size: 14px; color: var(--fg-2); margin: 4px 0; }
.wc-block-components-product-metadata {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.45;
}
.wc-block-components-product-metadata .wc-block-components-product-details__name { font-weight: 700; color: var(--fg-1); }

/* Mengen-Stepper (Mock .woo-stepper — wie PDP) */
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 132px;
}
.wc-block-components-quantity-selector__button {
  width: 38px;
  height: 40px;
  border: 0;
  background: #fff;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 18px;
}
.wc-block-components-quantity-selector__button:hover { background: var(--sd-navy-100); color: var(--sd-navy-700); }
.wc-block-components-quantity-selector__input {
  width: 46px;
  height: 40px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--sd-line);
  border-right: 1px solid var(--sd-line);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
}

/* Entfernen-Link (Mock .cart-rm) */
.wc-block-cart-item__remove-link {
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wc-block-cart-item__remove-link:hover { color: var(--sd-danger); }

/* Zeilensumme (Mock .cart-line) */
.wc-block-cart-item__total { text-align: right; font-size: 16px; }

/* Warenkorb-Summe (Mock .cart-summary, sticky) */
/* Karten-Look der Warenkorb-Summe (alle Breiten). */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px;
}
/* Sticky nur 2-spaltig (>700px), sonst gestapelt -> kein Schrumpfen/Überlappen. */
@media (min-width: 701px) {
  .wc-block-cart__sidebar { align-self: flex-start; }
  .wc-block-cart__sidebar .wc-block-components-sidebar,
  .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
    position: sticky;
    top: 92px;
    align-self: flex-start;
    height: fit-content;
  }
}

/* Summen-Zeilen (Mock .sum-row) */
.wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 14px;
  color: var(--fg-2);
}
.wc-block-components-totals-item__label { color: var(--fg-2); }

/* „Veranschlagte Gesamtsumme" / „Gesamtsumme" (Mock .sum-grand / .sg-*) */
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--sd-line);
  margin-top: 8px;
  padding-top: 16px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--fg-brand);
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-size: 30px;
  color: var(--fg-1);
}
.wc-block-components-totals-footer-item__tax-value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
  font-size: 12px;
  color: var(--fg-3);
}

/* PayPal-Express-Block (gelbe Fläche) (Mock .co-paypal) */
.wc-block-components-express-payment {
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.wc-block-components-express-payment__title-container,
.wc-block-components-express-payment-continue-rule {
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* „Weiter zur Kasse" = Navy (btn-dark), Place-Order „Jetzt kaufen" = Amber.
   WC-Block-Buttons rendern als <button>/<a> ohne .btn → direkt treffen. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-md);
  background: var(--sd-navy-700);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border: 0;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
  background: var(--sd-navy-600);
  color: #fff;
}

/* Trust-Band (per render_block nach dem Cart-Block injiziert, inc/woocommerce.php).
   Mock .woo-trust */
.sd-woo-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 18px auto 0;
}
.sd-woo-trust .ti {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
}
.sd-woo-trust .ic {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9px;
  background: var(--sd-navy-100);
  color: var(--sd-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-woo-trust .tt { font-weight: 700; font-size: 13.5px; color: var(--fg-1); }
.sd-woo-trust .ts { font-size: 12px; color: var(--fg-3); margin-top: 1px; }

/* Leerer Warenkorb (Empty-State): eigene Stilbruecke
   assets/css/sdlink-cart-empty.css (design_handoff_warenkorb_leer) — nur
   auf is_cart() nach dieser Datei geladen. Empty-Cart-Inhalt (Karte +
   "Beliebte Adapter" + Trust-Band) liegt im Block-Editor (Seite warenkorb). */

/* ===========================================================================
   2. KASSE (Checkout-Block)
   =========================================================================== */
/* Zweispaltig: Formularstrecke | sticky Bestellübersicht (Mock .checkout-layout).
   Der Block setzt Flex selbst (.wc-block-checkout__main / __sidebar). */
.wc-block-checkout__sidebar { flex-basis: 400px; }

/* Karten-Optik je Step (Mock .co-card). Der Checkout-Block gruppiert Steps in
   .wc-block-components-checkout-step — als Karte rahmen. */
.wc-block-components-checkout-step {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 24px;
  margin-bottom: 22px;
}
.wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  margin: 0 0 14px;
}

/* Express-Kasse (Mock .co-express-card) */
.wc-block-components-express-payment--checkout {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 24px;
  margin-bottom: 22px;
  text-align: center;
}

/* Formularfelder (Mock .woo-field). Block: .wc-block-components-text-input
   (Floating-Label), Selects/Comboboxen. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-select .wc-block-components-select__select,
.wc-block-checkout select,
.wc-block-components-combobox-control input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--fg-1);
  transition: border-color var(--dur-fast, 120ms), box-shadow var(--dur-fast, 120ms);
}

/* Felder „runder, weicher" (Kunden-Wunsch / Vorlage). WooCommerce-Block-CSS
   laedt NACH dieser Datei und setzt einen harten 4px-Radius + dunklen Border —
   daher hier mit hoher Spezifitaet (.woocommerce-checkout-Scope) + !important
   uebersteuern. Padding NICHT anfassen (Floating-Label-Abstand des Blocks). */
.woocommerce-checkout .wc-block-components-text-input input[type="text"],
.woocommerce-checkout .wc-block-components-text-input input[type="email"],
.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.woocommerce-checkout .wc-block-components-text-input input[type="number"],
.woocommerce-checkout .wc-block-components-text-input input[type="password"],
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select,
.woocommerce-checkout .wc-block-checkout select,
.woocommerce-checkout .wc-block-components-combobox-control input,
.woocommerce-checkout .wc-block-components-address-form input,
.woocommerce-checkout .wc-block-components-textarea {
  border: 1px solid var(--sd-line) !important;
  border-radius: 12px !important;
  background: var(--bg-surface) !important;
  min-height: 50px !important;
  box-shadow: none !important;
}
/* Wrapper der Floating-Label-Felder mitrunden (Hintergrund/Outline sitzt teils
   am Wrapper, nicht am input). */
.woocommerce-checkout .wc-block-components-text-input,
.woocommerce-checkout .wc-block-components-combobox-control,
.woocommerce-checkout .wc-block-components-select {
  border-radius: 12px;
}
/* Weicher Fokus: zarter Navy-Ring + ruhiger Rahmen. */
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select:focus,
.woocommerce-checkout .wc-block-components-combobox-control input:focus,
.woocommerce-checkout .wc-block-components-address-form input:focus {
  border-color: var(--sd-navy-400) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: 0 !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--fg-2); font-weight: 600; }
.wc-block-components-text-input input:focus,
.wc-block-components-select .wc-block-components-select__select:focus,
.wc-block-components-combobox-control input:focus {
  border-color: var(--sd-navy-500);
  box-shadow: var(--shadow-focus);
  outline: 0;
}
/* Inline-Validierung: Pflichtfeld leer → Danger (Mock .has-error) */
.wc-block-components-text-input.has-error input,
.wc-block-components-combobox.has-error input {
  border-color: var(--sd-danger);
}
.wc-block-components-validation-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-danger);
}

/* Zusatzfelder „Navigations-App" | „Betriebssystem" nebeneinander (Vorlage
   CheckoutPage .woo-grid-2). WooCommerce rendert „Additional Checkout Fields"
   über seine Block-API grundsätzlich FULL-WIDTH (THWCFE-colspan greift nur im
   klassischen Checkout) — daher hier per CSS 2-spaltig. E-Mail bleibt voll.
   Container ist je nach Step .__contact-fields oder .__additional-fields;
   gematcht wird das Feld defensiv über die Block-Field-id (sdlink_nav_software
   / sdlink_os), unabhängig von der Wrapper-Klasse. */
.wc-block-checkout__contact-fields,
.wc-block-checkout__additional-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.wc-block-checkout__contact-fields > *,
.wc-block-checkout__additional-fields > * { flex: 1 1 100%; }
/* 2-spaltig nur ab 701px — darunter stapeln die zwei Selects voll. */
@media (min-width: 701px) {
  .wc-block-checkout__contact-fields > *:has([id*="sdlink_nav_software"]),
  .wc-block-checkout__contact-fields > *:has([id*="sdlink_os"]),
  .wc-block-checkout__additional-fields > *:has([id*="sdlink_nav_software"]),
  .wc-block-checkout__additional-fields > *:has([id*="sdlink_os"]) {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: calc(50% - 8px);
    margin: 0;
  }
}

/* Adress-Grid an die Vorlage angleichen: WC nutzt flex-wrap mit 12px Spalt;
   Vorname|Nachname (und weitere von WC gepaarte Felder) auf 16px-Spalt wie im
   Mock (.woo-grid-2). Die Feld-Breiten selbst kommen aus WC (47/100 %). */
.wc-block-components-address-form { gap: 0 16px !important; }

/* Liefer-Umschalter Versenden | Abholung (Mock .co-seg).
   Block: .wc-block-checkout__shipping-method-option */
.wc-block-checkout__shipping-method-option {
  min-height: 56px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  background: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
}
.wc-block-checkout__shipping-method-option:hover {
  border-color: var(--sd-navy-200);
  background: var(--sd-navy-050);
}
.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--sd-navy-500);
  background: var(--sd-navy-050);
  color: var(--sd-navy-700);
  box-shadow: inset 0 0 0 1px var(--sd-navy-500);
}

/* Abholorte / Wunschort-Liste / Versand-Radios (Mock .pickup-opt / .radio-list / .pay-opt).
   Block: .wc-block-components-radio-control__option */
.wc-block-components-radio-control__option {
  padding: 13px 15px 13px 44px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg-1);
  transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms);
}
.wc-block-components-radio-control__option:hover {
  border-color: var(--sd-navy-200);
  background: var(--sd-navy-050);
}
.wc-block-components-radio-control__option--checked {
  border-color: var(--sd-navy-500);
  background: var(--sd-navy-050);
  box-shadow: inset 0 0 0 1px var(--sd-navy-500);
}
.wc-block-components-radio-control__input { accent-color: var(--sd-amber-600); }
.wc-block-components-radio-control__label { font-weight: 700; font-size: 14.5px; color: var(--fg-1); }
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-label { font-size: 13px; color: var(--fg-3); }

/* Pickup-Hinweis (Mock .co-pickup-note) */
.wc-block-checkout__pickup-options .wc-block-components-notice-banner {
  background: var(--sd-info-bg);
  color: var(--sd-sky-700);
}

/* Bestell-Notiz / „Notiz hinzufügen" (Mock .co-note-*) */
.wc-block-checkout__add-note .wc-block-components-checkbox__label,
.wc-block-checkout__add-note label {
  font-weight: 700;
  color: var(--fg-link);
}
.wc-block-components-textarea {
  min-height: 96px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  line-height: 1.5;
}
.wc-block-components-textarea:focus { border-color: var(--sd-navy-500); box-shadow: var(--shadow-focus); outline: 0; }

/* Einwilligungen (Germanized AGB/Widerruf + DHL-Paketankündigung) (Mock .co-check).
   Block: .wc-block-components-checkbox */
.wc-block-components-checkbox__label {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.wc-block-components-checkbox__input,
.wc-block-components-checkbox__mark { accent-color: var(--sd-amber-600); }
.wc-block-components-checkbox__input:focus { box-shadow: var(--shadow-focus); }
.wc-block-checkout__terms .wc-block-components-checkbox__label a,
.wc-block-components-checkbox__label a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wc-block-components-checkbox__label a:hover { color: var(--fg-link-hover); }

/* Zahlungsarten-Akkordeon (Mock .pay-opt) */
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option--checked) {
  border-color: var(--sd-navy-500);
  background: var(--sd-navy-050);
}

/* Bestellübersicht (sticky) (Mock .order-review).
   align-self/height: die Sidebar ist Flex-Kind und würde sonst auf die volle
   Höhe der Formularspalte gestreckt — dann „klebt" ein sticky-Element erst mit
   seinem UNTEREN Rand (nur der Button bleibt scheinbar stehen). Auf Inhaltshöhe
   schrumpfen, damit das GESAMTE Panel oben pinnt und mitläuft. */
/* Sticky/Responsive-Layout der KASSE-Bestellübersicht (Desktop sticky + Mobil
   einklappbar + fixe Kauf-Leiste) liegt jetzt in der Delta-Stilbrücke
   sdlink-checkout-mobile.css (design_handoff_kasse), die NUR auf der Kasse und
   NACH dieser Datei lädt. Hier daher bewusst KEINE Checkout-Sidebar-Sticky-Regel
   mehr (sonst Konflikt). Der Warenkorb behält sein eigenes Sticky unten. */
/* Übersicht auf weiße Fläche (Mock .order-review): den grauen Default-Kasten
   des Checkout-Blocks auf --bg-surface + 1px --sd-line reduzieren. */
.wc-block-checkout__sidebar .wc-block-components-order-summary {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px;
}
.wc-block-checkout__sidebar .wc-block-components-order-summary__content,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper { background: transparent; }

/* Positionen mit Mengen-Badge oben rechts am Bild (Mock .or-item / .or-thumb .qb) */
.wc-block-components-order-summary-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--sd-line-soft);
}
.wc-block-components-order-summary-item__image {
  position: relative;
  width: 52px;
  height: 52px;
}
.wc-block-components-order-summary-item__image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--sd-navy-050);
  border-radius: 8px;
  padding: 5px;
}
/* Badge aus dem Textfluss lösen und an die obere rechte Bildecke heften. */
.wc-block-components-order-summary-item__quantity {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  /* !important: WC rendert das Badge per default mit weißem Grund (Ziffer sonst
     unsichtbar, vgl. DEV-Screenshot) — Navy + weiße Ziffer erzwingen. */
  background: var(--sd-navy-700) !important;
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-1);
}
.wc-block-components-order-summary-item__name { font-weight: 700; font-size: 13.5px; color: var(--fg-1); line-height: 1.3; }
/* Beschreibung auf 2 Zeilen klemmen; Variante/„Kompatibilität" kompakt + grau. */
.wc-block-components-order-summary-item__description {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-block-components-order-summary-item__description p { margin: 0; }
.wc-block-components-order-summary-item .wc-block-components-product-metadata,
.wc-block-components-order-summary-item .wc-block-components-product-details {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
  margin-top: 2px;
}

/* „Jetzt kaufen" = Amber-CTA ≥ 52px (Mock .btn-primary.btn-lg).
   Scoped auf .woocommerce-checkout + !important: WooCommerce/Storefront färbt
   den Place-Order-Button per default dunkel und überschreibt sonst diese Regel.
   Der Warenkorb-„Weiter zur Kasse" bleibt Navy (eigener Selektor oben). */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border-radius: var(--r-md) !important;
  background: var(--sd-amber-600) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  border: 0;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease);
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: var(--sd-amber-500) !important;
  color: #fff !important;
  box-shadow: var(--shadow-2);
}

/* ===========================================================================
   3. MEIN KONTO (Shortcode [woocommerce_my_account])
   =========================================================================== */
/* Login / Registrierung (ausgeloggt) (Mock .account-auth / .auth-card) */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account .woocommerce > .woocommerce-form-login__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 8px auto 0;
  align-items: start;
}
.woocommerce-account .col-1,
.woocommerce-account .col-2 { max-width: none; }
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 28px;
}
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg-brand);
}

/* Eingabefelder (Login/Register/Adressen/Kontodaten) (Mock .woo-field input) */
.woocommerce-account .woocommerce-Input,
.woocommerce-account .woocommerce-form-row input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-EditAccountForm input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--fg-1);
}
.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account .woocommerce-form-row input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-EditAccountForm input:focus {
  border-color: var(--sd-navy-500);
  box-shadow: var(--shadow-focus);
  outline: 0;
}
.woocommerce-account label { font-weight: 700; font-size: 13px; color: var(--fg-2); }

/* Buttons (Anmelden = Amber, Konto anlegen = Sekundär) (Mock .btn-*) */
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button {
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--r-md);
  background: var(--sd-amber-600);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border: 0;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast, 120ms);
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover { background: var(--sd-amber-500); color: #fff; }

/* Dashboard zweispaltig: Sidebar | Inhalt (Mock .account-layout) */
.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
/* Navigations-Sidebar (Mock .acct-nav) */
.woocommerce-MyAccount-navigation {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 10px;
  float: none;
  width: auto;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--sd-navy-050); color: var(--sd-navy-700); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--sd-navy-700); color: #fff; }

.woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-content > p:first-child {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 24px;
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.6;
}

/* Bestellungs-Tabelle + Status-Pills (Mock .woo-table / .woo-pill) */
.woocommerce-orders-table,
.woocommerce-MyAccount-downloads {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.woocommerce-orders-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 22px;
  border-bottom: 1px solid var(--sd-line-soft);
}
.woocommerce-orders-table td {
  padding: 15px 22px;
  border-bottom: 1px solid var(--sd-line-soft);
  font-size: 14px;
  color: var(--fg-1);
}
.woocommerce-orders-table__cell-order-number { font-family: var(--font-mono); font-weight: 600; color: var(--fg-2); }
.woocommerce-orders-table__cell-order-total { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Status-Pill (Mock .woo-pill) */
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-orders-table .order-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--sd-info-bg);
  color: var(--sd-sky-700);
}

/* Adress-Karten (Mock .addr-grid / .addr-card) */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.woocommerce-account .woocommerce-Address {
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-1);
}

/* ===========================================================================
   4. RESPONSIVE — 980px → einspaltig, sauber bis 390px
   =========================================================================== */
@media (max-width: 980px) {
  .wc-block-cart .wc-block-cart__main { padding-right: 0; }
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}

/* Warenkorb mobil (<=700px = WC stapelt einspaltig): Stickyness hart aus — auch
   WCs eigene per JS gesetzte `.is-sticky`. Sonst bleibt die Warenkorb-Summe oben
   gepinnt und die Positionen scrollen darüber. Voll in den Fluss zurückholen.
   (Die KASSE regelt das in sdlink-checkout-mobile.css.) */
@media (max-width: 700px) {
  .wc-block-cart__sidebar,
  .wc-block-cart__sidebar .wc-block-components-sidebar,
  .wc-block-cart__sidebar .wc-block-components-sidebar.is-sticky,
  .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    height: auto !important;
  }
}
@media (max-width: 720px) {
  .woocommerce-cart .entry-title,
  .woocommerce-checkout .entry-title,
  .woocommerce-account .entry-title { font-size: 32px; }
  .sd-woo-trust,
  .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-checkout__shipping-method-option,
  .wc-block-components-radio-control__option,
  .wc-block-components-text-input input,
  .woocommerce-MyAccount-navigation li a,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button { transition: none; }
}