/* Sonesta menu + control panel styles.
   Layout: one narrow phone-first column — brand header, banner rail, offers rail, sticky icon bar, item list per section. */
:root{
  --bg:#FAF5F1; --surface:#FFFFFF; --sunk:#F2E8E2; --ink:#2B1411; --muted:#85675E; --line:#EADBD2;
  --brand:#4D1A16; --on-brand:#FBEFE6; --accent:#AE6C27; --on-accent:#FFFFFF; --sale:#B23A1F; --ok:#2E7D4F;
  --banner:#4D1A16; --banner2:#A8661F; --banner-ink:#FBEFE6; --scrim:rgba(24,9,7,.55);
  --f-display:"Lalezar","Readex Pro",system-ui,sans-serif;
  --f-body:"Readex Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --gl:max(16px, env(safe-area-inset-left,0px)); --gr:max(16px, env(safe-area-inset-right,0px));
  --bar-h:104px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#170C0A; --surface:#22130F; --sunk:#2C1914; --ink:#F6EAE3; --muted:#B49B91; --line:#3C2520;
  --brand:#F0D9CB; --on-brand:#2B1411; --accent:#E2A25A; --on-accent:#1E0E0B; --sale:#F2785B; --ok:#6CC391;
  --banner:#3C1511; --banner2:#8E5419; --banner-ink:#FBEFE6; --scrim:rgba(0,0,0,.62); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#170C0A; --surface:#22130F; --sunk:#2C1914; --ink:#F6EAE3; --muted:#B49B91; --line:#3C2520;
  --brand:#F0D9CB; --on-brand:#2B1411; --accent:#E2A25A; --on-accent:#1E0E0B; --sale:#F2785B; --ok:#6CC391;
  --banner:#3C1511; --banner2:#8E5419; --banner-ink:#FBEFE6; --scrim:rgba(0,0,0,.62); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.55; -webkit-tap-highlight-color:transparent}
body.lock{overflow:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:780px; margin:0 auto; padding-left:var(--gl); padding-right:var(--gr)}
.ic{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none}
.num{font-variant-numeric:tabular-nums}

/* Header */
.hd{padding-block:20px 8px}
.hd-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:14px; color:var(--brand); min-width:0}
.brand .mark{width:54px; height:54px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; flex:none}
.brand .mark svg{width:34px; height:auto}
.brand .word svg{height:58px; width:auto; max-width:100%; display:block}
.chipbtn{border:1px solid var(--line); background:var(--surface); border-radius:999px; height:40px; min-width:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:600}
.contact{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.contact a{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink); background:var(--sunk); border-radius:999px; padding:6px 12px; font-size:13px}
.contact a .ic{width:18px; height:18px; color:var(--accent)}
.search{display:flex; align-items:center; gap:8px; margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 14px; height:48px}
.search .ic{color:var(--muted)}
.search input{border:0; outline:0; background:transparent; flex:1; min-width:0; height:100%}

/* Banners */
.banners{margin-top:16px}
.track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.banner{flex:0 0 100%; scroll-snap-align:center; position:relative; border-radius:20px; overflow:hidden; aspect-ratio:2.1/1; max-width:100%; background:var(--banner); color:var(--banner-ink); display:flex; align-items:flex-end; border:0; padding:0; text-align:start}
.banner.t2{background:var(--banner2)}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.banner.has-img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,8,6,.78), rgba(20,8,6,0) 62%)}
.banner .wm{position:absolute; inset-inline-end:-6%; top:50%; transform:translateY(-50%); width:44%; opacity:.14; color:var(--banner-ink)}
.banner .txt{position:relative; z-index:1; padding:18px 20px; max-width:78%}
.banner h3{font-family:var(--f-display); font-weight:400; font-size:clamp(22px,6vw,34px); line-height:1.15; margin:0; text-wrap:balance}
.banner p{margin:4px 0 0; font-size:14px; opacity:.9}
.dots{display:flex; justify-content:center; gap:6px; margin-top:8px}
.dots i{width:6px; height:6px; border-radius:6px; background:var(--line); transition:width .25s}
.dots i.on{width:18px; background:var(--accent)}

/* Section headings */
.sh{display:flex; align-items:center; gap:10px; margin:28px 0 12px}
.sh h2{font-family:var(--f-display); font-weight:400; font-size:28px; line-height:1.1; margin:0; color:var(--brand)}
.sh .count{color:var(--muted); font-size:13px}
.sh .ico{width:40px; height:40px; border-radius:12px; background:var(--sunk); color:var(--brand); display:grid; place-items:center; overflow:hidden; flex:none}
.sh .ico img{width:100%; height:100%; object-fit:cover}

/* Offers rail */
.offers{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
.offers::-webkit-scrollbar{display:none}
.oc{flex:0 0 168px; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:start; padding:0; position:relative}
.oc .ph{aspect-ratio:4/3; background:var(--sunk); color:var(--muted); display:grid; place-items:center}
.oc .ph img{width:100%; height:100%; object-fit:cover; display:block}
.oc .ph .ic{width:38px; height:38px}
.oc .b{padding:10px 12px 12px}
.oc .n{font-weight:600; font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.pct{position:absolute; top:8px; inset-inline-start:8px; background:var(--sale); color:#fff; font-weight:700; font-size:12px; border-radius:999px; padding:2px 9px}

/* Sticky category bar */
.catbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line); margin-top:20px}
.cats{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none; width:82px; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; padding:0; color:var(--muted); font-size:12.5px; font-weight:500}
.cat .ci{width:56px; height:56px; border-radius:50%; background:var(--sunk); color:var(--brand); display:grid; place-items:center; overflow:hidden; border:2px solid transparent; transition:background .2s, border-color .2s}
.cat .ci img{width:100%; height:100%; object-fit:cover}
.cat .ci .ic{width:26px; height:26px}
.cat > span:last-child{max-width:100%; text-align:center; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cat.on{color:var(--ink); font-weight:700}
.cat.on .ci{background:var(--brand); color:var(--on-brand); border-color:var(--accent)}

/* Items */
section.menu-sec{scroll-margin-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 8px)}
.items{display:grid; gap:10px}
@media (min-width:700px){.items{grid-template-columns:1fr 1fr}}
.item{display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px; text-align:start; width:100%; min-width:0; align-items:stretch}
.item .th{width:96px; height:96px; border-radius:12px; overflow:hidden; background:var(--sunk); color:var(--muted); display:grid; place-items:center; flex:none}
.item .th img{width:100%; height:100%; object-fit:cover; display:block}
.item .th .ic{width:34px; height:34px; opacity:.8}
.item .info{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding-block:2px}
.item .n{font-weight:600; font-size:15.5px; line-height:1.35}
.item .d{color:var(--muted); font-size:13px; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.item .row{margin-top:auto; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.item.off{opacity:.55}
.price{font-weight:700; color:var(--accent); font-size:16px}
.price small{font-weight:500; font-size:12px; margin-inline-start:2px}
.old{color:var(--muted); font-size:13px; text-decoration:line-through}
.cal{color:var(--muted); font-size:12px; margin-inline-start:auto}
.badge{display:inline-block; font-size:11px; font-weight:600; border-radius:6px; padding:1px 7px; margin-inline-start:6px; vertical-align:2px; background:var(--sunk); color:var(--brand)}
.badge.popular{background:var(--accent); color:var(--on-accent)}
.badge.spicy{background:var(--sale); color:#fff}
.badge.na{background:var(--line); color:var(--muted)}
.empty{color:var(--muted); text-align:center; padding:48px 0}

/* Footer */
.ft{margin-top:40px; border-top:1px solid var(--line); padding-block:24px 40px; color:var(--muted); font-size:13px; display:grid; gap:10px}
.ft .r{display:flex; gap:8px; align-items:flex-start}
.ft .r .ic{width:18px; height:18px; color:var(--accent); margin-top:2px}
.ft .sfda{font-size:12px; border-top:1px dashed var(--line); padding-top:12px; margin-top:6px}

/* Item sheet */
.scrim{position:fixed; inset:0; z-index:40; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s}
.sheet{background:var(--surface); width:100%; max-width:560px; max-height:92vh; overflow:auto; border-radius:22px 22px 0 0; padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)); animation:up .25s ease-out}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:22px}}
.sheet .hero{aspect-ratio:4/3; background:var(--sunk); color:var(--muted); display:grid; place-items:center; position:relative}
.sheet .hero img{width:100%; height:100%; object-fit:cover; display:block}
.sheet .hero > .ic{width:72px; height:72px; opacity:.6}
.sheet .x{position:absolute; top:12px; inset-inline-end:12px; width:40px; height:40px; border-radius:50%; border:0; background:var(--surface); display:grid; place-items:center}
.sheet .body{padding:18px 20px 0; padding-left:var(--gl); padding-right:var(--gr)}
.sheet h3{font-size:22px; margin:0 0 6px; line-height:1.3}
.sheet p{color:var(--muted); margin:0 0 14px}
.sheet .row{display:flex; align-items:baseline; gap:10px}
.sheet .price{font-size:22px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30px); opacity:.4}}

/* Admin */
.adm{position:fixed; inset:0; z-index:50; background:var(--bg); overflow:auto; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.adm-in{max-width:820px; margin:0 auto; padding-left:var(--gl); padding-right:var(--gr); padding-block:0 60px}
.adm-bar{position:sticky; top:0; z-index:2; background:var(--bg); display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding-block:14px; border-bottom:1px solid var(--line)}
.adm-bar strong{font-family:var(--f-display); font-weight:400; font-size:24px; color:var(--brand); display:block; line-height:1.1}
.state{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px}
.state i{width:8px; height:8px; border-radius:50%; background:var(--ok)}
.state.dirty i{background:var(--accent)}
.adm-btns{display:flex; gap:8px; flex-wrap:wrap}
a.btn{text-decoration:none; color:var(--ink)}
.btn{height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.btn.pri{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.btn.danger{color:var(--sale)}
.btn.armed{background:var(--sale); border-color:var(--sale); color:#fff}
.btn:disabled{opacity:.45; cursor:default}
.btn .ic{width:18px; height:18px}
.ib{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--surface); display:inline-grid; place-items:center; flex:none; padding:0}
.ib .ic{width:18px; height:18px}
.ib.armed{background:var(--sale); color:#fff; border-color:var(--sale)}
.ib:disabled{opacity:.35}
.tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-top:14px; border-bottom:1px solid var(--line)}
.tabs button{border:0; background:none; padding:10px 12px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap}
.tabs button.on{color:var(--brand); border-color:var(--accent)}
.msg{margin:12px 0 0; padding:10px 14px; border-radius:10px; font-size:14px; background:var(--sunk)}
.msg.err{background:color-mix(in srgb, var(--sale) 16%, var(--surface)); color:var(--ink)}
.msg.okm{background:color-mix(in srgb, var(--ok) 16%, var(--surface))}
.note{background:var(--sunk); border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:16px; font-size:14px}
.tool{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px}
.tool select{height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:0 10px; min-width:0; flex:1; max-width:260px}
.list{display:grid; gap:8px; margin-top:12px}
.lr{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px; min-width:0}
.lr .lt{width:52px; height:52px; border-radius:10px; background:var(--sunk); color:var(--muted); display:grid; place-items:center; overflow:hidden; flex:none}
.lr .lt.wide{width:92px}
.lr .lt img{width:100%; height:100%; object-fit:cover}
.lr .lm{flex:1; min-width:0}
.lr .lm b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lr .lm small{color:var(--muted); font-size:12.5px}
.lr .la{display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:520px){.lr{flex-wrap:wrap}.lr .la{width:100%; justify-content:flex-start; padding-inline-start:62px}}
.sw{position:relative; width:42px; height:24px; flex:none}
.sw input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.sw span{position:absolute; inset:0; border-radius:24px; background:var(--line); transition:background .2s; pointer-events:none}
.sw span::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + span{background:var(--ok)}
.sw input:checked + span::after{transform:translateX(18px)}
[dir="rtl"] .sw input:checked + span::after{transform:translateX(-18px)}
.sw input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.fields{display:grid; gap:14px; margin-top:16px}
.two{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.three{display:grid; gap:14px; grid-template-columns:1fr 1fr 1fr}
@media (max-width:520px){.two,.three{grid-template-columns:1fr}}
.f{display:grid; gap:6px; min-width:0}
.f > span{font-size:13px; font-weight:600}
.f > em{font-style:normal; font-size:12px; color:var(--muted)}
.f input:not([type=checkbox]):not([type=file]),.f select,.f textarea{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:10px 12px; min-height:44px}
.f textarea{min-height:76px; resize:vertical}
.chk{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px}
.imgbox{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.imgbox .pv{width:120px; aspect-ratio:1; border-radius:12px; background:var(--sunk); color:var(--muted); display:grid; place-items:center; overflow:hidden; border:1px dashed var(--line)}
.imgbox .pv.wide{width:220px; aspect-ratio:2.1/1}
.imgbox .pv img{width:100%; height:100%; object-fit:cover}
.upl{position:relative; overflow:hidden}
.upl input{position:absolute; inset:0; opacity:0; cursor:pointer}
.icons{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px}
.icons label{position:relative; height:52px; border-radius:12px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--brand); cursor:pointer}
.icons input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.icons label:has(input:checked){background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.icons label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.meter{height:8px; border-radius:8px; background:var(--sunk); overflow:hidden; margin-top:6px}
.meter i{display:block; height:100%; background:var(--accent)}
.form-scrim{position:fixed; inset:0; z-index:60; background:var(--scrim); display:flex; justify-content:center; align-items:flex-end}
.form{background:var(--bg); width:100%; max-width:640px; max-height:94vh; overflow:auto; border-radius:20px 20px 0 0; padding-left:var(--gl); padding-right:var(--gr); padding-block:0 calc(20px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.form-scrim{align-items:center}.form{border-radius:20px}}
.form-hd{position:sticky; top:0; background:var(--bg); z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:14px; border-bottom:1px solid var(--line)}
.form-hd h3{margin:0; font-size:18px}
.form-ft{display:flex; gap:8px; justify-content:flex-end; margin-top:20px}
.h4{font-weight:700; margin:22px 0 0; font-size:15px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* Additions: custom logo, notice, sizes */
.brand .custom-logo{height:64px; width:auto; max-width:220px; object-fit:contain}
.notice{margin:14px 0 0; background:var(--sunk); border-inline-start:3px solid var(--accent); border-radius:10px; padding:10px 14px; font-size:14px}
.price .from{font-weight:500; font-size:11.5px; color:var(--muted); margin-inline-end:4px; margin-inline-start:0}
.sizes{display:grid; gap:6px; margin-top:4px}
.sz{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 12px; background:var(--sunk); border-radius:10px}
.sz .price{font-size:17px}
.cal-line{margin-top:10px!important; font-size:13px}

/* Control panel shell */
.adm-page{min-height:100%; background:var(--bg)}
.adm-page .adm-in{padding-block:0 80px}
.adm-bar{top:env(safe-area-inset-top,0px)}
.adm-bar .who{display:flex; align-items:center; gap:12px; min-width:0}
.adm-bar .who .mark{width:40px; height:40px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; flex:none}
.adm-bar .who .mark svg{width:26px; height:auto}
.login{min-height:100vh; display:grid; place-items:center; padding-left:var(--gl); padding-right:var(--gr); padding-block:32px}
.login form{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 22px; display:grid; gap:16px}
.login .mark{width:64px; height:64px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; margin:0 auto}
.login .mark svg{width:40px; height:auto}
.login h1{font-family:var(--f-display); font-weight:400; font-size:28px; color:var(--brand); margin:0; text-align:center}
.login p{margin:0; color:var(--muted); text-align:center; font-size:14px}
.login .btn{justify-content:center; height:46px}
.toast{position:fixed; z-index:80; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:calc(100% - 32px); text-align:center; animation:up .2s}
.toast.err{background:var(--sale); color:#fff}
.size-rows{display:grid; gap:8px}
.size-row{display:grid; grid-template-columns:1fr 1fr 110px 36px; gap:8px; align-items:center}
.size-row input{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 10px; min-height:40px; min-width:0}
@media (max-width:520px){.size-row{grid-template-columns:1fr 1fr; }.size-row .p{grid-column:1}.size-row .ib{justify-self:end}}
.sec-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:12px; margin-top:16px}
.sec-card h4{margin:0; font-size:16px}
.sec-card p{margin:0; color:var(--muted); font-size:13.5px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.stat b{display:block; font-size:22px; font-variant-numeric:tabular-nums; color:var(--brand)}
.stat span{font-size:12.5px; color:var(--muted)}
.lr.hid .lm b{text-decoration:line-through; color:var(--muted)}
.tag{font-size:11px; font-weight:600; border-radius:6px; padding:1px 7px; background:var(--sunk); color:var(--muted); margin-inline-start:6px}
.searchmini{height:40px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:0 12px; flex:1; min-width:140px}

/* Socials + theme button */
.hd-btns{display:flex; gap:8px; flex:none}
.chipbtn.icon{width:40px; padding:0}
.chipbtn .ic{width:20px; height:20px}
.socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.soc{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); color:var(--brand); text-decoration:none; transition:background .2s, color .2s, transform .15s}
.soc .ic{width:21px; height:21px}
.soc:hover{background:var(--brand); color:var(--on-brand)}
.soc:active{transform:scale(.94)}
.soc-whatsapp{background:var(--brand); color:var(--on-brand)}
.ft-soc{margin-top:4px}
.ft-soc .soc{width:38px; height:38px; background:var(--surface); border:1px solid var(--line)}