/* =====================================================================
   STYLING ONLY - you normally never need to edit this file.
   Colours are the variables just below, if you want a different look.
   ===================================================================== */
:root{
  --teal:#12403c; --teal-2:#0c2e2b; --saffron:#e59a12; --bg:#f2f5f0; --card:#ffffff;
  --ink:#1c2421; --muted:#55615b; --line:#d9e0d8; --price:#7a4f00;
  --veg:#1b7f3b; --nonveg:#b42318;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--sans);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
.top{background:var(--teal);color:#fff;padding:0 1rem 1.5rem;text-align:center}
.demo-flag{margin:0 -1rem 1.25rem;padding:.55rem 1rem;background:var(--saffron);color:#201400;font-size:.9rem;font-weight:600}
.top h1{margin:0;font:700 clamp(1.9rem,8vw,2.8rem)/1.1 var(--serif);letter-spacing:.01em}
.sub{margin:.5rem 0 0;color:#d6e6e2;font-size:1.05rem}
.contact{margin:.75rem 0 0;color:#d6e6e2;font-size:.95rem}
.contact a{color:#fff}
.cats{position:sticky;top:0;z-index:5;background:var(--teal-2);border-bottom:3px solid var(--saffron)}
.cats ul{display:flex;gap:.5rem;list-style:none;margin:0 auto;padding:.6rem 1rem;max-width:52rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cats a{display:block;white-space:nowrap;padding:.45rem .9rem;border-radius:999px;border:1px solid #4f7a74;color:#fff;text-decoration:none;font-size:.95rem}
.cats a:hover{background:#1d5650}
a:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
main{max-width:52rem;margin:0 auto;padding:0 1rem 2rem}
.cat{padding-top:1.75rem;scroll-margin-top:4rem}
.cat h2{margin:0 0 .25rem;font:700 1.6rem/1.2 var(--serif);color:var(--teal);padding-left:.7rem;border-left:5px solid var(--saffron)}
.cat-note{margin:0 0 .75rem;padding-left:.95rem;color:var(--muted);font-size:.95rem}
.items{display:grid;gap:.75rem;margin-top:.9rem}
.item{display:flex;gap:.85rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem}
.item img{flex:none;width:92px;height:92px;object-fit:cover;border-radius:8px;background:#e6ebe4}
.info{flex:1;min-width:0}
.info h3{margin:0;font:600 1.08rem/1.3 var(--serif);display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.info p{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}
.price{flex:none;margin:0;font:700 1.1rem/1.3 var(--sans);color:var(--price);white-space:nowrap}
.mark{display:inline-block;flex:none;width:16px;height:16px;border:2px solid var(--veg);border-radius:3px;position:relative}
.mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--veg)}
.mark.nonveg{border-color:var(--nonveg)}
.mark.nonveg::after{background:var(--nonveg)}
.legend{margin:1.5rem 0 0;color:var(--muted);font-size:.9rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.legend span{display:inline-flex;gap:.4rem;align-items:center}
footer{max-width:52rem;margin:0 auto;padding:1rem 1rem 2.5rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
footer p{margin:.25rem 0}
@media (min-width:640px){
  .item{padding:.9rem;gap:1.1rem}
  .item img{width:120px;height:120px}
  .items{grid-template-columns:1fr 1fr}
  .cats ul{justify-content:center}
}