/* =============================
       DESIGN TOKENS — Black/White/Yellow/Maroon
    ==============================*/
    :root{
      --bg:#000000;           /* black */
      --panel:#0f0f0f;        /* near-black */
      --text:#ffffff;         /* white */
      --muted:#c9cfd9;        
      --brand:#ffd100;        /* yellow */
      --brand-2:#800000;      /* maroon */
      --accent:#ffd100;       
      --border:#222;          
      --radius:18px;
      --shadow:0 12px 30px rgba(0,0,0,.35);
      --container:1200px;
      --gap:clamp(14px,2.5vw,26px);
      --space:clamp(24px,5vw,44px);
      --h1:clamp(2.2rem,2.4vw + 1.2rem,3.6rem);
      --h2:clamp(1.6rem,1.2vw + 1rem,2.4rem);
      --h3:clamp(1.2rem,.6vw + .9rem,1.3rem);
    }

    /* =============================
       BASE
    ==============================*/
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 500px at 90% -10%, rgba(255,209,0,.10), transparent 60%),
        radial-gradient(900px 500px at -10% -10%, rgba(128,0,0,.10), transparent 60%),
        var(--bg);
      line-height:1.6;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    .container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
    .grid{display:grid;gap:var(--gap)}
    .stack{display:grid;gap:var(--gap)}
    .grid-2{grid-template-columns:1.15fr 1fr}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    @media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:780px){.grid-2,.grid-3{grid-template-columns:1fr}}
    @media (max-width:540px){.grid-4{grid-template-columns:1fr}}
    .center{text-align:center}

    /* =============================
       HEADER / NAV
    ==============================*/
    .bar{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#000}
    .bar .container{display:flex;justify-content:center;align-items:center;padding:8px 0;font-weight:800;gap:10px}

    header{position:sticky;top:0;z-index:60;backdrop-filter:saturate(160%) blur(8px);background:color-mix(in oklab, var(--bg), transparent 8%);border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.3px}
    .brand .logo{height:65px;width:auto}
    .nav-links{display:flex;gap:18px;align-items:center}
    .nav a{opacity:.9}
    .nav a:hover{opacity:1}
    .cart{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--border); border-radius:999px}
    .cart-count{position:absolute; top:-6px; right:-6px; background:var(--brand-2); color:#fff; font-size:.75rem; line-height:1; padding:6px 7px; border-radius:999px; font-weight:800; box-shadow:var(--shadow)}

    /* Mobile Menu */
    .menu-btn{display:none}
    @media (max-width:800px){
      .nav-links{display:none}
      .menu-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);padding:10px 14px;border-radius:999px}
      .nav.open .nav-links{display:flex;position:absolute;left:1rem;right:1rem;top:64px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
    }

    /* =============================
       BUTTONS / BADGES
    ==============================*/
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--border);font-weight:800;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease}
    .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#000;border:none}
    .btn-ghost{background:transparent}
    .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid color-mix(in oklab, var(--brand), transparent 60%);border-radius:999px;color:var(--bg);background:var(--brand);font-weight:900}

    /* =============================
       HERO
    ==============================*/
    .hero{padding:calc(var(--space) + 18px) 0 var(--space)}
    .hero h1{font-size:var(--h1);line-height:1.05;margin:0 0 10px}
    .hero p{color:var(--muted);max-width:60ch}
    .hero-card{background:linear-gradient(180deg, color-mix(in oklab, var(--panel), #ffffff 2%), color-mix(in oklab, var(--panel), #000000 2%));border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,3vw,28px);display:grid;gap:var(--gap);box-shadow:var(--shadow)}
    .hero-showcase{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap);align-items:center}
    @media (max-width:900px){.hero-showcase{grid-template-columns:1fr}}
    @media (max-width:450px){
      .hero .grid {
        display:block;
      }
    }
    .dish-shot{aspect-ratio: 16/10; border-radius:16px; overflow:hidden; position:relative}
    .dish-shot img{width:100%;height:100%;object-fit:cover;}
    .sticker{position:absolute;bottom:10px;left:10px;background:#000;color:#ffd100;padding:8px 12px;border-radius:12px;font-weight:900;border:1px solid #333;opacity:.95}

    /* =============================
       CATEGORY
    ==============================*/
    .category{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;display:grid;gap:10px;align-content:start}
    .category .icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklab, var(--brand), transparent 85%);border:1px solid color-mix(in oklab, var(--brand), transparent 60%);color:#000;font-weight:900}

    /* =============================
       BEST SELLERS (SCROLL-SNAP)
    ==============================*/
    .snap-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px, 26vw, 320px);gap:var(--gap);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
    .snap-row::-webkit-scrollbar{height:10px}
    .snap-row::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--brand), transparent 70%);border-radius:999px}
    .item{scroll-snap-align:start;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid}
    .item img{aspect-ratio:4/3;object-fit:cover}
    .item .pad{padding:14px}

    /* =============================
       MENU CARD
    ==============================*/
    .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid}
    .card .pad{padding:16px}
    .price{font-weight:900;font-size:1.1rem;color:var(--brand)}
    .strike{color:var(--muted);text-decoration:line-through;margin-left:8px;font-weight:600}
    .tags{display:flex;gap:8px;flex-wrap:wrap}
    .tag{font-size:.8rem;padding:6px 10px;border-radius:999px;border:1px dashed var(--border);color:var(--muted)}

    /* =============================
       PROMISES
    ==============================*/
    .promise{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px; margin-top: 10px;}

    /* =============================
       FOOTER
    ==============================*/
    footer{border-top:1px solid var(--border);padding:24px 0 48px;color:var(--muted);margin-top: 40px;}

    /* =============================
       FLOATING CART
    ==============================*/
    .fab{position:fixed;right:16px;bottom:16px;z-index:70}

    section#reviews {
        margin-top: 40px;
    }

    section#order {
        margin-top: 40px;
    }