/* ============================
   RESPONSIVE BREAKPOINTS
============================ */

/* Large Tablets */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 15px;
        background: white;
        padding: 20px;
    }

    .menu-btn {
        display: block;
    }

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

    .hero h1 {
        font-size: 32px;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    header {
        padding: 10px 20px;
    }

    .hero {
        padding: 80px 20px;
    }

    .hero h1 {
        font-size: 28px;
    }
}