/*!
 * Moo Kart standalone skin — loaded after the PGE app.css.
 * Blinkit-style look: yellow header, white search, green ADD/stepper/cart, 2→6 column grid.
 * Every rule is scoped to html.mk (set by mookart-shell.js) so the PGE bundle is unaffected.
 */
html.mk{
  --brand:#0c831f; --brand2:#0a6e1a; --accent:#f8cb46;
  --ink:#1f1f1f; --muted:#666; --line:#eceff1; --bg:#f4f6fb; --card:#fff;
  --mk-yellow:#f8cb46; --mk-navy:#14294f; --mk-green:#0c831f;
}
html.mk body{font-family:"Okra","Gilroy",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html.mk #app{max-width:1280px;margin:0 auto}

/* Header */
html.mk .topbar{background:var(--mk-yellow);color:var(--ink);box-shadow:none}
html.mk .topbar .sub{opacity:.8}
html.mk .iconbtn{background:rgba(0,0,0,.07);color:var(--ink)}
html.mk .iconbtn.bell,html.mk .iconbtn.info,html.mk .iconbtn.cart,html.mk .iconbtn.flip{background:#fff;color:var(--ink)}
html.mk.mk-root .topbar .iconbtn.back{display:none}
html.mk .mk-eyebrow{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--mk-navy)}
html.mk .topbar h1.mk-when{font-size:20px;font-weight:900;line-height:1.15;color:#000;white-space:normal}
html.mk .mk-book{font-size:12px;font-weight:600}
html.mk .mk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#999;margin-right:6px;vertical-align:1px}
html.mk .mk-dot.on{background:var(--mk-green);box-shadow:0 0 0 3px rgba(12,131,31,.18)}

/* Search */
html.mk .searchwrap{background:var(--mk-yellow);padding:4px 12px 12px}
html.mk .searchbox{border:1px solid #e3e3e3;box-shadow:none;border-radius:12px;background:#fff}
html.mk .searchbox .si{color:#555}

/* Store hero: compact Blinkit-like strip */
html.mk.mk-root .storehero{border-radius:16px;box-shadow:none;border:1px solid var(--line)}
html.mk.mk-root .storehero-logo{width:64px;height:64px;flex-basis:64px;border-radius:14px}
html.mk.mk-root .storehero-title{font-size:18px}
html.mk .wallet-store-banner{background:linear-gradient(135deg,#fff8e1,#fff3c4);border-color:#f3dc8a;color:#5a4300}

/* Category chips */
html.mk .menucatbar{background:#fff}
html.mk .chip{border-radius:10px;font-weight:600}
html.mk .chip.active{background:#eaf6ec;color:var(--mk-green);border-color:var(--mk-green)}
html.mk .section-title{font-size:17px;font-weight:800}

/* Product grid + cards */
html.mk .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 12px}
@media (min-width:560px){html.mk .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:820px){html.mk .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1080px){html.mk .grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
html.mk .itemcard{flex-direction:column;gap:6px;padding:10px;border:1px solid #e8e8e8;border-radius:12px;box-shadow:none;height:100%}
html.mk .itemcard .thumb{width:100%;height:auto;aspect-ratio:1/1;background-color:#fff;background-size:contain;border-radius:8px}
html.mk .itemcard .body{display:flex;flex-direction:column;flex:1}
html.mk .itemcard .name{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.mk .itemcard .fulfillmentbadge{display:table;margin:0 0 4px;font-size:9px;border-radius:4px}
html.mk .itemcard .vend,html.mk .itemcard .desc,html.mk .itemcard .tag{display:none}
html.mk .itemcard .row{flex-wrap:wrap;align-items:center;gap:4px}
html.mk .itemcard .row:last-child{margin-top:auto;padding-top:6px;justify-content:flex-end}
html.mk .itemcard .price{font-size:13px}
html.mk .itemcard .mrp{font-size:11px;margin-left:2px}
html.mk .itemcard .offpct{color:#256fef;font-size:10px}
html.mk .itemcard .varsel{width:100%;font-size:12px;border-radius:8px}
html.mk button[data-add],html.mk button[data-upadd]{background:#f7fff9;color:var(--mk-green);border:1px solid var(--mk-green);border-radius:8px;font-weight:800;font-size:13px;padding:6px 18px;min-height:34px}
html.mk .qstep{background:var(--mk-green)}
html.mk .installbar{background:var(--mk-navy)}
html.mk .installbar button{color:var(--mk-navy)}
html.mk .installbar button#pgeInstallX{color:#fff}

/* Floating cart + bottom nav */
html.mk .cartbar{background:var(--mk-green);border-radius:12px;left:10px;right:10px;bottom:60px;max-width:1260px}
html.mk .bottomnav button.active{color:var(--mk-green)}
html.mk .offpct,html.mk .fulfillmentbadge.instant{color:var(--mk-green)}