/* File: astrachildtheme/css/all-products-cart-mini.css */
/* Version: 0.7.2 */


/* ======================================== */
/* 1. Farb- und Schriftgrößen-Variablen     */
/* ======================================== */
:root {
  --LabelColor: #515151;
  --LabelFontSize: 0.95rem;

  --PiecePriceValueColor: #1b1b1b;
  --PiecePriceFontSize: 0.95rem;

  --InfoValueColor: #0e7b04;
  --InfoFontSize: 0.95rem;

  --ShortDescriptionColor: #e08806;
  --ShortDescriptionFontSize: 0.95rem;

  --AttributeLabelColor: #515151;
  --AttributeValueColor: #1b1b1b;
  --AttributeFontSize: 0.95rem;

  --ProdukteinheitColor: #7a7a7a;
  --ProdukteinheitFontSize: 0.95rem;
}



/* ======================================== */
/*  Mini-Cart Drawer Header & Close Button - iPhone-Fix...  */
/* ======================================== */

/* Titel ("Dein Warenkorb") verkleinern und Platz für das X schaffen. */
.wc-block-mini-cart__title {
    /* Schriftgröße für den Titel reduzieren. */
    font-size: 1.3rem !important;
    /* Rechten Innenabstand hinzufügen, damit der Text nicht unter das X-Icon läuft. */
    padding-right: 50px !important;
    /* Vertikale Ausrichtung anpassen und Zeilenhöhe für Konsistenz setzen. */
    margin-top: 0;
    line-height: 1.4;
}

/* Schließen-Button (X) vergrößern und dicker machen. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
    /* Position anpassen, um schön in der oberen rechten Ecke zu sitzen. */
    top: 20px !important;
    right: 20px !important;
}

/* Das SVG-Icon selbst anpassen (Größe und Liniendicke). */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
    width: 40px !important;
    height: 40px !important;
    stroke-width: 7.5px !important;
    color: var(--ast-global-color-0) !important;
}



/* ======================================== */
/*  Mini-Cart Drawer - Breite anpassen      */
/* ======================================== */

/* Standardmäßig ist der Drawer recht breit. Wir begrenzen die maximale Breite,
   damit er auf größeren Bildschirmen nicht den halben Viewport einnimmt. */
.wc-block-mini-cart__drawer {
    max-width: 370px !important; /* Nicht mehr ändern - ist gut so für 360px Geräte */
}



/* ======================================== */
/* 2. Woo-Stückpreis ausblenden            */
/* ======================================== */
.wc-block-cart-item__prices {
  display: none !important;
}



/* ======================================== */
/* Spar-Badges im Mini-Warenkorb ausblenden */
/* ======================================== */
.wc-block-components-product-badge.wc-block-components-sale-badge {
    display: none !important;
}



/* ======================================== */
/*  Mini-Cart Icon reparieren */
/* ======================================== */
/* Schatten auf dem Button selbst entfernen, falls vorhanden */
.wc-block-mini-cart__button {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Sicherstellen, dass das Warenkorb-Symbol schwarz ist und die Größe steuern */
.wc-block-mini-cart__icon {
    color: #046BD2 !important; /* Behalte deine Wunschfarbe bei */
    font-size: 24px !important;
}

/* Schatten auf dem Badge (die Zahl im Kreis) entfernen und die Größe steuern */
.wc-block-mini-cart__badge {
    color: #ffffff !important; /* Badge Schriftfarbe */
    background-color: #046BD2 !important; /* Badge Hintergrundfarbe */
    font-size: 18px !important; /* Setzt die Schriftgröße der Zahl */
    padding: 8px 8px !important; /* Passt den Innenabstand des Badges an */
    border-radius: 50% !important; 
}



/* ======================================== */
/* Produkt-Titel im Mini-Cart               */
/* ======================================== */

/* Stellt sicher, dass der Produkt-Titel umbricht und nicht aus dem
   schmalen Drawer hinausläuft, besonders auf dem Desktop. */
.wc-block-cart-item__product-name {
    white-space: normal !important;
    word-break: break-word; /* Bricht zur Not auch lange Wörter ohne Leerzeichen um */
}



/* ======================================== */
/* 3. Layout für Produktdetails              */
/* ======================================== */

/* Das Haupt-Wrap für das Produkt bleibt ein Flex-Container. */
.wc-block-cart-item__wrap {
  display: flex;
  flex-direction: column;
}

/* Dieser Container (.wc-block-components-product-metadata) ist weiterhin das HAUPT-GRID
   für ALLE Produktdetails und die Kurzbeschreibung, um die Doppelpunkte fluchten zu lassen. */
.wc-block-components-product-metadata {
  display: grid;
  /* NEU: revertiert auf min-content auto, da dies für die Doppelpunkt-Fluchtung am besten funktioniert.
     Die Probleme bei prod4 müssen anders gelöst werden. */
  grid-template-columns: min-content auto;
  column-gap: 0.75em;
  row-gap: 0.75em; /* ANGEPASST: row-gap wieder auf einen moderateren Wert gesetzt */
  /* Stellt sicher, dass alle Grid-Elemente in einer Reihe an ihrer Text-Grundlinie ausgerichtet sind. */
  align-items: baseline;
  /* Sicherstellen, dass das Grid die volle Breite einnimmt, um die Spaltenberechnung zu verbessern. */
  width: 100%;
  /* min-height wird beibehalten, da es in Kombination mit width hilfreich sein könnte */
  min-height: 1px;
}

/* Das UL erzeugt keine eigene Box mehr. */
.wc-block-components-product-details {
  display: contents; /* Beibehalten, um die LI-Elemente direkt ins Elterngrid zu lassen */
}

/* Die LI-Elemente werden jetzt zu Grid-Items, die ein Subgrid verwenden. */
/* Dies sollte das Alignment-Problem bei fehlender Kurzbeschreibung beheben. */
.wc-block-components-product-details > li {
  display: grid; /* Das LI selbst wird zu einem Grid-Container */
  /* NEU: Explizite Spaltendefinition für das Subgrid, wenn subgrid nicht optimal funktioniert. */
  /* Dies erzwingt die zwei Spalten innerhalb des LI. */
  grid-template-columns: subgrid; /* Beibehalten, falls es in modernen Browsern besser funktioniert */
  /* Fallback/Alternative für subgrid, falls es zu Problemen führt: */
  /* grid-template-columns: inherit; */
  /* grid-template-columns: var(--grid-template-columns-parent, min-content auto); */ /* Wenn wir eine Variable definieren würden */

  grid-column: 1 / -1; /* Das LI erstreckt sich über alle Spalten des Elterngrids */
  /* row-gap: 0; /* Optional: Könnte hier für sehr enge Zeilen innerhalb des LI gesetzt werden, */
               /* aber der row-gap des Elterngrids sollte für den Abstand zwischen LIs ausreichen. */
}


/* ======================================== */
/* 4. Label-Zellen                          */
/* ======================================== */
.wc-block-components-product-details__name {
  grid-column: 1 !important; /* Bezieht sich jetzt auf die 1. Spalte des Subgrids (LI) */
  text-align: right;
  font-size: var(--LabelFontSize);
  color: var(--LabelColor);
  white-space: nowrap;
  padding-right: 0;
  line-height: 1.2;
}


/* ======================================== */
/* 5. Value-Zellen                          */
/* ======================================== */
.wc-block-components-product-details__value {
  grid-column: 2 !important; /* Bezieht sich jetzt auf die 2. Spalte des Subgrids (LI) */
  text-align: left;
  /* Erlaubt den Preis- und Attributwerten umzubrechen, wenn sie zu lang sind.
     Dies verhindert, dass sie aus dem Container herauslaufen. */
  white-space: normal;
  line-height: 1.2;
}


/* ======================================== */
/* 6. Reihenfolge der Zeilen (order)        */
/* ======================================== */

/* Die 'order'-Eigenschaften wirken auf die direkten Grid-Items des .wc-block-components-product-metadata. */
/* Da die LI-Elemente jetzt die direkten Grid-Items sind, wirken die order-Eigenschaften auf die LIs selbst. */

/* Gewünschte Reihenfolge:
   1. "Preis / Stück" / "Preis / m" / "Grundpreis" / "Stückpreis"
   2. Info (Rabattvorschau)
   3. Produkteinheit (bleibt wie im HTML, da order auskommentiert)
   4. Kurzbeschreibung
   5. Attribut-Block (Form, Höhe, Design)
*/

/* 1. "Preis / Stück" / "Preis / m" / "Grundpreis" / "Stückpreis" */
.wc-block-components-product-details__preis-st-ckpreis, /* Selektiert jetzt das LI, nicht die Spans */
.wc-block-components-product-details__preis-m, /* Selektiert jetzt das LI, nicht die Spans */
.wc-block-components-product-details__grundpreis, /* Selektiert jetzt das LI, nicht die Spans */
.wc-block-components-product-details__st-ckpreis { /* Selektiert jetzt das LI, nicht die Spans */
  order: 10;
}

/* 2. Info (Rabattvorschau) */
.wc-block-components-product-details__info { /* Selektiert jetzt das LI, nicht die Spans */
  order: 20;
}

/* 3. Produkteinheit (auskommentiert lassen, wie gewünscht, so dass die natürliche Reihenfolge greift) */
/* .wc-block-components-product-details__gzd-units {
  order: 30;
} */

/* 4. Kurzbeschreibung */
.wc-block-components-product-metadata__description {
  order: 40;
  grid-column: 1 / -1; /* Erstreckt sich über beide Spalten im Grid */
  text-align: left; /* Stellt sicher, dass der Text links beginnt */
}

/* 5. Attribut-Block (Form, Höhe, Design) */
.wc-block-components-product-details__form, /* Selektiert jetzt das LI, nicht die Spans */
.wc-block-components-product-details__h-he, /* Selektiert jetzt das LI, nicht die Spans */
.wc-block-components-product-details__design { /* Selektiert jetzt das LI, nicht die Spans */
  order: 50;
}


/* ======================================== */
/* 7. Farben & Größen für Values            */
/* ======================================== */
/* Selektoren für Grundpreis und Stückpreis hinzugefügt */
.wc-block-components-product-details__preis-st-ckpreis .wc-block-components-product-details__value,
.wc-block-components-product-details__preis-m .wc-block-components-product-details__value,
.wc-block-components-product-details__grundpreis .wc-block-components-product-details__value,
.wc-block-components-product-details__st-ckpreis .wc-block-components-product-details__value {
  color: var(--PiecePriceValueColor);
  font-size: var(--PiecePriceFontSize);
}

.wc-block-components-product-details__info .wc-block-components-product-details__value {
  color: var(--InfoValueColor);
  font-size: var(--InfoFontSize);
}

.wc-block-components-product-details__form .wc-block-components-product-details__value,
.wc-block-components-product-details__h-he .wc-block-components-product-details__value,
.wc-block-components-product-details__design .wc-block-components-product-details__value {
  color: var(--AttributeValueColor);
  font-size: var(--AttributeFontSize);
}

.wc-block-components-product-details__form .wc-block-components-product-details__name,
.wc-block-components-product-details__h-he .wc-block-components-product-details__name,
.wc-block-components-product-details__design .wc-block-components-product-details__name {
  color: var(--AttributeLabelColor);
  font-size: var(--AttributeFontSize);
}


/* ======================================== */
/* 8. Kurzbeschreibung (Spezifische Styles) */
/* ======================================== */
.wc-block-components-product-metadata__description {
  color: var(--ShortDescriptionColor);
  font-size: var(--ShortDescriptionFontSize);
  /* order und grid-column sind bereits in Sektion 6 definiert. */
  padding-top: 0.5rem; /* Sicherstellen, dass der Abstand nach oben konsistent ist */
}


/* ======================================== */
/* 9. Produkteinheit (Spezifische Styles)   */
/* ======================================== */
/* Das gzd-units Label ausblenden */
.wc-block-components-product-details__gzd-units .wc-block-components-product-details__name {
  display: none !important;
}

.wc-block-components-product-details__gzd-units {
  margin-top: 0;
  text-align: left;
}

.wc-block-components-product-details__gzd-units .wc-block-components-product-details__value {
  display: inline-block;
  color: var(--ProdukteinheitColor) !important;
  font-size: var(--ProdukteinheitFontSize) !important;
  white-space: nowrap;
}



/* ======================================== */
/* 10. Gesamtpreis-Spalte (Subtotal)        */
/* ======================================== */

/* Fügt einen linken Innenabstand zur Spalte mit dem Gesamtpreis des Artikels hinzu,
   um sie von der mittleren Produkt-Detail-Spalte optisch abzusetzen.
   Dies ist die einzig zuverlässige Methode in einem Tabellenlayout, um einen
   visuellen Abstand zwischen den Spalteninhalten zu gewährleisten, auch bei Textumbruch. */
.wc-block-mini-cart-items .wc-block-cart-item__total {
    padding-left: 0.1em !important;
}