/* Existing CSS for other sections */
.products-grid-mobile {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

    .products-grid-mobile > div {
        padding: 8px;
    }

/* Mobile: 2 sản phẩm trên 1 hàng */
@media (max-width: 575.98px) {
    .products-grid-mobile > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .product-card {
        padding: 8px !important;
    }

    .product-image-mobile {
        max-height: 100px !important;
    }

    .product-card__content .title {
        font-size: 13px !important;
        line-height: 1.3;
        margin: 8px 0 !important;
    }

    .product-card__badge {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    .product-card__price {
        margin: 8px 0 12px 0 !important;
    }

        .product-card__price span {
            font-size: 12px !important;
        }

    .flex-align.gap-4 span {
        font-size: 10px !important;
    }

    .flex-align.gap-2 span {
        font-size: 10px !important;
    }
}

/* Small tablets: 3 sản phẩm trên 1 hàng */
@media (min-width: 576px) and (max-width: 767.98px) {
    .products-grid-mobile > div {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Medium tablets: 4 sản phẩm trên 1 hàng */
@media (min-width: 768px) and (max-width: 991.98px) {
    .products-grid-mobile > div {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Desktop: 4-5 sản phẩm trên 1 hàng */
@media (min-width: 992px) {
    .products-grid-mobile > div {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Large desktop: 6 sản phẩm trên 1 hàng */
@media (min-width: 1200px) {
    .products-grid-mobile > div {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* Very small mobile phones */
@media (max-width: 374px) {
    .product-card {
        padding: 6px !important;
    }

    .product-image-mobile {
        max-height: 80px !important;
    }

    .product-card__content .title {
        font-size: 11px !important;
    }

    .product-card__price span {
        font-size: 11px !important;
    }
}

/* ===== NEW CSS FOR TOP SELLING PRODUCTS SECTION ===== */

/* Mobile Grid Layout for Top Selling Products */
.top-selling-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
}

.mobile-product-item {
    width: 100%;
}

/* Mobile Product Image Sizing */
.mobile-product-image {
    max-height: 120px !important;
    width: auto;
    max-width: 100%;
}

/* Mobile Responsive Styles for Top Selling Products */
@media (max-width: 767.98px) {
    /* Hide slider arrows on mobile */
    .slick-arrow {
        display: none !important;
    }

    /* Top Selling Products Mobile Grid */
    .top-selling-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mobile-product-item .product-card {
        padding: 12px !important;
        height: 100%;
    }

    .mobile-product-item .product-card__thumb {
        height: 120px;
        margin-bottom: 12px;
    }

    .mobile-product-item .mobile-product-image {
        max-height: 100px !important;
    }

    .mobile-product-item .product-card__content {
        margin-top: 12px !important;
    }

        .mobile-product-item .product-card__content .title {
            font-size: 13px !important;
            line-height: 1.3;
            margin-bottom: 8px !important;
        }

            .mobile-product-item .product-card__content .title a {
                font-size: 13px !important;
            }

    .mobile-product-item .product-card__badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        border-radius: 8px 0 8px 0 !important;
    }

    .mobile-product-item .product-card__price {
        margin: 8px 0 !important;
    }

        .mobile-product-item .product-card__price span {
            font-size: 12px !important;
        }

    .mobile-product-item .flex-align span {
        font-size: 10px !important;
    }

    .mobile-product-item .progress {
        height: 3px !important;
        margin-bottom: 4px !important;
    }

        .mobile-product-item .progress + span {
            font-size: 10px !important;
            margin-top: 4px !important;
        }

    /* Section padding adjustments for mobile */
    .top-selling-products .container .border {
        padding: 16px !important;
    }

    .top-selling-products .section-heading {
        margin-bottom: 16px !important;
    }

        .top-selling-products .section-heading h5 {
            font-size: 18px !important;
        }
}

/* Very small mobile phones - Top Selling Products */
@media (max-width: 374px) {
    .top-selling-mobile-grid {
        gap: 8px;
    }

    .mobile-product-item .product-card {
        padding: 8px !important;
    }

    .mobile-product-item .product-card__thumb {
        height: 100px;
    }

    .mobile-product-item .mobile-product-image {
        max-height: 80px !important;
    }

    .mobile-product-item .product-card__content .title {
        font-size: 11px !important;
    }

        .mobile-product-item .product-card__content .title a {
            font-size: 11px !important;
        }

    .mobile-product-item .product-card__price span {
        font-size: 11px !important;
    }

    .mobile-product-item .product-card__badge {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }

    .top-selling-products .section-heading h5 {
        font-size: 16px !important;
    }
}

/* Small tablets - Top Selling Products */
@media (min-width: 576px) and (max-width: 767.98px) {
    .top-selling-mobile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .mobile-product-item .mobile-product-image {
        max-height: 140px !important;
    }

    .mobile-product-item .product-card__content .title {
        font-size: 14px !important;
    }

        .mobile-product-item .product-card__content .title a {
            font-size: 14px !important;
        }
}

/* Hide desktop slider on mobile, show mobile grid */
@media (max-width: 767.98px) {
    .top-selling-product-slider {
        display: none !important;
    }

    .top-selling-mobile-grid {
        display: grid !important;
    }
}

/* Show desktop slider on tablet and up, hide mobile grid */
@media (min-width: 768px) {
    .top-selling-product-slider {
        display: block !important;
    }

    .top-selling-mobile-grid {
        display: none !important;
    }
}

/* Button styling for mobile */
@media (max-width: 767.98px) {
    .btn-outline-main {
        border: 1px solid var(--main-600);
        color: var(--main-600);
        background: transparent;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .btn-outline-main:hover {
            background: var(--main-600);
            color: white;
        }
}