/* =============================================================
   v7-perf-cls.css — CLS fixes per PSI 2026-05-23
   -------------------------------------------------------------
   Cel: CLS desktop 0.10 (24% NI, balansuje na progu Good 0.1) → <0.05
   Główne źródła shift:
     1. promo-bar (top green bar) — wczytuje się asynchronicznie / fonts
     2. site-header — height bez explicit reserve
     3. Sticky bar (Customizer 5.5) — appears po hydracji JS
     4. Hero slider — height zmienia się gdy obraz się ładuje
     5. Notyfikacje cookie banner (Complianz) — wstrzyknięcie po DOM ready
   ============================================================= */

/* === 1. PROMO BAR — explicit min-height === */
.promo-bar {
    min-height: 36px;
    box-sizing: border-box;
    contain: layout style;
}
@media (max-width: 768px) {
    .promo-bar { min-height: 32px; }
}

/* === 2. SITE HEADER === */
.site-header {
    min-height: 80px;
    contain: layout style;
}
@media (max-width: 768px) {
    .site-header { min-height: 56px; }
}

/* === 3. SITE NAV (dolny granatowy z "WYBIERZ KATEGORIĘ") === */
.site-nav {
    min-height: 48px;
    contain: layout;
}

/* === 4. HERO SLIDER — explicit aspect-ratio ===
 * v7.1.3: aspect-ratio zmienione z 16/7 (zbyt wysokie) na 1920/700 (=16/5.83)
 * żeby match stage (.hbt-hero-slider-stage ma aspect-ratio:1920/700 !important).
 * Wcześniej: 108px szarej pustej przestrzeni między dolną krawędzią stage
 * a dolną krawędzią container. */
.hbt-hero-slider,
.home-hero,
.hbt-home-slider {
    aspect-ratio: 1920 / 700;
    min-height: 280px;
    contain: layout paint;
}
@media (max-width: 768px) {
    .hbt-hero-slider,
    .home-hero,
    .hbt-home-slider {
        aspect-ratio: 1920 / 700;
        min-height: 180px;
    }
}

/* === 5. STICKY BAR (Customizer 5.5) === */
.hbt-sticky-bar,
[data-hbt-sticky-bar] {
    min-height: 48px;
    contain: layout style;
}

/* === 6. COOKIE BANNER (Complianz) — reserve space === */
.cmplz-cookiebanner {
    contain: layout;
}

/* === 7. WP ADMIN BAR (gdy zalogowany) === */
@media (max-width: 600px) {
    body.admin-bar { padding-top: 0 !important; }
}

/* === 8. WC NOTIFICATION (woocommerce-message itp.) — reserve === */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    contain: layout;
}

/* === 9. CART FLYOUT (6.5 footer) — start hidden, no shift on toggle === */
.hbt-cart-flyout {
    contain: layout style;
    pointer-events: none;
}
.hbt-cart-flyout[aria-hidden="false"] {
    pointer-events: auto;
}

/* === 10. MOBILE BOTTOM BAR — fixed, fixed height === */
.mobile-bottom-bar {
    min-height: 56px;
    contain: layout;
}

/* === 11. IMG bez wymiarów → fallback aspect-ratio === */
img:not([width]):not([height]) {
    aspect-ratio: attr(width) / attr(height);
}
.attachment-woocommerce_thumbnail:not([width]):not([height]),
.wp-post-image:not([width]):not([height]) {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}