/* ===== TABLET (≥ 640px) ===== */
@media (min-width: 640px) {
    .container { padding: 0 24px; }

    .hero { padding: 48px 0 32px; }
    .hero-title { font-size: 34px; }
    .hero-subtitle { font-size: 16px; }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

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

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ===== TABLET LANDSCAPE (≥ 900px) ===== */
@media (min-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-title { font-size: 38px; }
}

/* ===== DESKTOP (≥ 1024px) ===== */
@media (min-width: 1024px) {
    .menu-toggle { display: none; }
    .nav-mobile { display: none !important; }
    .nav-desktop { display: flex; }

    .header-container {
        padding: 16px 32px;
    }

    .logo-img { height: 42px; }

    .hero {
        padding: 64px 0 40px;
        text-align: center;
    }

    .hero-title {
        font-size: 44px;
        max-width: 800px;
        margin: 0 auto 12px;
    }

    .hero-subtitle {
        max-width: 600px;
        margin: 0 auto 32px;
        font-size: 17px;
    }

    .search-bar { margin: 0 auto; }

    .categories-scroll {
        justify-content: center;
        flex-wrap: wrap;
    }

    .featured { padding: 48px 0; }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

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

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
    }
}

/* ===== LARGE DESKTOP (≥ 1280px) ===== */
@media (min-width: 1280px) {
    .container { padding: 0 32px; }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

/* ===== EXTRA LARGE (≥ 1600px) ===== */
@media (min-width: 1600px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}