/*!
 * Pacific Golf Estate (PGE) Marketplace — stylesheet
 * © Mohit Maurya <maurya.mohit07@gmail.com>. All rights reserved.
 * Proprietary and confidential. Unauthorized copying, modification, distribution,
 * or use of this source code, in whole or in part, is strictly prohibited.
 */
:root{
  color-scheme:only light;
  --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);
  --topbar-h:64px; --searchwrap-h:48px;
}
*{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}
/* When the floating "View cart" bar is visible it stacks above the bottom nav,
   so reserve extra space to keep the last list item (its Add button) tappable. */
html.has-cartbar #app{padding-bottom:calc(134px + env(safe-area-inset-bottom))}
@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:15px;margin:0;font-weight:700;letter-spacing:0;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}
.topbar.store-topbar .tbtext{padding-top:1px}
.topbar.store-topbar h1{font-size:17px}
.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:var(--topbar-h,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}
.ordsearch{display:flex;gap:8px;align-items:center;padding:10px 16px 2px}
.ordsearch input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--card)}
.ordsearch .btn{flex:0 0 auto}
.chips::-webkit-scrollbar{display:none}
.menuchips{position:sticky;top:calc(var(--topbar-h,64px) + var(--searchwrap-h,48px));z-index:12;background:var(--bg,#f5f7f8);box-shadow:0 2px 6px rgba(0,0,0,.04)}
/* Two-level sticky store category nav (sits flush 1px under the green search header). */
.menucatbar{position:sticky;top:calc(var(--topbar-h,64px) + var(--searchwrap-h,48px));z-index:12;background:var(--card,#fff);border-top:1px solid rgba(0,0,0,.04);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.menucatbar .catrow{padding:8px 12px}
.menucatbar .subrow{padding:0 12px 8px;gap:6px}
.chip.sub{padding:5px 12px;font-size:12px;background:var(--bg,#f5f7f8)}
.chip.sub.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.section-title.subttl{font-size:14px;margin-top:10px;color:var(--muted)}
.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;position:relative}
.vendorcard .name{font-weight:800;font-size:16px}
.vendorcard .vend{font-size:12px;color:var(--muted);margin-top:2px}
.vendorcard .vendor-card-head{padding-right:92px}
.vendorcard .vendor-card-status{position:absolute;top:0;right:0;margin-top:0;gap:6px;flex-wrap:nowrap}
/* 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}
.storehero-main{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.storehero-copy{flex:1;min-width:0}
.storehero-side{display:flex;align-items:flex-start;gap:8px;flex:0 0 auto}
.storehero-logo{width:92px;height:92px;border-radius:18px;background:#fff center/contain no-repeat;border:1px solid #e4eaed;box-shadow:0 2px 8px rgba(18,39,51,.08);flex:0 0 92px}
.storehero-logo-i{display:flex;align-items:center;justify-content:center;background:#e8f4ee;color:var(--brand);font-size:30px;font-weight:800}
.storehero-side .favbtn{margin-top:6px}
@media(max-width:380px){
  .storehero-logo{width:76px;height:76px;flex-basis:76px;border-radius:15px}
}
.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}
.wallet-store-banner,.wallet-hero{background:linear-gradient(135deg,#ecfff7,#dff7ec);border:1px solid #b8e4cf;border-radius:14px;padding:14px;color:#174d3b}
.wallet-store-banner>div,.wallet-hero>div{font-size:13px;margin-top:4px}
.wallet-rules{display:grid;gap:5px;margin-top:8px}
.wallet-rule{padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.58);line-height:1.35;color:#10261a}
.wallet-rule.active{border-left:3px solid var(--brand);font-weight:700}
.wallet-slot-editor{margin-top:10px;padding:10px;border:1px solid #cfe6d9;border-radius:10px;background:#f8fffb}
.wallet-booking-state{font-weight:800;color:var(--brand)}
.wallet-balance-line,.wallet-checkout-balance{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #b8e4cf}
.wallet-checkout-note{margin-top:10px;padding:10px 12px;border-radius:10px;background:#ecfff7;border:1px solid #b8e4cf;color:#174d3b;font-size:13px}
.adv-balance-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#0b6e4f,#0e8a63);color:#fff;box-shadow:0 2px 8px rgba(11,110,79,.25)}
.adv-balance-bar .adv-balance-label{font-size:13px;font-weight:700;opacity:.95}
.adv-balance-bar .adv-balance-amt{font-size:22px;font-weight:800;letter-spacing:.01em}
.adv-balance-bar .storelink-light{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.adv-low-note{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff4e5;border:1px solid #ffb020;color:#8a5300;font-size:13px}
.adv-closed-note{margin-top:10px;padding:10px 12px;border-radius:10px;background:#eef2f7;border:1px solid #b6c2d1;color:#3a4a5e;font-size:13px}
.wallet-checkout-balance{margin:0 0 10px;padding:10px 12px;border:1px solid #b8e4cf;border-radius:10px;background:#ecfff7}
.wallet-customer{padding:14px;margin-bottom:10px}
.wallet-customer .btn{margin-top:10px}
.wallet-ledger-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.wallet-plus{color:var(--ok)}.wallet-minus{color:var(--bad)}
.fulfillmentbadge{display:inline-block;margin:0 6px 3px 0;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.35;vertical-align:2px;white-space:nowrap}
.fulfillmentbadge.nextday{background:#fff3d6;color:#875500;border:1px solid #efd28d}
.fulfillmentbadge.instant{background:#e7f8ee;color:#0b6e4f;border:1px solid #b8e4cf}
.repeat-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.repeat-day input{position:absolute;opacity:0;pointer-events:none}.repeat-day span{display:block;padding:8px 2px;text-align:center;border:1px solid #d8e2dd;border-radius:8px;font-size:11px;font-weight:800;color:#617069}
.repeat-day input:checked+span{background:#147a51;border-color:#147a51;color:#fff}
.repeat-card{padding:14px;margin-bottom:10px}.repeat-weekdays{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.repeat-weekdays span{padding:3px 7px;border-radius:999px;background:#e9f5ef;color:#0b6e4f;font-size:11px;font-weight:800}
.forecast-hero{margin-bottom:8px}.forecast-total{margin-top:8px;font-size:21px;font-weight:900}.forecast-list{padding:4px 14px;margin-bottom:14px}
.forecast-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #edf1ef}.forecast-row:last-child{border-bottom:0}.forecast-qty{min-width:42px;text-align:center;padding:6px 10px;border-radius:10px;background:#e8f5ee;color:#0b6e4f;font-size:19px}
.menu-list{display:flex;flex-direction:column;gap:10px}
.menu-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;font-family:inherit}
.menu-tile .menu-ic{font-size:22px;width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;background:#f2f7f4;border-radius:10px}
.menu-tile .menu-txt{display:flex;flex-direction:column;flex:1;min-width:0}.menu-tile .menu-txt b{font-size:15px}.menu-tile .menu-txt .muted{font-size:12px;margin-top:2px}
.menu-tile .menu-chev{font-size:22px;color:#9aa8a0}
.audit-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:10px 0}.audit-filters .field{margin:0}
.audit-summary{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.audit-summary>div{flex:1 1 30%;background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:10px}.audit-summary>div .muted{display:block;font-size:11px}.audit-summary>div b{font-size:16px}
.audit-row{padding:10px 0;border-bottom:1px solid var(--line)}.audit-row:last-child{border-bottom:0}.audit-main{display:flex;justify-content:space-between;gap:10px}
.audit-rcpt{font-size:11px;font-weight:700;background:#eef4f0;color:#0b6e4f;padding:1px 6px;border-radius:6px;margin-left:4px}
.audit-proof{display:inline-block;margin-top:4px;font-size:12px;color:var(--brand)}
.stmt-summary{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.stmt-card{flex:1 1 44%;background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stmt-card .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.stmt-card b{font-size:18px}.stmt-card .sub{font-size:11px;color:var(--muted)}
.stmt-card-hi{background:#eef4f0;border-color:#bfe0d0}
.stmt-custbanner{background:#eef4f0;border:1px solid #bfe0d0;border-radius:10px;padding:8px 12px;margin:10px 0;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stmt-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;margin:10px 0}
.stmt-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.stmt-table th,.stmt-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.stmt-table th{background:#f7f7f7;text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;color:var(--muted);position:sticky;top:0}
.stmt-table td.r,.stmt-table th.r{text-align:right}.stmt-table td.nowrap{white-space:nowrap}
.stmt-table tbody tr:last-child td,.stmt-table tbody tr:last-child td{border-bottom:0}
.stmt-cust{color:var(--brand);cursor:pointer;font-weight:600}
.stmt-table .muted{font-size:11px}
.vendor-category,.store-category{display:block;font-weight:600}.vendor-tagline,.store-tagline{display:block;margin-top:3px;line-height:1.35}.vendorcard .vend.vendor-tagline,.store-tagline.muted,.storehero .store-tagline{color:var(--ink)}

/* 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:6px;flex-wrap:wrap;margin-bottom:14px}
.legaltabs .ltab{background:#f0f2f5;border:1px solid #e2e6ea;color:#33414d;border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1.2;white-space:nowrap}
.legaltabs .ltab.on{background:#0b6e4f;border-color:#0b6e4f;color:#fff}
.legalbody{background:#fff;border:1px solid #e6ecf1;border-radius:14px;padding:18px 18px;line-height:1.55;color:#1c2733}
.legalbody h2{font-size:19px;margin:0 0 12px;color:#0b6e4f}
.legalbody p{margin:0 0 11px;font-size:14px}
.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}
/* ---- Guidebook (#/legal/guide) ---- */
.gd,.dl{color:#1c2733;line-height:1.6}
.gd-hero{background:linear-gradient(135deg,#0b6e4f,#12876a);color:#fff;border-radius:16px;padding:20px 18px;margin:0 0 16px;box-shadow:0 8px 22px rgba(11,110,79,.18)}
.gd-hero h2{color:#fff;margin:8px 0 7px;font-size:20px}
.gd-hero p{margin:0;font-size:13.5px;color:#eafaf2;line-height:1.55}
.gd-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700}
.gd-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.gd-jump a{flex:1;min-width:120px;text-align:center;background:#f0f7f4;border:1px solid #cfe6db;color:#0b6e4f;border-radius:12px;padding:11px 8px;font-size:13.5px;font-weight:700;text-decoration:none}
.gd-jump a:active{background:#dff1e9}
.gd-sec{background:#fff;border:1px solid #e6ecf1;border-radius:14px;padding:16px 16px 6px;margin:0 0 16px}
.gd-sect{font-size:18px;font-weight:800;color:#0b6e4f;margin:0 0 12px}
.gd-lead{margin:-4px 0 12px;font-size:14.5px;color:#42525f}
.gd-step{display:flex;gap:12px;margin:0 0 14px;align-items:flex-start}
.gd-num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#0b6e4f;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gd-stx{flex:1;min-width:0}
.gd-sh{font-weight:700;font-size:15px;color:#1c2733;margin-bottom:2px}
.gd-sd{font-size:14px;color:#4a5a67;line-height:1.55}
.gd-cta{display:inline-block;background:#0b6e4f;color:#fff;border:none;border-radius:12px;padding:12px 18px;font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer;margin:4px 0 12px;text-align:center}
.gd-cta.ghost{background:#fff;color:#0b6e4f;border:1.5px solid #0b6e4f}
.gd-share{background:linear-gradient(135deg,#eafaf2,#dff6ea);border:1px solid #bfe6d3;border-radius:14px;padding:18px 18px 14px;margin:0 0 6px;text-align:center}
.gd-share h3{margin:0 0 6px;color:#0b5a40;font-size:18px}
.gd-share p{margin:0 0 12px;font-size:14px;color:#2f5a48}
.gd-share-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gd-share-btns .gd-cta{margin:0}
/* ---- Download / install (#/legal/download) ---- */
.dl-card{display:flex;gap:14px;background:#fff;border:1px solid #e6ecf1;border-radius:14px;padding:16px;margin:0 0 16px}
.dl-card .dl-ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;background:#eaf3ef}
.dl-card.ios .dl-ic{background:#eef1f4}
.dl-body{flex:1;min-width:0}
.dl-body h3{margin:0 0 4px;font-size:17px;color:#0b6e4f}
.dl-btn{display:inline-block;background:#0b6e4f;color:#fff;border-radius:12px;padding:12px 18px;font-size:15px;font-weight:700;text-decoration:none;margin:8px 0 6px}
.dl-help{margin-top:6px;font-size:14px}
.dl-help summary{cursor:pointer;color:#0b6e4f;font-weight:600}
.dl-help ol{margin:8px 0 0;padding-left:20px}
.dl-help li{margin:0 0 6px;font-size:14px;color:#4a5a67}
.dl-ios-steps{display:flex;flex-direction:column;gap:14px;margin:12px 0 6px}
.dl-ios-step{display:flex;gap:12px;align-items:center}
.dl-ios-fig{position:relative;flex:0 0 84px}
.dl-svg{width:84px;height:auto;display:block}
.dl-ios-n{position:absolute;top:-4px;left:-4px;width:24px;height:24px;border-radius:50%;background:#0b6e4f;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.dl-ios-tx{flex:1;min-width:0;font-size:14px}
.dl-ios-tx b{font-size:15px;color:#1c2733}
@media(max-width:420px){.gd-hero h2{font-size:21px}.dl-svg{width:74px}.dl-ios-fig{flex-basis:74px}}
.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}
.pendingstrip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#d63638;color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;text-align:center;line-height:1.35}
.pendingstrip a{color:#fff;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:3px 12px;font-weight:700;text-decoration:none;white-space:nowrap}
.reportbar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:#f4f6f5;color:#0b6e4f;border:none;border-bottom:1px solid #e2e8e5;padding:9px 14px;font-size:13.5px;font-weight:700;cursor:pointer;letter-spacing:.2px}
.reportbar:active{background:#e9efec}
.reportbar .ri-ic{font-size:15px}
.reportbar .ri-go{margin-left:auto;font-size:11.5px;font-weight:700;background:#0b6e4f;color:#fff;border-radius:999px;padding:3px 10px}
.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)}
.field-err,select.field-err{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(214,69,69,.15)}
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px}
.pw-eye{position:absolute;top:0;right:0;height:100%;width:44px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;padding:0;color:inherit;-webkit-tap-highlight-color:transparent}
.pw-eye:focus{outline:none}
.pw-eye:active{opacity:.6}
.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%}
html.has-cartbar .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
.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}
.onorderbadge{font-size:10px;background:#eef2ff;color:#3538cd;padding:2px 7px;border-radius:6px;font-weight:700;margin-left:6px;white-space:nowrap}
.noinstant-line{margin:3px 0 1px}
.noinstantbadge{display:inline-block;background:#fff3d6;color:#875500;border:1px solid #efd28d;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.35;white-space:nowrap}
.noinstant-store-banner{background:linear-gradient(135deg,#fff7e6,#ffefc9);border:1px solid #efd28d;border-radius:14px;padding:14px;color:#7a4d00}
.noinstant-store-banner>div{font-size:13px;margin-top:4px;line-height:1.4}
.onorderbanner{background:#eef2ff;border:1px solid #c7ccf7;border-radius:8px;padding:8px 10px;margin-top:8px;font-size:13px;line-height:1.4;color:#2b2f8a}
.onorderbanner .acceptnote{display:block;width:100%;margin-top:8px;border:1px solid #c7ccf7;border-radius:8px;padding:8px;font:inherit;font-size:13px;box-sizing:border-box;resize:vertical;background:#fff;color:#1e2233}
.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}
.avail-toggle{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto;cursor:pointer}
.avail-toggle input{opacity:0;width:0;height:0}
.avail-slider{position:absolute;inset:0;background:#d33;border-radius:999px;transition:background .15s}
.avail-slider:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.avail-toggle input:checked + .avail-slider{background:#0b6e4f}
.avail-toggle input:checked + .avail-slider:before{transform:translateX(20px)}
.avail-toggle input:disabled + .avail-slider{opacity:.5;cursor:not-allowed}
.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}
.fab.disabled{background:#b9c0cc;color:#eef1f5;cursor:not-allowed;box-shadow:none;opacity:.85}
.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);position:relative;overflow:hidden}
.ravatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.notif-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.notif-status.on{background:#e7f7ef;border-color:#9fe0c2;color:#0a7d55}
.notif-status.off{background:#fdecec;border-color:#f3b4b4;color:#c0392b}
.notif-status span:first-child{font-size:16px;line-height:1}
.order-flash{animation:orderFlash 3.2s ease-out;box-shadow:0 0 0 2px #0fae74}
@keyframes orderFlash{0%{background:#d6f5e6;box-shadow:0 0 0 3px #0fae74}70%{background:#eafaf1;box-shadow:0 0 0 2px #0fae74}100%{background:#fff;box-shadow:0 0 0 0 rgba(15,174,116,0)}}
.upi-drawer{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.upi-app{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e2e6ea;border-radius:12px;background:#fff;text-decoration:none;color:#111}
.upi-app:active{background:#f2f7f4}
.upi-ico{font-size:22px;line-height:1}
.upi-name{display:flex;flex-direction:column;font-weight:700;flex:1}
.upi-sub{font-weight:500;font-size:11.5px;color:#6b7680}
.upi-go{font-weight:700;color:#0a7d55;white-space:nowrap}
.upi-select{width:100%;padding:12px 14px;border:1px solid #cfd6dc;border-radius:12px;background:#fff;font-size:15px;color:#111;-webkit-appearance:menulist}
.upi-copy{border:none;background:#eef4f1;color:#0a7d55;font-weight:700;border-radius:8px;padding:2px 10px;font-size:12px;cursor:pointer}
.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. The banner sits inside a white-bordered frame that auto-fills the available screen
   space (sized live in JS by fitBuzz), with the image cover-filling the frame edge-to-edge. The frame is
   pulled right up to the action button (~1px gap) so the ad uses the maximum space on any device. */
.buzzscreen{display:flex;flex-direction:column}
.buzzcarousel{max-width:520px;width:100%;margin:0 auto;position:relative;overflow:hidden;border-radius:16px;background:#fff;border:4px solid #fff;box-shadow:0 1px 8px rgba(0,0,0,.18)}
.buzztrack{display:flex;height:100%;transition:transform .4s ease;will-change:transform}
.buzzslide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:#fff;border-radius:12px}
.buzzimg{position:absolute;inset:0;background:#fff center/cover no-repeat;border-radius:12px;overflow:hidden}
.acct-sec{margin:18px 0 8px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#6b7280;text-transform:uppercase}
.storechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.storechips .prepbadge{margin:0}
.storeactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.storeactions .btn{margin:0}
.catalog-tools-wrap>summary{list-style:none;cursor:pointer;font-weight:700;font-size:14px;color:#374151;padding:10px 12px;background:#f3f4f6;border-radius:10px;user-select:none}
.catalog-tools-wrap>summary::-webkit-details-marker{display:none}
.catalog-tools-wrap>summary::after{content:" ▾";color:#6b7280}
.catalog-tools-wrap[open]>summary::after{content:" ▴"}
.catalog-tools-wrap .catalog-tools{display:flex;flex-wrap:wrap;gap:8px}
body.modal-open{overflow:hidden}
.skelwrap{padding:12px 16px}
.skel-card{display:flex;gap:12px;padding:12px;background:var(--card,#fff);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.skel-thumb{width:72px;height:72px;border-radius:10px;flex:0 0 auto;background:#e9eef2}
.skel-lines{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px}
.skel-line{height:12px;border-radius:6px;background:#e9eef2}
.skel-line.w40{width:40%}.skel-line.w70{width:70%}.skel-line.w90{width:90%}
.skel-thumb,.skel-line{background:linear-gradient(90deg,#e9eef2 25%,#f3f6f8 50%,#e9eef2 75%);background-size:200% 100%;animation:skelShimmer 1.2s ease-in-out infinite}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.errstate{text-align:center;padding:48px 24px;color:var(--ink)}
.errstate .big{font-size:40px;margin-bottom:8px}
.errstate b{display:block;font-size:17px;margin-bottom:4px}
.input-invalid{border-color:#d64545 !important;box-shadow:0 0 0 2px rgba(214,69,69,.15)}
.field-err{color:#d64545;font-size:12px;margin-top:4px;font-weight:600}
.ord-sec{margin:12px 0 2px;font-size:11px;font-weight:800;letter-spacing:.05em;color:#8a93a0;text-transform:uppercase;border-top:1px solid var(--line,#e8edf1);padding-top:9px}
.ord-sec:first-of-type{border-top:none;padding-top:0}
@media (prefers-reduced-motion:reduce){.skel-thumb,.skel-line{animation:none}}
.catcard:focus-visible,.vendorcard:focus-visible,.itemcard:focus-visible,.spcard:focus-visible{outline:3px solid #0b6e4f;outline-offset:2px;border-radius:12px}
.buzzimg::before{content:"";position:absolute;inset:0;background:inherit;filter:blur(20px) brightness(.62);transform:scale(1.12)}
.buzzimg-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1}
.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}
.buzzactions{flex:0 0 auto;max-width:520px;width:100%;margin:1px auto 0;padding:0 16px}
.buzzactions .btn.block{margin-top:0}
.buzzactions .buzzlink{margin-top:8px}
.buzzdots{display:flex;justify-content:center;align-items:center;gap:7px;height:9px;margin:2px 0 0}
.buzzdot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.28);transition:all .2s}
.buzzdot.on{background:#138a4e;width:20px;border-radius:4px}
.buzzpause{position:absolute;top:8px;right:8px;z-index:3;width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.buzzdot:focus-visible{outline:2px solid #138a4e;outline-offset:2px}
.buzzthumb{height:120px;border-radius:10px;background:#eee center/cover no-repeat;margin-top:8px}
.buzzthumb.sm{width:64px;height:64px;margin-top:0;flex:0 0 auto}
/* ---- Master Buzz-ad banner gallery ---- */
.bgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0 16px}
.bgcard{border:1px solid #e6e9ec;border-radius:12px;padding:8px;background:#fff}
.bgcard .buzzthumb{height:150px;margin-top:0}
.bgcap{font-size:12px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adchooser{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.adchoosecard{background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
.adchoosehd{font-weight:800;font-size:16px;margin-bottom:12px;text-align:center}
.adchooseopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* ---- Customer launch interstitial ---- */
html.intr-open{overflow:hidden}
.intr{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:16px;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));animation:intrIn .25s ease}
@keyframes intrIn{from{opacity:0}to{opacity:1}}
.intrcard{position:relative;width:100%;max-width:460px;height:100%;max-height:760px;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.intrimg{position:absolute;inset:0;background:#111 center/cover no-repeat;cursor:pointer}
.introver{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 24px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);color:#fff;cursor:pointer}
.intrname{font-size:20px;font-weight:700;line-height:1.2}
.intrcap{font-size:14px;opacity:.9;margin-top:4px}
.intrcta{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:8px 14px;border-radius:999px}
.intrskip{position:absolute;top:12px;right:12px;z-index:3;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px)}
.intrskip:active{transform:scale(.96)}
.intrdots{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:center;gap:7px;z-index:2}
.intrdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .2s}
.intrdot.on{background:#fff;width:20px;border-radius:4px}
.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(var(--topbar-h,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))}
html.safari.has-cartbar #app{padding-bottom:calc(134px + 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}
/* ===================== Classifieds (Buy & Sell / Real Estate) ===================== */
.mkt-search{padding:10px 16px 4px}
.mkt-search input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:15px;background:#fff;color:var(--ink)}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 16px 96px}
.mktfilters{display:flex;gap:8px;align-items:flex-end;padding:2px 16px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mktfilters .fltsel{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.mktfilters .fltsel span{font-size:11px;font-weight:600;color:var(--muted,#6b7a86);padding-left:2px}
.mktfilters .fltsel select,.mktfilters .fltsel input{border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;background:#fff;color:var(--ink);min-width:112px}
.mktfilters .fltsel input{min-width:84px}
.mktfilters .fltclear{align-self:flex-end;border:1px solid var(--line);background:#fff;color:#9aa7b1;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.mktfilters .fltclear.on{color:#c0392b;border-color:#f0c4c0;background:#fdeeec}
.waconfirm{color:#ffd6d0;font-weight:800;font-size:12px;letter-spacing:.2px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.lcard:active{transform:scale(.99)}
.limg{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#eef2f5}
.limg-ph{display:flex;align-items:center;justify-content:center;font-size:40px;color:#9fb0bd}
.lbody{padding:10px 11px 12px}
.ltitle{font-weight:600;font-size:14px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lprice{color:var(--brand);font-weight:800;font-size:15px;margin-top:4px}
.lchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.lchip{font-size:11px;background:#eef4f1;color:#2b5c49;border-radius:20px;padding:3px 9px;font-weight:600}
.lstatusbadge{font-size:11px;border-radius:20px;padding:3px 9px;font-weight:700;text-transform:capitalize;background:#eef4f1;color:#2b5c49}
.lstatusbadge.sold{background:#fdeaea;color:#c0392b}
.lstatusbadge.expired{background:#f0f0f0;color:#888}

/* Listing detail */
.lgallery{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scroll-snap-type:x mandatory}
.lgimg{flex:0 0 82%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#eef2f5;border-radius:14px;scroll-snap-align:center}
.lgimg-ph{display:flex;align-items:center;justify-content:center;font-size:60px;color:#9fb0bd}
.ldetail{padding:4px 16px 110px}
.ltitle-lg{font-size:20px;font-weight:700;color:var(--ink);line-height:1.3}
.lprice-lg{font-size:22px;font-weight:800;color:var(--brand);margin:6px 0 10px}
.ldesc{color:var(--ink);line-height:1.5;margin:6px 0 14px;white-space:normal}
.lspecs{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.lspec{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.lspec:last-child{border-bottom:none}
.lspec span{color:var(--muted)}
.lspec b{color:var(--ink)}
.lseller{color:var(--muted);font-size:13px;margin-bottom:12px}
.lactions{display:flex;flex-direction:column;gap:10px}
.lactions .btn{width:100%}
.lactions a.btn{display:block;text-align:center;text-decoration:none}
.lstatus{align-self:center;font-weight:700;color:#c0392b;text-transform:capitalize}

/* Sell / post form */
.sellform{padding:14px 16px 110px;display:flex;flex-direction:column;gap:14px}
.sellform .fld{display:flex;flex-direction:column;gap:6px}
.sellform .fld>span{font-size:13px;font-weight:600;color:var(--muted)}
.sellform input,.sellform select,.sellform textarea{border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:15px;background:#fff;color:var(--ink);width:100%}
.sellform textarea{resize:vertical}
.sellform .frow{display:flex;gap:12px}
.sellform .frow .fld{flex:1}
.sellform .fld.chk{flex-direction:row;align-items:center;gap:8px;align-self:flex-end;padding-bottom:11px}
.sellform .fld.chk input{width:auto}
.sellform .fld.chk span{font-weight:600;color:var(--ink)}
.sellthumbs{display:flex;flex-wrap:wrap;gap:8px}
.sthumb{width:74px;height:74px;border-radius:10px;background-size:cover;background-position:center;position:relative;background-color:#eef2f5}
.sthumb .sx{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:#d64545;color:#fff;font-size:14px;line-height:1;cursor:pointer}
/* ---------- Responsive: use the width like a website on tablet/desktop ----------
   The chrome (top bar, search, bottom nav) intentionally stays full-bleed edge-to-edge.
   Only the CONTENT card grids gain columns so wide screens show a proper multi-column
   catalog instead of one stretched column. Phone layout (< 640px) is unchanged. */
@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (min-width:980px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1400px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .catlist{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Desktop-only hover affordances (touch devices unaffected via hover:hover). Makes cards
   feel like a website on mouse/trackpad without changing the phone experience. */
@media (hover:hover) and (min-width:640px){
  .itemcard,.vendorcard{transition:transform .12s ease,box-shadow .12s ease;cursor:pointer}
  .itemcard:hover,.vendorcard:hover,.catcard:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,39,51,.12)}
}


/* ============================================================================
   UI ACCESSIBILITY & POLISH � appended 2026-07-18 (free / no paid services).
   Append-only overrides so existing rules above are untouched. Covers:
   larger touch targets, keyboard focus outlines, reduced-motion, muted-text
   contrast, and horizontally-scrollable vendor setup tabs.
   ========================================================================== */

/* Respect the OS "reduce motion" setting � disable non-essential animation. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Larger, reliably-tappable controls (was 28-32px; raise toward a 40px target). */
.iconbtn{width:40px;height:40px}
.qtybtn{width:40px;height:40px}
.qstep .qbtn{min-width:40px;height:40px}
.favbtn{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.chip{min-height:40px;display:inline-flex;align-items:center}
.bottomnav button{min-height:52px}

/* Visible keyboard-focus ring for interactive elements (keyboard/switch users). */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.chip:focus-visible,.catcard:focus-visible,.vendorcard:focus-visible,.itemcard:focus-visible,.spcard:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px
}

/* Darker helper text for WCAG-readable contrast on light backgrounds. */
.muted{color:#586675}

/* Vendor setup / storetabs with many tabs: allow horizontal scroll instead of
   truncating labels. 2-tab login still fills the width (flex-grow). */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;min-width:92px}
/* Keyboard-open: hide the bottom nav so it never floats above the keyboard. */
body.kb-open .bottomnav{display:none}
/* Toasts sit clear of the cart bar / bottom nav and honour the safe area. */
.toast{bottom:calc(96px + env(safe-area-inset-bottom))}
/* In-app display-size zoom: the whole document is scaled with CSS zoom (set on
   <html> by applyUiScale). Full-width position:fixed bars are viewport-relative,
   so a zoomed root would push their contents past the screen edge. Counter-zoom
   them by 1/scale so they always render at their natural size and stay fully on
   screen (e.g. the 5-item bottom nav never clips). */
.bottomnav,.cartbar{zoom:calc(1 / var(--ui-scale, 1))}

/* ============================================================================
   STAFF WRAPPER PREMIUM THEME
   Scoped exclusively to ?pge_staff_app=1 / fixed Cashier and Delivery wrappers.
   Visual benchmark: DdnStore Manager (teal/aqua gradient, 12/18/24px shape
   scale, elevated white surfaces, spacious 52px actions, semantic tone pills).
   Customer and normal vendor web views are unaffected.
   ========================================================================== */
html.pge-staff-app{
  --brand:#00796b;
  --brand2:#00a896;
  --ink:#173532;
  --muted:#58716d;
  --line:#d7e8e5;
  --bg:#f4fbfa;
  --card:#fff;
  --ok:#2e7d32;
  --warn:#b26a00;
  --bad:#c62828;
  --radius:24px;
  --shadow:0 8px 24px rgba(0,77,64,.10);
  color-scheme:only light;
}
html.pge-staff-app body{
  background:
    radial-gradient(circle at 100% 0,rgba(38,198,218,.10),transparent 34%),
    linear-gradient(180deg,#eef9f7 0,#f4fbfa 240px);
  color:var(--ink);
  font-family:"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
}
html.pge-staff-app #app{
  background:transparent;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
html.pge-staff-app .bottomnav,
html.pge-staff-app .cartbar,
html.pge-staff-app .installbar{display:none!important}

/* Premium login banner, mirroring the Manager app's branded logo/header stack. */
html.pge-staff-app .hero{
  min-height:246px;
  padding:38px 24px 34px;
  background:linear-gradient(135deg,#004d40 0%,#00796b 52%,#00a896 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
html.pge-staff-app .hero::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-105px;
  top:-120px;
  border-radius:50%;
  background:rgba(38,198,218,.18);
}
html.pge-staff-app .hero::before{
  content:"🏪";
  width:82px;
  height:82px;
  margin-bottom:16px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  background:rgba(255,255,255,.96);
  color:#00796b;
  box-shadow:0 12px 30px rgba(0,42,35,.24);
  position:relative;
  z-index:1;
}
html.pge-staff-cashier .hero::before{content:"🧾"}
html.pge-staff-delivery .hero::before{content:"🛵"}
html.pge-staff-app .hero h2{
  margin:0 0 5px;
  color:#fff;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:800;
  position:relative;
  z-index:1;
}
html.pge-staff-app .hero p{
  color:rgba(255,255,255,.88);
  font-size:15px;
  font-weight:500;
  position:relative;
  z-index:1;
}
html.pge-staff-app .form-card{
  width:calc(100% - 32px);
  max-width:520px;
  margin:24px auto 32px;
  padding:22px;
  border:1px solid rgba(0,121,107,.08);
  border-radius:24px;
  box-shadow:0 14px 38px rgba(0,77,64,.13);
}
html.pge-staff-app .form-card h3{
  margin:0 0 18px!important;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.01em;
  color:#173532;
}
html.pge-staff-app .field{margin-bottom:15px}
html.pge-staff-app .field label{
  margin:0 0 7px;
  color:#385b56;
  font-size:13px;
  font-weight:700;
}
html.pge-staff-app .field input,
html.pge-staff-app .field select,
html.pge-staff-app .field textarea{
  min-height:52px;
  padding:13px 15px;
  border:1.5px solid #cfe2df;
  border-radius:18px;
  background:#fbfefd;
  color:#173532;
  font-size:15px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
html.pge-staff-app .field input:focus,
html.pge-staff-app .field select:focus,
html.pge-staff-app .field textarea:focus{
  border-color:#00796b;
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,121,107,.12);
}
html.pge-staff-app .pw-eye{
  width:52px;
  color:#00796b;
}
html.pge-staff-app .authnote{
  margin:0 0 14px;
  padding:12px 14px;
  border:0;
  border-radius:14px;
  background:#d9f0ee;
  color:#00695c;
  text-align:left;
  font-weight:700;
}
html.pge-staff-app .form-card .authnote{
  margin:0;
  min-height:48px;
  display:flex;
  align-items:center;
}
html.pge-staff-app #app>.authnote{
  width:calc(100% - 32px);
  max-width:520px;
  margin:18px auto -8px;
}
html.pge-staff-app .form-card a{
  color:#00796b;
  font-weight:700;
}

/* Shared premium buttons and keyboard focus treatment. */
html.pge-staff-app .btn{
  min-height:48px;
  padding:12px 18px;
  border-radius:18px;
  background:#00796b;
  box-shadow:0 5px 14px rgba(0,121,107,.18);
  font-size:14px;
  font-weight:750;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
html.pge-staff-app .btn.block{min-height:52px}
html.pge-staff-app .btn.sm{
  min-height:42px;
  padding:9px 14px;
  border-radius:14px;
}
html.pge-staff-app .btn:active{
  transform:translateY(1px) scale(.99);
  box-shadow:0 2px 8px rgba(0,121,107,.16);
}
html.pge-staff-app .btn.ghost{
  background:#fff;
  color:#00796b;
  border:1.5px solid #83c7bf;
  box-shadow:none;
}
html.pge-staff-app .btn.gray{
  background:#e4f2f0;
  color:#315651;
  box-shadow:none;
}
html.pge-staff-app .btn.danger{
  background:#c62828;
  color:#fff;
  box-shadow:0 5px 14px rgba(198,40,40,.16);
}
html.pge-staff-app .btn:disabled{
  opacity:.56;
  box-shadow:none;
  cursor:not-allowed;
}
html.pge-staff-app a:focus-visible,
html.pge-staff-app button:focus-visible,
html.pge-staff-app input:focus-visible,
html.pge-staff-app select:focus-visible,
html.pge-staff-app textarea:focus-visible,
html.pge-staff-app [tabindex]:focus-visible{
  outline:3px solid #26c6da;
  outline-offset:3px;
}

/* Orders shell: full-bleed branded header, calm support strip, elevated content. */
html.pge-staff-app .topbar{
  position:sticky;
  top:0;
  padding:16px 20px;
  gap:10px;
  background:linear-gradient(135deg,#004d40 0%,#00796b 56%,#00a896 100%);
  box-shadow:0 8px 24px rgba(0,77,64,.20);
}
html.pge-staff-app .topbar h1{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em;
}
html.pge-staff-app .topbar .sub{
  margin-top:3px;
  color:rgba(255,255,255,.86);
  font-size:12px;
  opacity:1;
}
html.pge-staff-app .topbar .vident{display:none}
html.pge-staff-app .topbar .iconbtn{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.18);
}
html.pge-staff-app .topbar .iconbtn.flip,
html.pge-staff-app .topbar .iconbtn.info{display:none}
html.pge-staff-app .topbar .logoutbtn{
  background:rgba(198,40,40,.92);
  border-color:rgba(255,255,255,.24);
}
html.pge-staff-app .reportbar{
  padding:8px 16px;
  background:#e4f2f0;
  color:#315651;
  border:0;
  font-size:12px;
  letter-spacing:0;
}
html.pge-staff-app .reportbar .ri-go{
  background:#fff;
  color:#00796b;
}
html.pge-staff-app .masterbar{
  width:calc(100% - 32px);
  max-width:728px;
  margin:14px auto 2px;
  padding:13px 15px;
  border-radius:14px;
  background:#d9f0ee;
  color:#315651;
  border:1px solid #c3e4df;
  font-size:13px;
  box-shadow:none;
}
html.pge-staff-app .masterbar b{color:#004d40}
html.pge-staff-app .storetabs{display:none}
html.pge-staff-app #view{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:6px 0 calc(28px + env(safe-area-inset-bottom));
}

/* Search and filter hierarchy follows Manager OutlinedTextField + FilterChip. */
html.pge-staff-app .ordsearch{
  gap:10px;
  padding:14px 16px 5px;
}
html.pge-staff-app .ordsearch input{
  min-height:50px;
  padding:12px 15px;
  border:1.5px solid #cfe2df;
  border-radius:18px;
  background:#fff;
  color:#173532;
  font-size:14px;
  box-shadow:0 3px 10px rgba(0,77,64,.05);
}
html.pge-staff-app .ordsearch input:focus{
  border-color:#00796b;
  box-shadow:0 0 0 4px rgba(0,121,107,.11);
  outline:none;
}
html.pge-staff-app .chips{
  gap:8px;
  padding:10px 16px 12px;
}
html.pge-staff-app .chip{
  min-height:38px;
  padding:8px 14px;
  border:1px solid #cfe2df;
  border-radius:999px;
  background:#fff;
  color:#315651;
  font-size:12.5px;
  font-weight:650;
  box-shadow:none;
}
html.pge-staff-app .chip.active{
  background:#00796b;
  border-color:#00796b;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,121,107,.16);
}

/* Premium order cards and section rhythm. */
html.pge-staff-app #vord-list{
  padding:2px 0 10px!important;
}
html.pge-staff-app #vord-list>.staff-order-card{
  margin:0 16px 14px!important;
  padding:18px!important;
  overflow:visible;
  border:1px solid rgba(0,121,107,.09);
  border-radius:24px;
  box-shadow:0 8px 22px rgba(0,77,64,.09);
}
html.pge-staff-app #vord-list>.staff-order-card>.row:first-child{
  min-height:32px;
  margin:0 0 8px;
  gap:10px;
}
html.pge-staff-app #vord-list>.staff-order-card>.row:first-child>b{
  color:#173532;
  font-size:16px;
  line-height:1.3;
}
html.pge-staff-app .ord-sec{
  margin:16px 0 8px;
  padding-top:13px;
  border-color:#e1eeec;
  color:#00796b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
}
html.pge-staff-app .ovitems{
  margin:4px 0 10px!important;
  padding:10px 12px;
  border-radius:14px;
  background:#f4fbfa;
  border:1px solid #e0efec;
}
html.pge-staff-app .ovitems .row{
  margin:0!important;
  padding:6px 0;
  border-bottom:1px solid #e3efed;
}
html.pge-staff-app .ovitems .row:last-child{border-bottom:0}
html.pge-staff-app .price{
  color:#004d40;
  font-size:17px;
  font-weight:800;
}
html.pge-staff-app .muted{color:#58716d}
html.pge-staff-app .ordernote,
html.pge-staff-app .paynote,
html.pge-staff-app .onorderbanner{
  margin-top:10px!important;
  padding:12px 14px!important;
  border:0!important;
  border-radius:14px!important;
  background:#fcebcB!important;
  color:#754700!important;
}
html.pge-staff-app #vord-list input:not([type=checkbox]):not([type=file]),
html.pge-staff-app #vord-list select,
html.pge-staff-app #vord-list textarea{
  min-height:46px;
  padding:10px 13px;
  border:1.5px solid #cfe2df;
  border-radius:14px;
  background:#fbfefd;
  color:#173532;
  font-family:inherit;
}
html.pge-staff-app #vord-list input:focus,
html.pge-staff-app #vord-list select:focus,
html.pge-staff-app #vord-list textarea:focus{
  border-color:#00796b;
  box-shadow:0 0 0 4px rgba(0,121,107,.10);
  outline:none;
}
html.pge-staff-app input[type=file]{
  min-height:50px;
  padding:6px;
  border:1.5px dashed #83c7bf!important;
  border-radius:14px!important;
  background:#f4fbfa!important;
}
html.pge-staff-app input[type=file]::file-selector-button{
  min-height:38px;
  margin-right:10px;
  padding:8px 13px;
  border:0;
  border-radius:11px;
  background:#00796b;
  color:#fff;
  font:inherit;
  font-weight:700;
}
html.pge-staff-app .pay-card{
  margin-top:14px!important;
  padding:16px;
  border:1px solid #c3e4df;
  border-radius:18px;
  background:#f4fbfa;
}
html.pge-staff-app .pay-card>b{
  color:#004d40;
  font-size:15px;
}
html.pge-staff-app .pay-card img{
  border-color:#cfe2df!important;
  border-radius:16px!important;
  box-shadow:0 5px 16px rgba(0,77,64,.10);
}

/* Manager-style semantic status containers. */
html.pge-staff-app .pill{
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  font-weight:750;
}
html.pge-staff-app .pill.pending,
html.pge-staff-app .pill.awaited_pickup{background:#fcebcB;color:#8b5300}
html.pge-staff-app .pill.confirmed,
html.pge-staff-app .pill.preparing,
html.pge-staff-app .pill.on_way{background:#d9f0ee;color:#00695c}
html.pge-staff-app .pill.delivered,
html.pge-staff-app .pill.complete,
html.pge-staff-app .pill.payment_received{background:#d7f2dc;color:#2e7d32}
html.pge-staff-app .pill.cancelled{background:#fadBdb;color:#c62828}
html.pge-staff-app .empty,
html.pge-staff-app .errstate{
  margin:10px 16px;
  padding:40px 22px;
  border:1px solid #dcebe8;
  border-radius:24px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,77,64,.06);
}
html.pge-staff-app .toast{
  padding:12px 18px;
  border-radius:14px;
  background:#173532;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}
html.pge-staff-app .notifreminder{
  bottom:calc(16px + env(safe-area-inset-bottom));
  padding:12px 14px;
  border:1px solid #efd296;
  border-radius:14px;
  background:#fcebcB;
  color:#754700;
  box-shadow:0 8px 20px rgba(117,71,0,.14);
}

@media (min-width:700px){
  html.pge-staff-app .hero{min-height:270px}
  html.pge-staff-app .form-card{padding:26px}
  html.pge-staff-app #vord-list>.staff-order-card{margin-left:20px!important;margin-right:20px!important}
}
@media (max-width:380px){
  html.pge-staff-app .hero{min-height:226px;padding:30px 18px 28px}
  html.pge-staff-app .hero::before{width:70px;height:70px;border-radius:20px;font-size:32px}
  html.pge-staff-app .hero h2{font-size:24px}
  html.pge-staff-app .form-card{width:calc(100% - 24px);padding:18px}
  html.pge-staff-app .topbar{padding:13px 14px}
  html.pge-staff-app .topbar h1{font-size:18px}
  html.pge-staff-app #vord-list>.staff-order-card{margin-left:12px!important;margin-right:12px!important;padding:15px!important}
}