/* ============================================================
   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;
}

/* Header-Container: stabile Höhe, kein Sprung bei static→absolute */
.header-container {
    min-height: 98px;  /* top-bar(31) + widget(67) */
}

/* Header-Container Widgets: sofort absolute, volle Breite, über Top-Bar
   NUR ab Tablet aufwärts — auf Mobile lässt HeaderScroller.js + cerescoconut
   das Layout korrekt berechnen (Suche mit position:absolute + top:60px). */
@media (min-width: 768px) {
    .header-container > .widget {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 101 !important;   /* über Top-Bar (z-index:100), damit Logo sichtbar bleibt */
        transition: top 0.2s ease; /* sanftes Gleiten statt Sprung */
    }
}

/* Logo: Seitenverhältnis beibehalten, nicht strecken */
header.fixed-top img.img-fluid[alt="JB Spielwaren"] {
    width: auto;
    height: auto;
    max-height: 38px;
    max-width: 100%;
    object-fit: contain;
}

/* Logo-Spalte: vertikal zentrieren (nur die erste col im Logo-Widget) */
header.fixed-top .header-container .widget .row > .col-4:first-child {
    display: flex;
    align-items: center;
}

/* Suche: Höhe sicherstellen */
header.fixed-top .header-container .widget .row > .col-4:nth-child(2) {
    min-height: 28px;
}

/* 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: 98px;  /* top-bar(31) + widget(67), HeaderScroller.js rechnet den Rest */
    }
}

@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 — Widget-Grids in der Detailspalte
       Auf Produktseiten enthalten verschachtelte Grids oft nur
       kurze Infos (Verfügbarkeit, Teileanzahl, Alter).
       Die globalen min-heights aus Abschnitt 13 sind dort zu groß.
   ========================================================== */
.page-singleitem .widget-condition [class*="widget-prop"] {
    min-height: 0 !important;
}

/* Alle verschachtelten Grids innerhalb der Sticky-Detailspalte */
.page-singleitem .widget-sticky .widget-two-col .widget-inner[class*="widget-prop"] {
    min-height: 0 !important;
}

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

/* ==========================================================
   16. PRODUKTDETAILSEITE — Mobil CLS-Fixes
       Behebt CLS 0,51 auf Produktseiten (alle Sprachen).
       Hauptursache: MagicZoom-Produktbild, Owl-Thumbnails
       und Preis/Warenkorb-Bereich laden ohne reservierten Platz.
   ========================================================== */

/* --- 16a. MagicZoom Hauptbild: Platz reservieren --- */
.single .mz-figure,
.page-singleitem .mz-figure {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
    overflow: hidden;
    contain: layout style;
}

/* Bild innerhalb MagicZoom: immer volle Container-Breite */
.single .mz-figure img,
.page-singleitem .mz-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lightbox (MagicZoom Expand): CLS-Regeln zurücksetzen */
.mz-expand .mz-figure {
    aspect-ratio: unset !important;
    contain: none !important;
    overflow: visible !important;
    display: inline-block !important; /* statt block, damit text-align:center greift */
    width: auto !important;           /* statt 100%, Figure umschließt nur das Bild */
}

.mz-expand .mz-figure img {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

/* --- 16b. Produktbild-Bereich (linke Spalte, Top-Level Widget-Grid) --- */
/* Nur das erste .widget-two-col auf der Seite, NICHT verschachtelte Grids
   innerhalb von .widget-condition oder anderen Widget-Containern */
.page-singleitem > .container-max .widget-two-col:first-of-type > .widget-inner:first-child {
    min-height: 300px;
}

@media (max-width: 767.98px) {
    .page-singleitem > .container-max .widget-two-col:first-of-type > .widget-inner:first-child {
        min-height: 280px;
    }
}

@media (min-width: 768px) {
    .page-singleitem > .container-max .widget-two-col:first-of-type > .widget-inner:first-child {
        min-height: 400px;
    }
}

/* Condition-Widgets: Verschachtelte Grids dürfen KEIN aspect-ratio erben */
.page-singleitem .widget-condition .widget-two-col > .widget-inner {
    aspect-ratio: unset !important;
    min-height: 0 !important;
}

/* --- 16c. Owl-Carousel Thumbnail-Leiste (Produktbilder) --- */
.single .owl-thumbs,
.page-singleitem .owl-thumbs {
    min-height: 80px;
    overflow: hidden;
}

.single .owl-thumbs .owl-item,
.page-singleitem .owl-thumbs .owl-item {
    min-height: 70px;
}

.single .owl-thumbs .owl-item img,
.page-singleitem .owl-thumbs .owl-item img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- 16d. Produktdetails rechte Spalte (Top-Level Widget-Grid) --- */
.page-singleitem > .container-max .widget-two-col:first-of-type > .widget-inner:last-child {
    min-height: 250px;
}

@media (max-width: 767.98px) {
    .page-singleitem > .container-max .widget-two-col:first-of-type > .widget-inner:last-child {
        min-height: 200px;
    }
}

/* --- 16e. Add-to-Basket Widget stabilisieren --- */
.page-singleitem .widget-add-to-basket {
    min-height: 50px;
}

/* --- 16f. Verfügbarkeits-Widget stabilisieren --- */
.page-singleitem .widget-availability {
    min-height: 24px;
}

/* --- 16g. Preis-Widget stabilisieren --- */
.page-singleitem .widget-item-price {
    min-height: 60px;
}

/* --- 16h. Nur Top-Level Produktdetail-Grid auf Mobil --- */
@media (max-width: 767.98px) {
    .page-singleitem > .container-max .widget-two-col:first-of-type {
        min-height: 500px;
    }
    /* Verschachtelte Grids (Condition-Widgets etc.): kein min-height */
    .page-singleitem .widget-condition .widget-two-col {
        min-height: 0 !important;
    }
}

/* ==========================================================
   17. PRODUKTDETAILSEITE — Allgemeine Bild-Stabilisierung
       Alle Bilder auf Produktseiten ohne width/height-Attribute
       erhalten ein Fallback aspect-ratio.
   ========================================================== */

/* Produktseiten-Bilder die via Vue geladen werden */
.single img:not([width]):not([height]),
.page-singleitem img:not([width]):not([height]) {
    height: auto;
}

/* Produktbild-Carousel: Hauptbilder immer quadratisch */
.single .owl-single-item img,
.page-singleitem .owl-single-item img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================================
   18. STARTSEITE / KATEGORIESEITE — Mobil CLS-Nachbesserung
       Behebt CLS 0,22 auf Startseite (DE/EN).
       Ergänzende Regeln für mobilen Viewport.
   ========================================================== */
@media (max-width: 767.98px) {
    /* Kategorie-Listen: Container stabilisieren */
    .widget-item-list .owl-stage-outer {
        min-height: 300px;
    }

    /* Widget-Grids auf Mobil: min-height reduzieren */
    .widget-grid .widget-inner {
        min-height: 0;
    }

    /* Breadcrumb-Bereich: Platz reservieren */
    .breadcrumbs,
    .breadcrumb {
        min-height: 25px;
    }
}

/* ==========================================================
   19. PRODUKTSEITE — Beschreibungsbereich CLS-Fix
       PSI-Analyse zeigt: .col-12.col-md-7 (Beschreibungsspalte)
       verursacht CLS 0,40 auf FR und 0,185 auf DE (Mobil).
       Grund: Tabs (Description/Details/Fabricant) werden durch
       Vue.js erst spät gerendert, was alles darunter verschiebt.
   ========================================================== */

/* Beschreibungs-Tabs-Container: min-height reservieren */
.single.page-content > .row > .col-12.col-md-7:last-of-type,
.page-singleitem .page-content > .row > .col-12.col-md-7:last-of-type {
    min-height: 400px;
}

@media (max-width: 767.98px) {
    .single.page-content > .row > .col-12.col-md-7:last-of-type,
    .page-singleitem .page-content > .row > .col-12.col-md-7:last-of-type {
        min-height: 300px;
    }
}

/* Produkt-Info-Spalte (Preis/Warenkorb): min-height reservieren */
.single.page-content > .row > .col-12.col-md-5,
.page-singleitem .page-content > .row > .col-12.col-md-5 {
    min-height: 350px;
}

@media (max-width: 767.98px) {
    .single.page-content > .row > .col-12.col-md-5,
    .page-singleitem .page-content > .row > .col-12.col-md-5 {
        min-height: 280px;
    }
}

/* Preis-Container: contain verhindern dass späteres Laden den Shift auslöst */
.page-singleitem .has-crossprice,
.single.page-content .has-crossprice {
    min-height: 45px;
}

/* ==========================================================
   20. COOKIE-CONSENT-BAR — CLS absichern
       Die plentymarkets Cookie-Bar (.cookie-bar) muss immer
       fixed bleiben, damit sie keinen Content-Shift verursacht.
   ========================================================== */
.cookie-bar,
.widget-cookie-bar .cookie-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

/* Widget-Container der Cookie-Bar: kein Platz im Flow reservieren */
.widget-cookie-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 1030 !important;
}

/* ==========================================================
   21. PRODUKTSEITE — Beschreibungsbilder (lego.com) stabilisieren
       Bilder in der Produktbeschreibung von lego.com haben
       keine width/height-Attribute. Fallback aspect-ratio setzen.
   ========================================================== */
.page-singleitem .tab-content img:not([width]):not([height]),
.single.page-content .tab-content img:not([width]):not([height]) {
    aspect-ratio: auto 1 / 1;
    max-width: 100%;
    height: auto;
}

/* Beschreibungsbilder mit max-height inline-style */
.page-singleitem .tab-content img[style*="max-height"],
.single.page-content .tab-content img[style*="max-height"] {
    aspect-ratio: auto 4 / 3;
    width: 100%;
    height: auto;
}