/**
 * CLS Fix Styles
 *
 * Zapobiega layout shifts poprzez rezerwację przestrzeni.
 * External file zgodnie z WP-06 (inline styles zakazane).
 *
 * @version 2.0.0
 * @package igameble
 */

/* ============================================
   RESERVED HEIGHTS - Zapobiega CLS
   ============================================ */

/* Sticky header reserved height */
.header-main {
    min-height: 70px;
}

@media (max-width: 990px) {
    .header-main {
        min-height: 60px;
    }
}

/* Promo bar reserved height */
.promo-bar {
    min-height: 40px;
}

/* Cookie banner placeholder */
.cookie-banner-placeholder,
#cky-consent-container {
    min-height: 0;
}

/* Mobile nav overlay - nie rezerwuj gdy ukryte */
.mobile-nav-overlay[hidden] {
    display: none;
}

/* ============================================
   FONT DISPLAY - Zapobiega FOUT
   ============================================ */

/* Fallback font stacking - unikamy FOIT */
body {
    font-family: 'Helvetica', Arial, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   IMAGE PLACEHOLDERS - Zapobiega CLS
   ============================================ */

/* Wszystkie obrazy muszą mieć aspect ratio */
img {
    height: auto;
    max-width: 100%;
}

/* Obrazy z lazy loading */
img[loading="lazy"] {
    min-height: 1px;
    background-color: #f5f5f5;
}

/* Product images - aspect ratio */
.woocommerce-product-gallery__image img,
.attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Category thumbnails */
.product-category img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Homepage hero - fixed aspect ratio */
.split-hero-img {
    aspect-ratio: 900 / 375;
    object-fit: cover;
}

@media (max-width: 768px) {
    .split-hero-img {
        aspect-ratio: 480 / 200;
    }
}

/* Section images */
.section-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ============================================
   LAYOUT STABILITY
   ============================================ */

/* Breadcrumbs bar */
.breadcrumbs-bar {
    min-height: 60px;
}

/* Search bar - collapsed state */
.desktop-search-bar[style*="display: none"],
.mobile-search-bar[hidden] {
    min-height: 0;
    height: 0;
    overflow: hidden;
}

/* Search bar - expanded */
.desktop-search-bar:not([style*="display: none"]) {
    min-height: 60px;
}

/* ============================================
   GRID STABILITY - Zapobiega reflow
   ============================================ */

/* Product grid - fixed columns */
.products {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Product card - min height */
.products .product {
    min-height: 350px;
}

/* ============================================
   BUTTON/CTA STABILITY
   ============================================ */

/* Add to cart button - reserved space */
.add_to_cart_button,
.single_add_to_cart_button {
    min-height: 44px; /* WCAG touch target */
    min-width: 120px;
}

/* Quantity selector */
.quantity input[type="number"] {
    width: 60px;
    min-height: 44px;
}

/* ============================================
   MOBILE NAVIGATION STABILITY
   ============================================ */

/* Mobile burger - fixed size */
.mobile-burger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* Mobile bottom bar (if enabled) */
.mobile-bottom-bar {
    min-height: 60px;
}

/* Cart icon with counter - rozmiary w style.css */
/* Wishlist icon - rozmiary w style.css */

/* ============================================
   FOOTER STABILITY
   ============================================ */

.footer-widgets {
    min-height: 200px;
}

.footer-bottom {
    min-height: 50px;
}

/* ============================================
   SIDEBAR STABILITY
   ============================================ */

.shop-sidebar {
    min-width: 250px;
}

@media (max-width: 990px) {
    .shop-sidebar {
        min-width: 100%;
    }
}

/* ============================================
   PREVENT CUMULATIVE SHIFTS
   ============================================ */

/* Disable animations on initial load */
.no-js *,
.loading * {
    animation: none !important;
    transition: none !important;
}

/* Smooth scroll only when reduced motion is not preferred */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Prevent content jump from scrollbar */
html {
    scrollbar-gutter: stable;
}