/**
 * CLS (Cumulative Layout Shift) Optimization
 *
 * Purpose: Prevent layout shifts during page load while maintaining responsive design
 * Date: November 7, 2025
 * Related: CLS-FIXES-2025-11-07.md
 */

/* ============================================
   1. FONT DISPLAY OPTIMIZATION
   ============================================ */

/* Prevent FOIT (Flash of Invisible Text) */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
}

* {
    font-display: swap;
}


/* ============================================
   2. RESPONSIVE IMAGE FOUNDATION
   ============================================ */

/* Global responsive image reset - prevents images from breaking layout */
img {
    max-width: 100%;
    height: auto;
}

/* Images with explicit width/height remain responsive */
/* Note: This rule is overridden by more specific selectors below */
img[width][height] {
    max-width: 100%;
    height: auto;
}


/* ============================================
   3. PRODUCT & CATEGORY IMAGES
   ============================================ */

/* Banner containers - allow height to be determined by image content */
.banner-box,
.banner-box .banner-inner,
.banner-box .banner-image {
    height: auto !important; /* Override main.css height: 100% */
    min-height: 0 !important; /* Remove any min-height constraints */
    max-height: none !important; /* Remove any max-height constraints */
}

/* Banner images - responsive, maintain aspect ratio, no cropping */
.banner-image img {
    width: 100%;
    height: auto !important; /* Ensure auto height for aspect ratio */
    max-width: 100%;
    display: block;
}

/* Product gallery/page main image - full width in its container */
.product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product listing thumbnails - responsive, maintain natural aspect ratio */
.product-image--holder img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================
   4. HERO SLIDER & BANNERS
   ============================================ */

/* Hero slider images - full width responsive */
.home-slider img,
.img-responsive {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.mainbanner img {
    width: 100% !important;
    height: auto !important;
    display: block;
}


/* ============================================
   5. LOGOS
   ============================================ */

/* Base logo styles */
.logo--normal img,
.logo--transparency img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Mobile logo sizing */
@media (max-width: 991px) {
    .logo-box img {
        max-width: 150px;
        height: auto;
    }
}

/* Desktop logo sizing */
@media (min-width: 992px) {
    .logo-box img {
        max-width: 200px;
        height: auto;
    }
}


/* ============================================
   6. ICONS & SMALL IMAGES
   ============================================ */

/* Feature icons - fixed sizing for consistency */
.col.sp img {
    width: 70px;
    height: 70px;
}

/* Brand logos on product cards */
.product-brand img {
    max-width: 80px;
    height: auto;
}


/* ============================================
   7. SHOPPING CART
   ============================================ */

/* Cart product thumbnails - fixed size with cover fit */
.mini-cart__product__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}


/* ============================================
   8. COLOR PALETTES
   ============================================ */

/* Color palette preview images */
[palette-content] img {
    width: 100%;
    height: auto;
}

/* Color sample thumbnails in modal */
[palette-content] .col-md-2 img,
[palette-content] .col-6 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ============================================
   9. MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767px) {
    /* Ensure product images don't overflow on small screens */
    .product-image img {
        max-width: 100%;
        height: auto;
    }

    /* Adjust banner images for mobile */
    .banner-image img {
        width: 100%;
        height: auto;
    }

    /* Mobile cart thumbnails */
    .mini-cart__product__image img {
        width: 60px;
        height: 60px;
    }
}


/* ============================================
   10. TABLET OPTIMIZATIONS
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet-specific adjustments */
    .product-image--holder img {
        width: 100%;
        height: auto;
    }
}


/* ============================================
   11. CATEGORY PAGE - CHILD CATEGORIES LAYOUT FIX
   ============================================ */

/* Fix for category child pages (like PVC doors subcategories) */
/* Prevents jumping and ensures proper alignment */

.s9YuoM2Be1 .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Makes all items same height per row */
}

.s9YuoM2Be1 .col-md {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem; /* Space between rows */
}

.s9YuoM2Be1 .banner-box {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the column height */
    /* No min-height - let content determine size naturally */
}

.s9YuoM2Be1 .banner-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.s9YuoM2Be1 .banner-image {
    flex: 0 0 auto; /* Don't grow/shrink */
    overflow: hidden;
    /* No background - keep it transparent */
}

.s9YuoM2Be1 .banner-box.banner-hover-1 .banner-image img {
    width: 100% !important; /* Override width: auto from main.css */
    height: auto !important; /* Override height: 300px from main.css */
    display: block;
    object-fit: contain; /* Show full image without cropping */
    max-height: 350px !important; /* Reasonable size limit */
    margin: 0 auto;
}

.s9YuoM2Be1 .banner-box.banner-type-3 .banner-info {
    flex: 1 1 auto; /* Take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 0;
    margin-bottom: 0 !important; /* Override 60px from main.css */
    position: static !important;
}

.s9YuoM2Be1 .banner-title-2 {
    margin-bottom: 0.5rem;
    /* No min-height - let text flow naturally */
}

/* Enhanced responsive breakpoints */
/* Mobile: 1 column */
@media (max-width: 574px) {
    .s9YuoM2Be1 .col-md {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* Tablet: 2 columns */
@media (min-width: 575px) and (max-width: 991px) {
    .s9YuoM2Be1 .col-md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 3%;
    }

    .s9YuoM2Be1.container-fluid {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Desktop: 3 columns */
@media (min-width: 992px) {
    .s9YuoM2Be1 .col-md {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding: 0 2%;
    }
}


/* ============================================
   12. PRINT STYLES (bonus)
   ============================================ */

@media print {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}