:root{
  --navy:#0a1f33; --gold:#d4a017; --yellow:#ffd34d; --red:#c62828;
  --cream:#fff8ec; --muted:#6a6a6a; --shadow:0 14px 32px rgba(10,31,51,.14)
}
*{box-sizing:border-box}
.mtk-menu{padding:56px 18px;background:linear-gradient(180deg,#fffdf7 0,#fff8e9 100%);font-family:Poppins,system-ui;color:var(--navy)}
.mtk-head{text-align:center}
.mtk-head h2{margin:0;font-size:clamp(26px,3.4vw,42px);font-weight:900}
.mtk-head p{color:#7a5b00;font-weight:600}

/* --- Controls (force visible on themes that hide search inputs) --- */
.mtk-controls{max-width:1200px;margin:18px auto;display:flex!important;gap:10px;flex-wrap:wrap;justify-content:center}
.mtk-controls input[type="search"]{display:block!important}
.mtk-controls input,.mtk-controls select{
  padding:12px 14px;border:2px solid var(--yellow);border-radius:12px;background:#fffdfa;
  box-shadow:0 6px 16px rgba(212,160,23,.15);outline:none;min-width:220px
}
.mtk-controls input:focus,.mtk-controls select:focus{border-color:var(--gold)}

/* --- Chips --- */
.chipbar{
  position:sticky;top:68px;z-index:3;display:flex!important;gap:8px;overflow:auto;padding:8px;
  border-top:1px solid #ffecbd;border-bottom:1px solid #ffecbd;
  background:linear-gradient(180deg,#fffef7,rgba(255,255,247,.7));backdrop-filter:saturate(1.1) blur(3px)
}
.chip{white-space:nowrap;border:2px solid #ffe1a6;background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.chip.active{background:linear-gradient(135deg,var(--yellow),var(--gold));color:#201a07;border-color:#e9c353;box-shadow:0 8px 16px rgba(212,160,23,.35)}

/* --- Grid & cards (force show even if theme overwrites .one-list) --- */
.mtk-grid{display:grid!important}
.mtk-grid.one-list{max-width:1200px;margin:14px auto;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;min-height:40vh}
.card{
  background:#fff;border:2px solid #f6e6bc;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transform:translateY(14px);
  opacity:1; /* visible by default */
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;
  cursor:pointer;position:relative
}
.card.in{ transform:translateY(0); }
.card .cat-pill{
  position:absolute;left:10px;top:10px;background:linear-gradient(135deg,var(--red),#ff8f8f);
  color:#fff;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:800
}
.card img{width:100%;height:190px;object-fit:cover;display:block}
.info{padding:12px 14px;display:grid;gap:6px}
.title{font-weight:900}
.price{font-weight:900;color:var(--gold)}
.desc{color:#555}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{background:#fff7cf;border:1px solid #ffe48e;color:#7d5200;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:800}
.tag.heat{color:var(--red)} .tag.veg{color:#0e7c1f} .tag.star{color:#ffb300} .tag.fav{color:#e91e63} .tag.halal{color:#0e7c65}

/* CTA */
.mtk-foot{text-align:center;margin-top:8px}
.mtk-btn{
  display:inline-block;background:linear-gradient(135deg,var(--yellow),var(--gold));color:#201a07;
  padding:12px 20px;border-radius:999px;font-weight:900;text-decoration:none;
  box-shadow:0 10px 18px rgba(212,160,23,.35)
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:14px;z-index:50}
.modal.show{display:flex}
.modal-dialog{background:#fff;border-radius:18px;max-width:980px;width:100%;border:2px solid #f6e6bc;box-shadow:var(--shadow);overflow:hidden}
.modal-body{display:grid;grid-template-columns:360px 1fr}
.modal-media img{width:100%;height:100%;object-fit:cover}
.modal-info{padding:16px}
.modal-close{position:absolute;margin-left:auto;transform:translate(460px,-10px);background:#fff;border:2px solid #ffe1a6;border-radius:10px;padding:2px 10px;font-weight:900;cursor:pointer}
.modal-desc{color:#555}
.option-group{margin:12px 0;border:1px dashed #ffe1a6;padding:10px;border-radius:12px;background:#fffef6}
.option{display:flex;align-items:center;gap:10px;margin:6px 0}
.modal-total{margin-top:10px;font-size:1.1rem}
.modal-actions{margin-top:12px}

/* Mobile polish */
@media (max-width:860px){
  .modal-body{grid-template-columns:1fr}
  .modal-close{transform:translate(0,-10px)}
}
@media (max-width:480px){
  .mtk-controls{gap:8px}
  .mtk-controls input,.mtk-controls select{min-width:160px;font-size:14px;padding:10px 12px}
  .chipbar{top:64px}
}