/* --- CARFOIL.CH: ULTIMATE LUXURY UI REDESIGN V6 --- */

/* 1. RESET & LAYOUT ENGINE */
.product-actions { display: flex !important; flex-direction: column !important; gap: 0 !important; }
#add-to-cart-or-refresh { display: flex !important; flex-direction: column !important; }

/* 2. HEADER: PREIS & STATUS */
.product-prices { order: 1 !important; margin-bottom: 10px !important; }
.product-prices .current-price span.current-price-value { font-size: 36px !important; font-weight: 800 !important; color: #000 !important; letter-spacing: -1.5px !important; }
/* MwSt.-Hinweis (03.08.2026) — muss je Kundengruppe stimmen.
   Frueher stand hier font-size:0 plus ein ::before mit fest verdrahtetem "PREIS INKL. MWST.".
   Das war fuer B2B-Partner falsch, die Nettopreise sehen. CSS kennt die Kundengruppe nicht,
   und die Body-Klasse tax-display-* haengt am LAND, nicht an der Gruppe (FrontController.php:1614).
   Loesung: PrestaShops eigenes Label wieder sichtbar machen — es ist gruppenabhaengig
   ("Bruttopreis" / "Nettopreis", aus ProductLazyArray::getLabels) — und per ::after nur
   noch den Versandhinweis anhaengen. Schaltet damit von selbst um, fuer immer. */
.tax-shipping-delivery-label { order: 2 !important; font-size: 11px !important; color: #aaa; letter-spacing: 1.2px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px !important; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
/* Kein ::after — das haengt sich hinter ALLE Kinder (Lagerbalken, Lieferzeit) und
   landet dadurch am Blockende. Den Versandhinweis setzt custom.js direkt an denselben
   Textknoten wie den MwSt.-Hinweis, damit beides auf einer Zeile steht. */
.tax-shipping-delivery-label .si-product-page { font-size: 14px !important; color: #7a7a7a; letter-spacing: normal; text-transform: none; font-weight: 400; }
.tax-shipping-delivery-label .delivery-information { font-size: 13px !important; display: block !important; margin-top: 8px !important; font-weight: 700 !important; color: #333 !important; letter-spacing: 0 !important; text-transform: none; }
.tax-shipping-delivery-label .delivery-information::before { content: "" !important; padding: 0 !important; }

/* 3. LAGERANZEIGE (Minimalist Bar) */
.product-availability, .product-quantities { order: 3 !important; margin-bottom: 15px !important; }
#product-availability { font-size: 11px !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #27ae60 !important; display: flex; align-items: center; gap: 8px; }

/* 4. CONFIGURATION BOX (Varianten & Warenkorb als Einheit) */
.product-variants { order: 4 !important; background: #fff; padding: 15px 20px; border-radius: 12px 12px 0 0; border: 1px solid #e0e0e0; border-bottom: none; margin-bottom: 0 !important; }
.product-add-to-cart { 
    order: 5 !important; background: #fff; padding: 15px 20px 20px 20px; border-radius: 0 0 12px 12px; border: 1px solid #e0e0e0; border-top: none;
    display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important;
    flex-wrap: nowrap !important;
}

/* Mengen-Eingabe & Button Styling */
.product-add-to-cart .qty {
    display: flex !important;
    align-items: center !important;
    width: 65px;
    min-width: 65px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #fcfcfc;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    flex-shrink: 0 !important;
}
.product-add-to-cart #quantity_wanted { 
    height: 100% !important; 
    width: 100% !important; 
    border: none !important; 
    text-align: center !important; 
    font-weight: 700 !important; 
    font-size: 16px !important; 
    -moz-appearance: textfield;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.product-add-to-cart #quantity_wanted::-webkit-outer-spin-button,
.product-add-to-cart #quantity_wanted::-webkit-inner-spin-button { 
    -webkit-appearance: none !important;
    margin: 0 !important; 
}
.product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical, 
.product-add-to-cart .bootstrap-touchspin .input-group-btn, 
.product-add-to-cart .bootstrap-touchspin .input-group-addon, 
.product-add-to-cart .bootstrap-touchspin-up, 
.product-add-to-cart .bootstrap-touchspin-down, 
.product-add-to-cart .input-group-btn-vertical, 
.product-add-to-cart .input-group-btn, 
.product-add-to-cart .input-group-append, 
.product-add-to-cart .input-group-prepend, 
.product-add-to-cart .bootstrap-touchspin-prefix, 
.product-add-to-cart .bootstrap-touchspin-postfix { 
    display: none !important; 
}
.product-add-to-cart .bootstrap-touchspin { 
    width: 100% !important; 
    border: none !important; 
    box-shadow: none !important; 
    background: transparent !important; 
}
.product-add-to-cart .bootstrap-touchspin .form-control { 
    border: none !important; 
    box-shadow: none !important; 
    background: transparent !important; 
    text-align: center !important; 
    padding: 0 !important;
}

.product-add-to-cart .add { flex-grow: 1 !important; min-width: 0 !important; }
.add-to-cart { 
    background: #000 !important; color: #fff !important; height: 50px !important; width: 100% !important; border-radius: 6px !important;
    text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 1px !important; font-size: 13px !important;
    border: none !important; transition: all 0.3s ease !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    padding: 0 15px !important;
}
.add-to-cart:hover { background: #B89F47 !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

/* MOBILE FIX: Warenkorb-Button und Menge */
@media (max-width: 767px) {
    .product-add-to-cart {
        flex-wrap: nowrap !important;
        padding: 12px 15px 15px 15px !important;
        gap: 8px !important;
    }
    .product-add-to-cart .qty {
        width: 55px !important;
        min-width: 55px !important;
        height: 48px !important;
    }
    .product-add-to-cart #quantity_wanted {
        font-size: 15px !important;
    }
    .add-to-cart {
        height: 48px !important;
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
        padding: 0 10px !important;
    }
    .product-variants {
        padding: 12px 15px !important;
    }
}

/* 5. ZUSCHNITT & HANDLING (High-End Cards) */
.block-product-attribute-custom { order: 6 !important; }
.block-product-attribute-custom .checkbox {
    background: #fff !important; border: 1px solid #e0e0e0 !important; padding: 20px !important; margin-bottom: 12px !important; border-radius: 12px !important;
    transition: all 0.3s ease !important; cursor: pointer !important;
}
.block-product-attribute-custom .checkbox:hover { border-color: #000 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; }
.block-product-attribute-custom .checkbox label { font-size: 14px !important; line-height: 1.6 !important; color: #333 !important; font-weight: 500 !important; }

/* ============================================================
   AUFPREISE KLEIN MACHEN - KORRIGIERTE SELEKTOREN
   label.control-label > span.product-discount > div.product-price.has-discount > div.current-price > span
   ============================================================ */

.list-attribute-custom span.product-discount {
    font-size: 11px !important;
    color: #999 !important;
}
.list-attribute-custom div.product-price.has-discount {
    color: #999 !important;
    font-size: 11px !important;
    display: inline !important;
}
.list-attribute-custom div.current-price {
    font-size: 11px !important;
    display: inline !important;
}
.list-attribute-custom div.current-price span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #999 !important;
    letter-spacing: 0 !important;
}
.list-attribute-custom .product-discount .current-price span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #999 !important;
    letter-spacing: 0 !important;
}
.list-attribute-custom .has-discount.product-price {
    color: #999 !important;
    font-size: 11px !important;
}

/* 6. CLEANUP & HIDE */
.product-description-short, 
div[id*="product-description-short"], 
.block-product-attribute-custom h4, 
.product-additional-info, 
.product-discounts .h6,
.attribute-custom-price { 
    display: none !important; 
}
.block-product-attribute-custom h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
}

/* 7. MENGENRABATT-TABELLE: Immer sichtbar, unter Zuschnitt & Handling */
.product-discounts {
    order: 7 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Goldener Banner als Ueberschrift */
.product-discounts .product-discounts-title {
    display: block !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 12px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}
.product-discounts .product-discounts-title::before {
    content: "";
}
.product-discounts .product-discounts-title::after {
    content: "";
}

/* Tabelle: Immer sichtbar */
.product-discounts .table-product-discounts {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Tabellen-Header */
.table-product-discounts thead tr th {
    background: #1a1a1a !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 10px 14px !important;
    border: none !important;
}

/* Tabellen-Zeilen */
.table-product-discounts tbody tr td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: center !important;
}
.table-product-discounts tbody tr:last-child td {
    border-bottom: none !important;
}
.table-product-discounts tbody tr:nth-child(odd) {
    background: #fafafa !important;
}
.table-product-discounts tbody tr:nth-child(even) {
    background: #fff !important;
}
.table-product-discounts tbody tr:hover {
    background: #f5f0e0 !important;
}

/* "Sie sparen" Spalte gruen hervorheben */
.table-product-discounts tbody tr td:last-child {
    color: #27ae60 !important;
    font-weight: 700 !important;
}

/* CARFOIL. Packs: native Komponentenliste GLOBAL ausblenden.
   Grund: Inhalt steht immer in der kuratierten Beschreibungsliste + ist ueber
   die Produktbilder sichtbar. Die native Liste zeigt interne ASBL-Artikel und
   weicht von der kuratierten Liste ab (z.B. Klingen fehlen oben) -> doppelt und
   widerspruechlich, verwirrt den Kunden. Darum ueberall aus. */
.pack-bundle {
    display: none !important;
}


/* ============================================================
   PAKET 1 — PRODUKTSEITE KONVERSION (02.09.2026)
   Geprueft gegen 8 Produkttypen, 4 Recherche-Winkel, 10 Personas
   (Workflow 02.09.). Alles unterhalb dieser Zeile gehoert zum Paket
   und kann als Block entfernt werden, um zurueckzurollen.
   ============================================================ */

/* --- M1: Reihenfolge der Kaufspalte ------------------------------
   Das Formular ist eine sortierte Flex-Spalte (oben, Abschnitt 1).
   Bisher: Kaufzeile 5, Zuschnitt 6 -> die PFLICHToption stand NACH
   dem Kaufknopf, und alles ohne order (Lieferzeit-Band, Musterblock)
   sprang als 0 zuoberst.
   Neu, jedes Kind mit explizitem Wert (Pack-Schutz inklusive):
     1 Preis · 2 MwSt-Zeile · 3 Lager · 4 Band+Muster ·
     5 Varianten · 6 Zuschtnitt · 7 Kaufzeile · 8 Rabatt          */
#add-to-cart-or-refresh > .cfcart-cutoff { order: 4 !important; }
.product-add-to-cart { order: 7 !important; }
/* Muster-/Finder-Block UNTER den Kaufknopf (Simon 02.09.): erst kaufen koennen,
   dann der Nebenweg "unsicher? Muster/Finder" - vor dem Rabatt. */
#add-to-cart-or-refresh > .cfm-box { order: 8 !important; margin-top: 0 !important; }
.product-discounts { order: 9 !important; }
.product-additional-info { order: 90 !important; }
.pack-bundle { order: 99 !important; }  /* bleibt display:none (oben) — doppelter Schutz: ASBL-Artikel duerfen NIE zuoberst erscheinen */

/* Zuschtnitt schliesst optisch an die Variantenbox an, Kaufzeile bildet den Abschluss */
.block-product-attribute-custom { margin-bottom: 0 !important; }
.product-variants { border-radius: 12px 12px 0 0; }

/* --- M1b: Zuschnitt als Zeile + Popup beim Kaufklick --------------
   Entscheid Simon 02.09. (zweimal bestaetigt, gegen meinen Rat
   protokolliert): Beim Klick auf IN DEN WARENKORB erscheint die
   Zuschnitt-Wahl als Popup - Radios, Einteilig vorausgewaehlt, Preise
   sichtbar. Auf der Seite steht nur noch EINE Zeile mit der aktuellen
   Wahl. Die Original-Checkboxen bleiben unsichtbar im Formular (sie
   tragen die Daten), das Popup ist ihre Bedienoberflaeche und
   erzwingt genau EINE Option - die alten Checkboxen erlaubten null
   oder mehrere.                                                     */
.cf-popup-aktiv .block-product-attribute-custom { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
/* Auf der Seite steht NICHTS mehr vom Zuschnitt (Entscheid Simon 02.09.) -
   die Wahl passiert im Popup beim Kaufklick, den Preis rechnet der Warenkorb. */
.cf-dialog-hinter {
    position: fixed; inset: 0; z-index: 1050; background: rgba(20,22,26,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cf-dialog {
    background: #fff; border-radius: 14px; max-width: 480px; width: 100%;
    max-height: 90vh; overflow: auto; padding: 22px 22px 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.cf-dialog h5 { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: #1a1a1a; text-transform: uppercase; letter-spacing: .5px; }
.cf-dialog .cf-dialog-unter { font-size: 12px; color: #888; margin-bottom: 14px; }
.cf-dialog label.cf-opt {
    display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e0e0e0;
    border-radius: 10px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
    font-size: 13px; line-height: 1.5; color: #333; text-align: left;
}
.cf-dialog label.cf-opt > span:first-of-type { flex: 1 1 auto; }
.cf-dialog label.cf-opt:has(input:checked) { border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; }
.cf-dialog label.cf-opt input { margin-top: 2px; accent-color: #1a1a1a; flex: 0 0 auto; }
.cf-dialog .cf-opt-preis { font-weight: 800; white-space: nowrap; margin-left: auto; padding-left: 10px; }
.cf-dialog .cf-dialog-total { font-size: 12px; color: #888; padding: 10px 2px 0; border-top: 1px solid #eee; margin-top: 4px; }
.cf-dialog .cf-dialog-knoepfe { display: flex; gap: 10px; margin-top: 14px; }
.cf-dialog .cf-dialog-weiter {
    flex: 1; height: 48px; border: none; border-radius: 8px; background: #000; color: #fff;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer;
}
.cf-dialog .cf-dialog-weiter:hover { background: #B89F47; }
.cf-dialog .cf-dialog-zurueck { border: none; background: none; color: #888; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* --- M1: Aufpreis LESBAR statt klein-grau ------------------------
   Die 11px-#999-Regeln oben verstecken den Zuschlag — genau die
   Preisueberraschung, die im Warenkorb reklamiert wird. Der Betrag
   gehoert gut lesbar zur Option (Vorauswahl Einteilig bleibt —
   Entscheid Simon 02.09., Reklamations-Erfahrung).               */
.list-attribute-custom div.current-price span,
.list-attribute-custom .product-discount .current-price span {
    font-size: 13px !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}
.list-attribute-custom span.product-discount { font-size: 13px !important; color: #1a1a1a !important; }

/* --- M2: Mengenrabatt kompakt ------------------------------------
   Eine lesbare Zeile mit ALLEN Stufen (Firmenkunde: "Staffel ist
   mein Kaufargument"), Tabelle erst nach Klick. Beide Elemente baut
   custom.js; ohne JavaScript bleibt die Tabelle offen (kein Verlust). */
.cf-rabatt-zeile {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    padding: 11px 16px; font-size: 13px; font-weight: 600; color: #333;
    cursor: pointer; margin-bottom: 4px;
}
.cf-rabatt-zeile::before { content: "%"; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; color: #fff;
    font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.cf-rabatt-zeile .cf-rabatt-pfeil { margin-left: auto; color: #999; transition: transform .2s; }
.cf-rabatt-offen .cf-rabatt-pfeil { transform: rotate(180deg); }
.cf-rabatt-details { display: none; }
.cf-rabatt-offen .cf-rabatt-details { display: block; }
.product-discounts .product-discounts-title { display: none !important; }  /* schwarzer Banner zieht den Blick vom Kaufknopf */

/* --- M3: doppelte Lieferzeit-Textzeile ---------------------------
   "Lieferzeit 1-2 Werktage | in unserem Lager" steht direkt ueber dem
   gruenen Band, das dasselbe sagt. NUR diese Zeile — MwSt-Hinweis und
   Lagerbalken leben im selben Container und bleiben unberuehrt.     */
.tax-shipping-delivery-label .delivery-information { display: none !important; }

/* --- M4: Galerie -------------------------------------------------
   Kleines Herstellerbild in riesigem Weissraum; danach war die linke
   Spalte ~2000px leer. Deckeln, fuellen, mitscrollen.               */
.product-cover { max-height: 480px; overflow: hidden; border-radius: 12px; }
.product-cover img { width: 100%; height: auto; max-height: 480px; object-fit: contain; background: #fff; }
@media (min-width: 992px) {
    .product-container > .col-md-6:first-child { position: sticky; top: 16px; align-self: flex-start; }
}
@media (max-width: 767px) {
    .product-cover, .product-cover img { max-height: 45vh; }
}

/* --- M5: Mobile-Ueberlaeufe --------------------------------------
   Bei 414px liefen Kaufknopf, Band, Rabatt-Tabelle und Beschreibung
   rechts aus dem Bild. Zwei Ebenen: Symptomdeckel am Body plus
   Maximalbreiten an den bekannten Verursachern.                    */
@media (max-width: 767px) {
    body { overflow-x: hidden; }
    .cfcart-cutoff { flex-wrap: wrap !important; max-width: 100% !important; }
    .product-discounts { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-product-discounts { min-width: 0 !important; }
    #add-to-cart-or-refresh > * , .product-actions > * { max-width: 100% !important; box-sizing: border-box; }
    .product-description, .product-information { max-width: 100%; overflow-wrap: break-word; }
}

/* --- M6/M8: Leere Huelsen ----------------------------------------
   Leeres Kommentar-Modul (negativer Social Proof) und leere
   Varianten-/Rabatt-Container (toter Leerraum auf Pack-/Werkzeug-
   seiten). Sichtbarkeit steuert custom.js; :empty faengt den
   Whitespace-Fall nicht.                                            */
.cf-verstecken { display: none !important; }

/* --- M9 (kleiner Schnitt): Header --------------------------------
   Goldene Spruchzeile ueberall aus (wiederholt die Leiste darueber);
   USP-Icon-Band NUR auf Produktseiten aus (auf Start/Kategorie
   leistet es etwas; "Mengenrabatt ab 2 Meter" stimmt zudem nur fuer
   Folien). Elementor-IDs sind stabil, solange der Header im
   CreativeElements-Editor nicht neu gebaut wird.                    */
.elementor-element-2d3a797b { display: none !important; }
#product .elementor-element-2b2905d { display: none !important; }

/* --- N1: Sticky-Kaufleiste Mobile --------------------------------
   Preis + Kaufknopf unten fixiert, sobald der echte Knopf aus dem
   Bild ist (belegt: +2.7 bis +4.1 % in publizierten A/B-Tests).
   Baut custom.js; klickt den ECHTEN Knopf (gleiche Validierung).   */
.cf-sticky-kauf {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029;
    display: none; align-items: center; gap: 12px;
    background: #fff; border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 16px rgba(0,0,0,.09);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.cf-sticky-kauf.cf-an { display: flex; }
.cf-sticky-kauf .cf-sticky-preis { font-size: 17px; font-weight: 800; color: #000; white-space: nowrap; }
.cf-sticky-kauf .cf-sticky-einheit { font-size: 11px; color: #888; display: block; font-weight: 600; }
.cf-sticky-kauf button {
    flex: 1 1 auto; height: 46px; border: none; border-radius: 6px;
    background: #000; color: #fff; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .5px;
}
@media (min-width: 768px) { .cf-sticky-kauf { display: none !important; } }

/* --- Mengen-Stepper ----------------------------------------------
   Das Redesign oben blendet die nativen Plus/Minus-Knoepfe aus
   (.bootstrap-touchspin-up/down display:none) - Menge aendern ging
   nur per Tastatur (Simon 02.09.: "nicht nutzerfreundlich").
   custom.js baut eigene Tasten in Fingergroesse.                   */
.product-add-to-cart .qty { width: 122px !important; min-width: 122px !important; }
.cf-step {
    flex: 0 0 34px; width: 34px; height: 100%; border: none; background: #f1f1f1;
    font-size: 18px; font-weight: 700; color: #333; cursor: pointer; line-height: 1;
}
.cf-step:hover { background: #e3e3e3; }
.cf-step:disabled { color: #bbb; cursor: default; }
@media (max-width: 767px) {
    .product-add-to-cart .qty { width: 118px !important; min-width: 118px !important; }
}

/* --- Beschreibung in voller Breite unter dem Bild ----------------- */
.cf-tabs-breit { margin: 8px 0 24px; }
.cf-tabs-breit .tabs { max-width: none; }

/* --- Kaufkarte aufgeraeumt (Simon 02.09.: "sieht unprofessionell aus") ---
   Das Theme stellt "Menge" als frei schwebendes Label neben die Zeile -
   mit dem Stepper erklaert sich die Menge selbst, das Label fliegt raus.
   Stepper und Kaufknopf stehen auf EINER ruhigen Zeile. */
.product-add-to-cart > .control-label,
.product-add-to-cart .product-quantity > .control-label { display: none !important; }
.product-add-to-cart { border-radius: 12px !important; border-top: 1px solid #e0e0e0 !important; }
.product-variants { border-radius: 12px; border-bottom: 1px solid #e0e0e0 !important; margin-bottom: 12px !important; }
.block-product-attribute-custom { margin-bottom: 0 !important; }

/* --- Mengenrabatt-Preisanzeige ans Design angepasst ---------------
   Ab der Rabattschwelle rendert PrestaShop selbst Streichpreis +
   Prozent-Abzeichen (das ist die echte Staffel, keine eigene Rechnung).
   Nur die Optik war fremd - oranges Abzeichen, grosse Spruenge. */
.product-prices .discount.discount-percentage,
.product-prices .discount.discount-amount,
.product-prices .badge-discount {
    background: #1a1a1a !important; color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .5px; border-radius: 6px !important;
    padding: 4px 10px !important; vertical-align: middle;
}
.product-prices .regular-price {
    font-size: 15px !important; color: #aaa !important; font-weight: 600 !important;
}

/* --- Gegenpruefung 02.09. nachmittags: Ausfuehrungs-Fixes ---------
   (Design-Kritiker + 10 Personas; Konzept-Entscheide unangetastet) */
/* Popup: Optionsname fett auf eigener Zeile, Beschreibung grau darunter */
.cf-dialog .cf-opt-haupt { flex: 1 1 auto; }
.cf-dialog .cf-opt-haupt b { display: block; font-size: 14px; color: #1a1a1a; }
.cf-dialog .cf-opt-haupt small { display: block; font-size: 12px; color: #888; line-height: 1.45; margin-top: 2px; }
.cf-dialog .cf-merken { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #555; margin-top: 10px; cursor: pointer; }
.cf-dialog .cf-merken input { accent-color: #1a1a1a; }
/* Mobil: Bestaetigungsknopf ohne Scrollen erreichbar */
@media (max-width: 767px) {
  .cf-dialog { display: flex; flex-direction: column; }
  .cf-dialog .cf-dialog-knoepfe { position: sticky; bottom: 0; background: #fff; padding-top: 10px; margin-top: auto; }
}
/* Kaufknopf fuellt die Karte (rechts stand ein Drittel tote Flaeche) */
.product-add-to-cart .product-quantity { flex: 1 1 auto !important; }
.product-add-to-cart .add { flex: 1 1 auto !important; min-width: 0 !important; }
/* Varianten-Chips: unselektierte Option sah aus wie blosser Text */
.product-variants li label .radio-label,
.product-variants .input-radio + span {
    display: inline-block; border: 1px solid #c9cdd2; border-radius: 8px;
    padding: 7px 16px; background: #fff; cursor: pointer; font-weight: 600;
    transition: border-color .15s ease;
}
.product-variants li label:hover .radio-label { border-color: #1a1a1a; }
.product-variants .input-radio:checked + span {
    border: 2px solid #1a1a1a !important; padding: 6px 15px; box-shadow: none;
}