/* ========== TABLET (768px+) ========== */
@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 2.75rem;
    }

    .navbar-brand-tagline {
        display: block;
    }

    .cart-drawer {
        width: var(--sidebar-width);
    }
}

/* ========== DESKTOP (1024px+) ========== */
@media (min-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero h1 {
        font-size: var(--text-4xl);
    }

    .container {
        padding: 0 var(--space-8);
    }
}

/* ========== LARGE DESKTOP (1280px+) ========== */
@media (min-width: 1280px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

/* ========== SMALL MOBILE (max 480px) ========== */
@media (max-width: 480px) {
    :root {
        --nav-height: 60px;
    }

    .hero {
        padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-8);
    }

    .hero h1 {
        font-size: var(--text-2xl);
    }

    .hero p {
        font-size: var(--text-base);
    }

    .navbar-brand-name {
        font-size: var(--text-xl);
    }

    .menu-card {
        padding: var(--space-4);
    }

    .menu-card-name {
        font-size: var(--text-base);
    }

    .menu-card-price {
        font-size: var(--text-lg);
    }

    .btn-add-cart {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .cart-drawer {
        width: 100%;
        max-width: 100%;
    }

    .category-btn {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
    }

    .radio-group {
        flex-direction: column;
    }

    .checkout-section {
        padding: var(--space-4);
    }
}