/* ===== Base styles ===== */

body {
            background-color: #ffffff;
            color: #0f172a;
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
            width: 100%;
        }
        .font-display {
            font-family: 'Syne', sans-serif;
        }
        .glow-amber {
            box-shadow: 0 0 25px -5px rgba(217, 119, 6, 0.35);
        }
        .glow-rose {
            box-shadow: 0 0 25px -5px rgba(225, 29, 72, 0.35);
        }
        .bg-grid-pattern {
            background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #d97706;
        }
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

/* ===== Responsive upgrades ===== */

*, *::before, *::after { box-sizing: border-box; }
        html { width: 100%; overflow-x: hidden; }
        body { width: 100%; min-width: 0; overflow-x: hidden; }
        img, svg, video, iframe { max-width: 100%; }
        img { height: auto; }

        .container, .section-inner, .content, .hero-content {
            width: min(1200px, calc(100% - 40px));
            margin-left: auto;
            margin-right: auto;
        }

        header, nav { max-width: 100%; }
        nav ul, .nav-links {
            flex-wrap: wrap;
        }
        #language-btn {
            min-width: 42px;
            min-height: 36px;
            padding: 7px 10px;
        }

        input, select, textarea, button {
            max-width: 100%;
            font: inherit;
        }
        form {
            width: 100%;
        }

        .order-drawer, .cart-drawer, .reservation-card, .menu-card {
            max-width: 100%;
        }

        .map-container {
            position: relative;
            width: 100%;
            min-height: 320px;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 18px;
        }
        .map-container iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        @media (max-width: 900px) {
            .container, .section-inner, .content, .hero-content {
                width: min(100% - 32px, 760px);
            }
            .hero, .hero-content {
                min-height: auto;
            }
            .grid, .cards, .menu-grid, .two-column, .columns {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            .order-drawer {
                width: min(100%, 440px);
            }
        }

        @media (max-width: 600px) {
            .container, .section-inner, .content, .hero-content {
                width: calc(100% - 24px);
            }

            h1 { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.05; }
            h2 { font-size: clamp(1.6rem, 7vw, 2.35rem); }
            h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }

            .grid, .cards, .menu-grid, .two-column, .columns,
            .features, .info-grid, .footer-grid {
                grid-template-columns: 1fr !important;
            }

            .row, .form-row, .actions, .button-group {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            button, .btn, .button, input[type="submit"] {
                width: 100%;
                min-height: 44px;
            }

            #language-menu {
                right: 0;
                left: auto;
                max-width: calc(100vw - 24px);
            }

            .map-container {
                min-height: 260px;
                aspect-ratio: 4 / 3;
                border-radius: 14px;
            }

            .order-drawer, .cart-drawer {
                width: 100%;
                max-width: 100%;
                left: 0;
                right: 0;
                border-radius: 18px 18px 0 0;
            }

            .menu-card img, .dish-card img {
                width: 100%;
                object-fit: cover;
            }
        }

        @media (max-width: 380px) {
            .container, .section-inner, .content, .hero-content {
                width: calc(100% - 18px);
            }
            .map-container {
                min-height: 230px;
            }
        }