/* F19 Produktkarten am Handy – nur aktiv mit body.wcbr-f19 (inc/karten-handy.php).
   Desktop bleibt wie bisher; einzige Änderung auf allen Breiten: Pflichtangaben
   werden nie mehr abgeschnitten (kein nowrap/ellipsis). */

/* ---------- Alle Breiten ---------- */
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__fine {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
/* Preis-Zeile (Preis + Grundpreis) verhält sich am Desktop wie bisher der Preis allein */
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__pricerow { margin-top: auto; }
/* Grundpreis-Zeile ist ein Handy-Element */
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__gp { display: none; }
/* Haltbarkeits-Badge überall (Marcel 21.10.2026: auch am Desktop) – der Satz in der Kurzbeschreibung steht dann
   nicht doppelt da. Badge zeigt immer das echte Datum („MHD TT.MM.JJJJ“), auch wenn es überschritten ist. */
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__mhd {
    display: block; align-self: center;
    margin: .1rem 0 .35rem; padding: .2rem .6rem;
    font-size: .76rem; font-weight: 600; line-height: 1.3;
    color: #6d0f2e; background: #f7f0e9; border: 1px solid #e6dbd2; border-radius: 999px;
}
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__desc .wcbr-pcard__mhdtext { display: none !important; }

/* ---------- Handy (< 600 px) ---------- */
@media (max-width: 599px) {
    /* Bild quadratisch, ganze Packung sichtbar, heller Grund */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__media { aspect-ratio: 1 / 1 !important; background: #fff !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__media img { object-fit: contain !important; padding: .35rem !important; }

    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__body { padding: .5rem .6rem .75rem !important; }

    /* Titel höchstens 3 Zeilen (voller Name steht im title-Attribut und im HTML) */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__title {
        font-size: 15px !important; line-height: 1.3 !important; margin: .1rem 0 .3rem !important;
        padding: 0 !important; min-height: 0 !important; max-height: calc(3 * 1.3em) !important;
        display: -webkit-box !important; -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important; line-clamp: 3; overflow: hidden !important;
    }

    /* Beschreibung vollständig (Wunsch Marcel 19.10.); nur der Haltbarkeits-Satz steht
       stattdessen als Badge darunter, damit er nicht doppelt erscheint */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__desc .wcbr-pcard__mhdtext { display: none !important; }

    /* Haltbarkeits-Badge über dem Preis */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__mhd {
        display: block; align-self: center;
        margin: .1rem 0 .35rem; padding: .2rem .55rem;
        font-size: .72rem; font-weight: 600; line-height: 1.3;
        color: #6d0f2e; background: #f7f0e9; border: 1px solid #e6dbd2; border-radius: 999px;
    }

    /* Preis und Grundpreis in EINER Zeile: „49,90 € · 49,90 €/kg“ (darf umbrechen, nie abgeschnitten) */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__pricerow {
        display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
        column-gap: .35rem; row-gap: 0; margin-top: auto; padding-top: .25rem;
    }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__pricerow .wcbr-pcard__price { padding-top: 0 !important; margin-top: 0 !important; font-size: 1.15rem !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__gp {
        display: inline; font-size: .78rem; line-height: 1.3; color: #6b5e58; white-space: normal; margin: 0;
    }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__gp::before { content: "· "; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__cart { margin-top: .35rem !important; }
    /* In der Pflichtzeile steht der Grundpreis am Handy nicht doppelt */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__fine-gp { display: none; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__fine { font-size: .68rem !important; }

    /* Mengenwähler volle Breite (Gestaltung unten, gemeinsam mit Produktseite/Warenkorb),
       darunter breiter Button mit Text, mindestens 44 px hoch */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form { gap: .4rem !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-qty { flex: 1 1 100% !important; width: 100% !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__cart .wcbr-pcard__form .wcbr-pcard__addbtn {
        flex: 1 1 100% !important; width: 100% !important; min-height: 44px !important;
        font-size: .82rem !important; padding: .5rem .6rem !important;
    }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__addbtn .wcbr-pcard__addlabel { display: inline !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__addbtn .wcbr-cart-ic { display: inline-flex !important; }

    /* Filter-Knopf kleiner; unter der Liste Platz, damit er keine Karte verdeckt */
    body.wcbr-f19 .wcbr-fb-fab { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 12px !important; }
    body.wcbr-f19 .wcbr-fb-fab svg { width: 20px !important; height: 20px !important; }
    body.wcbr-f19 .wcbr-cat-wrap ul.products { padding-bottom: 64px !important; }
}

/* ---------- Einheitlicher Mengenwähler am Handy (Karte, Produktseite, Warenkorb) ----------
   Wunsch Marcel 19.10.: 44 px, gleiche Gestaltung überall. Karte = .wcbr-qty (eigene Knöpfe),
   Produktseite/Warenkorb = Astra .quantity mit a.ast-qty-placeholder.minus/.plus.
   Nur Gestaltung – die Zähl-Logik bleibt bei Astra bzw. unserem Karten-Skript. */
@media (max-width: 599px) {
    body.wcbr-f19 .wcbr-pcard .wcbr-qty,
    body.wcbr-f19.single-product form.cart .quantity,
    body.wcbr-f19 .woocommerce-cart-form .quantity {
        display: inline-flex !important; align-items: stretch !important; height: 44px !important; min-height: 44px !important;
        border: 1px solid #e6dbd2 !important; border-radius: 10px !important; overflow: hidden !important;
        background: #fff !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
        max-width: none !important; min-width: 0 !important; justify-content: flex-start !important;
    }
    body.wcbr-f19 .wcbr-pcard .wcbr-qty .wcbr-qty__btn,
    body.wcbr-f19.single-product form.cart .quantity .ast-qty-placeholder,
    body.wcbr-f19 .woocommerce-cart-form .quantity .ast-qty-placeholder,
    body.wcbr-f19.single-product form.cart .quantity a.minus,
    body.wcbr-f19.single-product form.cart .quantity a.plus,
    body.wcbr-f19 .woocommerce-cart-form .quantity a.minus,
    body.wcbr-f19 .woocommerce-cart-form .quantity a.plus {
        flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
        background: #f7f0e9 !important; color: #3a2b2b !important; font-size: 22px !important; font-weight: 500 !important;
        line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    body.wcbr-f19 .wcbr-pcard .wcbr-qty .wcbr-qty__btn svg { width: 16px !important; height: 16px !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-qty .wcbr-qty__btn:active,
    body.wcbr-f19 .quantity .ast-qty-placeholder:active,
    body.wcbr-f19 .quantity a.minus:active,
    body.wcbr-f19 .quantity a.plus:active { background: #ece1d8 !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-qty .wcbr-pcard__qty,
    body.wcbr-f19.single-product form.cart .quantity input.qty,
    body.wcbr-f19 .woocommerce-cart-form .quantity input.qty {
        flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 2.5rem !important; height: 44px !important; min-height: 44px !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 1px solid #e6dbd2 !important; border-right: 1px solid #e6dbd2 !important;
        border-radius: 0 !important; background: #fff !important; color: #3a2b2b !important; box-shadow: none !important;
        font-size: 16px !important; font-weight: 600 !important; text-align: center !important; -moz-appearance: textfield;
    }
    body.wcbr-f19 .quantity input.qty::-webkit-inner-spin-button,
    body.wcbr-f19 .quantity input.qty::-webkit-outer-spin-button,
    body.wcbr-f19 .wcbr-qty input::-webkit-inner-spin-button,
    body.wcbr-f19 .wcbr-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    /* Produktseite (einfache Produkte): Mengenwähler volle Breite, Button darunter */
    body.wcbr-f19.single-product form.cart:not(.variations_form) { display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; }
    body.wcbr-f19.single-product form.cart:not(.variations_form) .quantity { flex: 1 1 100% !important; width: 100% !important; }
    body.wcbr-f19.single-product form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 100% !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; }

    /* Warenkorb: gleiche Optik, feste Breite in der Tabellenzelle */
    body.wcbr-f19 .woocommerce-cart-form .quantity { width: 136px !important; flex: 0 0 136px !important; }
}

/* Button-Text einheitlich: Die alte Regel (category.css) blendet ihn bis 640 px aus –
   mit F19 steht „In den Warenkorb“ auf allen schmalen Breiten gleich da. */
@media (max-width: 640px) {
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__addbtn .wcbr-pcard__addlabel { display: inline !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__addbtn .wcbr-cart-ic { display: inline-flex !important; }
}

/* ---------- Gleiche Höhe in einer Reihe (Wunsch Marcel 19.10.) ----------
   Preis, Mengenwähler und Button stehen in jeder Karte einer Reihe auf derselben Höhe:
   – ausverkaufte Karten haben einen unsichtbaren Platzhalter in Größe des Mengenwählers,
   – „Benachrichtigen Sie mich“ ist so hoch wie „In den Warenkorb“,
   – die Pflichtzeile hat immer Platz für zwei Zeilen. */
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form--notify {
    display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; align-items: stretch !important; margin: 0 !important;
}
body.wcbr-f19 .wcbr-pcard .wcbr-qty--platzhalter {
    visibility: hidden !important; display: inline-flex !important; flex: 0 0 auto !important;
    min-height: 2.5rem !important; border: 1px solid transparent !important;
}
body.wcbr-f19 .wcbr-pcard .wcbr-qty--platzhalter .wcbr-qty__btn { display: block; width: 1.6rem; }
body.wcbr-f19 .wcbr-pcard .wcbr-qty--platzhalter .wcbr-pcard__qty { display: block; width: 2rem; }
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form--notify .wcbr-pcard__notify { flex: 1 1 10rem !important; min-width: 0 !important; display: flex !important; margin: 0 !important; }
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__notify .button {
    width: 100% !important; min-height: 2.5rem !important; height: auto !important; margin: 0 !important;
    padding: .35rem .6rem !important; font-size: .8rem !important; line-height: 1.15 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    white-space: normal !important; border-radius: 8px !important;
}
body.wcbr-f19 .wcbr-pcard .wcbr-pcard__fine { min-height: 2.6em; }
@media (min-width: 1200px) {
    /* Breite Karten: Mengenwähler und Button in einer Zeile – Benachrichtigen ebenso */
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form--notify { flex-wrap: nowrap !important; }
}
@media (max-width: 599px) {
    body.wcbr-f19 .wcbr-pcard .wcbr-qty--platzhalter { flex: 1 1 100% !important; width: 100% !important; height: 44px !important; min-height: 44px !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form--notify { gap: .4rem !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__form--notify .wcbr-pcard__notify { flex: 1 1 100% !important; }
    body.wcbr-f19 .wcbr-pcard .wcbr-pcard__notify .button { min-height: 44px !important; font-size: .78rem !important; }
}

/* ---------- Produktreihen am Handy (Marcel 19.10.) ----------
   – Karte rastet MITTIG ein (72 % breit), links und rechts schaut je ein Stück der Nachbarkarte
     herein → Pfeile symmetrisch, Verlauf auf beiden Seiten gleich breit (vorher rastete die
     Karte links bündig ein, der linke Verlauf war kaum zu sehen). Die Pfeile bleiben auf halber
     Kartenhöhe – sie liegen jetzt neben der Karte auf den Nachbarn statt über dem Titel.
   Maße in cqw = Prozent der Reihenbreite (container-type am Wrapper). */
@media (max-width: 599px) {
    body.wcbr-f19 .wcbr-rail-wrap:has(> .wcbr-cat-rail--products) { container-type: inline-size; }
    body.wcbr-f19 .wcbr-rail-wrap > .wcbr-cat-rail--products { padding-inline: 0 !important; scroll-padding-inline: 0 !important; }
    body.wcbr-f19 .wcbr-cat-rail--products > .wcbr-pcard,
    body.wcbr-f19 .wcbr-cat-rail--products > .wcbr-cat-moretile { flex-basis: 72cqw !important; scroll-snap-align: center !important; }
    /* Erste Karte bündig mit der Überschrift, letzte bündig rechts (Marcel 21.10.2026: Einrückung links störte) –
       dazwischen rasten die Karten weiter mittig ein */
    body.wcbr-f19 .wcbr-cat-rail--products > :first-child { scroll-snap-align: start !important; }
    body.wcbr-f19 .wcbr-cat-rail--products > :last-child { scroll-snap-align: end !important; }
    body.wcbr-f19 .wcbr-rail-wrap--more-l > .wcbr-cat-rail--products,
    body.wcbr-f19 .wcbr-rail-wrap--more-r > .wcbr-cat-rail--products {
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--wcbr-fade-l)) 0, #000 14cqw, #000 calc(100% - 14cqw), rgba(0,0,0,var(--wcbr-fade-r)) 100%);
                mask-image: linear-gradient(to right, rgba(0,0,0,var(--wcbr-fade-l)) 0, #000 14cqw, #000 calc(100% - 14cqw), rgba(0,0,0,var(--wcbr-fade-r)) 100%);
    }
}

/* Astras haftende Kaufleiste (Produktseite, unten) am Handy kompakt: eine Zeile Menge + Knopf, ohne Namenszeile
   (Marcel 20.10.2026: 169 px → 60 px). Muss die Produktseiten-Regel oben („Mengenwähler volle Breite“) überstimmen. */
@media (max-width: 921px) {
    /* Kopfzeile kompakt: kleines Bild + Name in einer Zeile (Marcel 20.10.2026) */
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap {
        display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important;
        margin: 0 0 8px !important; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap picture { display: block; flex: 0 0 32px; width: 32px; height: 32px; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap img {
        display: block; width: 32px !important; height: 32px !important; max-width: none !important; object-fit: cover; border-radius: 6px; margin: 0 !important;
    }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-title {
        flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important;
        color: #3a2b2b !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important;
    }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart.bottom .ast-sticky-add-to-cart-content { flex-direction: column !important; align-items: stretch !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart.bottom .ast-sticky-add-to-cart-content { padding-top: 8px !important; padding-bottom: 8px !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-wrap { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-wrap > * { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart form.cart:not(.variations_form) { flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 8px !important; margin: 0 !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart form.cart:not(.variations_form) .quantity { flex: 0 0 auto !important; width: auto !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart form.cart .quantity input.qty { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; }
    body.wcbr-f19.single-product .ast-sticky-add-to-cart form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 auto !important; width: auto !important; min-height: 44px !important; height: 44px !important; padding: 0 12px !important; letter-spacing: 0 !important; }
}

/* Haftende Kaufleiste erst nach dem normalen „In den Warenkorb“ (Klasse kommt aus karten-handy.php, alle Breiten) */
body.wcbr-f19.wcbr-kauf-sichtbar .ast-sticky-add-to-cart { transform: translateY(110%) !important; visibility: hidden !important; }
/* Nur 1 Stück vorrätig: WooCommerce gibt statt Mengenwähler ein verstecktes Feld aus – keinen leeren Rahmen zeigen */
body.wcbr-f19 form.cart .quantity:has(input[type="hidden"]) { display: none !important; }