/* Best Sellers Grid Responsive Layout */

/* Best Sellers Scroll Wrapper */
.best-sellers-scroll-wrapper {
    position: relative;
    overflow: visible;
}

/* Desktop: Show 5 columns (10 products in 2 rows) */
.products-grid-6 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Tablet: Show 3 columns */
@media (min-width: 481px) and (max-width: 768px) {
    .products-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: Show 2 cards per slide with horizontal scroll - EXACTLY like Most Popular */
@media (max-width: 768px) {
    .best-sellers-scroll-wrapper {
        position: relative;
        overflow: visible;
    }

    .products-grid-6 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
        grid-template-columns: none !important;
        scroll-behavior: smooth;
    }

    .products-grid-6 .product-card-new {
        min-width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
        scroll-snap-align: start !important;
    }

    /* Scrollbar styling */
    .products-grid-6::-webkit-scrollbar {
        height: 4px;
    }

    .products-grid-6::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .products-grid-6::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .products-grid-6::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* Featured Section Responsive Layout */
/* Mobile: Price Drop full width, other cards 2 per row */
@media (max-width: 480px) {
    .featured-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Price Drop card takes full width */
    .featured-grid .price-drop-card {
        grid-column: 1 / -1;
    }

    /* Other featured cards take half width (2 per row) */
    .featured-grid .featured-product-card {
        grid-column: span 1;
    }
}

/* Tablet: Featured Section */
@media (min-width: 481px) and (max-width: 768px) {
    .featured-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .featured-grid .price-drop-card {
        grid-column: span 1;
    }
}

/* Desktop: Featured Section */
@media (min-width: 769px) {
    .featured-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

/* New Arrivals Section Responsive Layout */
/* Desktop: Show grid layout */
.new-arrivals-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Tablet: New Arrivals - Show 3 columns */
@media (min-width: 481px) and (max-width: 768px) {
    .new-arrivals-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: New Arrivals - Show 2 cards per slide - EXACTLY like Most Popular */
@media (max-width: 768px) {
    .new-arrivals-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
        grid-template-columns: none !important;
        scroll-behavior: smooth;
    }

    .new-arrivals-grid .new-arrival-card {
        min-width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
        scroll-snap-align: start !important;
    }

    /* Scrollbar styling for New Arrivals */
    .new-arrivals-grid::-webkit-scrollbar {
        height: 4px;
    }

    .new-arrivals-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .new-arrivals-grid::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .new-arrivals-grid::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}