/* ============================================================================
   sdlink-cart-empty.css
   Stilbrücke für die LEERE WooCommerce-Warenkorb-Seite (Cart-Block).
   Macht den Empty-State von sdlink.de markenkonform: Navy-Cart-Icon statt
   Sad-Face, du-Form-Texte, Amber-/Navy-CTAs, „Beliebte Adapter“ als
   SD-Link-Produktkarten und ein Trust-Band.

   WICHTIG
   - Nur Tokens nutzen (var(--*)); nichts hardcoden. Tokens liegen site-weit.
   - Diese Datei ergänzt die Basis-Stilbrücke `sdlink-woocommerce.css`
     (design_handoff_woocommerce). NACH ihr enqueuen.
   - Block-Klassennamen variieren je WooCommerce-Version — am Live-DOM
     verifizieren (siehe README §4). Die Selektoren unten sind Richtwerte.
   - Greift NUR im leeren Zustand: alles unter dem Empty-Cart-Block gescoped,
     damit der gefüllte Warenkorb unberührt bleibt.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Empty-Cart-Block als Seiten-Container (Marketing-Breite, zentriert)
   Richtwert-Selektor: .wp-block-woocommerce-empty-cart-block
   Alt (ältere WC): .wc-block-cart__empty-cart, .is-empty
---------------------------------------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .wc-block-cart.wc-block-cart--is-empty,
.woocommerce-cart .wc-block-cart__empty-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* WooCommerce-Default-Platzhalter im Empty-State ausblenden:
   das Sad-Face-Bild und der Default-Titel/Button. Ersetzt durch .sd-empty-card. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wc-block-cart__empty-cart__title,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > figure,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-image,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .has-text-align-center > img {
  display: none;
}

/* ----------------------------------------------------------------------------
   2. Empty-State-Karte  (Group-Block mit Zusatzklasse .sd-empty-card)
---------------------------------------------------------------------------- */
.woocommerce-cart .sd-empty-card {
  max-width: 680px;
  margin: 8px auto 0;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 52px 32px 48px;
}

/* Navy-Kreis mit funktionalem Lucide-Cart-Icon (Inline-SVG im Markup) */
.woocommerce-cart .sd-empty-card__icon {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--sd-navy-050);
  color: var(--sd-navy-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--sd-navy-100);
}
.woocommerce-cart .sd-empty-card__icon svg {
  width: 34px; height: 34px;
  stroke: currentColor; stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

.woocommerce-cart .sd-empty-card h2,
.woocommerce-cart .sd-empty-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  margin: 0 0 10px;
}
.woocommerce-cart .sd-empty-card p,
.woocommerce-cart .sd-empty-card__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 auto 24px;
  max-width: 46ch;
}

/* CTA-Reihe */
.woocommerce-cart .sd-empty-card__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.woocommerce-cart .sd-empty-card__actions .sd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.woocommerce-cart .sd-empty-card__actions .sd-btn svg {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Primär = Amber-Fill, weißer Text, Navy-Rahmen */
.woocommerce-cart .sd-empty-card__actions .sd-btn--primary {
  background: var(--sd-amber-600);
  color: #fff;
  border-color: var(--sd-navy-700);
  box-shadow: var(--shadow-inset), var(--shadow-1);
}
.woocommerce-cart .sd-empty-card__actions .sd-btn--primary:hover {
  background: var(--sd-amber-500);
  box-shadow: var(--shadow-inset), var(--shadow-2);
}
/* Sekundär = Navy-Outline */
.woocommerce-cart .sd-empty-card__actions .sd-btn--secondary {
  background: var(--bg-surface);
  color: var(--sd-navy-700);
  border-color: var(--sd-navy-500);
}
.woocommerce-cart .sd-empty-card__actions .sd-btn--secondary:hover {
  background: var(--sd-navy-050);
}
.woocommerce-cart .sd-empty-card__actions .sd-btn:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}

/* ----------------------------------------------------------------------------
   3. „Beliebte Adapter“  — Überschrift + WooCommerce-Produktraster
   Wrapper: Group-Block mit Zusatzklasse .sd-recos
   Produkte: wp:woocommerce/product-new ODER handpicked-products
   Richtwert-Grid-Klassen am DOM prüfen: .wc-block-grid, .wc-block-grid__products
   bzw. neuer: .wc-block-product-template / li.wc-block-product
---------------------------------------------------------------------------- */
.woocommerce-cart .sd-recos {
  max-width: 1200px;
  margin: 64px auto 0;
}
.woocommerce-cart .sd-recos__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.woocommerce-cart .sd-recos__eyebrow {
  display: block;
  font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sd-amber-600);
  margin: 0 0 6px;
}
.woocommerce-cart .sd-recos__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; letter-spacing: -0.01em; color: var(--fg-brand);
  margin: 0;
}
.woocommerce-cart .sd-recos__all {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--fg-link);
  text-decoration: none; white-space: nowrap; padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.woocommerce-cart .sd-recos__all:hover { color: var(--sd-amber-600); }
.woocommerce-cart .sd-recos__all svg {
  width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Produktraster: IDENTISCH zu den Shop-Karten. Wir rendern den KLASSISCHEN
   WooCommerce-Loop ([best_selling_products] im Block-Editor) — dieselben
   Loop-Hooks (functions.php: sd-card-media, Eyebrow, Ribbon, sd-card-meta) und
   dieselbe Karten-Optik aus base.css/sdlink-shop.css greifen. Hier daher NUR
   das Grid-Layout im .sd-recos-Kontext; die Karte selbst NICHT umstylen. */
.woocommerce-cart .sd-recos .woocommerce,
.woocommerce-cart .sd-recos .woocommerce > .products {
  margin: 0; padding: 0;
}
.woocommerce-cart .sd-recos ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce-cart .sd-recos ul.products::before,
.woocommerce-cart .sd-recos ul.products::after { content: none; } /* Storefront-Clearfix */
/* Storefront legt li.product per float + Prozentbreite aus -> im Grid
   neutralisieren, damit jede Karte exakt ihre Spalte fuellt. */
.woocommerce-cart .sd-recos ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* ----------------------------------------------------------------------------
   4. Trust-Band  (Custom-HTML-Block mit .sd-trust)
   Identisch zum Trust-Band aus dem WooCommerce-Basis-Handoff (.woo-trust).
---------------------------------------------------------------------------- */
.woocommerce-cart .sd-trust {
  max-width: 1200px;
  margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.woocommerce-cart .sd-trust__item {
  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);
}
.woocommerce-cart .sd-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;
}
.woocommerce-cart .sd-trust__ic svg {
  width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.woocommerce-cart .sd-trust__tt { font-weight: 700; font-size: 13.5px; color: var(--fg-1); }
.woocommerce-cart .sd-trust__ts { font-size: 12px; color: var(--fg-3); margin-top: 1px; }

/* ----------------------------------------------------------------------------
   5. Mobil ≤ 720 px
---------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .woocommerce-cart .sd-recos ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .woocommerce-cart .sd-empty-card { padding: 44px 22px 40px; }
  .woocommerce-cart .sd-empty-card__actions { flex-direction: column; }
  .woocommerce-cart .sd-empty-card__actions .sd-btn { width: 100%; justify-content: center; }
  .woocommerce-cart .sd-recos { margin-top: 44px; }
  .woocommerce-cart .sd-recos__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .woocommerce-cart .sd-recos__title { font-size: 24px; }
  .woocommerce-cart .sd-recos ul.products { grid-template-columns: 1fr; }
  .woocommerce-cart .sd-trust { grid-template-columns: 1fr; }
}