/* ===== MOBILE DEVICES ===== */
@media (max-width: 768px) {

    /* HEADER */
    .header {
        flex-direction: column;
        gap: 10px;
    }

    .search-box {
        width: 100%;
    }

    .logo img {
        height: 100px;
    }

    /* BANNER */
    .banner img {
        height: 200px;
    }

    /* ===== CATEGORIES MOBILE FIX ===== */
    .categories {
        padding: 20px 10px;
    }

    .category-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        padding: 10px;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .category {
        flex: 0 0 auto;
        width: 90px;
        text-align: center;
        scroll-snap-align: start;
    }

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

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

    /* hide scrollbar */
    .category-list::-webkit-scrollbar {
        display: none;
    }

    /* PRODUCTS */
    .product-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-img {
        height: 180px;
    }

    /* FOOTER */
    .footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {

    .product-container {
        grid-template-columns: fr;
    }

    .banner img {
        height: 150px;
    }

    .search-box input {
        font-size: 14px;
    }
}



@media (max-width: 768px) {
    .logo img {
        height: 100px;
    }
}