/* =========================================================================
   CUSTOM RESPONSIVE BREAKPOINTS (As Requested)
   Mobile:  < 640px
   Tablet:  >= 768px
   Laptop:  >= 1024px
   Desktop: >= 1280px
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. GLOBAL FLUID TYPOGRAPHY & PREMIUM UI SETTINGS
   ------------------------------------------------------------------------- */
:root {
    /* Fluid typography: scales smoothly from 320px to 1280px */
    --fs-h1: clamp(2.2rem, 5vw + 1rem, 4.5rem);
    --fs-h2: clamp(1.8rem, 4vw + 0.5rem, 3.2rem);
    --fs-h3: clamp(1.4rem, 3vw + 0.5rem, 2.4rem);
    --fs-p: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
}

h1 { font-size: var(--fs-h1) !important; line-height: 1.1; }
h2 { font-size: var(--fs-h2) !important; line-height: 1.2; }
h3 { font-size: var(--fs-h3) !important; line-height: 1.3; }
p, .form-control, .sidebar-link { font-size: var(--fs-p); }

/* Enforce perfect aspect ratios on images */
.product-card-image, .hero-section, .banner-image img {
    object-fit: cover !important;
    width: 100%;
}

/* -------------------------------------------------------------------------
   1. MOBILE & SMALL DEVICES (max-width: 639.98px)
   ------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
    /* Premium Spacing (Not too tight, not too loose) */
    .container, .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Touch-Friendly Interactive Elements */
    .btn:not(.btn-link), .sidebar-link, .nav-link, select, .form-control, .qty-btn, .remove-cart-item {
        min-height: 48px !important; /* Min 44px recommended by Apple/Google, using 48px for extra premium feel */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .form-control, select {
        justify-content: flex-start;
    }
    
    /* Prevent horizontal overflow on mobile */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix Swiper buttons and slides on mobile */
    .popular-swiper-container .swiper-button-next { right: 5px !important; }
    .popular-swiper-container .swiper-button-prev { left: 5px !important; }
    .myPopularSwiper .swiper-slide { width: 280px !important; max-width: 85vw !important; }
    
    /* Fix Banner and Action sections on mobile */
    .collection-banner, .banner-content, .banner-image { width: 100% !important; max-width: 100% !important; }
    .action-image { width: 100% !important; max-width: 300px !important; height: auto !important; aspect-ratio: 4/3; }
    
    /* Offcanvas & Sidebars full width */
    #otazenSidebar .sidebar-panel,
    .offcanvas {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Split-screen adjustments (force stack with good spacing) */
    .row.split-screen {
        flex-direction: column !important;
        gap: 2rem;
    }
    
    .col-md-6, .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Swiper / Carousel Padding for Touch */
    .swiper-container {
        padding: 0 15px !important;
    }
}

/* -------------------------------------------------------------------------
   2. TABLET & MEDIUM DEVICES (min-width: 768px and max-width: 1023.98px)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Sidebars */
    #otazenSidebar .sidebar-panel {
        width: 380px !important;
    }
    
    .container {
        max-width: 720px !important;
    }
    
    .btn {
        min-height: 44px !important; /* Standard touch target */
    }
}

/* -------------------------------------------------------------------------
   3. LAPTOP & LARGE DEVICES (min-width: 1024px and max-width: 1279.98px)
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .container {
        max-width: 960px !important;
    }
    
    #otazenSidebar .sidebar-panel {
        width: 420px !important;
    }
}

/* -------------------------------------------------------------------------
   4. DESKTOP & EXTRA LARGE DEVICES (min-width: 1280px)
   ------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px !important;
    }
    
    #otazenSidebar .sidebar-panel {
        width: 480px !important;
    }
    
    .hero-section {
        min-height: 90vh !important;
    }
    
    /* Enhanced breathing room for premium feel */
    .section-title {
        margin-bottom: 4rem !important;
    }
    
    .products-grid {
        gap: 3rem !important;
    }
}