/*
 * DBDA Warenkorb: Fortschrittsleiste und Zusatzprodukte
 * Farben passend zum Kasse-Knopf (Astra). Zum Anpassen nur die Werte unter :root ändern.
 * Viele Regeln brauchen !important, weil Astra Bilder und Links im Mini-Warenkorb
 * mit sehr spezifischen Regeln absolut positioniert, verschiebt und fett setzt.
 */
:root {
    --dbda-gold: #e9b84e;          /* Rand und Füllung "+ Dazu", Balken */
    --dbda-gold-dunkel: #a8781f;   /* Beträge, Knopfschrift */
    --dbda-gold-hell: #faf5e6;     /* Hintergrund der Leiste */
    --dbda-gold-spur: #eee3c4;     /* leerer Teil des Balkens */
    --dbda-gruen: #6f9a34;         /* alles erreicht, "Geschenk" */
    --dbda-linie: rgba(0, 0, 0, .08);
}


/* ---------- Fortschrittsleiste ---------- */

.dbda-leiste {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--dbda-gold-hell);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}
.dbda-leiste__text {
    margin: 0 0 8px !important;
}
.dbda-leiste__text strong,
.dbda-leiste__text strong .amount {
    color: var(--dbda-gold-dunkel);
    font-weight: 700;
}
.dbda-leiste__balken {
    height: 6px;
    background: var(--dbda-gold-spur);
    border-radius: 3px;
    overflow: hidden;
}
.dbda-leiste__balken span {
    display: block;
    height: 100%;
    background: var(--dbda-gold);
    border-radius: 3px;
    transition: width .4s ease;
}
.dbda-leiste--fertig .dbda-leiste__text,
.dbda-leiste--fertig .dbda-leiste__text strong {
    color: var(--dbda-gruen);
}
.dbda-leiste--fertig .dbda-leiste__balken span {
    background: var(--dbda-gruen);
}

/* Im Slide-in-Warenkorb: eingerückt wie in der Vorschau, bleibt oben stehen, während die Artikel scrollen */
.widget_shopping_cart_content > .dbda-leiste {
    flex: 0 0 auto;
    margin: 12px 16px 8px;
    font-size: 14px;
}


/* ---------- Zusatzprodukte: gemeinsame Zeile ---------- */

.dbda-zusatz__titel {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .7;
}
.dbda-zusatz .dbda-zusatz__produkt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    position: relative;
}
/* Astra setzt Bilder in der Liste auf position:absolute, top:50% und transform:translateY(-50%) */
.dbda-zusatz .dbda-zusatz__produkt img.dbda-zusatz__bild {
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    object-fit: contain !important;
    border-radius: 4px;
    box-shadow: none !important;
}
.dbda-zusatz .dbda-zusatz__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.3;
}
/* Astra macht Links in der Liste fett und zu Blöcken */
.dbda-zusatz a.dbda-zusatz__name {
    display: block !important;
    padding: 0 !important;
    font-weight: 500 !important;
    color: inherit !important;
    text-decoration: none !important;
}
.dbda-zusatz a.dbda-zusatz__name:hover {
    color: var(--dbda-gold-dunkel) !important;
}
.dbda-zusatz .dbda-zusatz__preis {
    font-size: 13px;
    opacity: .8;
}
.dbda-zusatz .dbda-zusatz__preis del {
    opacity: .6;
    margin-right: 2px;
}
.dbda-zusatz .dbda-zusatz__preis ins {
    text-decoration: none;
    font-weight: 600;
}
.dbda-zusatz a.dbda-zusatz__knopf.button {
    flex: 0 0 auto;
    display: inline-block !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--dbda-gold-dunkel) !important;
    background: transparent !important;
    border: 1px solid var(--dbda-gold) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.dbda-zusatz a.dbda-zusatz__knopf.button:hover,
.dbda-zusatz a.dbda-zusatz__knopf.button:focus {
    color: #222 !important;
    background: var(--dbda-gold) !important;
}
.dbda-zusatz a.dbda-zusatz__knopf.loading {
    opacity: .5;
}
/* WooCommerce hängt nach dem Hinzufügen einen "Warenkorb anzeigen"-Link an, der hier stört */
.dbda-zusatz .added_to_cart {
    display: none !important;
}


/* ---------- Zusatzprodukte im Slide-in-Warenkorb ---------- */

/* Astra gibt Listeneinträgen links 5em Platz für das Artikelbild und eine Mindesthöhe */
.woocommerce-mini-cart li.dbda-zusatz,
li.dbda-zusatz {
    list-style: none;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 0 4px !important;
    border-top: 1px solid var(--dbda-linie);
    border-bottom: 0 !important;
    position: static !important;
}


/* ---------- Zusatzprodukte auf der Warenkorbseite ---------- */

.dbda-zusatz--seite {
    margin: 24px 0 8px;
    padding: 20px 24px 10px;
    background: var(--dbda-gold-hell);
    border-radius: 8px;
}
.dbda-zusatz--seite .dbda-zusatz__titel {
    margin-bottom: 14px !important;
}
.dbda-zusatz--seite .dbda-zusatz__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
}
.dbda-zusatz--seite .dbda-zusatz__produkt {
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
}
.dbda-zusatz--seite .dbda-zusatz__produkt img.dbda-zusatz__bild {
    flex-basis: 56px;
    width: 56px !important;
    height: 56px !important;
}
@media (max-width: 700px) {
    .dbda-zusatz--seite {
        padding: 16px 14px 8px;
    }
    .dbda-zusatz--seite .dbda-zusatz__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Gratis-Beigabe ---------- */

.dbda-geschenk {
    color: var(--dbda-gruen);
    font-weight: 600;
}

/* Variante "neben_summe": eine Spalte links neben der Warenkorb-Summe.
   Die Warenkorb-Summe ist bei Astra rechts 48 % breit; ab 921 px Breite und darunter stehen beide untereinander. */
.cart-collaterals .dbda-zusatz--seite.dbda-zusatz--spalte {
    float: left;
    width: 48%;
    margin: 0 0 2em;
}
.dbda-zusatz--spalte .dbda-zusatz__raster {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 921px) {
    .cart-collaterals .dbda-zusatz--seite.dbda-zusatz--spalte {
        float: none;
        width: 100%;
    }
}


/* ---------- Astra-Slide-in-Warenkorb im Shopify-Stil (Desktop und Handy) ----------
   Ziel: Bei wenigen Artikeln ist alles ohne Scrollen sichtbar (geprüft bei 1905 x 870 px).
   Aufbau von oben: Kopf, Leiste, Artikel (scrollen bei Bedarf), "Passt noch ins Paket"
   (immer direkt über der Summe), Zwischensumme mit kleinen Pflichthinweisen, Kasse. */

/* Breite: Astra nimmt 35 % der Fensterbreite. Auf 4K-Bildschirmen wären das über 1300 px,
   "Kasse" würde zum langen Balken. Höchstens 660 px, so breit wie auf einem 1920er-Laptop. */
.astra-cart-drawer {
    max-width: 660px !important;
}

/* Kopf: Astra positioniert Titel und X absolut, hier nur Schrift und Klick-Kreis */
.astra-cart-drawer .astra-cart-drawer-title {
    font-size: 20px;
    font-weight: 500;
}
.astra-cart-drawer .astra-cart-drawer-close {
    border-radius: 50%;
}
.astra-cart-drawer .astra-cart-drawer-close:hover {
    background: #f3f1ea;
}
/* Kein gepunkteter Kreis um das X (Astra setzt beim Öffnen den Fokus darauf, auf dem iPhone
   erschien er deshalb immer). Für Tastaturbedienung bleibt ein heller Hintergrund als Hinweis. */
.astra-cart-drawer .astra-cart-drawer-close:focus,
.astra-cart-drawer .astra-cart-drawer-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.astra-cart-drawer .astra-cart-drawer-close:focus-visible {
    background: #f3f1ea;
}

/* Leiste: etwas flacher */
.astra-cart-drawer .widget_shopping_cart_content > .dbda-leiste {
    margin: 14px 24px 4px;
    padding: 10px 14px 12px;
    font-size: 14px;
}
.astra-cart-drawer .dbda-leiste__text {
    margin: 0 0 7px !important;
}
.astra-cart-drawer .dbda-leiste__balken {
    height: 5px;
}

/* Artikelliste: Spalte, damit "Passt noch ins Paket" ganz unten stehen kann */
.astra-cart-drawer ul.woocommerce-mini-cart {
    display: flex !important;
    flex-direction: column;
    padding: 4px 24px 0 !important;
}
.astra-cart-drawer ul.woocommerce-mini-cart > li {
    flex-shrink: 0;
}

/* Artikel: Bild 56 px links, Name bis zwei Zeilen, darunter Menge × Preis, Entfernen klein rechts */
.astra-cart-drawer .woocommerce-mini-cart-item {
    min-height: 77px !important;
    padding: 10px 32px 10px 72px !important;
    font-size: 15px;
    line-height: 1.35;
}
.astra-cart-drawer .woocommerce-mini-cart-item img {
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
}
.astra-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;               /* lange Namen nach zwei Zeilen mit … kürzen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;               /* Astra: Abstand unter dem Namen */
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item .quantity {
    display: block !important;
    margin-top: 3px;
    padding: 0 !important;              /* Astra rückt die Menge sonst ein und gibt ihr Höhe */
    min-height: 0 !important;
    font-size: 14px;
    line-height: 1.35 !important;
    color: #666;
}
.astra-cart-drawer .woocommerce-mini-cart-item .quantity .amount {
    font-weight: 600;
    color: #222;
}
.astra-cart-drawer .woocommerce-mini-cart-item .quantity.dbda-geschenk {
    font-weight: 600;
    color: var(--dbda-gruen);
}
.astra-cart-drawer .woocommerce-mini-cart-item dl.variation {
    margin: 2px 0 0 !important;
    font-size: 12px;
    color: #777;
}
.astra-cart-drawer .woocommerce-mini-cart-item a.remove {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    left: auto !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #999 !important;
    border: 0 !important;
    border-radius: 50%;
}
/* Astra zeichnet um das × einen Kreis (::before) und macht das Symbol 24 px groß */
.astra-cart-drawer .woocommerce-mini-cart-item a.remove::before {
    display: none !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item a.remove .ahfb-svg-iconset,
.astra-cart-drawer .woocommerce-mini-cart-item a.remove svg {
    width: 18px !important;
    height: 18px !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
    color: #222 !important;
    background: #f3f1ea;
}

/* "Passt noch ins Paket": immer direkt über der Summe (margin-top:auto),
   scrollen die Artikel, bleibt es dort stehen (sticky). Produkte nebeneinander. */
.astra-cart-drawer li.dbda-zusatz {
    position: sticky !important;
    bottom: 0;
    z-index: 2;
    margin: 0 -24px !important;
    margin-top: auto !important;
    padding: 12px 24px !important;
    background: #faf8f2;
    border-top: 1px solid #e5e2cf !important;
    box-shadow: none;
}
/* Hohe Fenster (4K, große Monitore): alles kompakt oben statt riesiger Lücke zwischen den
   Artikeln und "Passt noch ins Paket". Die Liste wächst nur so weit wie nötig und scrollt erst,
   wenn sie den Platz füllt. */
@media (min-height: 1100px) {
    .astra-cart-drawer ul.woocommerce-mini-cart {
        flex: 0 1 auto !important;
        min-height: 0 !important;
    }
    .astra-cart-drawer li.dbda-zusatz {
        margin-top: 0 !important;
    }
}
.astra-cart-drawer .dbda-zusatz__titel {
    margin: 0 0 8px !important;
}
.astra-cart-drawer .dbda-zusatz__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* 2 nebeneinander, schmal untereinander */
    gap: 8px;
}
.astra-cart-drawer .dbda-zusatz .dbda-zusatz__produkt {
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}
.astra-cart-drawer .dbda-zusatz .dbda-zusatz__produkt img.dbda-zusatz__bild {
    flex-basis: 44px;
    width: 44px !important;
    height: 44px !important;
}
.astra-cart-drawer .dbda-zusatz .dbda-zusatz__info {
    font-size: 13px;
}
.astra-cart-drawer .dbda-zusatz a.dbda-zusatz__knopf.button {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

/* Fuß: Zwischensumme groß, Germanized-Pflichthinweise (MwSt., Versandkosten) klein darunter */
.astra-cart-drawer .widget_shopping_cart_content .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    padding: 14px 24px 2px !important;
    font-size: 17px;
    line-height: 1.3 !important;        /* Astra: 1,85 */
    border-top: 1px solid #e5e2cf;
    border-bottom: 0 !important;
}
.astra-cart-drawer .woocommerce-mini-cart__total strong {
    font-weight: 500;
}
.astra-cart-drawer .woocommerce-mini-cart__total .amount {
    font-weight: 700;
}
.astra-cart-drawer .widget_shopping_cart_content .wc-gzd-total-mini-cart {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    margin: 0 !important;
    padding: 0 24px !important;
    font-size: 13px;
    line-height: 1.45 !important;       /* Astra: 1,85 */
    color: #777;
    text-align: left;
    border: 0 !important;
    opacity: 1;
}

/* Knöpfe: "Kasse" groß zuerst, "Warenkorb anzeigen" als dezenter Link darunter */
.astra-cart-drawer .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 6px;
    margin: 0 !important;
    padding: 12px 24px 16px !important;
    line-height: 1.2 !important;
}
/* Astras Clearfix-Elemente wären im Flex-Layout eigene Einträge mit zusätzlichem Abstand */
.astra-cart-drawer .widget_shopping_cart_content .woocommerce-mini-cart__buttons::before,
.astra-cart-drawer .widget_shopping_cart_content .woocommerce-mini-cart__buttons::after {
    display: none !important;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons .button {
    margin: 0 !important;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
    padding: 15px !important;
    font-size: 17px !important;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
    padding: 2px !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--dbda-gold-dunkel) !important;
    background: none !important;
    border: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}


/* ---------- Warenkorb-Summe (WooCommerce/Astra) ---------- */

/* Zeile "Sendung": WooCommerce richtet die Zellen oben aus und gibt der Versandart 4 px Innenabstand
   oben und unten. Dadurch war die Zeile höher als die anderen und "Sendung" stand nicht mittig. */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td {
    vertical-align: middle;
}
.woocommerce-cart .cart_totals #shipping_method li {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.woocommerce-cart .cart_totals #shipping_method li + li {
    margin-top: 4px !important;   /* Abstand, falls mehrere Versandarten zur Wahl stehen */
}


/* ---------- Warenkorbseite auf dem Handy ---------- */

/* Weniger Abstand zwischen Seitenkopf und Überschrift "Warenkorb" (Astra: 68 px + 64 px) */
@media (max-width: 921px) {
    .woocommerce-cart #masthead {
        margin-bottom: 0 !important;
    }
    .woocommerce-cart #primary {
        margin-top: 24px !important;
    }
    .woocommerce-cart .entry-header {
        margin-bottom: 16px !important;
    }
}

/* Artikel als kompakte Zeile wie bei Shopify statt fünf beschrifteter Einzelzeilen:
   Bild | Name, Inhalt, Preis | Entfernen
        | Anzahl             | Zwischensumme          (WooCommerce stapelt ab 768 px) */
@media (max-width: 768px) {
    .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "bild name  entf"
            "bild preis preis"
            "bild menge summe";
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
        padding: 14px !important;
        border-bottom: 1px solid var(--ast-border-color, #e5e2cf);
    }
    .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item > td {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        background: none !important;
        border: 0 !important;
    }
    /* Beschriftungen "Produkt:", "Preis:" usw. entfallen */
    .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item > td::before {
        display: none !important;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-thumbnail {
        grid-area: bild;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-thumbnail img {
        width: 72px !important;
        height: 72px !important;
        max-width: none !important;
        object-fit: contain;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 6px;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-name {
        grid-area: name;
        font-size: 15px;
        line-height: 1.35;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-name a {
        color: inherit;
    }
    /* Germanized-Angaben wie "Produkt enthält: 30 ml" klein darunter */
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-name p,
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-name div {
        margin: 2px 0 0 !important;
        font-size: 12px;
        line-height: 1.35;
        color: #777;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-remove {
        grid-area: entf;
        justify-self: end;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-price {
        grid-area: preis;
        font-size: 13px;
        line-height: 1.35;
        color: #777;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-price > * {
        display: inline !important;   /* Preis und Grundpreis in einer Zeile */
        margin: 0 8px 0 0 !important;
        font-size: 13px !important;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-quantity {
        grid-area: menge;
        align-self: center;
        margin-top: 6px !important;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-quantity .quantity {
        margin: 0 !important;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item > td.product-subtotal {
        grid-area: summe;
        align-self: center;
        justify-self: end;
        margin-top: 6px !important;
        font-size: 15px;
        font-weight: 600;
    }
}


/* ---------- Hinweise von WooCommerce ---------- */

/* Nach "Warenkorb aktualisieren" setzt WooCommerce den Fokus auf den Hinweis, damit Screenreader
   ihn vorlesen. Safari (iPhone) zeichnet dabei einen hellblauen Rahmen, der hier unterdrückt wird. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-notices-wrapper:focus {
    outline: none !important;
}