:root{
  --brand:#0b6e4f; --brand2:#0d8a63; --accent:#ff7a45;
  --ink:#1c2733; --muted:#6b7a89; --line:#e8edf1; --bg:#f5f7f9; --card:#fff;
  --ok:#1f8a4c; --warn:#e0a800; --bad:#d64545; --radius:14px;
  --shadow:0 2px 10px rgba(18,39,51,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;overflow-x:clip}
/* Responsive "stretch to fit": the app must fit any screen width (small phones,
   large system fonts, tablets) without ever scrolling sideways. #app clips any
   residual horizontal overflow; flex rows shrink their children to fit instead
   of forcing the page wider than the screen. */
.row,.upload-row,.masterbar,.logo-row,.storetabs,.tabs,.topbar{min-width:0}
.row>*,.upload-row>*,.topbar>*{min-width:0}
a{color:var(--brand2);text-decoration:none}
img{max-width:100%;display:block}
/* Full-bleed on every device (phone, tablet, laptop/desktop): the app fills the whole
   screen/window edge-to-edge — no frame, no letterbox. Wrapper divs collapse with
   display:contents so #app is the root; position:fixed children are viewport-relative. */
#pge-stage,#pge-phone{display:contents}
#app{min-height:100dvh;background:var(--bg);position:relative;padding-bottom:calc(78px + env(safe-area-inset-bottom));overflow-x:clip}
@supports not (min-height:100dvh){#app{min-height:100vh}}
.hidden{display:none!important}

/* Top bar */
.topbar{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow)}
.topbar .tbtext{flex:1 1 auto;min-width:0}
.topbar>div:first-child{min-width:0}
.topbar h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topbar .sub{font-size:11px;opacity:.85;margin-top:2px}
.topbar .vident{font-size:11px;opacity:.95;margin-top:3px;font-weight:600;white-space:normal;overflow-wrap:anywhere;line-height:1.5;max-width:66vw}
.topbar .spacer{flex:1;min-width:0}
.topbar .tb-logo{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:#fff;background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.topbar .tb-logo-i{display:flex;align-items:center;justify-content:center;color:var(--brand);font-weight:800;font-size:15px}
.iconbtn{background:rgba(255,255,255,.16);border:none;color:#fff;width:28px;height:28px;border-radius:8px;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;padding:0}
.badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* Search */
.searchwrap{padding:12px 16px;background:var(--brand);position:sticky;top:64px;z-index:15}
.searchbox{display:flex;align-items:center;background:#fff;border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.searchbox input{border:none;outline:none;flex:1;font-size:15px;color:var(--ink);background:transparent}
.searchbox .si{color:var(--brand);font-size:16px;margin-right:8px}

/* Layout */
.wrap{padding:16px}
.section-title{font-size:15px;font-weight:700;margin:18px 16px 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;white-space:nowrap}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Cards */
.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:0 16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.itemcard{display:flex;gap:12px;padding:12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.itemcard .thumb{width:84px;height:84px;border-radius:10px;background:#eef2f4 center/cover no-repeat;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#9bb;font-size:24px}
.itemcard .body{flex:1;min-width:0}
.itemcard .name{font-weight:700;font-size:15px}
.itemcard .vend{font-size:12px;color:var(--muted);margin-top:2px}
.vendorcard{display:flex;gap:12px;padding:12px}
.vendorcard .thumb{width:84px;height:84px;border-radius:10px;background:#eef2f4 center/cover no-repeat;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#9bb;font-size:30px}
.vendorcard .body{flex:1;min-width:0}
.vendorcard .name{font-weight:800;font-size:16px}
.vendorcard .vend{font-size:12px;color:var(--muted);margin-top:2px}
/* Category cards (Zomato-style entry points) */
.catlist{display:flex;flex-direction:column;gap:10px;padding:0 16px}
.catcard{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.catcard:active{transform:scale(.985)}
.catcard .cicon{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;flex:0 0 auto}
.catcard .cmeta{flex:1;min-width:0}
.catcard .cname{font-weight:700;font-size:16px}
.catcard .csub{font-size:12px;color:var(--muted);margin-top:1px}
.catcard .cchev{color:var(--muted);font-size:26px;font-weight:300;line-height:1}
/* Auth note banner on login */
.authnote{margin:0 16px 4px;background:#eef6f1;color:var(--brand);border:1px solid #d6ebe0;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;text-align:center}
.itemcard .desc{font-size:12px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.price{font-weight:800;color:var(--ink)}
.stars{color:var(--warn);font-size:12px}
.muted{color:var(--muted);font-size:12px}
.storelink{color:var(--brand);font-weight:700;cursor:pointer;text-decoration:none}
.storelink:hover{text-decoration:underline}
.storelink:active{opacity:.65}
.tag{font-size:10px;background:#eef6f1;color:var(--brand);padding:2px 7px;border-radius:6px;font-weight:600;text-transform:capitalize}
.tag.svc{background:#fff0e8;color:var(--accent)}
.offline{font-size:10px;background:#fdecec;color:var(--bad);padding:2px 7px;border-radius:6px;font-weight:600}
.online{font-size:10px;background:#e7f6ec;color:var(--ok);padding:2px 7px;border-radius:6px;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn.block{width:100%}
.btn.block+.btn.block{margin-top:8px}
.iconbtn.back{font-size:20px;font-weight:300;background:rgba(255,255,255,.16)}
.iconbtn.bell,.iconbtn.info,.iconbtn.cart,.iconbtn.flip{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.iconbtn.flip{color:var(--brand)}
.iconbtn.flip:active{transform:scale(.92)}
/* Role-switch flip popup */
.flip-pop{position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;background:rgba(15,30,22,.55);backdrop-filter:blur(2px);animation:flipFade .18s ease}
.flip-card{background:#fff;border-radius:20px;padding:26px 30px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35);transform-origin:center;animation:flipIn .5s cubic-bezier(.2,.8,.2,1.1);min-width:210px;max-width:80vw}
.flip-card .flip-ic{font-size:46px;line-height:1;animation:flipPulse .6s ease}
.flip-card .flip-ttl{font-size:19px;font-weight:800;margin-top:10px;color:#16311f}
.flip-card .flip-sub{font-size:13px;color:#5b6b60;margin-top:4px}
.flip-card.flip-vendor{border-top:5px solid var(--brand)}
.flip-card.flip-customer{border-top:5px solid #d98324}
@keyframes flipFade{from{opacity:0}to{opacity:1}}
@keyframes flipIn{from{opacity:0;transform:rotateY(90deg) scale(.7)}to{opacity:1;transform:rotateY(0) scale(1)}}
@keyframes flipPulse{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.legalwrap{max-width:720px;margin:0 auto;padding:14px 14px 90px}
.legaltabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.legaltabs .ltab{background:#f0f2f5;border:1px solid #e2e6ea;color:#33414d;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.legaltabs .ltab.on{background:#0b6e4f;border-color:#0b6e4f;color:#fff}
.legalbody{background:#fff;border:1px solid #e6ecf1;border-radius:14px;padding:20px 22px;line-height:1.6;color:#1c2733}
.legalbody h2{font-size:22px;margin:0 0 14px;color:#0b6e4f}
.legalbody p{margin:0 0 12px;font-size:15px}
.legalbody a.btn{display:inline-block}
.freebox{background:linear-gradient(135deg,#eafaf2,#dff6ea);border:1px solid #bfe6d3;border-radius:12px;padding:14px 16px;margin:0 0 16px;font-size:15px;line-height:1.55;color:#0b5a40}
.devbox{background:#f4f7f9;border:1px solid #e2e8ee;border-radius:12px;padding:14px 16px;margin:8px 0 4px}
.devbox .devh{font-weight:700;color:#0b6e4f;font-size:16px}
.fbbox{background:#fff;border:1px solid #e2e8ee;border-radius:12px;padding:14px 16px;margin:14px 0 4px}
.fbbox .devh{font-weight:700;color:#0b6e4f;font-size:16px}
.fbtext{width:100%;border:1px solid #d3dbe2;border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit;resize:vertical;box-sizing:border-box}
.fbrow{display:flex;gap:8px;margin:8px 0}
.fbin{flex:1;border:1px solid #d3dbe2;border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;box-sizing:border-box;min-width:0}
.fbnote{margin-top:8px;font-size:14px;font-weight:600}
.fbnote.ok{color:#0b7a44}.fbnote.err{color:#c0392b}
.legalfoot{text-align:center;color:#8a99a6;font-size:12px;margin-top:18px}
.installbar{position:fixed;left:12px;right:12px;bottom:78px;z-index:10000;background:#0b6e4f;color:#fff;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:14px;max-width:520px;margin:0 auto}
.installbar.top{position:static;top:auto;bottom:auto;left:auto;right:auto;margin:0;max-width:none;border-radius:0;padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;box-shadow:none;z-index:1}
.installbar span{flex:1;line-height:1.3}
.installbar button{background:#fff;color:#0b6e4f;border:none;border-radius:8px;padding:7px 14px;font-weight:800;cursor:pointer;white-space:nowrap}
.installbar button#pgeInstallX{background:transparent;color:#fff;padding:6px 6px;font-size:15px}
.logoutbtn{background:#e23744;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);font-size:14px}
.logoutbtn:hover{background:#c62d39}
.logoutbtn:active{transform:scale(.95)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.alt{background:var(--accent)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.notifreminder{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:40;background:#fff4d6;border:1px solid #e7c964;color:#7a5b00;border-radius:12px;padding:9px 12px;display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.18);max-width:520px;margin:0 auto;cursor:pointer}
.notifreminder b{color:#7a5b00}
.btn.gray{background:#eef2f4;color:var(--ink)}
.btn.danger{background:var(--bad)}
.btn:disabled{opacity:.5}

/* Forms */
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;outline:none;background:#fff;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.form-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:16px}
.logo-row{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.logo-preview{width:72px;height:72px;border-radius:16px;background:#eef2f4 center/cover no-repeat;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--line)}
.logo-field{flex:1;min-width:0}
.logo-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.logo-field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;outline:none;background:#fff;font-family:inherit}
.logo-field input:focus{border-color:var(--brand)}

/* Login */
.tabs{display:flex;background:#fff;border-radius:12px;overflow:hidden;margin:16px;box-shadow:var(--shadow)}
.tabs button{flex:1;min-width:0;padding:13px 8px;border:none;background:#fff;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button.active{background:var(--brand);color:#fff}
.tabpane[hidden]{display:none}
.hrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hrow:last-child{border-bottom:none}
.hrow .hday{flex:0 0 40px;font-weight:700;font-size:13px}
.hrow .hopen{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:13px}
.hrow input[type=time]{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.hrow input[type=time]:disabled{background:#f2f2f2;color:#aaa}
.hrow .hdash{color:var(--muted)}
.holrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.holrow:last-child{border-bottom:none}
span.closing{background:#fff3e0;color:#b35900;border:1px solid #ffcc80;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:30px 20px 22px;text-align:center}
.hero h2{margin:0 0 4px;font-size:24px}
.hero p{margin:0;opacity:.9;font-size:14px}

/* Bottom nav */
.bottomnav{position:fixed;bottom:0;left:0;right:0;max-width:none;margin:0 auto;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30}
.bottomnav button{flex:1;border:none;background:none;padding:9px 0 7px;font-size:10px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.bottomnav button .ic{font-size:19px}
.bottomnav button.active{color:var(--brand);font-weight:700}

/* Status pill */
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-block}
.cbadge{display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;background:#fff;color:var(--accent);border-radius:999px;font-size:12px;font-weight:800;line-height:18px;text-align:center}
.pill.pending{background:#fff6e5;color:#a87b00}
.pill.confirmed{background:#e6f0ff;color:#2563c9}
.pill.preparing{background:#fff0e8;color:var(--accent)}
.pill.awaited_pickup{background:#f0ecff;color:#6b46c1}
.pill.on_way{background:#e7f6ec;color:var(--ok)}
.pill.complete{background:#e7f6ec;color:var(--ok)}
.pill.payment_received{background:#dff5e6;color:#0a7a3d}
.pill.cancelled{background:#fdecec;color:var(--bad)}
.pill.requested{background:#fff6e5;color:#a87b00}
.pill.approved{background:#e7f6ec;color:var(--ok)}
.pill.rejected{background:#fdecec;color:var(--bad)}

/* Timeline */
.timeline{margin:10px 0}
.timeline .step{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.timeline .dot{width:12px;height:12px;border-radius:50%;background:var(--brand);margin-top:4px;flex:0 0 auto}
.timeline .step.future .dot{background:var(--line)}
.timeline .ln{font-size:13px}

/* Misc */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty .big{font-size:40px;margin-bottom:8px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1c2733;color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;z-index:100;box-shadow:var(--shadow);max-width:90%}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modal{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:760px;padding:20px;max-height:88vh;overflow:auto;position:relative}
.modal-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:#eef1f0;color:#333;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.modal-x:hover{background:#e0e4e2}
.modal h3{padding-right:40px}
.modal-bg.center .modal h3{padding-right:0}
/* Centered popup variant (fully visible, no scroll, never overflows) — used by the vendor notification gate */
.modal-bg.center{align-items:center;padding:16px}
.modal-bg.center .modal{border-radius:18px;width:100%;max-width:360px;margin:0 auto;max-height:calc(100dvh - 32px);text-align:center;overflow:auto}
.modal-bg.center .modal h3{margin:4px 0 12px}
.modal-bg.center .modal .btn.block{margin-top:6px}
.modal h3{margin:0 0 14px}
.modal .close{position:absolute;top:10px;right:14px;font-size:22px;color:#fff;cursor:pointer}
/* Item detail bottom sheet (slide-up drawer, keeps the menu behind) */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.sheet-bg.show{opacity:1}
.sheet-panel{background:#fff;width:100%;max-width:600px;max-height:90vh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;position:relative;overflow:hidden;transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sheet-bg.show .sheet-panel{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:#d0d5db;margin:8px auto 2px;flex:0 0 auto}
.sheet-x{position:absolute;top:8px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:#eef1f0;color:#333;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.sheet-x:hover{background:#e0e4e2}
.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.sheet-img{width:100%;height:200px;background:#f2f4f7 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:52px}
.sheet-gal{position:relative}
.sheet-gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sheet-gal-track::-webkit-scrollbar{display:none}
.sheet-gal-slide{flex:0 0 100%;width:100%;height:220px;background:#f2f4f7 center/cover no-repeat;scroll-snap-align:center}
.sheet-gal-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.sheet-gal-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 2px rgba(0,0,0,.4)}
.sheet-gal-dots span.on{background:#fff;width:9px;height:9px}
.gallery-grid{display:flex;flex-wrap:wrap;gap:8px}
.gal-thumb{position:relative;width:72px;height:72px;border-radius:12px;background:#eef2f4 center/cover no-repeat;border:1px solid var(--line);cursor:pointer}
.gal-thumb.cover{border:2px solid var(--brand,#0a7)}
.gal-badge{position:absolute;left:4px;bottom:4px;background:var(--brand,#0a7);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:6px}
.gal-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:#e23;color:#fff;font-size:11px;line-height:20px;padding:0;cursor:pointer}
.gal-crop{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--brand,#0a7);color:#fff;font-size:11px;line-height:20px;padding:0;cursor:pointer}
.gal-empty{color:var(--muted,#889);font-size:13px;padding:14px 0}
.sheet-body{padding:16px}
.sheet-name{font-size:20px;font-weight:800;line-height:1.2}
.sheet-foot{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.list-row{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.pay-card{border:1px solid #bfe6cf;background:#f2faf5;border-radius:12px;padding:14px;margin-top:12px}
.pay-card.verified{border-color:#0b6e4f;background:#eef8f1}
.pay-card h4{font-size:15px}
.pay-card .payupi{background:#0b6e4f}
.chk-row{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer;margin-bottom:8px}
.chk-row input{margin-top:2px;flex:0 0 auto}
.crop-ov{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.crop-box{background:#fff;border-radius:16px;padding:16px;max-width:92vw;display:flex;flex-direction:column;align-items:center;gap:12px}
.crop-title{font-size:13px;color:#555;text-align:center;font-weight:600}
.crop-wrap{position:relative;overflow:hidden;border-radius:10px;background:#222;touch-action:none;-webkit-user-select:none;user-select:none}
.crop-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;cursor:move;-webkit-user-drag:none}
.crop-hole{position:absolute;box-shadow:0 0 0 4000px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.9);pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(255,255,255,.45) 0 1px,transparent 1px 33.333%),repeating-linear-gradient(to bottom,rgba(255,255,255,.45) 0 1px,transparent 1px 33.333%)}
.crop-hole .ch{position:absolute;width:16px;height:16px;border:3px solid #fff}
.crop-hole .tl{left:-2px;top:-2px;border-right:0;border-bottom:0}
.crop-hole .tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.crop-hole .bl{left:-2px;bottom:-2px;border-right:0;border-top:0}
.crop-hole .br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.crop-zoomrow{display:flex;align-items:center;gap:10px;width:100%}
.crop-zoomrow span{font-size:13px}
.crop-zoom{flex:1}
.crop-actions{display:flex;gap:10px;width:100%}
.crop-actions .btn{flex:1}

/* Offers & promotions */
.offerbadge{display:inline-block;background:#e7f6ec;color:#0b6e4f;font-weight:700;font-size:12px;padding:3px 9px;border-radius:20px;margin-top:6px}
.offerbanner{background:linear-gradient(90deg,#0b6e4f,#13966b);color:#fff;font-weight:700;font-size:14px;padding:10px 14px;border-radius:12px;margin:0 16px 12px}
.prepbadge{display:inline-block;background:#eef4ff;color:#1a4fa0;border:1px solid #cfe0ff;font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;margin-top:8px}
.qstep{display:inline-flex;align-items:center;gap:2px;background:#0b6e4f;border-radius:8px;overflow:hidden}
.qstep .qbtn{background:transparent;color:#fff;border:0;width:30px;height:32px;font-size:18px;line-height:1;font-weight:700;cursor:pointer;padding:0}
.qstep .qbtn:active{background:rgba(255,255,255,.18)}
.qstep .qn{color:#fff;min-width:22px;text-align:center;font-weight:700;font-size:14px}
.cartbar{position:fixed;left:0;right:0;bottom:52px;max-width:none;margin:0 auto;z-index:29;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0b6e4f;color:#fff;padding:11px 16px;cursor:pointer;box-shadow:0 -3px 12px rgba(0,0,0,.18);animation:cbup .18s ease-out}
@keyframes cbup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cartbar .cb-l{display:flex;flex-direction:column;line-height:1.25}
.cartbar .cb-n{font-size:12px;opacity:.9}
.cartbar .cb-t{font-size:16px;font-weight:800}
.cartbar .cb-go{font-size:15px;font-weight:800}
.upsell-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.upsell-card{flex:0 0 118px;width:118px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column}
.upsell-thumb{height:76px;border-radius:8px;background:#f2f2f2 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:6px}
.upsell-name{font-size:12px;font-weight:700;line-height:1.25;height:30px;overflow:hidden}
.upsell-price{font-size:13px;font-weight:800;margin:3px 0 6px}
.orderagain{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#fff7ec;border:1px solid #ffdca8;border-radius:12px;padding:11px 14px;margin-top:12px}
.orderagain .oa-txt{flex:1;min-width:0}
.orderagain .oa-txt .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderagain .btn{flex:0 0 auto;white-space:nowrap}
.linkbtn{background:none;border:none;color:#c0392b;font-size:13px;font-weight:700;cursor:pointer;padding:2px 4px}
.linkbtn:active{opacity:.6}
.mrp{color:var(--muted);text-decoration:line-through;font-size:13px;margin-left:8px}
.offpct{color:#0b6e4f;font-weight:700;font-size:12px;margin-left:6px}
.soldbadge{font-size:10px;background:#fdecec;color:var(--bad);padding:2px 7px;border-radius:6px;font-weight:700;margin-left:6px}
.itemcard.issold .thumb{filter:grayscale(1);opacity:.55}
.itemcard.issold .name,.itemcard.issold .vend,.itemcard.issold .desc,.itemcard.issold .price,.itemcard.issold .mrp,.itemcard.issold .tag{opacity:.5}
.btn.notify{background:#fff;color:var(--brand,#0b6e4f);border:1.5px solid var(--brand,#0b6e4f)}
.btn.notify.watching{background:#e7f6ec;color:#0a7a3d;border-color:#0a7a3d}
.avswitch{display:inline-flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer;user-select:none}
.avswitch input{position:absolute;opacity:0;width:0;height:0}
.avswitch .track{width:40px;height:22px;border-radius:11px;background:#c6ccd2;position:relative;transition:background .2s;flex:0 0 auto}
.avswitch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.avswitch input:checked + .track{background:var(--ok)}
.avswitch input:checked + .track::after{transform:translateX(18px)}
.avswitch .avlabel{font-size:12px;font-weight:600;color:var(--bad)}
.avswitch input:checked ~ .avlabel{color:var(--ok)}
.spswitch{display:flex;margin-top:6px}
.spswitch .avlabel{color:var(--muted,#889)}
.spswitch input:checked + .track{background:#e8a400}
.spswitch input:checked ~ .avlabel{color:#c47f00}
.pill.rescheduled{background:#f0ecff;color:#6b46c1}
.unit{font-size:12px;font-weight:500;color:var(--muted)}
.qtyleft{font-size:11px;background:#e7f6ec;color:#0a7a3d;padding:2px 8px;border-radius:6px;font-weight:700;margin-left:6px}
.lowstock{color:#c0392b;font-weight:700;font-size:12px;margin-top:4px}
.stockalert{margin:12px 16px 0;background:#fff8e6;border:1px solid #f4d58a;border-radius:12px;padding:12px 14px}
.stockalert .sahead{font-weight:800;color:#8a5a00;font-size:14px}
.stockalert .sabody{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.stockalert .saitem{font-size:12px;background:#fff;border:1px solid #eee2c0;border-radius:8px;padding:4px 8px;font-weight:600}
.menuq{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:#fff}
.menuq:focus{outline:none;border-color:var(--brand)}
.qtyrow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.switchrow{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;user-select:none}
.qtystepper{display:flex;align-items:stretch;gap:0;max-width:220px}
.qtystepper button{flex:0 0 46px;background:#f2f4f7;border:1px solid var(--line);color:var(--ink,#111);font-size:22px;font-weight:600;line-height:1;cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.qtystepper button:first-child{border-radius:10px 0 0 10px}
.qtystepper button:last-child{border-radius:0 10px 10px 0}
.qtystepper button:active{background:#e4e8ee}
.qtystepper input{width:100%;text-align:center;border-radius:0!important;border-left:none!important;border-right:none!important;-moz-appearance:textfield}
.qtystepper input::-webkit-outer-spin-button,.qtystepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtypicks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qtypicks button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer;font-family:inherit;touch-action:manipulation}
.qtypicks button:active{background:#eef6f0}
.reschedbox{background:#f0ecff;border:1px solid #dcd3fb;border-radius:10px;padding:10px;margin:8px 0;font-size:13px}

/* Filter bar */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 16px;overflow-x:auto}
.fchip{border:1px solid var(--line);background:#fff;color:var(--ink,#1c2733);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.fsort{margin-left:auto;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;background:#fff}

/* Blocked screen */
.blocked-screen{max-width:420px;margin:60px auto;text-align:center;padding:30px 22px}
.blocked-screen .big{font-size:48px;margin-bottom:14px}
.blocked-screen h2{margin:0 0 10px;color:var(--bad,#d23f3f)}
.blocked-screen p{color:var(--muted);margin:0 0 18px}

/* Master admin */
.masterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#1c2733;color:#fff;font-size:13px;padding:8px 16px}
.masterbar b{color:#ffd479}
.masterbar .btn{margin-left:auto}
.storelist{display:flex;flex-direction:column;gap:10px}
.storepick{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer}
.storepick.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(0,0,0,.04)}
.storepick .sp-name{font-weight:700;font-size:16px;margin-bottom:4px}
.storepick .sp-meta{color:var(--muted);font-size:13px}
.storetabs{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;background:#eef2f0;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.storetabs .stab{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.storetabs .stab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.storetabs .stab.add{border-style:dashed;color:var(--brand)}
/* Home banner carousel. The banner size is LOCKED to a phone-scale size on every
   device (--banner-w / height stay constant). On wide screens (tablet, full-bleed) the
   neighbouring banners peek at the sides, dimmed & scaled down, so the centred banner
   stays in focus. Width is set per device via the .dev-* class on <html> (JS-driven). */
.carousel{position:relative;margin:16px 16px 4px;overflow:hidden;--banner-w:100%}
.carousel .btrack{display:flex;gap:14px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.carousel .bslide{flex:0 0 var(--banner-w);height:188px;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--shadow);background-color:#dfe7e3;display:flex;align-items:flex-end;text-decoration:none;transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.carousel .bslide:not(.on){opacity:.5;filter:grayscale(.55) brightness(.82);transform:scale(.93)}
.carousel .bcap{background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-weight:700;font-size:15px;padding:16px 14px 10px;width:100%}
.carousel .bdots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2}
.carousel .bdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.carousel .bdot.on{background:#fff;width:16px;border-radius:4px}
/* Locked banner width per device. phone: fills the column (no peek). tablet: fixed
   phone-scale width, centred, with dimmed neighbours peeking at both sides. desktop:
   the app is already inside a 390px phone frame, so the banner is phone-scale there too. */
.dev-phone .carousel{--banner-w:100%}
/* tablet & desktop are wide full-bleed: lock the banner to phone scale and show the
   neighbouring banners peeking, dimmed, at the sides so the centred one stays in focus. */
.dev-tablet .carousel,.dev-desktop .carousel{margin:16px 0 4px;--banner-w:390px}
.banner-preview{margin-top:8px;max-width:390px;aspect-ratio:3/1;height:auto;border-radius:12px;background-size:cover;background-position:center;border:1px solid var(--line)}
.upload-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.btn-mini{background:var(--brand);color:#fff;border:none;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn-mini:disabled{opacity:.6;cursor:default}
.upload-status{font-size:12px;color:var(--muted)}
.qtybtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:16px;cursor:pointer}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;text-align:center}
.stat .n{font-size:22px;font-weight:800;color:var(--brand)}
.stat .l{font-size:11px;color:var(--muted);margin-top:2px}
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 16px}
.center{text-align:center}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp 1s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.ratepick{display:flex;gap:6px;font-size:30px;color:var(--line);cursor:pointer;justify-content:center;margin:8px 0}
.ratepick .on{color:var(--warn)}
.fab{position:fixed;right:18px;bottom:92px;background:var(--brand);color:#fff;width:54px;height:54px;border-radius:50%;border:none;font-size:26px;box-shadow:var(--shadow);cursor:pointer;z-index:25}
.favbtn{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:50%;filter:grayscale(1);opacity:.7;transition:transform .1s ease}
.favbtn.on{filter:none;opacity:1}
.favbtn:active{transform:scale(1.25)}
.recentrow{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.recentrow::-webkit-scrollbar{display:none}
.recentcard{flex:0 0 auto;width:72px;text-decoration:none;color:inherit;text-align:center}
.ravatar{width:58px;height:58px;margin:0 auto 6px;border-radius:50%;background:linear-gradient(135deg,#0a7d55,#0fae74);color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.recentcard .rname{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.4em}
.ordernote{background:#fff8e1;border:1px solid #ffe0a3;border-radius:8px;padding:8px 10px;margin-top:8px;font-size:13px;line-height:1.35;color:#5c4b1a}
/* Today's Specials shoppable carousel */
.sprow{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.sprow::-webkit-scrollbar{display:none}
.spcard{flex:0 0 140px;width:140px;background:#fff;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.08);overflow:hidden;text-decoration:none;color:inherit;scroll-snap-align:start}
.spimg{position:relative;height:96px;background:#f0f0f0 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:30px}
.spoff{position:absolute;top:6px;left:6px;background:#138a4e;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.spbody{padding:8px 10px}
.spname{font-size:13px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.4em}
.spstore{font-size:11px;color:#888;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spprice{font-size:14px;font-weight:800;color:#138a4e;margin-top:4px}
.spmrp{font-size:11px;color:#aaa;text-decoration:line-through;font-weight:500}
/* Buzz colony ad feed */
.buzzcarousel{max-width:520px;margin:0 auto;position:relative;overflow:hidden;border-radius:16px;background:#111}
.buzztrack{display:flex;transition:transform .4s ease;will-change:transform}
.buzzslide{position:relative;flex:0 0 100%;height:calc(100vh - 210px);min-height:360px;overflow:hidden;background:#111}
.buzzimg{position:absolute;inset:0;background:#111 center/cover no-repeat}
.buzzover{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 60%,transparent);color:#fff}
.buzzslide .btn.block{margin-top:0}
.buzzlink{color:#fff;border-color:rgba(255,255,255,.6);margin-top:8px}
.buzzdots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:7px;z-index:3}
.buzzdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .2s}
.buzzdot.on{background:#fff;width:20px;border-radius:4px}
.buzzthumb{height:120px;border-radius:10px;background:#eee center/cover no-repeat;margin-top:8px}
.logo-preview.big{width:96px;height:150px;background-size:cover;background-position:center}
.ratenudge{border:1px solid #ffe0a3;background:#fff8e1;padding:12px 14px}
.revcard{padding:4px 0}
.revrow{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #f0f0f0}
.revrow:last-child{border-bottom:0}
.revav{width:34px;height:34px;border-radius:50%;background:#e7f2ec;color:#0b6e4f;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.revhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.revstars{color:#f5a623;font-size:13px;letter-spacing:1px}
.revitem{font-size:12px;margin-top:1px}
.revtext{margin-top:3px;font-size:14px;color:#333}
.fromlbl{font-size:12px;color:#666;margin-right:2px}
.varchip{display:inline-block;font-size:10px;font-weight:700;color:#0a7a3f;background:#e7f6ec;border:1px solid #bfe6cd;padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.varsel{font-size:12px;padding:4px 6px;border:1px solid #d9d9d9;border-radius:8px;max-width:52%;background:#fff}
.varsel-lg{width:100%;padding:10px;border:1px solid #d9d9d9;border-radius:10px;font-size:15px;background:#fff}
.varrow{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.varrow .v-label{flex:1.4}
.varrow .v-price,.varrow .v-mrp{flex:1;min-width:0}
.varrow input{padding:8px;border:1px solid #d9d9d9;border-radius:8px;font-size:14px}
.varrow .v-del{flex:0 0 auto;color:#c0392b}

/* ============================================================================
   SAFARI-ONLY LAYOUT FIXES  (scoped to html.safari — Chrome is never affected).
   Global rule: Safari fixes must be gated behind Safari detection.
   ========================================================================== */
/* iOS status-bar overlap + home-indicator safe areas, and a roomier top-bar
   icon cluster (Safari squeezes the icons together). */
html.safari .topbar{padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));gap:9px}
html.safari .searchwrap{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top))}
html.safari .bottomnav{padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
html.safari #app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

/* Store / item / category cards: Safari does not expand the flex text body the
   same way Chrome does (it squeezes the text and lets it merge under the photo).
   Pin the photo (no vertical stretch) and force the body to take the remaining
   width via the reliable flex:1 1 auto + width:1% pattern. */
html.safari .itemcard,html.safari .vendorcard{align-items:flex-start}
html.safari .itemcard>.thumb,html.safari .vendorcard>.thumb{align-self:flex-start}
html.safari .itemcard>.body,html.safari .vendorcard>.body{flex:1 1 auto;width:1%;min-width:0}
html.safari .catcard>.cmeta{flex:1 1 auto;width:1%;min-width:0}