/* ============================================================
   JB-Spielwaren.de — CLS Fix CSS v2
   ============================================================
   Behebt CLS 0,46 (CrUX Mobil).
   Integriert in den Ceres-Fork als eigene CSS-Datei.

   Wird geladen via: resources/views/PageDesign/PageDesign.twig
   ============================================================ */

/* ==========================================================
   1. OWL CAROUSEL SLIDER (widget-cfour-slider-owl-pro)
      GRÖSSTER CLS-VERURSACHER
   ========================================================== */
.widget-cfour-slider-owl-pro {
    min-height: 250px;
    overflow: hidden;
}

/* Mobil (<576px): Slider nimmt volle Breite ein */
@media (max-width: 575.98px) {
    .widget-cfour-slider-owl-pro {
        aspect-ratio: 470 / 614;
        min-height: auto;
    }
    .widget-cfour-slider-owl-pro .owl-stage-outer {
        min-height: inherit;
    }
}

/* Tablet (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .widget-cfour-slider-owl-pro {
        min-height: 400px;
    }
}

/* Desktop (>=992px) */
@media (min-width: 992px) {
    .widget-cfour-slider-owl-pro {
        min-height: 500px;
    }
}

/* Slider-Bilder: immer volle Breite */
.widget-cfour-slider-owl-pro .owl-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================
   2. WEBFONT-STABILISIERUNG (Roboto)
      ZWEITGRÖSSTER CLS-VERURSACHER
   ========================================================== */
@font-face {
    font-family: 'Roboto';
    font-display: optional;
    src: local('Roboto');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-display: optional;
    src: local('Roboto Bold');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-display: optional;
    src: local('Roboto Light');
}

/* ==========================================================
   3. HEADER-STABILISIERUNG
   ========================================================== */
header.fixed-top {
    min-height: 90px;
}

@media (max-width: 767.98px) {
    header.fixed-top {
        min-height: 80px;
    }
}

/* Logo: width/height fixieren */
header.fixed-top img.img-fluid[alt="JB Spielwaren"] {
    width: 157px;
    height: 38px;
}

/* Shopbewertungs-Siegel */
header.fixed-top img[alt*="Shopbewertung"],
header.fixed-top img[alt*="shopbewertung"] {
    width: 50px;
    height: 50px;
    display: inline-block;
}

/* Zweites Trust-Badge */
header.fixed-top .container-max img:not(.img-fluid):not([alt*="Shopbewertung"]):not([alt*="shopbewertung"]) {
    min-width: 50px;
    min-height: 50px;
}

/* Header-Offset reservieren */
#page-header-parent {
    min-height: 90px;
}

@media (max-width: 767px) {
    #page-header-parent {
        min-height: 58px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #page-header-parent {
        min-height: 74px;
    }
}

/* ==========================================================
   4. LOZAD LAZY-LOADING BILDER
   ========================================================== */
picture.lozad > img,
picture.lozad > img.mw-100 {
    display: block;
    width: 100%;
    height: auto;
}

/* --- 3:1 Ratio (alle Breakpoints) --- */
.widget-prop-3-1 picture.lozad,
[class*="widget-prop-"][class*="-3-1"] picture.lozad {
    aspect-ratio: 3 / 1;
    display: block;
    width: 100%;
}

/* --- 2:1 Ratio (alle Breakpoints) --- */
.widget-prop-2-1 picture.lozad,
[class*="widget-prop-"][class*="-2-1"] picture.lozad {
    aspect-ratio: 2 / 1;
    display: block;
    width: 100%;
}

/* --- 1:1 Ratio (alle Breakpoints) --- */
.widget-prop-1-1 picture.lozad,
[class*="widget-prop-"][class*="-1-1"] picture.lozad {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
}

/* --- 3:2 Ratio (alle Breakpoints) --- */
.widget-prop-3-2 picture.lozad,
[class*="widget-prop-"][class*="-3-2"] picture.lozad {
    aspect-ratio: 3 / 2;
    display: block;
    width: 100%;
}

/* ==========================================================
   5. COOKIE-CONSENT-BANNER (CMP)
   ========================================================== */
.cmp.cmp-country-settings {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

/* ==========================================================
   6. CHAT-WIDGET (Superchat)
   ========================================================== */
#superchat-widget-root {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    width: auto !important;
    height: auto !important;
}

/* ==========================================================
   7. PRODUKTSEITEN: Artikelbilder & Thumbnails
   ========================================================== */
.widget-item-image picture.lozad {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
    overflow: hidden;
}

.cmp-product-thumb picture.lozad,
.thumb-content picture.lozad,
.thumb-image picture.lozad {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
    overflow: hidden;
}

.widget-item-list picture.lozad {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
    overflow: hidden;
}

/* ==========================================================
   8. CODE-WIDGETS (Script-/Iframe-Injektionen)
   ========================================================== */
.widget-code {
    contain: content;
}

/* Navigation-Widgets von Containment ausschliessen */
.widget-code:has(#navigation-jb),
.widget-code:has(#main-jb-slide),
.widget-code:has(#close-nav) {
    contain: none;
}

/* ==========================================================
   9. JB-TRACK SLIDER (Custom Slider)
   ========================================================== */
.jb-track {
    aspect-ratio: 4 / 5;
    gap: 0px;
}

.jb-track > [role="listitem"] {
    flex: 0 0 100%;
}

@media (min-width: 720px) {
    .jb-track {
        aspect-ratio: 8 / 5;
        gap: 10px;
    }
    .jb-track > [role="listitem"] {
        flex: 0 0 calc(50% - 5px);
    }
}

@media (min-width: 960px) {
    .jb-track {
        aspect-ratio: 12 / 5;
        gap: 10px;
    }
    .jb-track > [role="listitem"] {
        flex: 0 0 calc(33.333% - 6.666px);
    }
}

.jb-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   10. WIDGET-GRID BILDER STABILISIEREN
   ========================================================== */
.widget-grid .widget-inner img {
    aspect-ratio: auto 2 / 1;
    width: 100%;
    height: auto;
}

/* Kategorie-Grids (4 Bilder in 2x2 Anordnung) haben 1:1 Bilder */
.widget-grid .widget-grid .widget-inner img {
    aspect-ratio: auto 1 / 1;
}

/* ==========================================================
   11. PRODUKT-KARUSSELLS STABILISIEREN
   ========================================================== */
.widget-item-list {
    min-height: 440px;
}

@media (max-width: 767px) {
    .widget-item-list {
        min-height: 350px;
    }
}

/* ==========================================================
   12. REVIEW/TRUST BADGE STABILISIEREN
   ========================================================== */
[class*="sv-rbadge"],
[id*="trustbadge"] {
    contain: layout style;
}

/* ==========================================================
   13. WIDGET-INNER PROPORTIONAL MIN-HEIGHTS
   ========================================================== */
.widget-inner[class*="widget-prop-"][class*="-3-1"] {
    min-height: 160px;
}

.widget-inner[class*="widget-prop-"][class*="-2-1"] {
    min-height: 235px;
}

.widget-inner[class*="widget-prop-"][class*="-1-1"] {
    min-height: 200px;
}

.widget-inner[class*="widget-prop-"][class*="-3-2"] {
    min-height: 160px;
}

/* ==========================================================
   14. ARTIKELSEITE — Condition-Widgets
   ========================================================== */
.page-singleitem .widget-condition [class*="widget-prop"] {
    min-height: 0 !important;
}

/* ==========================================================
   15. BODY-CONTENT MIN-HEIGHT
   ========================================================== */
#page-body > .container-max {
    min-height: 100vh;
}