:root{
  --bg: #f5f1e3;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #bd2c0d;
  --accent-2:#b56f3a;
  --accent-3:#edd395;
  --green:#2e7d32;
  --line: rgba(31,41,55,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1120px;
  --headerH: 78px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-weight:700;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#e4532f);color:#fff;border-color:transparent}
.btn.primary:hover{box-shadow:0 10px 25px rgba(189,44,13,.25)}
.btn.ghost{background:transparent}
.btn.whatsapp{background:linear-gradient(135deg,#1ebd59,#128c40);border-color:transparent;color:#fff}
.btn.whatsapp:hover{box-shadow:0 10px 25px rgba(18,140,64,.25)}
.icon{width:20px;height:20px;display:inline-block}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:rgba(189,44,13,.10);
  border:1px solid rgba(189,44,13,.18);color:var(--accent);font-weight:800;font-size:13px;
}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background:rgba(245,241,227,.82);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.headerInner{height:var(--headerH);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brandLogo{
  width:48px;height:48px;border-radius:14px;
  overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.brandTitle{display:flex;flex-direction:column;line-height:1.05}
.brandTitle b{font-size:18px;letter-spacing:.6px}
.brandTitle span{font-size:12px;color:var(--muted);font-weight:700}
.headerActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cartBtn{position:relative}
.badge{
  position:absolute;top:-6px;right:-6px;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;border:2px solid rgba(245,241,227,1);
}
.hero{
  padding:18px 0 10px;
}
.heroCard{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--surface);
  border:1px solid rgba(0,0,0,.06);
}
.heroBg{
  position:absolute;inset:0;
  background-image:url("assets/style.jpg");
  background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.02);
  opacity:.22;
}
.heroContent{
  position:relative;
  padding:18px 18px 16px;
  display:grid;gap:10px;
}
.heroTop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.heroTitle{font-size:22px;margin:0}
.heroSub{margin:0;color:var(--muted);font-weight:700}
.heroCtas{display:flex;gap:10px;flex-wrap:wrap}
.notice{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:8px;border-top:1px dashed rgba(0,0,0,.12);
}
.notice p{margin:0;color:var(--muted);font-weight:700;font-size:13px}
.notice b{color:var(--text)}
.searchWrap{
  position:sticky;top:var(--headerH);z-index:40;
  background:rgba(245,241,227,.86);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.searchInner{padding:12px 0}
.searchRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.searchBox{
  flex:1;min-width:260px;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.searchBox input{
  border:none;outline:none;width:100%;font-size:15px;background:transparent
}
.clearBtn{border:none;background:transparent;cursor:pointer;color:var(--muted);padding:6px;border-radius:10px}
.clearBtn:hover{background:rgba(0,0,0,.05)}
.catBar{
  display:flex;gap:8px;overflow:auto;padding:6px 0 0;margin:0;list-style:none;
  scrollbar-width:thin;
}
.catBar button{
  white-space:nowrap;
  border:1px solid rgba(189,44,13,.18);
  background:rgba(255,255,255,.85);
  color:var(--accent);
  font-weight:900;font-size:13px;
  padding:10px 12px;border-radius:999px;cursor:pointer;
}
.catBar button.active{background:linear-gradient(135deg,var(--accent),#e4532f);color:#fff;border-color:transparent}
main{padding:18px 0 44px}
.section{margin-top:18px}
.sectionHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 10px;
}
.sectionHead h2{margin:0;font-size:18px}
.sectionHead .count{font-size:12px;color:var(--muted);font-weight:900}
.grid{display:grid;gap:10px}
.itemCard{
  background:var(--surface);border:1px solid rgba(0,0,0,.06);
  border-radius:16px;padding:12px;box-shadow:0 10px 25px rgba(0,0,0,.05);
  display:flex;gap:12px;align-items:center;justify-content:space-between;
}
.itemInfo{min-width:0}
.itemInfo b{display:block;font-size:15px}
.itemInfo small{color:var(--muted);font-weight:800}
.itemRight{display:flex;gap:12px;align-items:center}
.price{font-weight:1000;color:var(--accent);white-space:nowrap}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--line);background:rgba(0,0,0,.03);
  cursor:pointer;font-weight:900;
}
.stepper button.plus{background:rgba(189,44,13,.10);border-color:rgba(189,44,13,.22);color:var(--accent)}
.stepper span{
  min-width:52px;text-align:center;
  font-weight:1000;
}
.addBtn{padding:10px 12px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--accent),#e4532f);color:#fff;font-weight:900;cursor:pointer}
.addBtn:hover{filter:brightness(1.02)}
.empty{
  text-align:center;color:var(--muted);font-weight:900;padding:30px 0
}
/* Drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:none}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px, 100%);
  background:var(--surface);z-index:90;transform:translateX(105%);
  transition:transform .25s ease;
  box-shadow:-20px 0 60px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.backdrop.open{display:block}
.drawerHead{
  padding:14px 14px;border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.drawerHead b{font-size:18px}
.drawerHead button{
  border:none;background:rgba(0,0,0,.05);border-radius:12px;padding:10px;cursor:pointer
}
.drawerBody{padding:14px;overflow:auto;flex:1}
.cartItem{
  border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px;margin-bottom:10px;
  background:rgba(0,0,0,.02)
}
.cartItemTop{display:flex;gap:10px;justify-content:space-between}
.cartItemTop b{font-size:14px}
.cartItemTop small{display:block;color:var(--muted);font-weight:800;margin-top:2px}
.removeBtn{border:none;background:transparent;color:var(--accent);cursor:pointer;font-weight:1000}
.cartItemBottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.drawerFoot{
  border-top:1px solid rgba(0,0,0,.06);
  padding:14px;
  display:grid;gap:10px;
}
.totalRow{display:flex;align-items:center;justify-content:space-between;font-weight:1000;font-size:16px}
.footer{
  background:#151515;color:#fff;padding:28px 0;
}
.footerGrid{display:grid;gap:18px}
.footerCard{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:16px
}
.footerTop{display:flex;align-items:center;gap:12px}
.footerLogo{width:46px;height:46px;border-radius:14px;overflow:hidden;background:#fff}
.footerCard h3{margin:0 0 10px;color:var(--accent-3)}
.footerCard p{margin:0;color:rgba(255,255,255,.78);font-weight:700;line-height:1.45}
.footerLinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.footerLinks a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.footerLinks a:hover{background:rgba(255,255,255,.12)}
.copy{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:rgba(255,255,255,.65);font-weight:800;font-size:12px}
.floatBar{
  position:fixed;left:14px;bottom:14px;z-index:70;
  display:flex;gap:10px;flex-direction:column;
}
.floatBar .btn{box-shadow:0 18px 45px rgba(0,0,0,.18)}
@media (min-width: 900px){
  .footerGrid{grid-template-columns:1.2fr 1fr 1fr}
  .heroContent{padding:22px 22px 18px}
  .heroTitle{font-size:26px}
  .floatBar{left:auto;right:14px}
}


/* ====== Colored category sections (auto) ======
   Each menu category (section) gets its own soft background
   so the list doesn't merge visually.
*/
#menuRoot .section{
  margin-top:18px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.55);
}
/* tighten spacing: the header already has its own margin */
#menuRoot .sectionHead{margin:0 0 10px;}

/* cycle 6 background tints */
#menuRoot .section:nth-of-type(6n+1){background:rgba(189,44,13,.07);}  /* accent red */
#menuRoot .section:nth-of-type(6n+2){background:rgba(181,111,58,.08);}  /* accent brown */
#menuRoot .section:nth-of-type(6n+3){background:rgba(237,211,149,.20);} /* accent sand */
#menuRoot .section:nth-of-type(6n+4){background:rgba(46,125,50,.07);}   /* green */
#menuRoot .section:nth-of-type(6n+5){background:rgba(31,41,55,.06);}    /* slate */
#menuRoot .section:nth-of-type(6n){background:rgba(228,83,47,.07);}     /* warm orange */

/* keep cards crisp on tinted backgrounds */
#menuRoot .section .itemCard{background:var(--surface);}