/*======================================
CLS (Cumulative Layout Shift) FIXES
für sarap.online - Atomion Child Theme
Stand: Dezember 2024

Diese Fixes adressieren die CLS-Probleme,
die im PageSpeed Insights Report identifiziert wurden.
======================================*/

/* ============================================
   1. PRODUKTBILDER - Aspect Ratio reservieren
   ============================================ */

/* Produktbilder im Grid (Kategorie/Shop-Seiten) */
.woocommerce ul.products li.product .product-image-wrapper {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

.woocommerce ul.products li.product .product-image-wrapper img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Fallback für ältere Browser ohne aspect-ratio Support */
@supports not (aspect-ratio: 1 / 1) {
    .woocommerce ul.products li.product .product-image-wrapper {
        padding-bottom: 100%; /* 1:1 ratio */
        height: 0;
    }
    
    .woocommerce ul.products li.product .product-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* ============================================
   2. KATEGORIE HEADER-BILD
   ============================================ */

/* Das Hero-Bild auf Kategorie-Seiten */
/* Das Hero-Bild auf Kategorie-Seiten */
.term-description > p:first-child img,
.woocommerce-products-header .term-description img:first-of-type {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ============================================
   3. HEADER - Feste Höhen reservieren
   ============================================ */

/* Top Bar -- auf Mobile PDP ausgeblendet (style.css), kein Platz reservieren */
.top-bar {
    min-height: 40px;
}

.single-product .top-bar {
    min-height: 0;
}

/* Main Header */
#header,
.header {
    min-height: 70px;
}

@media screen and (min-width: 951px) {
    #header,
    .header {
        min-height: 100px;
    }
}

/* Logo Container */
.site-branding,
.header-logo {
    min-height: 50px;
}

.site-branding img,
.header-logo img,
.custom-logo {
    height: auto;
    max-height: 60px;
}

/* ============================================
   4. NAVIGATION - Verhindern von Shifts
   ============================================ */

/* Desktop Navigation */
#desktop-navigation {
    min-height: 50px;
}

/* Mobile Navigation Toggle */
.mobile-menu-toggle,
.hamburger-menu {
    min-width: 44px;
    min-height: 44px;
}

/* ============================================
   5. MINI-WARENKORB
   ============================================ */

.cart-item,
.mini-cart-wrapper {
    min-width: 40px;
    min-height: 40px;
}

.cart-contents-count,
.atomion-mini-cart-count {
    min-width: 18px;
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   6. SUCHFELD (FiboSearch)
   ============================================ */

.dgwt-wcas-search-wrapp,
.fibosearch-container,
.header-search-wrapper {
    min-height: 40px;
}

.dgwt-wcas-search-wrapp input[type="search"] {
    min-height: 40px;
}

/* Autocomplete Dropdown - Als Overlay, nicht als Layout-Shift */
.dgwt-wcas-suggestions-wrapp {
    position: absolute !important;
}

/* ============================================
   7. POPUPS & MODALS - Overlay ohne Shift
   ============================================ */

/* Login/Register Modal */
.atomion-login-modal,
.xoo-el-modal,
[class*="login-modal"],
[class*="register-modal"] {
    position: fixed !important;
}

/* ============================================
   8. BREADCRUMBS
   ============================================ */

/* Breadcrumbs -- auf Mobile PDP ausgeblendet (style.css) */
#atomion-breadcrumbs,
.woocommerce-breadcrumb {
    min-height: 30px;
}

.single-product #atomion-breadcrumbs {
    min-height: 0;
}

/* ============================================
   9. PRODUKTLISTE META (Preis, Titel, etc.)
   ============================================ */

.woocommerce ul.products li.product .site-product-meta {
    min-height: 120px; /* Reserviert Platz für Titel + Preis + Lieferzeit */
}

/* Produkttitel */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 2.4em; /* ~2 Zeilen */
    line-height: 1.2;
}

/* Preis Container */
.woocommerce ul.products li.product .price {
    min-height: 1.5em;
}

/* German Market Info (Lieferzeit, Versand, etc.) */
.woocommerce ul.products li.product .wgm-info {
    min-height: 1.2em;
}

/* ============================================
   10. PAGINATION
   ============================================ */

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
    min-height: 40px;
}

/* ============================================
   11. SIDEBAR / FILTER
   ============================================ */

.widget,
.sidebar .widget {
    min-height: 50px;
}

/* FiboFilters */
.prdctfltr_woocommerce {
    min-height: 40px;
}

/* ============================================
   12. FOOTER
   ============================================ */

/* footer-action-bar ist per style.css display:none, kein Platz nötig */

footer#colophon,
.site-footer {
    min-height: 200px;
}

/* ============================================
   13. LAZY LOADING IMAGES
   ============================================ */

/* Alle lazy-loaded Bilder mit Platzhalter */
img[loading="lazy"] {
    background-color: #f5f5f5;
}

/* Spezifisch für Produktbilder */
.woocommerce ul.products li.product img[loading="lazy"] {
    aspect-ratio: 1 / 1;
}

/* ============================================
   14. WEB FONTS - Prevent FOUT
   ============================================ */

/* Font-display ist bereits im Theme auf 'fallback' gesetzt.
   Falls trotzdem Shifts auftreten, kann man size-adjust nutzen: */

/*
@font-face {
    font-family: 'SourceSansPro-fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}
*/

/* ============================================
   15. TRUSTED SHOPS BADGE
   ============================================ */

/* Trustbadge SOFORT als fixed positionieren (Desktop + Mobile),
   bevor das async Script den Container befuellt */
#trustbadge-container,
[id^="trustbadge-container"],
[id*="trustbadge"] {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 999998 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    contain: layout style size !important;
}

/* Cookie Banner hoeher als Trustbadge */
.cli-modal-container,
.cli-bar-container,
#cookie-law-info-bar,
.cli-modal-backdrop {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}


/* ============================================
   15b. STICKY ATC BAR
   ============================================ */

@media screen and (min-width: 1001px) {
    #sticky-atc-bar { display: none !important; }
}
@media screen and (max-width: 1000px) {
    body.single-product { padding-bottom: 70px !important; }
}

/* ============================================
   16. COOKIE CONSENT BANNER
   ============================================ */

#cc-cookie-message,
.gdpr-cookie-consent,
[class*="cookie-banner"] {
    position: fixed !important;
    bottom: 0;
    contain: layout style;
}

/* ============================================
   17. CONTAIN FÜR PERFORMANCE
   ============================================ */

/* Produkt-Karten isolieren für bessere Performance */
.woocommerce ul.products li.product {
    contain: layout style;
}

/* Header isolieren -- NICHT bei sticky, sonst bricht position:sticky */
#header:not(.sticky-active):not(:has(.sticky)) {
    contain: layout style;
}

/* ============================================
   18. MOBILE SPECIFIC FIXES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Mobile Header */
    #header,
    .header {
        min-height: 60px;
    }
    
    /* Mobile Produktbilder */
    .woocommerce ul.products li.product .product-image-wrapper {
        aspect-ratio: 1 / 1;
    }
    
    /* Mobile Meta */
    .woocommerce ul.products li.product .site-product-meta {
        min-height: 100px;
    }
}

@media screen and (max-width: 480px) {
    #header,
    .header {
        min-height: 55px;
    }
    
    .woocommerce ul.products li.product .site-product-meta {
        min-height: 90px;
    }
}

/* ============================================
   19. NAVIGATION MENU ITEMS - Prevent Shift
   ============================================ */

/* Menü-Items mit Dropdowns stabilisieren */
#desktop-navigation .menu-item-has-children,
.main-navigation .menu-item-has-children {
    min-width: auto;
    visibility: visible;
}

#desktop-navigation .menu-item,
.main-navigation .menu-item {
    display: inline-block;
}