/* Mobile Styles */

/* Categories in Mobile */
@media (max-width: 768px) {
    .categories-slider {
        gap: 10px;
    }

    .category-item {
        width: 90px;
    }

    .category-image {
        width: 60px;
        height: 60px;
    }

    .category-name {
        font-size: 12px;
    }

    /* Products Grid */
    .col-6 {
        padding: 5px;
    }

    .product-card {
        margin-bottom: 10px;
    }

    .product-image {
        height: 150px;
    }

    .product-title {
        font-size: 12px;
        height: 36px;
    }

    .current-price {
        font-size: 14px;
    }

    /* Sliders */
    .slider-container {
        height: 200px;
    }

    .slider-content {
        bottom: 15px;
        left: 15px;
    }

    .slider-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .slider-content p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* Subheader */
    .subheader .navbar-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .subheader .nav-item {
        flex: 0 0 auto;
    }

    .subheader .nav-link {
        white-space: nowrap;
        font-size: 14px;
    }

    /* Products Slider */
    .product-slide-item {
        width: 160px;
    }

    .section-title {
        font-size: 20px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .category-item {
        width: 80px;
    }

    .category-image {
        width: 50px;
        height: 50px;
    }

    .product-slide-item {
        width: 140px;
    }

    .slider-container {
        height: 150px;
    }
}

/* Categories in Mobile */
@media (max-width: 768px) {
    .categories-slider {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }

    .categories-slider::-webkit-scrollbar {
        display: none;
    }

    .category-item {
        flex: 0 0 auto;
        width: 80px;
        text-align: center;
    }

    .category-image {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        background: #f8f9fa;
        padding: 5px;
    }

    .category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .category-name {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        margin-top: 5px;
        line-height: 1.2;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .category-item {
        width: 70px;
    }

    .category-image {
        width: 50px;
        height: 50px;
    }

    .category-name {
        font-size: 11px;
    }
}