/**
 * CRP „Das passt dazu“ + Epoq-Empfehlungen: alle Katalog-Produktdetailseiten (Layout V1 + V2).
 * Wird auf der PDP über `catalog_product_view.xml` geladen (V1 + V2).
 * `customdesign-pdp.css` hängt nur am PDP-V2-Handle, daher diese separate Datei.
 */
body.catalog-product-view #crp-ajax-placeholder .product-item-name a:hover {
    color: var(--bs-accent-color, #ec6608);
}

body.catalog-product-view #crp-ajax-placeholder .product-item .product-image-container {
    border-radius: var(--bs-radius-img, 12px) var(--bs-radius-img, 12px) 0 0;
    overflow: hidden;
}

/* ----- "Das passt dazu" → Themenwelten-Style (native scroll, no transform slider) ----- */

/*
 * CRP „Das passt dazu“ + Epoq (.product-upsell.main-block): Full-Bleed / Hover-Schatten braucht sichtbares Overflow im Vorfahren.
 * Global auf .column.main wirkte sich auf ALLE PDP-Blöcke aus (Epoq-Slider: eine riesige Karte / kaputtes Flex).
 * Nur setzen, wenn der jeweilige Block im DOM ist.
 */
body.catalog-product-view .page-main:has(#custom-related-products),
body.catalog-product-view .page-main:has(#crp-ajax-placeholder),
body.catalog-product-view .page-main:has(.product-upsell.main-block),
body.catalog-product-view .columns:has(#custom-related-products),
body.catalog-product-view .columns:has(#crp-ajax-placeholder),
body.catalog-product-view .columns:has(.product-upsell.main-block),
body.catalog-product-view .column.main:has(#custom-related-products),
body.catalog-product-view .column.main:has(#crp-ajax-placeholder),
body.catalog-product-view .column.main:has(.product-upsell.main-block) {
    overflow: visible !important;
}
/* Default: kein horizontales Scrollen der ganzen Seite durch Full-Bleed-Blöcke */
body.catalog-product-view {
    overflow-x: clip !important;
}
/*
 * CRP: `.badshop-slider` ist absichtlich breiter als die Spalte — `overflow-x: clip` am `body`
 * schneidet die sichtbaren Kartenkanten (2px-Rand + Passepartout) am Viewport ab („Rahmen passt nicht“).
 */
body.catalog-product-view:has(#custom-related-products),
body.catalog-product-view:has(#crp-ajax-placeholder),
body.catalog-product-view:has(.product-upsell.main-block) {
    overflow-x: visible !important;
}

body.catalog-product-view #custom-related-products {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Top-Abstand zur Hilfe-/Konfig-Box darüber, Bottom = Abstand zum nächsten Empfehlungsblock */
    margin: 60px 0 48px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.catalog-product-view #custom-related-products h2.headline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    body.catalog-product-view #custom-related-products h2.headline {
        font-size: 28px !important;
    }
}

body.catalog-product-view #custom-related-products #producttypes {
    margin: 12px 0 16px !important;
    padding: 0 !important;
}

/* Filter-Pills: kein halbtransparentes @blue80 — klares Shop-Blau, dezenter Hover */
body.catalog-product-view #custom-related-products #producttypes button.related-filter {
    background: #fff !important;
    color: var(--bs-blue, #00446a) !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
body.catalog-product-view #custom-related-products #producttypes button.related-filter:hover {
    background: var(--bs-blue-light, #f0f6fa) !important;
    color: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
}
body.catalog-product-view #custom-related-products #producttypes button.related-filter.active,
body.catalog-product-view #custom-related-products #producttypes button.related-filter.active:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    border-color: var(--bs-blue, #00446a) !important;
}
body.catalog-product-view #custom-related-products #producttypes button.related-filter:focus-visible {
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: 2px !important;
}

body.catalog-product-view #custom-related-products .slider-outer-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

body.catalog-product-view #custom-related-products .inner-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    position: relative;
}
body.catalog-product-view #custom-related-products .teaser-topseller {
    overflow: visible !important;
    max-width: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider,
body.catalog-product-view #custom-related-products .badshop-slider.crp-native-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    /* pan-x allein blockiert vertikales Seiten-Scrollen, solange der Finger auf dem Slider liegt */
    touch-action: pan-x pan-y pinch-zoom !important;
    scrollbar-width: none !important;
    outline: none !important;
    width: calc(100% + (100vw - 100%) / 2) !important;
    max-width: none !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
body.catalog-product-view #custom-related-products .badshop-slider::-webkit-scrollbar {
    display: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    transform: none !important;
    transition: none !important;
    min-width: max-content !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 0 28px !important;
    margin: 0 !important;
    list-style: none !important;
    position: static !important;
    left: auto !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li {
    flex: 0 0 calc(70vw - 32px) !important;
    width: calc(70vw - 32px) !important;
    min-width: 180px !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 16px !important;
    border: 2px solid var(--bs-blue-light, #b8d4e8) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    list-style: none !important;
    float: none !important;
}
@media (min-width: 768px) {
    body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li {
        flex: 0 0 calc(32vw - 16px) !important;
        width: calc(32vw - 16px) !important;
    }
}
@media (min-width: 1200px) {
    body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li {
        flex: 0 0 210px !important;
        width: 210px !important;
    }
}
@media (min-width: 1280px) {
    body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li {
        flex: 0 0 240px !important;
        width: 240px !important;
    }
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li:hover {
    /* Rein neutral-grauer Schatten (ohne Blaukanal — rgba(15,40,58,…) wirkte auf hellblauer Kachel „shop-blau“) */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px) !important;
}

/* Tastatur-Fokus: Border an der Karte (Link-Outline wird von overflow:hidden geclippt) */
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li > a.itemurl:focus,
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li > a.itemurl:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li:has(> a.itemurl:focus-visible) {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px) !important;
    overflow: visible !important;
    z-index: 2 !important;
    position: relative !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li > a.itemurl {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: relative !important;
    /*
     * KRITISCH: Theme `teaser-m.css` Z. 561 setzt `.teaser-content .product-item .itemurl { margin: 5px }`.
     * Ohne explizites `margin: 0` erbt das `<a>` 5px allseitig. Mit `width: 100%` (= 206 px) + 5 px margin
     * je Seite kommt das `<a>` auf 216 px Total-Box → overflow von 10 px in li (206 px content). Da li
     * `overflow: hidden` ist, wird der Overflow rechts geclippt — visuell wirkt das `<a>` dann nach RECHTS
     * verschoben (sichtbarer Bereich x=5..206 statt x=0..206). Container/wrapper/img erben den Versatz.
     * Daher: margin hart auf 0 zurueckdruecken und box-sizing auf border-box.
     */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    background: transparent !important;
    /* Theme: .teaser-topseller .product-item > a.itemurl = grid — sonst schiebt grid-Placement die Bildspalte */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    /* Sicherheitsnetz: nichts darf rechts ueber die Karte ragen, egal welche Regel das Bild aufblaeht */
    overflow: hidden !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .bs-product-badges {
    gap: 4px !important;
    padding: 0 6px !important;
    top: 16px !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .bs-badge {
    padding: 4px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/*
 * CRP „Das passt dazu“: hellblauer Passepartout = volle Kartenbreite auf dem äußeren `span.product-image-container-{id}`
 * (Badshop `image_with_borders.phtml` / alte px-Reste) + dieselbe Zentrierlogik wie Epoq (column-flex, `align-items:center`).
 */
/* Rest-Px/Inline am äußeren span: sonst schmale Box links, Passepartout „schief“ */
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li a.itemurl > span[class*='product-image-container-'] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
}
/*
 * CRP-Bildbox: pure Block-Elemente, kein Grid/Flex/aspect-ratio.
 * Span mit Bild (HTML width="500") wurde frueher durch Grid-min-content auf 236 px geblasen
 * → ragte 30 px rechts aus der 206-px-Karte. Mit `display: block` + `width: 100%` + `max-width: 100%`
 * + `box-sizing: border-box` skaliert das `<img>` per `width: 100%; height: auto` proportional auf
 * Wrapper-Breite und wird niemals breiter. `margin: 0 auto` auf Container/Wrapper zentriert
 * zusaetzlich gegen evtl. asymmetrische Theme-Margins.
 */
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .product-image-container {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-align: center !important;
    direction: ltr !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    grid-column: unset !important;
    grid-row: unset !important;
    float: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .product-image-wrapper {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
    aspect-ratio: auto !important;
    grid-column: unset !important;
    grid-row: unset !important;
    float: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .product-image-photo {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    position: static !important;
    inset: auto !important;
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
    float: none !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li:hover .product-image-photo {
    transform: scale(1.05) !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .product-item-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
    padding: 10px 14px 0 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .measures {
    padding: 0 14px !important;
    margin-top: 4px !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .measures span {
    font-size: 12px !important;
    padding: 2px 6px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 4px !important;
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .prev-prices {
    position: static !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #4a6886 !important;
    margin-top: auto !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li > a.itemurl:not(:has(.prev-prices)) .price-box {
    margin-top: auto !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .streichpreis::before {
    display: none !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .prev-prices .streichpreis {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a6886 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ec6608 !important;
    text-decoration-thickness: 1.5px !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .prev-prices .price {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a6886 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ec6608 !important;
    text-decoration-thickness: 1.5px !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .price-box {
    padding: 0 14px 14px !important;
    text-align: right !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .price-box .price {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .prev-prices ~ .price-box .price {
    color: #ec6608 !important;
}

body.catalog-product-view #custom-related-products .badshop-slider .teaser-content > li .varianten {
    padding: 0 14px 14px !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Titel + Pfeile: wieder in EINER Zeile (ohne `position: absolute` über #custom-related-products),
   sonst liegen Pfeile mit right:0 über dem Slider und überdecken Karten. */
body.catalog-product-view #custom-related-products .crp-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 0 !important;
    padding: 0 !important;
}
body.catalog-product-view #custom-related-products .crp-header h2.headline {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
body.catalog-product-view #custom-related-products .crp-arrows {
    position: static !important;
    flex: 0 0 auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 1 !important;
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
}
@media (min-width: 768px) {
    body.catalog-product-view #custom-related-products .crp-header {
        flex-wrap: nowrap !important;
    }
}

/* Mobil: „Das passt dazu“ — zuerst Titel, dann Filter-Pills, dann Kreis-Pfeile, dann Bild-Slider */
@media (max-width: 767px) {
    body.catalog-product-view #custom-related-products {
        display: flex !important;
        flex-direction: column !important;
    }
    body.catalog-product-view #custom-related-products .crp-header {
        display: contents !important;
    }
    body.catalog-product-view #custom-related-products .crp-header h2.headline {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
    }
    body.catalog-product-view #custom-related-products #producttypes {
        order: 2 !important;
    }
    body.catalog-product-view #custom-related-products .crp-arrows {
        order: 3 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }
    body.catalog-product-view #custom-related-products .slider-outer-container {
        order: 4 !important;
    }
}

body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    border-radius: 50% !important;
    background: transparent !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow::after {
    width: 9px !important;
    height: 9px !important;
    border-width: 2px !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow:hover {
    background: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow:hover::after {
    border-color: #fff !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow--inactive {
    border-color: var(--bs-blue-light, #b8d4e8) !important;
    cursor: default !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow--inactive::after {
    border-top-color: var(--bs-blue-light, #b8d4e8) !important;
    border-right-color: var(--bs-blue-light, #b8d4e8) !important;
}
body.catalog-product-view #custom-related-products .crp-arrows .bs-slider-arrow--inactive:hover {
    background: transparent !important;
    border-color: var(--bs-blue-light, #b8d4e8) !important;
}

/* Hide old teaser nav arrows — replaced by header arrows */
body.catalog-product-view #custom-related-products .teaser-controls {
    display: none !important;
}
/* ----- ZONE 5: Recommendations (Epoq) ----- */

body.catalog-product-view .product-upsell.main-block {
    margin: 48px 0;
    /* Eigenes Layout-Containing vs. .column.main overflow:visible (CRP) — Epoq-Kartenbreite stabil */
    contain: layout;
    isolation: isolate;
}
body.catalog-product-view .product-upsell.main-block .epoqWidget {
    margin-bottom: 40px;
    position: relative;
    overflow: visible !important;
}
body.catalog-product-view .product-upsell.main-block .epoqWidget .slider-outer-container,
body.catalog-product-view .product-upsell.main-block .epoqWidget .inner-container {
    overflow: visible !important;
}

/* --- Heading --- */
body.catalog-product-view .product-upsell.main-block .epoqWidget > strong {
    display: block;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin-bottom: 16px;
    line-height: 1.2;
}
@media (min-width: 768px) {
    body.catalog-product-view .product-upsell.main-block .epoqWidget > strong {
        font-size: 28px !important;
    }
}

/* Epoq: Anzahl der Ergebnisse als Kreis statt (N) in Klammern */
body.catalog-product-view .product-upsell.main-block .epoqWidget > strong .bs-epoq-slider-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.75em;
    height: 1.75em;
    padding: 0 0.35em;
    margin-left: 0.5em;
    border-radius: 50%;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* --- Slider structure: Seiten-Padding = Gutter für Chevron-Pfeile (nicht über Karten) --- */
body.catalog-product-view .product-upsell .slider-outer-container {
    overflow: visible !important;
    max-width: 100%;
    position: relative;
    padding: 0 48px !important;
    box-sizing: border-box;
}
body.catalog-product-view .product-upsell .inner-container {
    /* position: Bezug für .teaser-controls (absolute) — Pfeile an Produktbildhöhe */
    position: relative;
    box-sizing: border-box;
    padding: 0 !important;
    overflow: visible !important;
}
body.catalog-product-view .product-upsell .badshop-slider {
    margin: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    overflow: hidden !important;
    /* Schmales Padding — Chevrons sitzen näher an den Karten; Hover-Schatten reicht oben/unten 24/42 aus. */
    padding: 24px 12px 42px 12px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
}

/* --- Track --- */
body.catalog-product-view .product-upsell .badshop-slider .teaser-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/*
 * `teaser-m.css` (`.teaser-topseller .badshop-slider .teaser-content { width: 1000% / 10000% }`)
 * dient historisch dem Float-Slider; mit Flex-Karten (`calc(20% - …)` / mobil `100%`) erzeugt es falsche Schienenbreite
 * und „Peek“ der nächsten Kachel. Auf der PDP liegt der Epoq-AJAX-Slider in `.product-upsell .teaser-topseller`.
 */
body.catalog-product-view .product-upsell .teaser-topseller .badshop-slider .teaser-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Cards: Basis-Layout — Breite kommt aus den responsiven Blöcken weiter unten.
 * gap-Bezug (statt margin-right) wird in den Media-Blöcken sauber gerechnet — `(100% - gap*(n-1)) / n`. */
body.catalog-product-view .product-upsell .badshop-slider .teaser-content li.product-item {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 2px solid var(--bs-blue-light, #b8d4e8) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    /* Nur CRP „Das passt dazu“: volle Kachel hellblau — Epoq-Slider: weiße Kachel */
    background: #fff !important;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    float: none !important;
    list-style: none !important;
    box-sizing: border-box !important;
}
/* Desktop (≥1200px): 5 Karten ohne Peek — gap 16, card = (100% - 64) / 5. */
@media (min-width: 1200px) {
    body.catalog-product-view .product-upsell .badshop-slider .teaser-content {
        gap: 16px !important;
    }
    body.catalog-product-view .product-upsell .badshop-slider .teaser-content li.product-item {
        flex: 0 0 calc((100% - 64px) / 5) !important;
        width: calc((100% - 64px) / 5) !important;
    }
}
/* Tablet: Theme-`max-width: 500px` auf `.teaser-topseller .badshop-slider` aushebeln.
 * Bewusst NICHT bis 767px — mobil hat der Epoq-AJAX-Slider gar kein `.teaser-topseller` im DOM,
 * dort regeln die `@media (max-width: 767px)`-Blöcke unten direkt am `.epoqWidget .badshop-slider`. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.catalog-product-view .product-upsell .teaser-topseller .badshop-slider {
        max-width: none !important;
        width: 100% !important;
    }
}
@media (max-width: 767px) {
    /*
     * Mobil zeigt der Slider GENAU EINE Karte ohne Peek.
     * Mehrstufige Absicherung:
     *  1) Slider-Outer + Slider OHNE horizontales Padding → Slider-Innenbreite = Slider-Außenbreite = `100cqi`.
     *  2) `overflow: hidden` zusätzlich an `.epoqWidget` und `.inner-container` — selbst wenn das des Sliders
     *     irgendwo (Theme `teaser-m.css` / Spezifitäts-Mix) überschrieben würde, kappt der Vorfahr.
     *  3) Karte = `100cqi` (Fallback `100%`), Margin/Gap auf 0; Teaser-Content auf 100 %.
     * Hover-Schatten ist mobil (Touch ohne Hover) irrelevant — hartes Clipping ist unkritisch.
     */
    body.catalog-product-view .product-upsell .epoqWidget:not(:has(.epoq-native-scroll)),
    body.catalog-product-view .product-upsell .epoqWidget:not(:has(.epoq-native-scroll)) .inner-container {
        overflow: hidden !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget:has(.badshop-slider.epoq-native-scroll),
    body.catalog-product-view .product-upsell .epoqWidget:has(.badshop-slider.epoq-native-scroll) .inner-container {
        overflow: visible !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget .slider-outer-container {
        padding: 0 44px !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget .badshop-slider:not(.epoq-native-scroll) {
        container-type: inline-size;
        padding: 16px 0 32px 0 !important;
        overflow: hidden !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget .badshop-slider.epoq-native-scroll {
        container-type: inline-size;
        padding: 16px 0 32px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget .badshop-slider .teaser-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.catalog-product-view .product-upsell .epoqWidget .badshop-slider .teaser-content li.product-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
@supports (width: 1cqi) {
    @media (max-width: 767px) {
        body.catalog-product-view .product-upsell .epoqWidget .badshop-slider .teaser-content li.product-item {
            flex: 0 0 100cqi !important;
            width: 100cqi !important;
            max-width: 100cqi !important;
        }
    }
}
body.catalog-product-view .product-upsell .badshop-slider .teaser-content li.product-item:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px);
    /* Eigenes overflow:hidden am li würde den Schatten mitabschneiden (box-shadow liegt außerhalb der Border-Box). */
    overflow: visible !important;
    z-index: 1;
}

body.catalog-product-view .product-upsell .product-item > a.itemurl:focus,
body.catalog-product-view .product-upsell .product-item > a.itemurl:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body.catalog-product-view .product-upsell .badshop-slider .teaser-content li.product-item:has(> a.itemurl:focus-visible) {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px) !important;
    overflow: visible !important;
    z-index: 2 !important;
    position: relative !important;
}

/* --- Card link: flex column; „Varianten“-CTA visuell direkt unter dem Bild, vor dem Titel (order) --- */
body.catalog-product-view .product-upsell .product-item > a.itemurl {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
    /* teaser-m: `.teaser-content .product-item .itemurl { margin: 5px }` — sonst 100%-Breite + Rand > Kachel */
    margin: 0 !important;
    box-sizing: border-box !important;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .product-image-container {
    order: 1;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .varianten {
    order: 2;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .product-item-name {
    order: 3;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .measures {
    order: 4;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .prev-prices {
    order: 5;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .price-box {
    order: 6;
}

/* --- Badge/discount overlays: absolute over image --- */
body.catalog-product-view .product-upsell .product-item > a.itemurl > .productlabel {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl > .relative {
    position: absolute !important;
    top: 14px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

/* --- Image: Epoq — ohne hellblaues Passepartout (nur CRP #custom-related-products behält es) --- */
body.catalog-product-view .product-upsell .product-item .product-image-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
    text-align: center !important;
    position: relative;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
body.catalog-product-view .product-upsell .product-item .product-image-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: min(100%, 220px) !important;
    margin: 4px auto 14px !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 220px !important;
    padding: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
    flex: 0 0 auto;
}
body.catalog-product-view .product-upsell .product-item .product-image-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
}
body.catalog-product-view .product-upsell .product-item:hover .product-image-photo {
    transform: scale(1.05) !important;
}

/* --- Badge pills --- */
body.catalog-product-view .product-upsell .product-item .bs-product-badges {
    gap: 4px !important;
    padding: 0 6px !important;
    top: 8px !important;
}
body.catalog-product-view .product-upsell .product-item .bs-badge {
    padding: 4px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* --- Discount pill --- */
body.catalog-product-view .product-upsell .product-item .rabatt.labelpfeil {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    z-index: 2;
    margin: 0;
}
body.catalog-product-view .product-upsell .product-item .rabatt.labelpfeil::before {
    display: none !important;
    content: none !important;
    border: none !important;
}
body.catalog-product-view .product-upsell .product-item .rabatt.labelpfeil .arrow {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
body.catalog-product-view .product-upsell .product-item .rabatt.labelpfeil .labelcontent,
body.catalog-product-view .product-upsell .product-item .rabatt.labelpfeil .sparen.labelcontent {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    box-sizing: border-box;
}

/* --- Product name --- */
body.catalog-product-view .product-upsell .product-item .product-item-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    padding: 0 8px 0 !important;
    color: var(--bs-blue, #00446a) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    text-overflow: unset !important;
}

/* --- Measures: light-blue background pills --- */
body.catalog-product-view .product-upsell .product-item .measures {
    display: block;
    min-height: 0 !important;
    margin-top: 6px;
    padding: 0 8px !important;
}
body.catalog-product-view .product-upsell .product-item .measures span {
    font-size: 12px !important;
    padding: 2px 6px !important;
    background: #e8f2fa !important;
    border-radius: 4px !important;
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
    display: inline-block;
    margin: 0 4px 4px 0;
}
body.catalog-product-view .product-upsell .product-item .measures span::before {
    font-weight: bold;
    margin-right: 3px;
}
body.catalog-product-view .product-upsell .product-item .measures span.breite::before { content: 'B'; }
body.catalog-product-view .product-upsell .product-item .measures span.hoehe::before { content: 'H'; }
body.catalog-product-view .product-upsell .product-item .measures span.tiefe::before { content: 'T'; }

/* --- Bottom alignment: push price/varianten to bottom --- */
body.catalog-product-view .product-upsell .product-item > a.itemurl > .prev-prices {
    margin-top: auto !important;
}
body.catalog-product-view .product-upsell .product-item > a.itemurl:not(:has(> .prev-prices)) > .price-box {
    margin-top: auto !important;
}

/* --- Strikethrough price --- */
body.catalog-product-view .product-upsell .product-item .prev-prices {
    position: static !important;
    display: block !important;
    width: auto !important;
    text-align: right !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    color: #4a6886 !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    min-height: 0 !important;
}
body.catalog-product-view .product-upsell .product-item .streichpreis::before {
    display: none !important;
}
body.catalog-product-view .product-upsell .product-item .prev-prices .streichpreis {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a6886 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ec6608 !important;
    text-decoration-thickness: 1.5px !important;
}
body.catalog-product-view .product-upsell .product-item .prev-prices .price {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a6886 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ec6608 !important;
    text-decoration-thickness: 1.5px !important;
}

/* --- Price box --- */
body.catalog-product-view .product-upsell .product-item .price-box {
    padding: 4px 8px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}
body.catalog-product-view .product-upsell .product-item .prev-prices ~ .price-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.catalog-product-view .product-upsell .product-item .price-box .price {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
body.catalog-product-view .product-upsell .product-item .prev-prices ~ .price-box .price {
    color: #ec6608 !important;
}

/* --- Varianten-CTA (Epoq: „Jetzt konfigurieren!“) — unter Bild, vor Titel; order siehe .itemurl --- */
/* Column-Flex auf .itemurl hat align-items: stretch — sonst wächst .varianten trotz inline-block auf Kartenbreite */
body.catalog-product-view .product-upsell .product-item .varianten {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--bs-accent-color, #ec6608) !important;
    padding: 4px 10px !important;
    margin: 8px 8px 4px !important;
    border: 1.5px solid var(--bs-accent-color, #ec6608) !important;
    border-radius: 999px !important;
    background: #fff !important;
    display: inline-block !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none !important;
}
body.catalog-product-view .product-upsell .product-item .varianten:hover {
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
}

/* --- Epoq/Slider: schlanke Chevrons in der Gutter-Zone — ohne Kreis, nicht über Karten --- */
body.catalog-product-view .product-upsell .teaser-controls {
    position: absolute !important;
    top: 50% !important;
    left: -48px !important;
    right: -48px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: none !important;
    z-index: 20 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
}
/* Epoq-Widgets: Kartenkörper macht 50% zu tief — leicht nach oben in Richtung Bildmitte */
body.catalog-product-view .product-upsell .epoqWidget .inner-container .teaser-controls {
    top: 40% !important;
    transform: translateY(-50%) !important;
}
/* Slider mit h2 in .inner: unterhalb der h2, dann in Bild-Region */
body.catalog-product-view .product-upsell .inner-container:has(> h2) .teaser-controls {
    top: calc(2.75rem + 40%) !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    max-height: none !important;
    bottom: auto !important;
}
@media (max-width: 1199px) {
    body.catalog-product-view .product-upsell .epoqWidget .inner-container .teaser-controls {
        top: 38% !important;
    }
}
@media (max-width: 767px) {
    body.catalog-product-view .product-upsell .inner-container:has(> h2) .teaser-controls {
        top: calc(2.25rem + 38%) !important;
    }
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble {
    pointer-events: auto !important;
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: opacity 0.2s ease;
    flex-shrink: 0 !important;
    padding: 0 !important;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble .teaser-nav-arrow-left,
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble .teaser-nav-arrow-right,
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble .teaserpfeil {
    display: none !important;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--bs-blue, #00446a);
    border-right: 2px solid var(--bs-blue, #00446a);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    transition: border-color 0.2s ease;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble.prev::after {
    transform: rotate(-135deg);
    margin-left: -4px;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble.next::after {
    transform: rotate(45deg);
    margin-left: -6px;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble:hover {
    background: transparent !important;
    border: none !important;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble:hover::after {
    border-top-color: rgba(0, 68, 106, 0.55) !important;
    border-right-color: rgba(0, 68, 106, 0.55) !important;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble:focus-visible {
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: 2px !important;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble--inactive,
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble--inactive::after,
body.catalog-product-view .product-upsell .teaser-nav-arrow-bubble[aria-disabled="true"]::after {
    border-top-color: #94a8b8 !important;
    border-right-color: #94a8b8 !important;
}
@media (max-width: 767px) {
    body.catalog-product-view .product-upsell .teaser-controls {
        display: none !important;
    }
    /* Epoq „Kunden kauften auch“ / „Das könnte Sie auch interessieren“: Chevrons + eine Karte (kein Peek) */
    body.catalog-product-view .product-upsell .epoqWidget .teaser-controls {
        display: flex !important;
        left: -44px !important;
        right: -44px !important;
        top: 36% !important;
        padding: 0 2px !important;
    }
}

/*
 * Epoq „Kunden kauften auch“ / „Das könnte Sie auch interessieren“ (#epoqWidget1/2):
 * Explizit gegen CRP-spezifische .badshop-slider-Breiten / Flex-Kontext absichern (Theme + Spalten-Overflow).
 */
body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider,
body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Horizontales Innen-Padding 0 (vertikal aus generischer Regel bleibt): sonst clippt der Overflow erst an der
       Padding-Box-Kante → im seitlichen Padding lugte auf Desktop die nächste Karte hervor („angeschnitten“).
       Mit 0 endet der sichtbare Bereich exakt an der letzten Karte → genau N Karten ohne Peek. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content,
body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/*
 * Tablet (768–1199): 3 Spalten ohne Peek — gap 16, card = (100% - 32) / 3.
 * Desktop (≥1200): 5 Spalten — geregelt in der allgemeinen Karten-Regel weiter oben (Z. ~615).
 */
@media (min-width: 768px) and (max-width: 1199px) {
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content,
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content {
        gap: 16px !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content li.product-item,
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content li.product-item {
        flex: 0 0 calc((100% - 32px) / 3) !important;
        width: calc((100% - 32px) / 3) !important;
        margin: 0 !important;
    }
}

/* Epoq: nativer Horizontal-Scroll (epoq-native-scroll.js) — Wisch-Richtung wie CRP „Das passt dazu“ */
body.catalog-product-view .product-upsell .epoqWidget .badshop-slider.epoq-native-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scrollbar-width: none !important;
    outline: none !important;
}
body.catalog-product-view .product-upsell .epoqWidget .badshop-slider.epoq-native-scroll::-webkit-scrollbar {
    display: none !important;
}
body.catalog-product-view .product-upsell .epoqWidget .badshop-slider.epoq-native-scroll .teaser-content {
    transform: none !important;
    transition: none !important;
    min-width: max-content !important;
    width: max-content !important;
    max-width: none !important;
    position: static !important;
    left: auto !important;
}
body.catalog-product-view .product-upsell .epoqWidget .badshop-slider.epoq-native-scroll .teaser-content li.product-item {
    scroll-snap-align: start !important;
}

/* Mobil: Epoq — eine Kachel pro „Seite“ (ID-Selektor = höchste Spezifität, gewinnt gegen alle
 * `.epoqWidget`-Regeln oben und gegen Theme `teaser-m.css`). Padding 0 + Overflow hidden hier
 * NOCHMAL gesetzt, damit das Clipping nicht durch Reihenfolge oder Theme-Reloads kippt. */
@media (max-width: 767px) {
    body.catalog-product-view .product-upsell #epoqWidget1:not(:has(.epoq-native-scroll)),
    body.catalog-product-view .product-upsell #epoqWidget2:not(:has(.epoq-native-scroll)),
    body.catalog-product-view .product-upsell #epoqWidget1:not(:has(.epoq-native-scroll)) .inner-container,
    body.catalog-product-view .product-upsell #epoqWidget2:not(:has(.epoq-native-scroll)) .inner-container {
        overflow: hidden !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1:has(.epoq-native-scroll),
    body.catalog-product-view .product-upsell #epoqWidget2:has(.epoq-native-scroll),
    body.catalog-product-view .product-upsell #epoqWidget1:has(.epoq-native-scroll) .inner-container,
    body.catalog-product-view .product-upsell #epoqWidget2:has(.epoq-native-scroll) .inner-container {
        overflow: visible !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .slider-outer-container,
    body.catalog-product-view .product-upsell #epoqWidget2 .slider-outer-container {
        padding: 0 44px !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider:not(.epoq-native-scroll),
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider:not(.epoq-native-scroll) {
        container-type: inline-size;
        padding: 16px 0 32px 0 !important;
        overflow: hidden !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider.epoq-native-scroll,
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider.epoq-native-scroll {
        container-type: inline-size;
        padding: 16px 0 32px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content,
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content li.product-item,
    body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content li.product-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
@supports (width: 1cqi) {
    @media (max-width: 767px) {
        body.catalog-product-view .product-upsell #epoqWidget1 .badshop-slider .teaser-content li.product-item,
        body.catalog-product-view .product-upsell #epoqWidget2 .badshop-slider .teaser-content li.product-item {
            flex: 0 0 100cqi !important;
            width: 100cqi !important;
            max-width: 100cqi !important;
        }
    }
}

/* Mobil: weniger Leerraum unter dem letzten Epoq-Slider bis zu den Fußnoten.
 * .main-block nutzt contain:layout — untere Ränder von .epoqWidget und Block summieren sich nicht per Margin-Collapse. */
@media (max-width: 767px) {
    /* CRP „Das passt dazu“ → Epoq: weniger Weißraum (vorher 48px + 40px Außenabstand) */
    body.catalog-product-view #custom-related-products {
        margin-top: 16px !important;
        margin-bottom: 12px !important;
    }
    body.catalog-product-view #custom-related-products .badshop-slider .teaser-content {
        padding-bottom: 12px !important;
    }
    body.catalog-product-view .product-upsell.main-block {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }
    body.catalog-product-view .product-upsell.main-block .epoqWidget:last-child {
        margin-bottom: 0 !important;
    }
}

/* ----- CRP Quick-View Popup („Das passt dazu“) — PDP-Stil ----- */

body.catalog-product-view #overlayframe .related_product_view {
    display: grid !important;
    grid-gap: 16px !important;
    padding: 28px 32px 32px !important;
    font-family: 'Quicksand', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    box-sizing: border-box !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-image {
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-image img {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    max-height: 320px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-name {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-name .herstellerlogo {
    margin: 0 0 0 auto !important;
    height: 50px !important;
    max-height: 50px !important;
    max-width: 150px !important;
    width: auto !important;
    object-fit: contain !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-name .crp-product-title {
    flex: 1 1 100% !important;
    margin: 0 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-name .crp-sku {
    display: block !important;
    margin-top: 4px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    letter-spacing: 0.02em !important;
}

body.catalog-product-view #overlayframe .related_product_view .shortdesc {
    display: block !important;
    margin: 0 0 16px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
}

body.catalog-product-view #overlayframe .related_product_view .icons-price.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .icons {
    margin: 0 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #overlayframe .related_product_view .icons.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

body.catalog-product-view #overlayframe .related_product_view .icons .producticon {
    margin: 0 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #overlayframe .related_product_view .icons .producticon img {
    display: block !important;
    width: 40px !important;
    height: 30px !important;
    margin: 0 auto 6px !important;
    filter: brightness(0) saturate(100%) invert(17%) sepia(52%) saturate(2043%) hue-rotate(178deg) brightness(97%) contrast(107%) !important;
}

body.catalog-product-view #overlayframe .related_product_view .hinweis-overlay {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    border: none !important;
    overflow: visible !important;
    margin-top: 22px !important;
}

/* Theme zeichnet UVP-Durchstreichung per ::before (diagonal) — im Popup nur text-decoration */
body.catalog-product-view #overlayframe .related_product_view .pricebox .streichpreis.uvp::before,
body.catalog-product-view #overlayframe .related_product_view .pricebox .streichpreis.uvp::after {
    display: none !important;
    content: none !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .streichpreis.uvp {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: 100% !important;
    text-shadow: none !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--bs-accent-color, #ec6608) !important;
    text-decoration-thickness: 1.5px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .price {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .streichpreis.uvp ~ .price {
    color: var(--bs-accent-color, #ec6608) !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .tax {
    display: block !important;
    margin-top: 4px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    color: var(--bs-blue-gray, #4a6886) !important;
}

/* Rabatt-Badge — orangener Kreis wie PDP: ueberlappt die Ecke des hellblauen Containers */
body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil {
    position: absolute !important;
    top: -16px !important;
    right: -6px !important;
    left: auto !important;
    float: none !important;
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    margin: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil::before,
body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil .arrow {
    display: none !important;
}

body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil .sparen.labelcontent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    padding: 0 4px !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.3) !important;
    box-sizing: border-box !important;
}

body.catalog-product-view #overlayframe .related_product_view .box-tocart {
    margin: 20px 0 12px !important;
}

body.catalog-product-view #overlayframe .related_product_view .box-tocart .actions {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "qty cartbutton" !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .box-tocart .productqty-qty {
    grid-area: qty !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .productqty-qty .moreless {
    position: relative !important;
    border: 1px solid var(--bs-blue, #00446a) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: stretch !important;
    width: 118px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

body.catalog-product-view #overlayframe .related_product_view .productqty-qty .productqty_btn {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
}

body.catalog-product-view #overlayframe .related_product_view .productqty-qty .productqty_btn.qtyminus.is-inactive,
body.catalog-product-view #overlayframe .related_product_view .productqty-qty .productqty_btn.qtyminus:disabled {
    color: #b0cfe0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .productqty-qty .clone-qty {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--bs-blue, #00446a) !important;
}

body.catalog-product-view #overlayframe .related_product_view #product-addtocart-button {
    grid-area: cartbutton !important;
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: 999px !important;
    background: var(--bs-accent-color, #ec6608) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.25) !important;
    height: auto !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body.catalog-product-view #overlayframe .related_product_view #product-addtocart-button:hover {
    background: var(--bs-accent-color-hover, #c96000) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(236, 102, 8, 0.3) !important;
}

body.catalog-product-view #overlayframe .related_product_view #product-addtocart-button .add-to-icons {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

body.catalog-product-view #overlayframe .related_product_view .productdetails {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

body.catalog-product-view #overlayframe .related_product_view .productdetails:hover {
    color: var(--bs-blue-gray, #4a6886) !important;
}

body.catalog-product-view #overlayframe .related_product_view .product-short-data > p {
    margin: 12px 0 0 !important;
}

@media (min-width: 768px) {
    body.catalog-product-view #overlayframe .related_product_view .pricebox {
        padding: 24px !important;
    }

    body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil {
        width: 80px !important;
        height: 80px !important;
        top: -20px !important;
        right: -20px !important;
    }

    body.catalog-product-view #overlayframe .related_product_view .pricebox .rabatt.labelpfeil .sparen.labelcontent {
        width: 80px !important;
        height: 80px !important;
        font-size: 22px !important;
    }
}

@media (min-width: 992px) {
    body.catalog-product-view #overlayframe .related_product_view {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) !important;
        grid-template-areas: "image name" "image data" !important;
    }

    body.catalog-product-view #overlayframe .related_product_view .product-name .crp-product-title {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 991px) {
    body.catalog-product-view #overlayframe .related_product_view {
        grid-template-columns: 1fr !important;
        grid-template-areas: "name" "image" "data" !important;
        padding: 24px 20px 28px !important;
    }

    body.catalog-product-view #overlayframe .related_product_view .icons .producticon {
        display: inline-block !important;
        vertical-align: top !important;
        width: 45% !important;
    }
}

/* ----- CRP Quick-View: Mobil kompakter (Padding, Button, Menge, Lieferzeit, Schriftgroessen) ----- */
@media (max-width: 767px) {
    body.catalog-product-view #overlayframe .related_product_view {
        grid-gap: 12px !important;
        padding: 16px 14px 18px !important;
    }

    /* Artikelname etwas groesser */
    body.catalog-product-view #overlayframe .related_product_view .product-name .crp-product-title {
        font-size: 1.5rem !important;
    }

    /* Uebrige Texte auf 14px */
    body.catalog-product-view #overlayframe .related_product_view .shortdesc,
    body.catalog-product-view #overlayframe .related_product_view .hinweis-overlay,
    body.catalog-product-view #overlayframe .related_product_view .productdetails {
        font-size: 14px !important;
    }
    body.catalog-product-view #overlayframe .related_product_view .shortdesc {
        margin-bottom: 12px !important;
    }

    /* Lieferzeit/Paket: etwas breiter, keine haesslichen Worttrennungen */
    body.catalog-product-view #overlayframe .related_product_view .icons .producticon {
        width: 48% !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
    body.catalog-product-view #overlayframe .related_product_view .icons-price.grid {
        gap: 10px !important;
    }

    /* Preisbox kompakter */
    body.catalog-product-view #overlayframe .related_product_view .pricebox {
        padding: 16px 18px !important;
        margin-top: 18px !important;
    }
    body.catalog-product-view #overlayframe .related_product_view .pricebox .price {
        font-size: 26px !important;
    }

    /* Mengenwahl schmaler */
    body.catalog-product-view #overlayframe .related_product_view .productqty-qty .moreless {
        width: 96px !important;
        height: 38px !important;
        grid-template-columns: 30px minmax(0, 1fr) 30px !important;
        grid-template-rows: 38px !important;
    }

    /* Warenkorb-Button kleiner: passt in eine Zeile statt Kreis-Blob */
    body.catalog-product-view #overlayframe .related_product_view .box-tocart {
        margin: 14px 0 10px !important;
    }
    body.catalog-product-view #overlayframe .related_product_view .box-tocart .actions {
        gap: 10px !important;
    }
    body.catalog-product-view #overlayframe .related_product_view #product-addtocart-button {
        padding: 11px 14px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        gap: 6px !important;
    }
    body.catalog-product-view #overlayframe .related_product_view #product-addtocart-button .add-to-icons {
        width: 16px !important;
        height: 16px !important;
    }
}