body{background:#fff}
.shell{min-height:100dvh;padding-bottom:96px}
@media(min-width:900px){.shell{padding-bottom:40px}.bnav{display:none!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* top desktop nav */
.dnav{display:none;position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.dnav .wrap{display:flex;align-items:center;gap:20px;height:72px}
.dnav a.nl{font-weight:700;color:var(--ink-2);font-size:14px}.dnav a.nl.on,.dnav a.nl:hover{color:var(--g-d)}
@media(min-width:900px){.dnav{display:block}.mhead{display:none}}

/* mobile green header */
.mhead{background:linear-gradient(160deg,#0A7A32,#12A43A 60%,#1DB954);color:#fff;padding:calc(16px + env(safe-area-inset-top)) 18px 22px;border-radius:0 0 28px 28px}
.mhead .avatar{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:18px;border:2px solid rgba(255,255,255,.5)}
.mhead .loc{display:flex;align-items:center;gap:4px;font-weight:700;font-size:14px}
.mhead .search .input{border:0;height:50px}
.subhead{position:sticky;top:0;z-index:30;background:#fff;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-2)}
@media(min-width:900px){.subhead{position:static;border:0;padding:24px 18px 6px;max-width:1180px;margin:0 auto}}
.subhead .title{flex:1;text-align:center;font-weight:800;font-size:18px}
@media(min-width:900px){.subhead .title{text-align:left;font-size:26px}}

/* hero banner */
.hero{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(120deg,#0E8F36,#16B046);color:#fff;padding:22px;min-height:150px;display:flex;align-items:center}
.hero>div:first-child{position:relative;z-index:2;max-width:58%}
.hero .ht{font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.4px}
.hero .art{position:absolute;right:-4px;bottom:-8px;font-size:40px;opacity:.95;line-height:1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;transform:rotate(-8deg)}
.hero .art span{filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.hero .shopnow{background:#fff;color:var(--g-d);border-radius:999px;padding:8px 16px;font-weight:800;font-size:13px;display:inline-block;margin-top:12px}
.hero.orange{background:linear-gradient(120deg,#FF7A00,#FFA43A)}
.hero.dark{background:linear-gradient(120deg,#0F2E1A,#1F4A2E)}
@media(min-width:900px){.hero{min-height:260px;padding:44px}.hero>div:first-child{max-width:52%}.hero .ht{font-size:40px}.hero .art{font-size:84px;right:26px;bottom:-12px}.hero.orange .art,.hero.dark .art{font-size:58px}.hero.orange>div:first-child{max-width:70%}.hero.orange .ht{font-size:32px}}
.heroes{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.heroes::-webkit-scrollbar{display:none}.heroes>*{scroll-snap-align:start}
@media(min-width:900px){.heroes{grid-auto-columns:minmax(0,2fr) minmax(0,1fr)}}

.sec-h{display:flex;justify-content:space-between;align-items:center;margin:26px 0 12px}
.sec-h h3{font-size:19px;font-weight:800;letter-spacing:-.3px}
.sec-h a{color:var(--g);font-weight:700;font-size:14px}
.cats{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.cats::-webkit-scrollbar{display:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center}
.cat .ci{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;transition:transform .15s}
.cat:hover .ci{transform:translateY(-3px)}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.pgrid{grid-template-columns:repeat(3,1fr)}}@media(min-width:900px){.pgrid{grid-template-columns:repeat(5,1fr);gap:16px}}
.prow{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:12px;overflow-x:auto;scrollbar-width:none}.prow::-webkit-scrollbar{display:none}
@media(min-width:900px){.prow{grid-auto-columns:calc(20% - 13px)}}
.pc{position:relative;display:flex;flex-direction:column;gap:6px}
.pc .im{aspect-ratio:1.15;border-radius:20px;display:grid;place-items:center;font-size:58px;position:relative;overflow:hidden;transition:transform .15s}
.pc .im img{width:100%;height:100%;object-fit:cover}
.pc:hover .im{transform:scale(1.02)}
.pc .fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--muted)}
.pc .fav.on{color:var(--red)}.pc .fav.on svg{fill:var(--red)}
.pc .fav svg{width:17px;height:17px}
.pc .rating{position:absolute;top:8px;left:8px;background:rgba(15,46,26,.55);color:#fff;border-radius:8px;padding:2px 7px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px}
.pc .add{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(18,164,58,.4)}
.pc .add svg{width:18px;height:18px}
.pc .nm{font-weight:700;font-size:14px;line-height:1.25}
.pc .pr{font-weight:800;font-size:15px}.pc .pr small{color:var(--muted);font-weight:600;font-size:12px}
.pc .ws{font-size:11.5px;color:var(--g-d);font-weight:700}
.pc.oos .im{filter:grayscale(.8);opacity:.6}

/* bottom nav (as concept) */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(15,46,26,.06)}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted)}
.bnav a.on{color:var(--ink)}.bnav a.on svg{color:var(--ink)}
.bnav .mid{position:relative}
.bnav .mid span.b{width:56px;height:56px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;margin-top:-26px;border:5px solid #fff;box-shadow:0 8px 18px rgba(18,164,58,.35)}
.bnav .cnt,.dnav .cnt{position:absolute;top:-30px;right:calc(50% - 32px);background:var(--orange);color:#fff;border-radius:99px;font-size:11px;font-weight:800;min-width:20px;height:20px;display:grid;place-items:center;border:2px solid #fff;padding:0 5px}

/* product detail */
.pd-img{aspect-ratio:1.25;border-radius:0 0 30px 30px;display:grid;place-items:center;font-size:150px;position:relative;overflow:hidden}
.pd-img img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-top:24px}.pd-img{border-radius:30px}}
.tier{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line)}
.tier.on{border-color:var(--g);background:var(--g-50)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;z-index:65}
@media(min-width:900px){.sticky-cta{position:static;border:0;padding:0;margin-top:20px}}

/* cart */
.cline{display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line-2)}
.summary .r{display:flex;justify-content:space-between;padding:6px 0;color:var(--ink-2)}
.summary .r.t{font-size:20px;font-weight:800;color:var(--ink);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
@media(min-width:900px){.cart-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start}}

/* order tracking */
.tl{display:flex;flex-direction:column;gap:0;margin-top:8px}
.tl .st{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tl .st:last-child{padding-bottom:0}
.tl .st::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tl .st:last-child::before{display:none}
.tl .st.done::before{background:var(--g)}
.tl .ic{width:28px;height:28px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;flex:none;color:var(--muted)}
.tl .st.done .ic{background:var(--g);color:#fff}.tl .st.cur .ic{background:var(--g-50);color:var(--g);box-shadow:0 0 0 5px var(--g-50)}
.tl .ic svg{width:15px;height:15px}
.mpesa-wait{text-align:center;padding:20px 10px}
.phone-anim{width:90px;height:150px;border-radius:20px;border:4px solid var(--ink);margin:0 auto 16px;position:relative;display:grid;place-items:center;animation:buzz 1.4s infinite}
@keyframes buzz{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}85%{transform:rotate(-3deg)}}
.footer{background:var(--ink);color:#C8D4CC;margin-top:50px;padding:40px 0 120px}
@media(min-width:900px){.footer{padding-bottom:40px}}
.footer a{color:#fff}
.install{display:flex;gap:12px;align-items:center;background:var(--g-50);border-radius:18px;padding:14px;margin-top:18px}
.pc .im img{object-fit:contain;padding:8%;filter:drop-shadow(0 10px 14px rgba(40,30,10,.18))}
.pc .im .emo{font-size:58px}
.pd-img img{object-fit:contain;padding:9%;filter:drop-shadow(0 18px 24px rgba(40,30,10,.2))}
/* order tracking (map + panel like the reference design) */
.track{display:grid;gap:14px}
.tmap{height:42vh;min-height:280px;border-radius:24px;overflow:hidden;z-index:1}
@media(min-width:900px){.track{grid-template-columns:1.25fr 1fr;align-items:start}.track.nomap{grid-template-columns:minmax(0,640px)}.tmap{height:72vh;position:sticky;top:90px}}
.tpanel{background:#fff;border-radius:24px;box-shadow:var(--sh);padding:18px}
.eta{text-align:center;padding:4px 0 14px;border-bottom:1px solid var(--line-2)}
.rider{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.rider .av{width:48px;height:48px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.legs{border:1px solid var(--line);border-radius:16px;margin-top:14px;overflow:hidden}
.leg{display:flex;gap:12px;align-items:center;padding:12px 14px}.leg+.leg{border-top:1px solid var(--line)}
.lg-dot{width:16px;height:16px;border-radius:50%;border:5px solid var(--ink);flex:none}.lg-pin{font-size:16px;width:16px;text-align:center}
.tl .st{align-items:flex-start}.tl-ico{color:var(--g);opacity:.8}.tl-ico svg{width:20px;height:20px}
.stars{display:flex;justify-content:center;gap:10px;margin-top:12px}
.stars button{font-size:40px;color:#E3E8E4;transition:transform .1s,color .1s;line-height:1}
.stars button.on{color:#F5A524}.stars button:active{transform:scale(1.2)}

.cat .ci img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(40,30,10,.18))}
.hero .art.photo{display:block;transform:none;right:0;bottom:0;top:0;width:52%;font-size:0}
.hero .art.photo img,.hero .art.photo span{position:absolute;width:44%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.28))}
.hero .art.photo>*:nth-child(1){right:34%;bottom:-6%;width:46%;transform:rotate(-12deg)}
.hero .art.photo>*:nth-child(2){right:2%;bottom:20%;width:40%;transform:rotate(8deg)}
.hero .art.photo>*:nth-child(3){right:22%;bottom:42%;width:34%}
.hero .art.photo>*:nth-child(4){right:-4%;bottom:-8%;width:36%}
.hero .art.photo>*:nth-child(5){right:46%;bottom:38%;width:30%;transform:rotate(-6deg)}
.hero .art.photo.two>*:nth-child(1){right:30%;bottom:-6%;width:50%;transform:none}
.hero .art.photo.two>*:nth-child(2){right:0;bottom:6%;width:42%}
.hero .art.photo.two>*:nth-child(3){right:16%;bottom:44%;width:36%}
@media(max-width:899px){.hero .art.photo{width:48%}}

/* ---- Studio presentation: food on clean white with a soft contact shadow (no coloured tiles) ---- */
.pc .im{background:#fff;border:1px solid #EDF0EC;box-shadow:0 1px 2px rgba(15,46,26,.03),0 8px 24px -14px rgba(15,46,26,.12)}
.pc .im::after,.pd-img::after,.thumb.studio::after{content:'';position:absolute;left:24%;right:24%;bottom:8%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,32,15,.18),rgba(40,32,15,0));z-index:0;pointer-events:none}
.pc .im img,.pd-img img{position:relative;z-index:1;filter:drop-shadow(0 4px 6px rgba(40,30,10,.10))}
.pc .im img{padding:10% 10% 13%}
.pc:hover .im{transform:none}.pc:hover .im img{transform:scale(1.04)}.pc .im img{transition:transform .25s ease}
.pc .fav{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pc .rating{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pd-img{background:#fff;border-bottom:1px solid #EDF0EC}
.pd-img::after{bottom:7%;left:28%;right:28%}
.pd-img img{padding:10% 12% 14%}
@media(min-width:900px){.pd-img{border:1px solid #EDF0EC}}
.cat .ci{background:#fff;border:1px solid #E8ECE8;box-shadow:0 4px 14px -8px rgba(15,46,26,.18)}
.cat .ci img{filter:drop-shadow(0 3px 4px rgba(40,30,10,.12))}
.cline .thumb{background:#fff!important;border:1px solid #EDF0EC}

/* full-bleed real photos (Unsplash, hotlinked) */
.pc .im.full{border:0}
.pc .im.full img{object-fit:cover;padding:0;filter:none;width:100%;height:100%}
.pc .im.full::after,.pd-img.full::after{display:none}
.pd-img.full img{object-fit:cover;padding:0;filter:none;width:100%;height:100%}
.cat .ci{overflow:hidden}.cat .ci img.full{width:100%;height:100%;object-fit:cover;filter:none}
.pc .im.full .rating{top:10px;left:10px}

/* banner photo panel: real photo fading into the brand colour */
.hero .shot{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1}
.hero .shot img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero>div:first-child{max-width:56%}
@media(min-width:900px){.hero .shot{width:50%}}