/* ========== Base ========== */
:root{
  --bg:#0b0b0c; --fg:#f7f7f8; --muted:#b9bdc6;
  --gold:#cfa66a; --panel:#141416; --ring:rgba(207,166,106,.35);
  --shadow:0 20px 50px rgba(0,0,0,.35); --radius:18px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(80vw 60vh at 80% -10%, rgba(207,166,106,.12), transparent 60%), var(--bg);
  color:var(--fg);
  font:16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.shell{max-width:1100px; margin:0 auto; padding:0 16px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(11,11,12,.9), rgba(11,11,12,.65) 60%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{max-width:1100px; margin:0 auto; padding:20px 16px; display:flex; align-items:center; gap:14px}
.brand-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px;
  background:rgba(255,255,255,.06); color:var(--gold);
  font-family:"Amiri", serif; font-size:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-text h1{margin:0; font-weight:700; letter-spacing:.2px}
.brand-text p{margin:2px 0 0; color:var(--muted)}

/* Filters */
.filters{display:flex; align-items:center; gap:12px; padding:0 16px 14px}
.cat-bar{display:flex; gap:8px; overflow:auto; scrollbar-width:thin; padding-bottom:6px; flex:1}
.cat-pill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.06); color:var(--fg); white-space:nowrap; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  font-weight:600; font-size:14px;
}
.cat-pill[aria-current="true"]{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:var(--ring); box-shadow:0 6px 18px rgba(207,166,106,.18), inset 0 0 0 1px var(--ring);
  color:var(--gold);
}
.cat-select-wrap{display:none}
.cat-select-wrap select{
  appearance:none; background:rgba(255,255,255,.06); color:var(--fg);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 12px; font-weight:600;
}

/* Grid */
.menu-grid{
  max-width:1100px; margin:18px auto 40px; padding:0 16px;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

/* Card */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 26px 60px rgba(0,0,0,.45)}
.img-wrap{aspect-ratio:4/3; background:#0f1012}
.card-img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:14px 14px 16px}
.card-title{margin:0 0 6px; font-size:18px; font-weight:700; letter-spacing:.2px}
.card-desc{margin:0 0 12px; color:#cbd0d8; min-height:2.1em}
.card-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-cat{
  color:var(--gold); background:rgba(207,166,106,.12); border:1px solid var(--ring);
  padding:4px 10px; border-radius:999px; font-size:13px; font-weight:600;
}
.card-price{
  color:var(--gold); font-weight:800; letter-spacing:.2px;
  background:rgba(207,166,106,.1); border:1px solid var(--ring);
  padding:4px 10px; border-radius:999px;
}

/* Error & Footer */
.error-box{
  max-width:1100px; margin:18px auto; padding:16px; border-radius:12px;
  background:#2a1f17; color:#ffd9a8; border:1px solid rgba(207,166,106,.35);
}
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:20px 16px 40px; text-align:center; color:var(--muted)}
.site-footer .arabic{margin:0 0 6px; color:var(--gold); font-family:"Amiri", serif; font-size:20px}

/* Responsive: op kleine schermen liever dropdown dan pillen */
@media (max-width:640px){
  .cat-bar{display:none}
  .cat-select-wrap{display:block}
}