/* ==========================================================================
   Correctifs de responsivité & Design Créatif - Gouabo
   ========================================================================== */

:root {
    --accent-color: #10b981;
    --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --bg-soft: #f9fafb;
    --text-main: #111827;
    --text-muted: #6b7280;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* 1. Global & Spacing */
@media (max-width: 575px) {
    body {
        padding-top: 0 !important;
    }
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .section__head {
        margin-bottom: 15px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .pt-30 { padding-top: 25px !important; }
    .pb-20 { padding-bottom: 15px !important; }
}

    /* 2. Header & Navigation */
@media (max-width: 1199px) {
    .header__info-right .header__search {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .header__info-left .logo img {
        width: 80px !important;
        height: auto !important;
    }
    .header__area {
        padding: 5px 0 !important;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .header__info-right {
        gap: 6px !important;
    }
    .notification__toggle, .cart__toggle {
        font-size: 15px !important;
        width: 32px !important;
        height: 32px !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #334155 !important;
    }
    .notification__toggle .notification__count,
    .cart__toggle .cart__count {
        font-size: 9px !important;
        min-width: 14px !important;
        height: 14px !important;
        line-height: 14px !important;
        top: -4px !important;
        right: -4px !important;
    }
    .offcanvas-toggle-btn {
        margin-right: 5px !important;
        font-size: 18px !important;
    }
    .account-icon {
        font-size: 18px !important;
        color: #334155 !important;
    }

    /* Optimisation de la barre de recherche sur mobile */
    .offcanvas__search input {
        border-radius: 30px !important;
        padding-left: 20px !important;
        border: 1px solid #e2e8f0 !important;
    }
    .offcanvas__search button[type="submit"] {
        border-radius: 30px !important;
        width: 40px !important;
        height: 40px !important;
    }
    .cart__mini, .notification__mini {
        width: 290px !important;
        right: -10px !important;
    }
}

/* 3. Creative Titles */
@media (max-width: 767px) {
    .section__title.creative-title h3 {
        font-size: 20px !important;
        padding-left: 15px !important;
    }
    .section__title.creative-title h3::before {
        height: 22px !important;
        width: 4px !important;
    }
    .btn-view-all-modern {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* 4. Hero Slider */
@media (max-width: 1199px) {
    .slider__area .custom-col-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
@media (max-width: 767px) {
    .slider__inner, .single-slider {
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .single-slider img {
        aspect-ratio: 16/9;
        object-fit: cover;
    }
}

/* 5. Features Grid - Hidden on Mobile/Tablet */
@media (max-width: 1199px) {
    .features__area {
        display: none !important;
    }
}

    /* 6. Product Grid (2 columns on mobile by default, scrollable for specific sections) */
@media (max-width: 575px) {
    /* Grilles OnSale et Catégories - Par défaut on garde 2 colonnes pour certaines sections */
    .on-sale-grid-2rows,
    .product-grid-custom-NOT-SCROLLABLE, /* Pour garder l'ancienne grille si besoin */
    .product__desktop-slider-3 .row:not(.horizontal-scroll),
    .shop-by-category-grid:not(.horizontal-scroll) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* Nouvelle approche : Défilement horizontal fluide (Snap Scroll) */
    .horizontal-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding: 5px 5px 15px 5px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        -webkit-overflow-scrolling: touch;
        margin-left: -5px; /* Compense le padding pour s'aligner sur les bords */
        margin-right: -5px;
    }
    .horizontal-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .horizontal-scroll > div,
    .horizontal-scroll > .product-card-container {
        flex: 0 0 165px !important; /* Largeur fixe pour mobile */
        width: 165px !important;
        scroll-snap-align: start;
        padding: 0 !important;
    }

    /* Indicateur de défilement discret */
    .horizontal-scroll::after {
        content: '';
        flex: 0 0 10px;
    }

    .on-sale-grid-2rows > div,
    .product-grid-custom > div,
    .product-card-container,
    .product__desktop-slider-3 .col-xl-3,
    .product__desktop-slider-3 .col-lg-3,
    .shop-by-category-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        flex: none !important;
    }

    /* Product Card adjustments for small grid */
    .modern-card .product__thumb {
        height: 160px !important;
    }
    .modern-card .product__content {
        padding: 8px !important;
    }
    .modern-card .product-name a {
        font-size: 12px !important;
        height: 32px !important;
        -webkit-line-clamp: 2;
    }
    .modern-card .main-price {
        font-size: 13px !important;
    }
    .modern-card .old-price {
        font-size: 10px !important;
    }
    .modern-card .rating {
        display: none !important; /* Gagne de la place sur mobile */
    }
    .badge-discount {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    /* Carrousels forcés en grille sur mobile si nécessaire, ou mieux gérés (Désactivé pour Featured car l'utilisateur veut garder le carousel Owl) */
    /* .owl-carousel.subscription-slider,
    .owl-carousel.featured-slider {
        display: block !important;
    }
    .owl-carousel.subscription-slider .owl-stage-outer,
    .owl-carousel.featured-slider .owl-stage-outer {
        overflow: visible !important;
    }
    .owl-carousel.subscription-slider .owl-stage,
    .owl-carousel.featured-slider .owl-stage {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
    }
    .owl-carousel.subscription-slider .owl-item,
    .owl-carousel.featured-slider .owl-item {
        width: 160px !important;
        margin-right: 10px !important;
        flex: 0 0 auto;
    }
    .owl-nav {
        display: none !important;
    } */
}

/* 7. Category Tabs (Horizontal Scroll) */
@media (max-width: 991px) {
    .category-nav-tabs, .product__nav-tab-3 .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 5px 2px 10px 2px !important;
        scrollbar-width: none; /* Firefox */
        border: none !important;
    }
    .category-nav-tabs::-webkit-scrollbar,
    .product__nav-tab-3 .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .category-nav-tabs .nav-item, .product__nav-tab-3 .nav-item {
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }
    .category-nav-tabs .nav-link, .product__nav-tab-3 .nav-link {
        white-space: nowrap;
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 30px !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        margin-bottom: 0 !important;
    }
    .category-nav-tabs .nav-link.active, .product__nav-tab-3 .nav-link.active {
        background: var(--accent-color) !important;
        color: #fff !important;
        border-color: var(--accent-color) !important;
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    }

    /* Hide the Showcase card on small screens to save space */
    .category-showcase-card {
        display: none !important;
    }
    .modern-grid-container {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
    .category-header {
        margin-bottom: 15px !important;
    }
    .category-main-title {
        font-size: 20px !important;
    }
    .view-all-link {
        display: none !important; /* On garde que le titre et les onglets pour la clarté */
    }
}

/* 8. Banners adjustments */
@media (max-width: 767px) {
    .banner__item {
        margin-bottom: 15px !important;
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .banner__content {
        padding: 20px !important;
    }
    .banner__content h4 {
        font-size: 18px !important;
    }
}

/* 9. Brand Area */
@media (max-width: 575px) {
    .brand__item {
        padding: 15px !important;
    }
    .brand__item img {
        max-width: 70px !important;
        filter: grayscale(0); /* Plus vif sur mobile */
    }
}

/* 10. Floating Add to Cart for Mobile (Optionnel mais recommandé pour le look app) */
@media (max-width: 575px) {
    .modern-card .product__add-btn {
        margin-top: 5px;
    }
    .modern-card .add-to-cart-btn {
        width: 100%;
        padding: 8px !important;
        font-size: 11px !important;
        justify-content: center;
    }
}