/* ===== COMPREHENSIVE RESPONSIVE DESIGN SYSTEM ===== */
/* This file ensures the website works perfectly across all browsers and screen sizes */

/* ===== GLOBAL RESPONSIVE SETTINGS ===== */

/* Ensure proper box-sizing across all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent horizontal scroll on mobile - but allow carousel arrows */
html, body {
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
    width: 100%;
}

/* Allow specific carousel containers to have visible overflow for arrows */
.carousel-container,
.bannerSection,
.occasions-section,
.lookbook-section,
.blog-section {
    overflow-x: visible !important;
}

/* ===== CAROUSEL RESPONSIVE FIXES ===== */
/* All carousel styles handled by unified-carousel.module.css */

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Default Desktop (1600px and above) - Ensure 4-card layout by default */
@media (min-width: 1600px) {
    .filter-content,
    .results-content,
    .products-grid {
        width: 1544px !important; /* Exact width for 4 cards: 4 × 380px + 3 × 8px gaps */
        max-width: 1544px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .products-grid {
        justify-content: flex-start !important; /* Align cards to start since we have exact width */
    }

    .product-card {
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
    }
}

/* Extra Large Desktop (1920px and above) */
@media (min-width: 1920px) {
    .container,
    .design-led-grid {
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 60px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 1624px; /* Exact width for 4 cards: 4 × 400px + 3 × 8px gaps */
        max-width: 1624px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        /* Let CSS Grid handle sizing */
        width: auto;
    }
    

}

/* Large Desktop (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .container,
    .design-led-grid {
        max-width: 1544px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .filter-content,
    .results-content,
    .products-grid {
        width: 1544px; /* Exact width for 4 cards: 4 × 380px + 3 × 8px gaps */
        max-width: 1544px;
        margin: 0 auto;
        padding: 0;
    }

    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }

    .product-card {
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
    }


}

/* Desktop (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .container,
    .design-led-grid {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 30px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 1144px; /* Exact width for 4 cards: 4 × 280px + 3 × 8px gaps */
        max-width: 1144px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }

    .product-card {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
    

}

/* Tablet Landscape (900px - 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
    .container,
    .design-led-grid {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 25px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 904px; /* Exact width for 4 cards: 4 × 220px + 3 × 8px gaps */
        max-width: 904px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
    

    
    /* Header adjustments */
    .header-top {
        padding: 8px 0;
    }
    
    .header-main {
        padding: 15px 0;
    }
    
    .nav-menu {
        gap: 20px;
    }
    
    /* nav-link font-size overridden by main header.css */
}

/* Tablet Portrait (600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    .container,
    .design-led-grid {
        max-width: 600px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 556px; /* Exact width for 3 cards: 3 × 180px + 2 × 8px gaps */
        max-width: 556px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    

    
    /* Header adjustments */
    .header-top {
        padding: 6px 0;
        font-size: 12px;
    }
    
    .header-main {
        padding: 12px 0;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    /* nav-link font-size overridden by main header.css */
    
    /* Filter adjustments */
    .filter-content {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .filter-left,
    .filter-right {
        justify-content: center;
        gap: 8px;
    }
    
    .filter-dropdown {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* Mobile Landscape (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .container,
    .design-led-grid {
        max-width: 480px;
        margin: 0 auto;
        padding: 0 15px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 496px; /* Exact width for 3 cards: 3 × 160px + 2 × 8px gaps */
        max-width: 496px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    

    
    /* Header adjustments */
    .header-top {
        padding: 5px 0;
        font-size: 11px;
    }
    
    .header-main {
        padding: 10px 0;
    }
    
    .nav-menu {
        gap: 10px;
    }
    
    /* nav-link font-size overridden by main header.css */
    
    /* Filter adjustments */
    .filter-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .filter-left,
    .filter-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    .filter-dropdown {
        font-size: 11px;
        padding: 4px 6px;
    }
}

/* Mobile Portrait (320px - 479px) */
@media (min-width: 320px) and (max-width: 479px) {
    .container,
    .design-led-grid {
        max-width: 320px;
        margin: 0 auto;
        padding: 0 10px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 288px; /* Exact width for 2 cards: 2 × 140px + 1 × 8px gap */
        max-width: 288px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    

    
    /* Header adjustments */
    .header-top {
        padding: 4px 0;
        font-size: 10px;
    }
    
    .header-main {
        padding: 8px 0;
    }
    
    .nav-menu {
        gap: 8px;
    }
    
    /* nav-link font-size overridden by main header.css */
    
    /* Filter adjustments */
    .filter-content {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-left,
    .filter-right {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    .filter-dropdown {
        font-size: 10px;
        padding: 3px 5px;
    }
    
    .results-content {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
    .container,
    .design-led-grid {
        max-width: 280px;
        margin: 0 auto;
        padding: 0 5px;
    }
    
    .filter-content,
    .results-content,
    .products-grid {
        width: 248px; /* Exact width for 2 cards: 2 × 120px + 1 × 8px gap */
        max-width: 248px;
        margin: 0 auto;
        padding: 0;
    }
    
    .products-grid {
        justify-content: flex-start; /* Align cards to start since we have exact width */
    }
    
    .product-card {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    

    
    /* Header adjustments */
    .header-top {
        padding: 3px 0;
        font-size: 9px;
    }
    
    .header-main {
        padding: 6px 0;
    }
    
    .nav-menu {
        gap: 6px;
    }
    
    /* nav-link font-size overridden by main header.css */
    
    /* Filter adjustments */
    .filter-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .filter-left,
    .filter-right {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .filter-dropdown {
        font-size: 9px;
        padding: 2px 4px;
    }
}

/* ===== CROSS-BROWSER COMPATIBILITY ===== */

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .product-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Firefox specific fixes */
@supports (-moz-appearance: none) {
    .product-card {
        -moz-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .product-card {
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */

/* Touch-friendly buttons and interactions */
@media (hover: none) and (pointer: coarse) {
    .product-card {
    .filter-dropdown {
        min-height: 44px; /* Apple's recommended minimum touch target */
    }
    
    .product-wishlist,
    .wishlist-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .add-to-bag-btn {
        min-height: 44px;
        padding: 12px 24px;
    }
}

/* ===== HIGH DPI DISPLAY SUPPORT ===== */

/* Retina and high DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-image {
        /* High DPI optimizations handled by unified-carousel.module.css */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .product-card {
        border: 2px solid #000;
    }
    
    .filter-dropdown {
        border: 1px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .header-container,
    .filter-bar,
    .floating-whatsapp {
        display: none;
    }
    
    .product-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Hardware acceleration for smooth animations */
.product-card,
/* .carousel-product - handled by unified-carousel.module.css */
.filter-dropdown {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

/* ===== FALLBACKS FOR OLDER BROWSERS ===== */

/* Fallback for browsers that don't support CSS Grid */
@supports not (display: grid) {
    .products-grid {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Fallback for browsers that don't support Flexbox */
@supports not (display: flex) {
    .filter-content,
    .results-content {
        display: block;
        text-align: center;
    }
    
    .filter-left,
    .filter-right {
        display: inline-block;
        vertical-align: top;
    }
}