*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#faf6f1;
  --surface:#fff;
  --text:#2c1810;
  --text-muted:#6b5244;
  --accent:#b5651d;
  --accent-dark:#8b4513;
  --border:#e8ddd4;
  --veg:#2e7d32;
  --nonveg:#c62828;
  --shadow:0 2px 8px rgba(44,24,16,.08);
  --radius:10px;
}

html{scroll-behavior:smooth;scroll-padding-top:140px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}

/* Hero */
.hero{
  background:linear-gradient(135deg,#3e2723 0%,#5d4037 50%,#4e342e 100%);
  color:#fff;text-align:center;
  padding:2.5rem 1rem 2rem;
}
.hero h1{font-size:2.2rem;font-weight:700;letter-spacing:.02em}
.tagline{color:#d7ccc8;margin-top:.35rem;font-size:.95rem}

/* Sticky controls */
.controls{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
}
#search{
  flex:1 1 200px;
  padding:.6rem 1rem;
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.95rem;background:var(--surface);
  transition:border-color .2s;
}
#search:focus{outline:none;border-color:var(--accent)}
.filter-btns{display:flex;gap:.4rem;flex-shrink:0}
.filter-btn{
  padding:.45rem .9rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;font-size:.85rem;
  transition:all .2s;display:flex;align-items:center;gap:.35rem;
}
.filter-btn:hover{border-color:var(--accent)}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Category nav */
.category-nav{
  position:sticky;top:52px;z-index:99;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.category-nav::-webkit-scrollbar{display:none}
.category-nav ul{
  display:flex;gap:.25rem;padding:.5rem 1rem;list-style:none;white-space:nowrap;
}
.category-nav a{
  display:block;padding:.35rem .7rem;border-radius:var(--radius);
  font-size:.8rem;color:var(--text-muted);text-decoration:none;
  transition:all .2s;
}
.category-nav a:hover,.category-nav a.active{background:var(--accent);color:#fff}

/* Badges */
.badge{
  display:inline-block;width:14px;height:14px;border-radius:3px;
  border:2px solid;flex-shrink:0;
}
.badge.veg{border-color:var(--veg);background:transparent;position:relative}
.badge.veg::after{
  content:'';position:absolute;
  width:6px;height:6px;border-radius:50%;background:var(--veg);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.badge.nonveg{border-color:var(--nonveg);background:transparent;position:relative}
.badge.nonveg::after{
  content:'';position:absolute;
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid var(--nonveg);
  top:50%;left:50%;transform:translate(-50%,-55%);
}

/* Main */
main{max-width:900px;margin:0 auto;padding:1rem}

/* Category sections */
.category{margin-bottom:1.5rem}
.category h2{
  font-size:1.25rem;color:var(--accent-dark);
  padding-bottom:.4rem;border-bottom:2px solid var(--accent);
  margin-bottom:.75rem;
}
.category h3{
  font-size:.9rem;color:var(--text-muted);font-weight:600;
  margin:.6rem 0 .3rem;text-transform:uppercase;letter-spacing:.04em;
}

/* Item cards */
.items{display:flex;flex-direction:column;gap:.35rem}
.item{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .8rem;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;
}
.item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(44,24,16,.12)}
.item .name{flex:1;font-size:.95rem}
.item .price{font-weight:600;color:var(--accent-dark);white-space:nowrap;font-size:.95rem}
.item.hidden{display:none}

.category.hidden{display:none}

.no-results{
  text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:1.1rem;
}

/* Footer */
footer{
  text-align:center;padding:1.5rem 1rem;color:var(--text-muted);
  font-size:.8rem;border-top:1px solid var(--border);margin-top:2rem;
}

/* Responsive */
@media(max-width:480px){
  .hero h1{font-size:1.6rem}
  .controls{padding:.6rem .75rem}
  #search{font-size:.9rem;padding:.5rem .75rem}
  .filter-btn{padding:.4rem .65rem;font-size:.8rem}
  .item{padding:.5rem .6rem}
  html{scroll-padding-top:120px}
}

@media(min-width:768px){
  .hero{padding:3rem 1rem 2.5rem}
  .hero h1{font-size:2.8rem}
  main{padding:1.5rem}
  html{scroll-padding-top:150px}
}