body.t-kirana{background:var(--kb-page);--sp-bg:var(--kb-page);--sp-ink:var(--kb-ink);--dock-bg:var(--kb-dock);--dock-ink:var(--kb-ink);--dock-line:var(--kb-line)}
.t-kirana .mdc-views{display:none}
.kb-wrap{max-width:440px;margin:0 auto;padding:12px 14px 30px;position:relative}
.kb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.kb-tag{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-mode{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.kb-mode .i-moon{display:none}html[data-mode=dark] .kb-mode .i-sun{display:none}html[data-mode=dark] .kb-mode .i-moon{display:block}
.kb-mode:focus-visible,.kb-cta:focus-visible,.kb-dir:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.kb-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.kb-status i{width:9px;height:9px;border-radius:50%;background:#C2410C;box-shadow:0 0 0 4px color-mix(in srgb,#C2410C 18%,transparent)}
.kb-status.is-open i{background:#15803D;box-shadow:0 0 0 4px color-mix(in srgb,#15803D 18%,transparent)}
.kb-status b{color:var(--text);font-weight:700}
.kb-ctas{display:flex;gap:8px;margin-top:14px}
.kb-cta,.kb-dir{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer}
.kb-cta{flex:1}
.kb-dir{flex:none}
.kb-hours ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.kb-hours li{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;font-size:13.5px;border-bottom:1px dashed var(--line)}
.kb-hours li:last-child{border-bottom:0}
.kb-hours li b{font-weight:600;color:var(--text)}
.kb-hours li.is-closed b{color:var(--muted);font-weight:500}
.kb-hours li em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);margin-left:4px}
.kb-hours li.is-today{color:var(--text);font-weight:600}
@media (prefers-reduced-motion:reduce){.t-kirana *{animation:none!important;transition:none!important}}
body.t-kirana{--kb-page:#EEF6EA;--kb-ink:#15301F;--kb-line:#D5E5D1;--kb-dock:rgba(255,255,255,.94)}
html[data-mode=dark] body.t-kirana{--kb-page:#0B1710;--kb-ink:#E6F4EA;--kb-line:#21402B;--kb-dock:rgba(19,38,26,.94)}
.kb{--bg:var(--kb-page);--card:#FFFFFF;--text:#15301F;--muted:#4A6352;--line:#D5E5D1;--surface:#F6FBF4;--turmeric:#F2B705;--radius:18px;--btn-radius:14px;--sec-gap:16px;--sec-bg:var(--card);--sec-border:1.5px dashed color-mix(in srgb,var(--accent) 30%,var(--line));--sec-radius:18px;--sec-pad:16px;--h2-case:none;--h2-track:.01em;--h2-size:13.5px;--h2-weight:700;--h2-color:#fff;--gal-cols:3;background:var(--bg);min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif}
html[data-mode=dark] .kb{--card:#13261A;--text:#E6F4EA;--muted:#9DB8A6;--line:#21402B;--surface:#10200F}
.kb-hero{position:relative;margin-top:6px;border-radius:24px;background:var(--card);box-shadow:0 22px 44px -30px rgba(21,48,31,.55);overflow:hidden;padding-bottom:18px}
.kb-awning{height:44px;position:relative;background:repeating-linear-gradient(90deg,var(--accent) 0 28px,#FFFFFF 28px 56px)}
.kb-awning::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;background:radial-gradient(circle at 14px 0,var(--accent) 13px,transparent 13.5px) 0 0/56px 14px repeat-x,radial-gradient(circle at 42px 0,#FFFFFF 13px,transparent 13.5px) 0 0/56px 14px repeat-x}
html[data-mode=dark] .kb-awning{background:repeating-linear-gradient(90deg,var(--accent) 0 28px,#1C3625 28px 56px)}
html[data-mode=dark] .kb-awning::after{background:radial-gradient(circle at 14px 0,var(--accent) 13px,transparent 13.5px) 0 0/56px 14px repeat-x,radial-gradient(circle at 42px 0,#1C3625 13px,transparent 13.5px) 0 0/56px 14px repeat-x}
.kb-board{position:relative;margin:34px 14px 0;padding:24px 16px 16px;border-radius:16px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card) 70%);border:2px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.kb-bolt{position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8E8E8,#8A8F8A);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.kb-bolt.l{left:10px}.kb-bolt.r{right:10px}
.kb-logo{width:74px;height:74px;border-radius:20px;object-fit:var(--img-fit,cover);background:var(--turmeric);display:grid;place-items:center;margin:-62px auto 0;border:4px solid var(--card);box-shadow:0 12px 24px -12px rgba(0,0,0,.4);position:relative}
.kb-ini{color:#3A2A00;font:800 34px/1 "Anek Latin",Inter,sans-serif}
.kb-name{font:800 clamp(27px,7.6vw,34px)/1.04 "Anek Latin",Inter,sans-serif;letter-spacing:-.015em;margin:12px 0 0;color:var(--text);text-wrap:balance}
.kb-line{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.kb-addr{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);font-size:12.5px;font-weight:600;max-width:100%}
.kb-addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-stack{position:absolute;right:18px;top:44px;width:66px;height:54px;z-index:2;animation:kbFloat 5.5s ease-in-out infinite;cursor:pointer}
.kb-box{position:absolute;width:30px;height:24px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 10px),linear-gradient(135deg,#F0C35A,#C98E1E);transform:perspective(220px) rotateX(16deg) rotateY(-30deg);box-shadow:2px 2px 0 #A77317,4px 4px 0 #8A5E12,6px 6px 8px rgba(0,0,0,.18)}
.kb-box.b1{left:0;bottom:0}
.kb-box.b2{left:31px;bottom:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 10px),linear-gradient(135deg,#7FCB83,#3A9447);box-shadow:2px 2px 0 #2E7638,4px 4px 0 #215A29,6px 6px 8px rgba(0,0,0,.18)}
.kb-box.b3{left:16px;bottom:25px}
.kb-stack.is-hop{animation:kbHop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes kbFloat{50%{transform:translateY(-5px)}}
@keyframes kbHop{40%{transform:translateY(-14px) rotate(-4deg)}}
.kb-media{margin:14px 14px 0;border-radius:14px;overflow:hidden;--hero-h:150px}
.kb-cta{background:var(--turmeric);color:#2A1E00;border-radius:16px;box-shadow:0 5px 0 #B78A00;transition:transform .08s,box-shadow .08s}
.kb-cta:active{transform:translateY(3px);box-shadow:0 2px 0 #B78A00}
.kb-dir{background:var(--card);color:var(--text);border:1.5px solid var(--line);border-radius:16px}
.kb .mdc-sec h2{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 20px;background:var(--accent);border-radius:0 9px 9px 0;clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%)}
.kb .mdc-sec h2 i{color:#fff}
.kb .mdc-sec h2::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--card);margin-left:-9px}
.kb .mdc-actions a{background:var(--card);color:var(--text);border:1.5px solid var(--line)}
.kb .mdc-actions a i{color:var(--accent)}
.kb .mdc-actions a.wa i{color:#128C7E}
.kb .mdc-svc{grid-template-columns:1fr 1fr}
.kb .mdc-svc div{padding:9px 10px;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:500;font-size:13.5px}
.kb .mdc-li{border-style:dashed}
.kb-status{padding:10px 14px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);cursor:pointer}
html[data-mode=dark] .kb-hero{box-shadow:0 0 0 1px var(--line),0 0 38px -12px color-mix(in srgb,var(--accent) 55%,transparent)}
html[data-mode=dark] .kb-cta{box-shadow:0 5px 0 #8A6800,0 0 26px -4px color-mix(in srgb,var(--turmeric) 70%,transparent)}
html[data-mode=dark] .kb .mdc-sec h2{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent)}
html[data-mode=dark] .kb-name{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
