/* Store-first home page: search + cart up top, deals, one-tap categories, products straight away. Loaded last. */
.app { overflow-x: clip; }
.topbar { gap: 10px; }
.topbar > * { min-width: 0; }
.topbar .brand, .topbar .cartbtn, .topbar .back { flex: none; }
.topbar .searchbox { min-height: 46px; min-width: 0; }
.topbar .searchbox input { width: 100%; }

/* bottom dock: pinned to both screen edges, four equal buttons */
.tabbar { left: 12px; right: 12px; width: auto; max-width: 440px; margin: 0 auto; transform: none; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 5px; gap: 2px; }
.tabbar a { min-width: 0; min-height: 56px; padding: 0 2px; }
.tabbar a span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .badge { left: calc(50% + 4px); }
.cartbtn { position: relative; }
.cartcount { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }

/* compact offers banner */
.hero { margin-top: 4px; }
.slide { min-height: 168px; padding: 18px 20px; }
.slide h2 { font-size: 24px; max-width: 12ch; }
.slide .btn { min-height: 44px; margin-top: 10px; }
.dots { margin-top: 10px; }

/* quick category row */
.cats { margin-top: 16px; }

/* tighter rhythm so products come first */
.sec { margin-top: 24px; }
.sec-head h2 { font-size: 22px; letter-spacing: -.025em; }
.sec-head h2::after { display: none; }
.card .low { font-size: 12px; font-weight: 600; color: var(--warn); }
.card .tag { color: var(--lime); }

/* trust strip */
.perks { display: grid; gap: 10px; margin-top: 28px; }
.perks div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--tile); border-radius: var(--r); }
.perks .ico { color: var(--accent); width: 24px; height: 24px; }
.perks b { display: block; font-size: 15px; }
.perks span { color: var(--muted); font-size: 14px; }

/* footer */
.foot { text-align: center; padding: 36px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.foot img { width: min(46vw, 180px); height: auto; opacity: .95; }
.foot p { color: var(--muted); font-size: 14px; }
.foot-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.foot-links .btn { min-height: 44px; padding: 0 20px; }

@media (min-width: 700px) {
  .perks { grid-template-columns: repeat(3, 1fr); }
  .topbar .searchbox { max-width: 560px; margin: 0 auto; }
  .topbar .brand { margin-right: 6px; }
}