/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hero-content h2 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cart-sidebar {
        width: 100%;
        right: -100%;
    }

    nav ul {
        gap: 12px;
    }

    nav a {
        font-size: 0.9rem;
    }

    .logo h1 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0.75rem 4%;
    }

    .hero-content h2 {
        font-size: 2.4rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .filters {
        gap: 8px;
    }

    .filter-btn {
        padding: 6px 16px;
        font-size: 0.95rem;
    }
}