/*----------------------------------------------------------------------
CLS (Cumulative Layout Shift) Fixes - Phase 1
Target: Reduce CLS from >0.25 to <0.15
----------------------------------------------------------------------*/

/* HDRI Product Images - Prevent layout shifts during loading */
.productImage,
.hdri-thumbnail,
.free-sample-image {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
    background-color: #f5f5f5; /* Placeholder while loading */
}

/* Category listing grids - Reserve space */
.category-items-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.category-items-grid .item {
    min-height: 320px; /* Prevent content jumping */
}

/* Featured products section */
.featured-products .product-item {
    min-height: 350px;
}

.featured-products .product-item img {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Free samples grid stabilization */
.free-samples-container {
    min-height: 400px; /* Reserve initial space */
}

.free-samples-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.free-samples-grid .sample-item {
    min-height: 280px;
}

/* Product detail images */
.item-image-main {
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Prevent text content from jumping */
.item-description,
.product-details {
    min-height: 60px;
}

/* Price containers - prevent layout shifts during discount calculations */
.item-price-container {
    min-height: 30px;
    display: block;
}

/* Breadcrumb stability */
.breadcrumb-container {
    min-height: 25px;
}

/* Loading states to prevent CLS */
.k2Loading {
    min-height: 200px;
    display: block;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .category-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .category-items-grid .item {
        min-height: 250px;
    }
    
    .free-samples-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .free-samples-grid .sample-item {
        min-height: 220px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .category-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    
    .free-samples-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/*----------------------------------------------------------------------
Phase 1 Critical Fixes Complete
Expected CLS Improvement: ~40% (from >0.25 to ~0.15)
----------------------------------------------------------------------*/