/* Konfiguriertes Produkt — Frontend-Buttons (Single-Product) */

.bgcr-cfgprod-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    max-width: 360px;
}

/* "In den Warenkorb" — nutzt die Theme-Button-Styles (single_add_to_cart_button). */
.bgcr-cfgprod-add { width: 100%; text-align: center; }
.bgcr-cfgprod-add.loading { opacity: .7; cursor: progress; }

/* "Design your own" — gleiche Struktur wie der Add-to-cart-Button
   (single_add_to_cart_button button alt: Text links, Icon-Kreis rechts),
   aber als Outline: schwarzer Rand + Text, gefüllter schwarzer Kreis mit
   weißem Icon. Erbt Höhe/Padding/Radius/Font von den Theme-Button-Klassen.

   Hohe Spezifität (body.single-product + Wrapper + alle Button-Klassen),
   damit die Outline-Farben die gefüllten Konte-Button-Styles sicher
   überschreiben. */
body.single-product .bgcr-cfgprod-actions a.bgcr-cfgprod-customize.single_add_to_cart_button.button.alt {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
    /* Exakt wie der Add-to-cart-Button (padding 8/8/8/18), aber 2px weniger
       oben/unten, damit der 2px-Outline-Rand die Außenhöhe nicht vergrößert
       → identische Gesamthöhe. */
    padding: 6px 8px 6px 18px !important;
    text-align: left;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}
body.single-product .bgcr-cfgprod-actions a.bgcr-cfgprod-customize.single_add_to_cart_button.button.alt:hover,
body.single-product .bgcr-cfgprod-actions a.bgcr-cfgprod-customize.single_add_to_cart_button.button.alt:focus {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}
/* Etwaiges Theme-Pseudo-Icon (Konte-Pfeilkreis via ::after/::before) unterdrücken. */
body.single-product .bgcr-cfgprod-actions a.bgcr-cfgprod-customize::before,
body.single-product .bgcr-cfgprod-actions a.bgcr-cfgprod-customize::after {
    content: none !important;
    display: none !important;
}
.bgcr-cfgprod-customize__label { line-height: 1; }
/* Kreis exakt wie der Add-to-cart-::after (35×35, flex 0 0 35px) → gleiche
   Größe UND gleiche Button-Höhe (der Kreis bestimmt die Höhe). */
.bgcr-cfgprod-customize .bgcr-cfgprod-customize__icon {
    flex: 0 0 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 999px;
    background: #000;
    color: #fff;
}
.bgcr-cfgprod-customize .bgcr-cfgprod-customize__icon svg { width: 18px; height: 18px; }
/* Bei Hover invertiert der ganze Button → Kreis weiß, Icon schwarz. */
.bgcr-cfgprod-customize:hover .bgcr-cfgprod-customize__icon,
.bgcr-cfgprod-customize:focus .bgcr-cfgprod-customize__icon {
    background: #fff;
    color: #000;
}

/* Konfigurierte Produkte: konte-Standard-Lieferzeit ausblenden, die config-
   basierte (.bgcr-cfgprod-leadtime) bleibt sichtbar. */
.bgcr-has-cfg-leadtime .simple-lead-time:not(.bgcr-cfgprod-leadtime) { display: none !important; }

/* Parts-Liste im "Konfiguration"-Accordion. */
ul.bgcr-cfgprod-parts-list {
    font-size: 15px;
}

/* Trenner zwischen "Design your own" und dem Modellseiten-Button:
   kurzer horizontaler Strich, mittig, mit Luft nach oben/unten */
.bgcr-cfgprod-actions__divider {
    align-self: center;
    width: 40px;
    height: 1px;
    background: #c9c9c9;
    margin: 14px 0;
}

/* ---------------------------------------------------------------------------
 * Merkmal-Badge (2026-07): oben links auf dem ersten Produktbild, Optik
 * identisch zum 360-Grad-Badge des 3D-Slides (.bgcr-3d-badge). Die
 * Merkmale wechseln per Fade-in/Fade-out (Rotation in js/front.js).
 * Schrift erbt bewusst die Shop-Typografie — keine font-family hier.
 * ------------------------------------------------------------------------- */

.bgcr-cfg-banner-frame {
    position: relative;
    display: block;
    line-height: 0;
}

.bgcr-cfg-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 3;
    pointer-events: none;
    display: inline-block;
    /* Optik wie .bgcr-3d-badge (product-image.php), Text nicht fett. */
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #000;
    background: rgba(255, 255, 255, .8);
    border-radius: 30px;
    padding: 4px 10px;
}

/* Das AKTIVE Merkmal liegt im Flow und bestimmt damit die Pill-Breite —
 * der Hintergrund passt sich immer exakt dem sichtbaren Text an. Die
 * inaktiven Items liegen absolut darüber (für den Cross-Fade). */
.bgcr-cfg-badge__item {
    position: absolute;
    left: 10px;
    top: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .6s ease;
}

.bgcr-cfg-badge__item.is-active {
    position: static;
    display: inline-block;
    opacity: 1;
}

/* Reduzierte Bewegung: js/front.js rotiert dann nicht — das erste Merkmal
 * bleibt stehen; die Transition hier zu deaktivieren schadet nicht. */
@media (prefers-reduced-motion: reduce) {
    .bgcr-cfg-badge__item {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Bewertung über der Lieferzeit (2026-07, nur konfigurierte Produkte):
 * Sterne (Gold-Orange) + Score + Claim, links ausgerichtet, Textgröße
 * erbt die umgebende Typografie (= gleiche Größe wie die Delivery-Zeile).
 * Klick führt zur Erfahrungen-Seite.
 * ------------------------------------------------------------------------- */

.bgcr-cfgprod-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Abstand nach oben; unten übernimmt die Lieferzeit-Regel darunter. */
    margin: 18px 0 5px;
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
}

.bgcr-cfgprod-rating:hover {
    opacity: 0.65;
    text-decoration: none;
}

.bgcr-cfgprod-rating__stars {
    font-size: 0.85em;
    letter-spacing: 2px;
    /* Sattes Gelb-Gold mit Orange-Stich. */
    color: #f5a623;
}

.bgcr-cfgprod-rating__score {
    font-size: 0.85em;
    font-weight: 400;
}

.bgcr-cfgprod-rating__claim {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 1;
}

/* Lieferzeit ohne oberen Absatz-Abstand — NUR wenn direkt davor ein
 * Rating gerendert wurde (Nachbar-Selektor greift sonst nicht). */
.bgcr-cfgprod-rating + .simple-lead-time p.custom-lead-time {
    margin-block-start: 0;
}