/* Cumulative Layout Shift (CLS) Fixes for Umart Website */

/* ========================================
   1. BODY ELEMENT STABILIZATION
   ======================================== */
body {
    /* Prevent font loading shifts */
    font-display: optional;
}

/* Reserve space for content during load */
body::before {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
}

/* ========================================
   2. PROMOTION SECTION FIXES (Major culprit: 0.990 CLS)
   ======================================== */

/* Reserve minimum height for promotion container */
.brands_bg.promotion-bg {
    min-height: 450px;
    contain: layout style paint;
}

#promotion-recommendation {
    min-height: 450px;
}

/* Stabilize promotion images */
.promotion-list .recommendation-img {
    position: relative;
    overflow: hidden;
}

.promotion-list .recommendation-img picture {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
}

.promotion-list .recommendation-img img {
    width: 208px;
    height: 208px;
    display: block;
    object-fit: cover;
}

/* Mobile promotion images */
.promotion-list .recommendation-img .visible-xs-block img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Reserve space for promotion list container */
.promotion-list ul.content {
    min-height: 250px;
}

/* ========================================
   3. UBER REVIEW BANNER FIXES
   ======================================== */

/* Reserve space for Uber banner when it loads */
.ele-banner-uber-review {
    min-height: 100px;
}

.ele-banner-uber-review.hide {
    /* Reserve space even when hidden to prevent shift */
    visibility: hidden;
    height: 100px;
    min-height: 100px;
    margin: 0;
    padding: 0;
}

.ele-banner-uber-review .banner-bg img,
.ele-banner-uber-review .banner-bg-tablet img,
.ele-banner-uber-review .banner-fg img {
    width: 100%;
    height: auto;
    display: block;
}

/* Uber review unit - prevent height changes */
.unit-review {
    content-visibility: auto;
    contain-intrinsic-size: 0 120px;
}

/* ========================================
   4. IMAGE STABILIZATION
   ======================================== */

/* All images should have explicit dimensions */
img:not([width]):not([height]) {
    /* Fallback for images without dimensions */
    display: block;
}

/* IMPORTANT: Make images responsive while preventing CLS */
/* width/height attributes reserve space, CSS makes them scale */
img[width][height] {
    max-width: 100%;
    height: auto;
}

/* Product images */
.goods_img img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    max-width: 100%;
}

.goods_img picture {
    display: block;
    width: 150px;
    height: 150px;
    max-width: 100%;
}

/* Brand images */
.brandbg .goodsimg img {
    max-width: 144px;
    max-height: 80px;
    width: auto;
    height: auto;
}

/* ========================================
   5. PRODUCT LISTS STABILIZATION
   ======================================== */

/* Reserve space for product lists */
.products-list {
    min-height: 400px;
    position: relative;
}

.products-list ul.content {
    min-height: 350px;
}

/* Loading indicator positioning */
#loading_ico_recommend {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* ========================================
   6. MAIN AD CONTAINER
   ======================================== */

/* Reserve space for main banner/ad */
.body-container > div:first-child {
    min-height: 200px;
}

/* ========================================
   7. FONT LOADING OPTIMIZATION
   ======================================== */

/* Use font-display to prevent FOIT (Flash of Invisible Text) */
@font-face {
    font-family: 'graphik';
    font-display: swap;
    size-adjust: 100%;
}

@font-face {
    font-family: 'graphik2';
    font-display: swap;
    size-adjust: 100%;
}

/* ========================================
   8. LAZY LOADING FIXES
   ======================================== */

/* Ensure lazy loaded images have dimensions */
img[loading="lazy"] {
    /* Browser will reserve space based on width/height attributes */
    content-visibility: auto;
}

/* ========================================
   9. BRAND SECTION STABILIZATION
   ======================================== */

.brands_bg {
    min-height: 200px;
}

.brands-list {
    min-height: 150px;
}

/* ========================================
   10. WHAT'S NEW / POPULAR PRODUCTS SECTIONS
   ======================================== */

#what-new,
#what-popular,
#recommendation_products {
    min-height: 500px;
}

.what_new_bg {
    min-height: 500px;
}

/* ========================================
   11. PREVENT CAROUSEL SHIFTS
   ======================================== */

.ele-carousel-review-box {
    min-height: 120px;
}

/* ========================================
   12. UMART MAKES SECTION
   ======================================== */

.umart_make_bg {
    min-height: 400px;
}

.umart_make_bg .white_block {
    min-height: 300px;
}

/* ========================================
   13. RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Tablet */
@media (max-width: 991px) {
    .brands_bg.promotion-bg {
        min-height: 400px;
    }
    
    #promotion-recommendation {
        min-height: 400px;
    }
    
    #what-new,
    #what-popular,
    #recommendation_products {
        min-height: 450px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .brands_bg.promotion-bg {
        min-height: 350px;
    }
    
    #promotion-recommendation {
        min-height: 350px;
    }
    
    .products-list {
        min-height: 300px;
    }
    
    #what-new,
    #what-popular,
    #recommendation_products {
        min-height: 400px;
    }
    
    .promotion-list .recommendation-img img {
        width: 100%;
        height: auto;
    }
    
    .goods_img img {
        width: 120px;
        height: 120px;
    }
    
    .goods_img picture {
        width: 120px;
        height: 120px;
    }
}

/* ========================================
   14. SKELETON LOADER STYLES (Optional Enhancement)
   ======================================== */

.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   15. CSS CONTAINMENT FOR PERFORMANCE
   ======================================== */

/* Apply containment to independent sections */
.brands_bg,
.what_new_bg,
.umart_make_bg,
.get_discount_bg {
    contain: layout style paint;
}

/* Individual product items */
.goods-item {
    contain: layout style;
}

.recommendation-item {
    contain: layout style;
}