/* ============================================================================
   SD-Link — Stilbruecke Mini-Warenkorb / Header-Hover-Menue
   (specs/design_handoff_minicart)
   ----------------------------------------------------------------------------
   Macht das WooCommerce-Mini-Cart-Widget (Header-Dropdown) markenkonform UND
   repariert das Hover-Verhalten:
     - sichtbarer Zustand per JS-Klasse `.sd-cart-open` (kein fragiles
       Theme-:hover, kein keyframe-`both`, das bei opacity:0 haengen bleibt).
     - geoeffnet via Opacity/Visibility-TRANSITION -> uebersteht jeden
       WooCommerce-Fragment-Refresh, ohne unsichtbar zu bleiben.
     - transparenter Hover-Steg + Schliessverzoegerung (im JS) ueberbruecken
       die Luecke zwischen Chip und Panel.

   INTEGRATION (Abweichungen vom Bundle, bewusst):
   - Tokens/Fonts kommen global aus sdlink-tokens.css -> kein @import, kein
     :root-Block hier.
   - Der CHIP (.cart-contents) ist bereits in sdlink-base.css markenkonform
     gestylt (Amber-Pill, .count, Icon-Glyph). Wir uebernehmen ihn unveraendert
     und ergaenzen NUR den Offen-Zustand -> keine doppelte/konkurrierende
     Chip-Optik.
   - Selektoren unter `.site-header` gescoped, damit sie die Spezifitaet der
     bestehenden base.css-Regeln treffen.
   - Mobil-Breakpoint = 768px (deckungsgleich mit base.css, das das Panel ab
     <=768px ausblendet -> keine tote Zone 721-768px).
   ============================================================================ */

/* === 1. Cart-Region = Positionskontext + Hover-Zone =========================
   Storefront rendert <ul id="site-header-cart" class="site-header-cart">.
   Desktop: relativer Positionskontext fuers absolute Panel. (base.css setzt im
   <=768px-Media position:static mit hoeherer Spezifitaet -> mobil bleibt das
   Panel ohnehin ausgeblendet.) */
.site-header .site-header-cart {
  position: relative;
}

/* Offen-Zustand des Chips (Klasse vom sdlink-minicart.js auf die Region
   gesetzt). Spezifitaet 0,4,0 schlaegt die base.css-Chip-Regel (0,3,0).
   Optik bewusst dezent = wie der bestehende :hover-Zustand in base.css. */
.site-header .site-header-cart.sd-cart-open .cart-contents {
  background: #fbdcb8;
}
.site-header .site-header-cart .cart-contents:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

/* === 2. Panel (.widget_shopping_cart) ======================================= */
/* Theme-Default-Hover (display:none/block) ausschalten -> wir steuern per
   Klasse. !important nur fuer die Sichtbarkeits-/Positionslogik. */
.site-header .site-header-cart .widget_shopping_cart {
  display: block !important;
  position: absolute !important;
  /* Rechtsbuendig unter den Chip: right:0 + left:auto MUESSEN das Storefront-
     Default (setzt left:0 -> Panel laeuft nach rechts aus dem Viewport)
     ueberschreiben -> !important. */
  right: 0 !important; left: auto !important;
  top: calc(100% + 14px);
  width: 360px; max-width: calc(100vw - 32px);
  margin: 0; padding: 0;
  background: #fff;
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  z-index: 1000;
  /* GESCHLOSSEN by default */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
/* GEOEFFNET (Klasse vom sdlink-minicart.js gesetzt) */
.site-header .site-header-cart.sd-cart-open .widget_shopping_cart {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-header-cart .widget_shopping_cart { transition: visibility 0s; transform: none; }
}

/* transparenter Hover-Steg: ueberbrueckt die 14px-Luecke zum Chip */
.site-header .site-header-cart .widget_shopping_cart::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
/* Pfeilspitze zum Chip */
.site-header .site-header-cart .widget_shopping_cart::after {
  content: ''; position: absolute; right: 22px; top: -6px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--sd-line); border-top: 1px solid var(--sd-line);
  transform: rotate(45deg); border-top-left-radius: 3px;
}

.site-header .widget_shopping_cart .widget_shopping_cart_content {
  display: flex; flex-direction: column; max-height: min(70vh, 520px);
  border-radius: inherit; overflow: hidden;
}

/* === 3. Kopf (per functions.php-Hook injiziert) ============================= */
.site-header .widget_shopping_cart .sd-mc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--sd-line-soft);
  flex: none;
}
.site-header .widget_shopping_cart .sd-mc-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg-brand); }
.site-header .widget_shopping_cart .sd-mc-count { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--fg-3); }

/* === 4. Positionsliste ======================================================
   WICHTIG: unter `.site-header .site-header-cart` scopen (0,3,x). Storefronts
   woocommerce.css setzt das Item-Layout mit (0,2,1)-Regeln, die LATER laden
   (`.site-header .widget_shopping_cart li{padding-left:1.41575em}` ->
   bei Panel-font-size .875em = 19.8px Ueberlappung) — und das Bild mit
   `.product_list_widget li img{max-width:2.617924em;float:right}` (= 36.6px,
   KLEMMT `width:52px!important` per max-width). Daher hier hoehere Spezifitaet
   + max-width-Override. */
.site-header .site-header-cart ul.woocommerce-mini-cart.cart_list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.site-header .site-header-cart ul.woocommerce-mini-cart.cart_list::-webkit-scrollbar { width: 8px; }
.site-header .site-header-cart ul.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb { background: var(--sd-line); border-radius: 8px; }

.site-header .site-header-cart li.woocommerce-mini-cart-item {
  position: relative;
  padding: 13px 44px 13px 82px;   /* 18 + 52(Bild) + 12 links · 44 rechts fuer X */
  margin: 0;
  min-height: 52px;
}
.site-header .site-header-cart li.woocommerce-mini-cart-item + li.woocommerce-mini-cart-item { border-top: 1px solid var(--sd-line-soft); }

/* Produktbild (im Produkt-Link) absolut links — max-width MUSS Storefronts
   2.617924em ueberschreiben, sonst bleibt das Bild auf 36px geklemmt. */
.site-header .site-header-cart li.woocommerce-mini-cart-item a:not(.remove) img,
.site-header .site-header-cart li.woocommerce-mini-cart-item img.attachment-woocommerce_thumbnail {
  position: absolute; left: 18px; top: 13px;
  width: 52px !important; height: 52px !important;
  min-width: 52px; max-width: 52px !important;
  object-fit: contain; background: var(--sd-navy-050);
  border-radius: 8px; padding: 5px; margin: 0 !important; float: none !important;
}
/* Produktname = der Produkt-Link */
.site-header .site-header-cart li.woocommerce-mini-cart-item a:not(.remove) {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.3; color: var(--sd-navy-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header .site-header-cart li.woocommerce-mini-cart-item a:not(.remove):hover { color: var(--sd-amber-600); }
/* Meta-Zeilen: WC-Variation UND Germanized-Infos (Lieferzeit/Kompatibilitaet)
   kompakt + gedaempft, damit sie nicht wie der Produktname wirken. */
.site-header .site-header-cart li.woocommerce-mini-cart-item .variation,
.site-header .site-header-cart li.woocommerce-mini-cart-item dl.variation,
.site-header .site-header-cart li.woocommerce-mini-cart-item .wc-gzd-additional-info {
  font-size: 11.5px; color: var(--fg-3); margin: 3px 0 0; line-height: 1.35;
  font-weight: 400; font-family: var(--font-body);
}
.site-header .site-header-cart li.woocommerce-mini-cart-item .variation dt,
.site-header .site-header-cart li.woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; font-weight: 400; }
/* Menge × Einzelpreis (mono) */
.site-header .site-header-cart li.woocommerce-mini-cart-item .quantity {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.site-header .site-header-cart li.woocommerce-mini-cart-item .quantity .amount { color: var(--fg-2); }

/* Entfernen-X oben rechts. Storefront positioniert a.remove mit (0,4,1) auf
   position:relative;float:left;top:auto -> hier mit !important uebersteuern,
   damit das X zuverlaessig oben rechts sitzt. */
.site-header .site-header-cart li.woocommerce-mini-cart-item a.remove,
.site-header .site-header-cart li.woocommerce-mini-cart-item a.remove_from_cart_button {
  position: absolute !important; top: 11px !important; right: 14px !important; left: auto !important;
  float: none !important;
  width: 24px; height: 24px; line-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; text-align: center;
  color: var(--fg-muted) !important; background: transparent;
  border-radius: 6px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-header .site-header-cart li.woocommerce-mini-cart-item a.remove:hover,
.site-header .site-header-cart li.woocommerce-mini-cart-item a.remove_from_cart_button:hover {
  background: var(--sd-danger-bg); color: var(--sd-danger) !important;
}

/* === 5. Fuss: Zwischensumme · Hinweis · Buttons ============================= */
.site-header .woocommerce-mini-cart__total.total {
  flex: none; margin: 0;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px 6px;
  background: var(--sd-navy-050); border-top: 1px solid var(--sd-line);
  font-family: var(--font-display);
}
.site-header .woocommerce-mini-cart__total.total strong { font-weight: 700; font-size: 15px; color: var(--fg-brand); }
.site-header .woocommerce-mini-cart__total.total .woocommerce-Price-amount {
  font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
/* Steuer-/Versand-Hinweis (per Hook injiziert) */
.site-header .widget_shopping_cart .sd-mc-note {
  flex: none; margin: 0; padding: 0 18px 2px;
  background: var(--sd-navy-050);
  font-family: var(--font-body); font-size: 12px; color: var(--fg-3);
}

.site-header .woocommerce-mini-cart__buttons.buttons {
  flex: none; margin: 0; padding: 10px 18px 16px;
  background: var(--sd-navy-050);
  display: flex; flex-direction: column; gap: 8px;
}
.site-header .woocommerce-mini-cart__buttons.buttons a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; padding: 0 20px; margin: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border-radius: var(--r-md); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* erster Button (Warenkorb anzeigen) = sekundaer Navy-Outline */
.site-header .woocommerce-mini-cart__buttons.buttons a.button {
  background: transparent; color: var(--sd-navy-700); border-color: var(--sd-navy-700);
}
.site-header .woocommerce-mini-cart__buttons.buttons a.button:hover { background: var(--sd-navy-100); }
/* Checkout-Button (Zur Kasse) = primaer Amber */
.site-header .woocommerce-mini-cart__buttons.buttons a.button.checkout {
  background: var(--sd-amber-600); color: #fff; border-color: rgba(0,0,0,.08); box-shadow: var(--shadow-1);
}
.site-header .woocommerce-mini-cart__buttons.buttons a.button.checkout:hover { background: var(--sd-amber-500); box-shadow: var(--shadow-2); }
.site-header .woocommerce-mini-cart__buttons.buttons a.button:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

/* === 6. Leerer Warenkorb ==================================================== */
.site-header .woocommerce-mini-cart__empty-message,
.site-header .widget_shopping_cart p.empty {
  margin: 0; padding: 28px 20px 22px; text-align: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fg-2);
}
/* optionaler "Produkte ansehen"-CTA (per Hook injiziert) */
.site-header .widget_shopping_cart .sd-mc-empty-cta {
  display: block; margin: 0 20px 22px; height: 44px; line-height: 44px;
  text-align: center; text-decoration: none;
  background: var(--sd-amber-600); color: #fff; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  transition: background var(--dur-fast) var(--ease-out);
}
.site-header .widget_shopping_cart .sd-mc-empty-cta:hover { background: var(--sd-amber-500); }

/* === 7. Mobil: kein Hover-Dropdown (deckungsgleich mit base.css <=768px) ==== */
@media (max-width: 768px) {
  .site-header .site-header-cart .widget_shopping_cart { display: none !important; }
}