/* JIFI public site — Lime: lime pill buttons, deep-teal ink, pale-green tiles, Poppins. Light only. */
:root{--bg:#fff;--s2:#f1f6f3;--ink:#003434;--text:#26322e;--muted:#5f706b;--line:#e2e9e6;--lime:#d0f255;--lime2:#b5d445;--ok:#12a150;--danger:#dc2626;--r:18px;--rb:32px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.55;font-size:16px}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;gap:14px}.between{justify-content:space-between}
.muted{color:var(--muted)}.small{font-size:13px}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.h1{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.03em;margin:6px 0 10px}
h2{font-size:22px;font-weight:800;margin:28px 0 14px}h3{font-size:16px;font-weight:700}

.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .row{height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.03em}
.logo b{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--lime);color:var(--ink);font-size:18px}
.nav{display:flex;gap:22px;margin-left:28px;flex:1}.nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}.nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:32px;background:var(--lime);color:var(--ink);font:600 14px/1.2 Poppins,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .5s,transform .1s}
.btn:hover{background:var(--lime2)}.btn:active{transform:scale(.98)}.btn.sm{min-height:40px;padding:0 18px}
.btn.ghost{background:var(--s2);color:var(--ink)}.btn.ghost:hover{background:#e3ede8}

.hero{background:var(--s2);border-bottom:1px solid var(--line);padding:56px 0 44px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(32px,6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:10px 0 14px}
.lead{font-size:18px;color:var(--muted);max-width:620px}
.search{display:flex;gap:10px;margin:24px 0 18px;max-width:620px}
.search input{flex:1;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--rb);font:500 16px Poppins,sans-serif;background:#fff;min-width:0}
.search input:focus{outline:none;border-color:var(--ink)}
.cta{display:flex;gap:10px;flex-wrap:wrap}

.sec{padding-top:8px;padding-bottom:12px}
.more{font-weight:700;font-size:14px;text-decoration:none}.more:hover{text-decoration:underline}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border:0;border-radius:8px;background:var(--s2);text-decoration:none;font-weight:500;font-size:14px}
.chip small{color:var(--muted);font-weight:600}.chip:hover{background:#e3ede8}.chip.on{background:var(--ink);color:#fff}.chip{border-radius:999px}
.chips.sticky{position:sticky;top:64px;z-index:5;background:#fff;padding:10px 0;margin:0;border-bottom:1px solid var(--line)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:20px}
.shopc{display:block;text-decoration:none}
.shopc .cv{height:170px;border-radius:var(--r);background:#d4d4d4 center/cover;position:relative;overflow:hidden;margin-bottom:12px}
.ph{background:linear-gradient(135deg,#dadada,#9a9a9a)!important;display:grid;place-items:center}.ph span{font-size:56px}
.shopc .eta{position:absolute;right:10px;bottom:10px;background:#fff;color:#111;font:800 12px Poppins;padding:5px 9px;border-radius:8px;font-style:normal}
.shopc .closed{position:absolute;inset:0;background:rgba(255,255,255,.7);display:grid;place-items:center;font:700 14px Poppins;font-style:normal;text-align:center;padding:10px}
.shopc:hover h3{text-decoration:underline}
.rate{background:var(--ok);color:#fff;font:800 12px Poppins;padding:3px 8px;border-radius:6px;white-space:nowrap}

.shophead .cover{height:220px;background:#d4d4d4 center/cover;display:grid;place-items:center}
.shophead .cover.ph span{font-size:80px}
.shophead .top{align-items:flex-start;margin-top:4px;position:static;border:0;background:none;backdrop-filter:none}
.ratebox{text-align:center;display:grid;gap:4px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 18px;color:var(--muted);font-size:14px;font-weight:500;align-items:center}
.pill{padding:4px 10px;border-radius:99px;background:var(--s2);font-weight:700;font-size:12px;color:var(--ink)}
.pill.ok{background:#e6f6ec;color:var(--ok)}.pill.off{background:#fdecec;color:var(--danger)}.pill.veg{background:#e6f6ec;color:var(--ok)}
.crumbs{margin:14px 0 6px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

.items{border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.item:last-child{border:0}
.item .grow{flex:1;min-width:0}.item h3{margin:4px 0 2px}
.item .price{font-weight:800;margin-top:8px}.item .price s{font-weight:500;color:var(--muted);font-size:13px;margin-left:6px}
.item .side{display:flex;flex-direction:column;align-items:center;flex:none}
.item .side img,.ph92{width:92px;height:92px;border-radius:10px;object-fit:cover;background:var(--s2)}.ph92{display:grid;place-items:center;font-size:36px}
.add{margin-top:-14px;background:var(--lime);color:var(--ink);border:0;border-radius:32px;padding:0 24px;min-height:40px;display:inline-flex;align-items:center;font:600 14px Poppins,sans-serif;text-decoration:none;position:relative;z-index:1;transition:background .5s}
.add:hover{background:var(--lime2)}.add.dis{color:var(--muted);background:var(--s2);padding:8px 12px;font-weight:700;font-size:12px}
.item.oos{opacity:.6}
.vm{display:inline-grid;place-items:center;width:14px;height:14px;border:1.5px solid;border-radius:3px}
.vm::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.vm.v{color:#1a9b4d}.vm.n{color:#c0392b}
.note{margin:22px 0 10px}

.why .card h3{margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font-weight:700;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:600}.faq details[open] summary::after{content:"–"}.faq p{margin-top:8px}
.empty{text-align:center;padding:60px 20px}.empty h2{margin-top:0}
.prose{max-width:780px}.prose h2{font-size:19px;margin:26px 0 8px}.prose p,.prose ul{margin:0 0 12px}.prose ul{padding-left:20px}.prose li{margin-bottom:6px}
.prose code{background:var(--s2);padding:2px 6px;border-radius:5px;font-size:13px}
.prose a{text-decoration:underline}

.foot{border-top:1px solid var(--line);margin-top:56px;padding:36px 0 28px;background:var(--s2)}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.foot h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.foot a:not(.logo){display:block;text-decoration:none;font-size:14px;margin-bottom:7px;font-weight:500}.foot a:hover{text-decoration:underline}
.foot .logo{margin-bottom:10px}.copy{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}

@media (max-width:720px){
  .nav{display:none}.top .row{justify-content:space-between}
  .hero{padding:36px 0 30px}.lead{font-size:16px}.search{flex-direction:column}
  .shophead .cover{height:170px}.foot .cols{grid-template-columns:1fr 1fr}.grid{gap:18px}
}

/* size variants: one product, several sizes */
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 6px}
.sz{font:500 13px Poppins,sans-serif;padding:0 14px;min-height:36px;border-radius:32px;border:0;background:var(--s2);cursor:pointer}
.sz:hover{background:#e3ede8}.sz.on{background:var(--ink);color:#fff}.sz.oos{opacity:.55;text-decoration:line-through}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.vrow .price{margin:0}
.add.inl{margin-top:0}
.var + .var{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.js .grouped .var:not(.on){display:none}.js .grouped .var + .var{border:0;padding:0;margin:0}

/* HARD RULE (HARD-RULES.md): every clickable control shows the pointer hand; disabled ones show not-allowed. */
button:not(:disabled),a[href],summary,label[for],select:not(:disabled),[role="button"],.btn,.chip,.add:not(.dis),.sz{cursor:pointer}
button:disabled,.add.dis,[aria-disabled="true"]{cursor:not-allowed}

.brand{font:700 11px Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.low{font:700 12px Poppins,sans-serif;color:var(--danger);margin-top:4px}

/* touch: every tappable thing is at least 40px tall on phones */
@media (pointer:coarse){
  .sz,.add,.chip,button{min-height:40px}
  .foot a,footer a,.crumbs a,.bc a,.head a:not(.btn),.sec-head a,.see-all{display:inline-flex;align-items:center;min-height:40px}
  input,select,textarea{font-size:16px}
}
@media (pointer:coarse){
  .crumbs a,.more{display:inline-flex;align-items:center;min-height:40px;min-width:40px}
}

/* search buttons: white with a soft shadow, so they stand apart from the lime actions */
.search .btn,.search button{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,52,52,.18)}
.search .btn:hover,.search button:hover{background:#f1f6f3}

/* location selector */
.js-only{display:none}.js .js-only{display:inline-flex}.js .nojs{display:none}
.loc-btn,.loc-hero{align-items:center;gap:8px;background:var(--s2);color:var(--ink);border:0;border-radius:32px;font:600 14px Poppins,sans-serif;cursor:pointer;min-height:40px;padding:0 14px;margin-left:14px;max-width:46vw}
.loc-btn .loc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-btn:hover,.loc-hero:hover{background:#e3ede8}
.loc-hero{margin:0 0 6px;background:#fff;box-shadow:0 1px 4px rgba(0,52,52,.14);max-width:100%;min-height:44px}
.loc-dialog{border:0;border-radius:24px;padding:22px;width:min(440px,calc(100vw - 24px));max-height:min(620px,88vh);margin:auto;color:var(--text);box-shadow:0 20px 60px rgba(0,52,52,.3)}
.loc-dialog::backdrop{background:rgba(0,30,30,.5);backdrop-filter:blur(2px)}
.loc-dialog[open]{display:flex;flex-direction:column;gap:12px}
.loc-head{display:flex;align-items:center;justify-content:space-between}.loc-head h2{font-size:18px;margin:0}
.loc-x{border:0;background:var(--s2);width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.loc-search{width:100%;min-height:48px;padding:0 18px;border:0;border-radius:32px;background:var(--s2);font:500 16px Poppins,sans-serif;color:var(--ink)}
.loc-search:focus{outline:2px solid var(--lime)}
.loc-detect{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:0;border-radius:32px;background:var(--lime);color:var(--ink);font:600 14px Poppins,sans-serif;cursor:pointer}
.loc-detect:hover{background:var(--lime2)}
.loc-list{list-style:none;overflow:auto;margin:0;padding:0}
.loc-list li[hidden]{display:none}
.loc-list a{display:flex;flex-direction:column;gap:2px;padding:12px 6px;text-decoration:none;border-bottom:1px solid var(--line)}
.loc-list a b{color:var(--ink);font-weight:600}.loc-list a span{color:var(--muted);font-size:13px}
.loc-list a:hover{background:var(--s2)}
.top .btn.sm{white-space:nowrap;margin-left:auto}
@media(max-width:480px){.top .btn.sm{padding:0 14px}.loc-btn{margin-left:8px;max-width:38vw}.home .loc-btn{display:none!important}}

/* header like a quick-commerce app: logo | location | search | sign in | cart */
.hdr{display:flex;align-items:center;gap:18px;min-height:76px}
.hdr .logo{flex:none}
.hdr .loc-btn{margin:0;background:none;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 18px;max-width:280px;min-height:48px;gap:10px;text-align:left;color:var(--ink)}
.hdr .loc-btn:hover{background:none}
.loc-ic{flex:none;color:var(--ink)}
.loc-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.loc-txt b{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-txt small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;font-weight:500;white-space:nowrap}
.hsearch{flex:1;display:flex;align-items:center;background:var(--s2);border-radius:16px;min-width:0;padding:0 6px 0 18px;min-height:48px}
.hsearch input{flex:1;min-width:0;border:0;background:none;font:500 16px Poppins,sans-serif;color:var(--ink);outline:none;min-height:46px}
.hsearch button{border:0;background:none;color:var(--muted);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.hgap{flex:1}
.hbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16px;white-space:nowrap}
.hsign:hover{background:var(--s2)}.hcart{background:var(--lime);padding:0 20px}.hcart:hover{background:var(--lime2)}
@media(max-width:820px){
  .hdr{flex-wrap:wrap;gap:8px 10px;min-height:0;padding-top:10px;padding-bottom:10px}
  .hdr .logo span{display:none}
  .hdr .loc-btn{border-left:0;padding:0;flex:1 1 0;min-width:0;max-width:none}
  .hdr .logo{margin-right:0}
  .hsearch{order:9;flex:1 0 100%}
  .hbtn span{display:none}.hbtn{padding:0;width:44px;justify-content:center}.hcart{padding:0;width:44px}
  .chips.sticky{top:112px}
}
/* banners */
.banners{padding-top:16px}
.bn-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bn-track::-webkit-scrollbar{display:none}
.bn{flex:0 0 min(86%,420px);scroll-snap-align:start;border-radius:24px;padding:26px;text-decoration:none;color:var(--ink);min-height:190px;display:flex;align-items:flex-end}
.bn h3{font-size:22px;line-height:1.15;max-width:15em}.bn p{margin:8px 0 14px;font-size:14px;max-width:24em}
.bn-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:32px;background:#fff;color:var(--ink);font-weight:600;font-size:14px}
.bn1{background:#d0f255}.bn2{background:#cfe9dc}.bn3{background:#003434;color:#fff}.bn3 h3{color:#fff}
.bn-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
@media(min-width:900px){.bn{flex-basis:calc((100% - 32px)/3)}}

/* mobile header + location sheet, Instamart-style */
.loc-tile{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--lime);color:var(--ink);flex:none}
.hdr .loc-btn{border-left:0;padding:0}
.hdr .loc-btn .loc-txt b{color:var(--ink)}
.appbar{display:flex;align-items:center;gap:12px;background:#0f2a2a;color:#fff;padding:10px 16px;font-weight:500;font-size:14px}
.appbar b{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--lime);color:var(--ink);flex:none}
.appbar span{flex:1}.appbar .btn{min-height:40px}
.loc-dialog{padding:16px 20px 22px}
.loc-head{justify-content:flex-end}
.loc-share{display:flex;align-items:center;justify-content:space-between;gap:14px}
.loc-share h2{font-size:20px;line-height:1.25;margin-bottom:14px}
.loc-map{width:104px;height:104px;flex:none}
.loc-detect{width:max-content;padding:0 22px}
.loc-searchbox{position:relative}
.loc-searchbox svg{position:absolute;right:18px;top:13px;color:var(--muted);pointer-events:none}
.loc-search{border:1.5px solid var(--line);background:#fff;padding-right:48px}
.loc-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.loc-or::before,.loc-or::after{content:"";flex:1;border-top:1.5px dashed var(--line)}
.loc-more{text-align:center;margin:10px 0 0}.loc-more a{text-decoration:underline}
.loc-login{text-align:center;font-size:16px;margin:4px 0 0}.loc-login a{color:var(--ink);font-weight:700;text-decoration:underline}
@media(max-width:820px){
  .hcart{display:none}
  .hsign{order:3}.hsign svg{width:30px;height:30px}
  .hdr .loc-btn{flex:1 1 0}
  .loc-dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:24px 24px 0 0;max-height:92vh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* mobile: bottom tab bar, swipeable rows, no duplicate logo */
.tabbar{display:none}
@media(max-width:820px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600}
  .tabbar a[aria-current]{color:var(--ink)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .hdr .logo{display:none}
  .grid.hs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .grid.hs::-webkit-scrollbar{display:none}
  .grid.hs>.shopc{flex:0 0 74%;scroll-snap-align:start}
}
@media(pointer:coarse){.item .grow p a{display:inline-block;padding:10px 0}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* image banners (assets/banners/banners.json) */
.bn{padding:0;min-height:0;background:none;display:block;border-radius:24px;overflow:hidden}
.bn img{display:block;width:100%;height:auto;border-radius:24px}
@media(min-width:900px){.bn{flex-basis:calc((100% - 32px)/3)}}
.bn-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.bn-dots button{width:8px;height:8px;min-height:0;padding:0;border:0;border-radius:50%;background:#c3cfca;cursor:pointer;font:700 12px Poppins,sans-serif;color:#fff;position:relative}
.bn-dots button::after{content:"";position:absolute;inset:-12px -4px}
.bn-dots button.on{width:auto;height:auto;padding:3px 12px;border-radius:32px;background:var(--ink)}

/* banner pager: dot  n/total  dot */
.bn-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.bn-dots .dot{width:8px;height:8px;min-height:0;padding:0;border:0;border-radius:50%;background:#aab8b3;cursor:pointer;position:relative}
.bn-dots .dot::after{content:"";position:absolute;inset:-14px}
.bn-dots .dot:disabled{opacity:.35;cursor:default}
.bn-dots .pill{font:700 12px Poppins,sans-serif;background:var(--ink);color:#fff;border-radius:32px;padding:3px 12px}

/* restaurant / shop page header (no cover image) */
.crumbs2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 0 14px;font-size:14px;color:var(--muted)}
.crumbs2 a{text-decoration:none;color:var(--muted)}.crumbs2 a:hover{color:var(--ink);text-decoration:underline}
.crumbs2 i{font-style:normal;color:#b6c2be}.crumbs2 em{font-style:normal;color:#9aaaa5}
.shophd{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.shop-title{font-size:clamp(30px,5vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:6px 0 12px}
.shop-cuis{font-size:clamp(16px,2.2vw,20px);color:#4b5b57;margin-bottom:6px}
.shop-addr{font-size:clamp(15px,2vw,18px);color:var(--muted);margin-bottom:12px}
.shop-tel{margin-bottom:16px}.shop-tel a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:underline;font-size:16px;min-height:40px}.shop-tel svg{color:var(--ink)}
.shop-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.abtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid #cdd8d4;border-radius:14px;background:#fff;color:var(--ink);font:500 16px Poppins,sans-serif;text-decoration:none;cursor:pointer}
.abtn:hover{background:var(--s2)}
.shop-rating{display:flex;align-items:center;gap:12px;flex:none}
.rate.big{display:inline-flex;align-items:center;gap:3px;font:700 20px Poppins,sans-serif;padding:8px 12px;border-radius:12px}
.rate.big b{font-size:16px}.rate.big.none{background:#e7f6ee;color:#12a150}
.rc{display:flex;flex-direction:column;line-height:1.25}.rc strong{font-size:18px;color:var(--ink)}.rc small{color:#4b5b57;font-size:15px}
@media(max-width:720px){.shophd{flex-direction:column-reverse;gap:14px}.shop-rating{align-self:flex-start}.crumbs2{padding-top:12px}}

/* category chips: compact */
.chips{gap:8px}
.chip{padding:6px 14px;font-size:13px;font-weight:500;line-height:1.3}
.chip small{font-size:11px}
@media(pointer:coarse){.chip{min-height:36px}}
@media(max-width:560px){.shop-actions{gap:8px}.abtn{padding:0 14px;font-size:14px;gap:8px;min-height:44px}.abtn svg{width:18px;height:18px}}

/* shop page: menu section names (Supermarket, Dairy & Eggs, ...) are subheadings, not page titles */
.menu h2{font-size:17px;font-weight:600;margin:22px 0 10px;scroll-margin-top:130px}
.menu .chips.sticky .chip{font-size:12.5px;padding:5px 12px}
@media(pointer:coarse){.menu .chips.sticky .chip{min-height:34px}}

/* wordmark logo */
.logo img{display:block;height:36px;width:auto}
.foot .logo img{height:40px}

/* location block: pin icon, small grey "Delivery in", big city + chevron */
.hdr .loc-btn{gap:12px;max-width:300px}
.loc-pin{flex:none;color:var(--ink)}
.loc-txt{line-height:1.15}
.loc-txt small{display:block;font-size:14px;font-weight:600;color:#8a9893;margin-bottom:2px}
.loc-txt b.loc-name{display:flex;align-items:center;gap:6px;font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.loc-txt b.loc-name svg{flex:none;color:var(--ink)}
@media(max-width:820px){.loc-txt small{font-size:12.5px}.loc-txt b.loc-name{font-size:20px}.loc-pin{width:28px;height:28px}}
@media(min-width:821px){.hdr .loc-btn{border-left:1px solid var(--line);border-radius:0;padding:0 0 0 18px;margin-left:2px;min-height:48px}}
/* location block text: compact */
.loc-txt small{font-size:12px;margin-bottom:1px}
.loc-txt b.loc-name{font-size:17px;gap:4px}
.loc-txt b.loc-name svg{width:16px;height:16px}
.loc-pin{width:24px;height:24px}
.hdr .loc-btn{gap:10px}
@media(max-width:820px){.loc-txt small{font-size:11.5px}.loc-txt b.loc-name{font-size:16px}.loc-pin{width:24px;height:24px}}
/* location block text: smaller still */
.loc-txt small{font-size:11px;margin-bottom:0;font-weight:500}
.loc-txt b.loc-name{font-size:14px;font-weight:600;gap:3px}
.loc-txt b.loc-name svg{width:14px;height:14px}
.loc-pin{width:22px;height:22px}
@media(max-width:820px){.loc-txt small{font-size:10.5px}.loc-txt b.loc-name{font-size:14px}.loc-pin{width:22px;height:22px}}
/* placeholder pictures are drawn icons, not emoji */
.ph span{display:grid;place-items:center;color:rgba(255,255,255,.85)}
.ph92{color:#9aaaa5}
.rate .st{vertical-align:-1px;margin-left:2px}.rate.big b{display:inline-flex}

/* product rows: picture on the left, text in the middle, ADD on the right */
.item .pic{flex:none}
.item .side{justify-content:center}
.item .side .add{margin-top:0}
.item .pic img,.item .pic .ph92{width:88px;height:88px}
@media(max-width:560px){.item{gap:12px}.item .pic img,.item .pic .ph92{width:76px;height:76px}}

/* FSSAI licence under the action buttons */
.fssai{margin:16px 0 2px}.fssai img{display:block;height:34px;width:auto}
.fssai p{color:#6b7a76;font-size:15px;letter-spacing:.01em;margin-top:6px}

/* ADD button: soft light-green, small + in the corner */
.add:not(.dis){position:relative;background:#f4fbdc;color:var(--ink);border:1.5px solid #cfe86a;border-radius:12px;padding:0 22px;min-height:40px;font-weight:700;letter-spacing:.02em}
.add:not(.dis):hover{background:#ebf7bd}

/* size chips: small rounded squares */
.sz{border-radius:10px;font-size:12px;font-weight:600;padding:0 11px;min-height:32px}
@media(pointer:coarse){.sz{min-height:34px}}
.sz.on{background:var(--lime);color:var(--ink)}.sz.on:hover{background:var(--lime2)}

/* veg / non-veg mark sits on the picture, top right */
.item .pic{position:relative}
.item .pic .vm{position:absolute;top:5px;right:5px;z-index:1;background:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* rotating search hint */
.hsearch{position:relative}
.hsearch.rot input::placeholder{color:transparent}
.ph-rot{position:absolute;left:18px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;color:#6d7d78;font:500 16px Poppins,sans-serif;overflow:hidden;max-width:calc(100% - 64px);white-space:nowrap}
.ph-typed{border-right:1.5px solid currentColor;margin-right:-1px;animation:phCaret 1s steps(1) infinite}
@keyframes phCaret{50%{border-color:transparent}}

/* phones: the location row scrolls away, the search box stays pinned (header sticks 58px above the screen top) */
@media(max-width:820px){.top{top:-58px}.chips.sticky{top:67px}}

/* rating box in the shop header: soft green with green text, rated or not */
.rate.big,.rate.big.none{background:#e7f6ee;color:#12a150}

/* FSSAI licence sits at the very end of the shop page, after the products */
.fssai.fssai-end{margin:26px 0 8px}

/* the shop's own optional message at the bottom of its page */
.shop-thanks{margin:28px 0 4px;text-align:center;color:#4b5b57;font-size:15px;font-weight:500}

/* match the ordering app: pill search box in a soft green tint, outline icons, slimmer bar, lighter shop-header buttons and text */
.hdr{min-height:72px}
.hcart,.hbtn{border-radius:999px}
.hcart{padding:0 20px}
.abtn{min-height:44px;padding:0 16px;font-size:14px;font-weight:500;gap:8px;border-radius:14px}
.abtn svg{width:20px;height:20px}
.shop-cuis{font-size:clamp(16px,2vw,18px);margin-bottom:4px}
.shop-addr{font-size:clamp(14px,1.8vw,16px);margin-bottom:14px}
.shop-title{margin:4px 0 10px}
.crumbs2{line-height:1.5;padding:14px 0 12px}
@media(max-width:820px){.hdr{padding-top:8px;padding-bottom:8px}}

.loc-dialog:focus{outline:none}
.shop-thanks{font-size:13px;font-weight:400;color:#6b7a76}

.item .price{font-weight:700}

/* product rows: same sizes as the ordering app */
.menu h2{font-size:18px;font-weight:700;margin:22px 0 4px}
.item h3{font-weight:600}
.item .pic img,.item .pic .ph92{width:80px;height:80px}
@media(max-width:560px){.item .pic img,.item .pic .ph92{width:80px;height:80px}}
.item .add:not(.dis){font-size:12.8px;min-height:40px}
.item .price{font-weight:700}
.shop-title + .meta{margin:0 0 12px}

/* grouped rows: ADD sits on the right, vertically centred on the row, like the ordering app; the size is shown by the chips only */
.item.grouped{position:relative}
.item.grouped>.side{display:none}
.item.grouped .grow{padding-right:92px}
.item.grouped .var .add.inl{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
.item.grouped .vrow .price .muted{display:none}

/* Direction / Share buttons: exactly the ordering app's colours */
.abtn{border-color:oklch(0.925 0.01 170);color:oklch(0.3 0.02 180);background:#fff}
.abtn:hover{background:oklch(0.96 0.015 165)}

/* logo divider: the ordering app's short, light line (a 34px line centred on the location block) */
@media(min-width:821px){
  .hdr .loc-btn{border-left:0;position:relative;margin-left:-2px;padding-left:16px}
  .hdr .loc-btn::before{content:"";position:absolute;left:0;top:50%;width:1px;height:34px;transform:translateY(-50%);background:oklch(0.925 0.01 170)}
}

/* same room above the breadcrumb as the ordering app (30px from the top bar to the text) */
.shophead{padding-top:16px}

.int-form label{font-weight:500}.int-form input:not([type=radio]),.int-form select{width:100%;max-width:420px;min-height:48px;padding:0 14px;border:1px solid var(--s3,#e2e9e6);border-radius:12px;background:#fff;font:inherit;margin-top:6px}
.int-who label{display:inline-flex;align-items:center;gap:8px;margin-right:18px;cursor:pointer}.int-who input{cursor:pointer}.int-hp{position:absolute;left:-9999px}.req{color:#d93025}.form-err{color:#d93025;font-weight:500}

/* phones zoom the page in when an input is smaller than 16px: keep every field at 16px on small screens */
@media (max-width: 900px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }

/* shop page: the header search box searches this menu; phones get a back button and no location row */
.hback{display:none}
.scope-wrap{position:relative;flex:none;margin-left:-8px;margin-right:8px}
.hsearch .scope{display:inline-flex;align-items:center;gap:4px;min-height:32px;height:32px;width:auto;padding:0 8px 0 12px;border:0;border-radius:32px;background:#fff;color:var(--ink);font:600 12px Poppins,sans-serif;cursor:pointer;white-space:nowrap}
.scope-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.scope-menu[hidden]{display:none}
.scope-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font:600 14px Poppins,sans-serif;color:var(--ink);cursor:pointer}
.scope-menu li:hover{background:var(--s2)}
.scope-menu li .ck{visibility:hidden;color:#12a150}.scope-menu li[aria-selected=true] .ck{visibility:visible}
.menu-none{margin:6px 0 18px;padding:14px 16px;border-radius:14px;background:var(--s2);font-weight:500}.menu-none a{text-decoration:underline;font-weight:700}
@media(max-width:820px){
  .menupage .hback{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--s2);color:var(--ink)}
  .menupage .hdr .loc-btn,.menupage .hsign{display:none!important}
  .menupage .hdr{flex-wrap:nowrap}
  .menupage .hsearch{order:0;flex:1 1 0}
  .menupage .top{top:0}
}

/* phones: the big rating box above the name is replaced by a small chip next to Direction / Share */
.rate-chip{display:none;align-items:center;gap:4px;min-height:44px;padding:0 9px;border-radius:12px;background:#e7f6ee;color:#12a150;font-weight:700;font-size:15px;white-space:nowrap}
.rate-chip small{margin-left:2px;color:#4b5b57;font-weight:500;font-size:12px}
@media(max-width:720px){.rate-chip{display:inline-flex}.shop-rating{display:none}}

/* live search suggestions */
.hsearch{position:relative}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;max-height:min(70vh,520px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:6px}
.sugg[hidden]{display:none}
.sg-h{padding:10px 12px 4px;font:700 12px Poppins,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sg{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.sg:hover,.sg.on{background:var(--s2)}
.sg-pic{flex:none;width:44px;height:44px;border-radius:10px;background:var(--s2);overflow:hidden}.sg-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sg-t{min-width:0;flex:1;display:flex;flex-direction:column}.sg-t b{font:600 14px Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-t small{font:500 12px Poppins,sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-r{flex:none;font:700 14px Poppins,sans-serif}
.sg-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;min-height:48px}.sg-all .sg-pic{display:none}.sg-all .sg-t b{color:var(--ink);text-decoration:underline}
.sg-none{padding:12px;font:500 14px Poppins,sans-serif;color:var(--muted)}
.item.hl{animation:hl 2.4s ease-out}@keyframes hl{0%,60%{background:#f3fbd0}100%{background:transparent}}

/* chip rows: one line that scrolls sideways (phones: swipe, desktop: drag or wheel), with a soft fade where more is hidden */
.chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;cursor:grab}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:none;white-space:nowrap}
.chips.drag{cursor:grabbing;user-select:none}.chips.drag .chip{pointer-events:none}
.chips.fr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.chips.fl{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.chips.fl.fr{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

/* service tiles under the slider */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;margin-bottom:6px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:112px;padding:14px 8px;border-radius:18px;background:var(--s2);color:var(--ink);text-decoration:none;text-align:center;transition:background .15s,transform .15s}
.tile:hover{background:#e3ede8}.tile:active{transform:scale(.97)}
.tile svg{margin-bottom:8px}.tile b{font:700 16px Poppins,sans-serif}.tile small{font:500 12.5px Poppins,sans-serif;color:var(--muted)}
@media(max-width:560px){.tiles{gap:10px}.tile{min-height:96px;border-radius:16px}.tile svg{width:30px;height:30px;margin-bottom:6px}.tile b{font-size:14.5px}.tile small{font-size:11.5px}}

/* cart count on the cart buttons (filled in by the browser from the cart saved by the ordering app) */
.hcart,.tabbar a{position:relative}
.cbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;font:700 11px/1 Poppins,sans-serif}
.hcart .cbadge{margin-left:2px}
.tabbar a .cbadge{position:absolute;top:6px;left:calc(50% + 6px);background:var(--lime);color:var(--ink)}
@media(max-width:820px){.hcart .cbadge{position:absolute;top:2px;right:2px}}
.tiles-page{margin-top:10px}.tiles-page .tile{min-height:132px}@media(min-width:821px){.tiles-page{max-width:620px}}

/* tiles on the Services page sit inside the text styles, which underline links: tiles are not text links */
.prose .tile,.prose .tile *{text-decoration:none}
.prose .tile b,.prose .tile small{margin:0}