/* ================================================================
   SOKONI — Premium Compact Design System  (premium.css)
   Loaded on every page after inline styles.
   Goals: ~40% less scrolling · premium dense layout · great on all screens
   Breakpoints: 480 small phone · 600 phone · 768 phablet · 1024 desktop
================================================================ */

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ══════════════════════════════════════════════
   HERO SECTIONS — compact across all pages
══════════════════════════════════════════════ */
.bk-hero { padding: 24px 24px 18px !important; }
.fd-hero { padding: 22px 24px 16px !important; }
.sv-hero { padding: 22px 24px 16px !important; }
.hc-hero { padding: 22px 24px 16px !important; }

.bk-hero h1, .fd-hero h1 { margin-bottom: 6px !important; line-height: 1.12 !important; }
.sv-hero h1, .hc-hero h1 { margin-bottom: 6px !important; }
.bk-hero p { font-size: 12px !important; margin-bottom: 12px !important; line-height: 1.5 !important; }
.fd-hero p { font-size: 12px !important; margin-bottom: 12px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-hero p, .hc-hero p { font-size: 13px !important; margin-bottom: 16px !important; }
.bk-hero::before { display: none; }
.fd-hero::before { display: none; }

/* Hero stats row: tight */
.bk-hero-stats { margin-top: 10px !important; gap: 14px !important; }
.bk-stat-num { font-size: 17px !important; line-height: 1.1 !important; }
.bk-stat-lbl { font-size: 9px !important; }

/* Search bars */
.bk-search-bar input, .fd-search-row input, .sv-search-bar input, .hc-search-bar input {
  padding: 10px 14px !important; font-size: 13px !important;
}
.bk-search-btn, .fd-search-btn, .sv-search-btn, .hc-search-btn {
  padding: 10px 16px !important; font-size: 12px !important;
}
.fd-hero-stats { gap: 12px !important; margin-top: 10px !important; }
.fd-hs { font-size: 11px !important; }
.fd-hs strong { font-size: 13px !important; }

/* ══════════════════════════════════════════════
   BODY CONTAINERS — reduced padding
══════════════════════════════════════════════ */
.bk-body { padding: 16px 20px 68px !important; }
.fd-body { padding: 14px 20px 68px !important; }
.sv-body { padding: 14px 20px 68px !important; }
.hc-body { padding: 14px 20px 68px !important; }

/* ══════════════════════════════════════════════
   SECTION HEADINGS — tight uppercase labels
══════════════════════════════════════════════ */
.bk-section-h, .fd-section-h, .sv-section-h, .hc-section-h {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 16px 0 8px !important;
}

/* ══════════════════════════════════════════════
   QUICK ACTION TILES — 5-per-row compact grid
══════════════════════════════════════════════ */
.qa-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  margin: 12px 0 !important;
}
.qa-tile {
  padding: 10px 5px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: all 0.15s !important;
}
.qa-tile:hover, .qa-tile.active {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.22) !important;
  transform: translateY(-1px) !important;
}
.qa-tile .qa-icon { font-size: 19px !important; margin-bottom: 4px !important; }
.qa-tile .qa-label {
  font-size: 8.5px !important; font-weight: 700 !important;
  line-height: 1.2 !important; color: rgba(255,255,255,0.6) !important;
}

/* ══════════════════════════════════════════════
   TAB ROW — horizontal scroll, compact pills
══════════════════════════════════════════════ */
.bk-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 5px !important;
  padding-bottom: 6px !important;
  margin: 10px 0 12px !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.bk-tabs::-webkit-scrollbar { display: none !important; }
.bk-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
}

/* ══════════════════════════════════════════════
   ALERT BANNERS — compact inline strip
══════════════════════════════════════════════ */
.alert-banner {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.alert-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.alert-info h3 { font-size: 12px !important; margin-bottom: 2px !important; }
.alert-info p { font-size: 10px !important; line-height: 1.4 !important; }
.alert-btn {
  padding: 7px 12px !important; font-size: 10px !important;
  border-radius: 8px !important; white-space: nowrap !important;
}

/* ══════════════════════════════════════════════
   BANK CARDS — denser grid, tighter cards
══════════════════════════════════════════════ */
.bank-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 9px !important;
}
.bank-card {
  padding: 13px 13px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.bank-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245,158,11,0.22) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
}
.bank-card-top { gap: 9px !important; margin-bottom: 8px !important; }
.bank-logo-circle {
  width: 36px !important; height: 36px !important;
  font-size: 16px !important; border-radius: 9px !important;
  flex-shrink: 0 !important;
}
.bank-name { font-size: 12px !important; margin-bottom: 1px !important; font-weight: 800 !important; }
.bank-type { font-size: 9px !important; line-height: 1.3 !important; }
.bank-features { gap: 3px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }
.bank-tag {
  font-size: 9px !important; padding: 1px 6px !important;
  border-radius: 4px !important; line-height: 1.4 !important;
}
.bank-rate { font-size: 13px !important; font-weight: 900 !important; margin: 5px 0 !important; }
.bank-rate span { font-size: 10px !important; }
.bank-apply-btn {
  padding: 8px !important; font-size: 11px !important;
  border-radius: 8px !important; margin-top: 2px !important;
}

/* ══════════════════════════════════════════════
   SACCO CARDS
══════════════════════════════════════════════ */
.sacco-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 9px !important;
}
.sacco-card {
  padding: 13px !important; border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: transform 0.15s, border-color 0.15s !important;
}
.sacco-card:hover { transform: translateY(-2px) !important; border-color: rgba(16,185,129,0.25) !important; }
.sacco-name { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 2px !important; }
.sacco-sector { font-size: 9px !important; margin-bottom: 6px !important; }
.sacco-div { font-size: 12px !important; margin-bottom: 5px !important; }
.sacco-perks { gap: 2px !important; margin-bottom: 7px !important; }
.sacco-perk { font-size: 9px !important; }
.sacco-join-btn { padding: 7px !important; font-size: 10px !important; border-radius: 7px !important; }

/* ══════════════════════════════════════════════
   INSURANCE CARDS
══════════════════════════════════════════════ */
.ins-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 9px !important;
}
.ins-card {
  padding: 12px !important; border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: transform 0.15s, border-color 0.15s !important;
}
.ins-card:hover { transform: translateY(-2px) !important; border-color: rgba(59,130,246,0.25) !important; }
.ins-type { font-size: 9px !important; padding: 1px 6px !important; margin-bottom: 5px !important; }
.ins-name { font-size: 12px !important; margin-bottom: 2px !important; font-weight: 800 !important; }
.ins-cover { font-size: 12px !important; margin: 4px 0 !important; }
.ins-features { gap: 2px !important; margin-bottom: 7px !important; }
.ins-feature { font-size: 9px !important; }
.ins-quote-btn { padding: 7px !important; font-size: 10px !important; border-radius: 7px !important; }

/* ══════════════════════════════════════════════
   INVESTMENT CARDS
══════════════════════════════════════════════ */
.inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 9px !important;
}
.inv-card {
  padding: 12px !important; border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: transform 0.15s, border-color 0.15s !important;
}
.inv-card:hover { transform: translateY(-2px) !important; border-color: rgba(168,85,247,0.25) !important; }
.inv-name { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 2px !important; }
.inv-type { font-size: 9px !important; margin-bottom: 5px !important; }
.inv-return { font-size: 19px !important; margin: 4px 0 !important; }
.inv-return span { font-size: 9px !important; }
.inv-invest-btn { padding: 7px !important; font-size: 10px !important; border-radius: 7px !important; }

/* ══════════════════════════════════════════════
   M-PESA STEPS
══════════════════════════════════════════════ */
.mpesa-steps {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 7px !important;
}
.mpesa-step {
  padding: 11px !important; border-radius: 11px !important;
  background: rgba(255,255,255,0.02) !important;
}
.step-num {
  width: 24px !important; height: 24px !important;
  font-size: 10px !important; margin-bottom: 6px !important;
}
.step-title { font-size: 11px !important; font-weight: 800 !important; margin-bottom: 3px !important; }
.step-desc { font-size: 9.5px !important; line-height: 1.45 !important; }

/* ══════════════════════════════════════════════
   LOAN CALCULATOR
══════════════════════════════════════════════ */
.calc-box {
  padding: 14px !important; border-radius: 13px !important;
  margin-bottom: 12px !important;
}
.calc-grid { gap: 8px !important; margin-bottom: 8px !important; }
.calc-input-group label { font-size: 10px !important; margin-bottom: 3px !important; }
.calc-input {
  padding: 9px 11px !important; font-size: 12px !important;
  border-radius: 8px !important;
}
.calc-result { gap: 7px !important; margin-top: 10px !important; }
.calc-result-box { padding: 9px !important; border-radius: 9px !important; }
.calc-result-val { font-size: 16px !important; margin-bottom: 2px !important; }
.calc-result-lbl { font-size: 8px !important; }

/* ══════════════════════════════════════════════
   RESTAURANT GRID & CARDS — compact food hub
══════════════════════════════════════════════ */
.rest-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 9px !important;
}
.rest-card {
  border-radius: 13px !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.rest-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.4) !important;
}
.rest-cover, .rest-cover-emoji { height: 105px !important; }
.rest-cover-emoji { font-size: 42px !important; }
.rest-body { padding: 9px 10px !important; }
.rest-name { font-size: 12px !important; font-weight: 800 !important; }
.rest-open { font-size: 8px !important; padding: 1px 5px !important; }
.rest-cuisine { font-size: 9.5px !important; margin-bottom: 4px !important; }
.rest-meta { gap: 5px !important; font-size: 9.5px !important; margin-bottom: 5px !important; flex-wrap: wrap !important; }
.rest-tags { gap: 3px !important; margin-bottom: 7px !important; }
.rest-tag { font-size: 8.5px !important; padding: 1px 5px !important; border-radius: 4px !important; }
.rest-order-btn { padding: 8px !important; font-size: 11px !important; border-radius: 8px !important; }

/* ══════════════════════════════════════════════
   PROMO BANNERS — 4-col compact strip
══════════════════════════════════════════════ */
.promo-row {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 7px !important;
  margin-bottom: 12px !important;
}
.promo-card {
  padding: 9px 11px !important;
  border-radius: 11px !important;
  gap: 8px !important;
}
.promo-card .pc-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.promo-card h4 { font-size: 10px !important; font-weight: 800 !important; margin-bottom: 0 !important; }
.promo-card p { display: none !important; }

/* Cuisine filter: single horizontal scroll row */
.fd-cuisine-row {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.fd-cuisine-row::-webkit-scrollbar { display: none !important; }
.fd-cuisine-pill {
  flex-shrink: 0 !important;
  font-size: 10px !important;
  padding: 5px 10px !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}

/* ══════════════════════════════════════════════
   SERVICE CARDS & PROVIDER CARDS
══════════════════════════════════════════════ */
.sv-grid {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
  gap: 9px !important;
}
.sv-card { border-radius: 13px !important; }
.sv-card-img { height: 100px !important; }
.sv-card-emoji { height: 100px !important; font-size: 40px !important; }
.sv-card-body { padding: 9px 10px !important; }
.sv-card-title { font-size: 11px !important; font-weight: 800 !important; margin-bottom: 2px !important; }
.sv-card-seller { font-size: 9.5px !important; margin-bottom: 4px !important; }
.sv-card-price { font-size: 13px !important; font-weight: 900 !important; margin-bottom: 5px !important; }
.sv-card-tags { margin-bottom: 8px !important; gap: 3px !important; }
.sv-tag { font-size: 9px !important; padding: 1px 6px !important; }
.sv-book-btn { padding: 8px !important; font-size: 10px !important; border-radius: 8px !important; }

.pv-card {
  padding: 13px !important; border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: transform 0.15s, border-color 0.15s !important;
}
.pv-card:hover { transform: translateY(-2px) !important; }
.pv-top { gap: 9px !important; margin-bottom: 7px !important; }
.pv-avatar { width: 42px !important; height: 42px !important; font-size: 17px !important; }
.pv-name { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 1px !important; }
.pv-cat { font-size: 9px !important; }
.pv-stars { font-size: 10px !important; }
.pv-skills { gap: 3px !important; margin: 4px 0 !important; }
.pv-skill { font-size: 9px !important; padding: 1px 6px !important; }
.pv-rate { font-size: 12px !important; margin: 4px 0 7px !important; }
.pv-book-btn { padding: 8px !important; font-size: 10px !important; border-radius: 8px !important; }

/* Service category pills: horizontal scroll */
.sv-cats {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
}
.sv-cats::-webkit-scrollbar { display: none !important; }
.sv-cat-pill {
  flex-shrink: 0 !important;
  font-size: 10px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════
   HUB GRID (services, index)
══════════════════════════════════════════════ */
.hub-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}
.hub-card {
  padding: 12px 14px !important;
  border-radius: 13px !important;
  gap: 11px !important;
  transition: transform 0.15s, filter 0.15s !important;
}
.hub-card:hover { transform: translateY(-2px) !important; filter: brightness(1.06) !important; }
.hub-card .hub-icon { font-size: 24px !important; }
.hub-card h3 { font-size: 12px !important; font-weight: 900 !important; margin-bottom: 2px !important; }
.hub-card p { font-size: 9.5px !important; line-height: 1.4 !important; }
.hub-arrow { font-size: 13px !important; }

/* ══════════════════════════════════════════════
   MODALS — compact
══════════════════════════════════════════════ */
.modal-box { padding: 18px !important; border-radius: 18px !important; }
.modal-input, .modal-select {
  padding: 9px 11px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}
.modal-submit { padding: 11px !important; font-size: 13px !important; border-radius: 10px !important; }

/* Restaurant menu modal */
.rest-modal-header { padding: 14px 16px !important; }
.rest-modal-name { font-size: 16px !important; margin-bottom: 4px !important; }
.rest-modal-meta { font-size: 10px !important; margin-bottom: 8px !important; gap: 10px !important; }
.cat-tabs-modal { padding: 10px 16px 8px !important; gap: 5px !important; }
.cat-tab-m { padding: 5px 10px !important; font-size: 10px !important; border-radius: 7px !important; }
.menu-section { padding: 0 14px 18px !important; }
.menu-section-title { font-size: 9px !important; margin: 14px 0 8px !important; letter-spacing: 0.08em !important; }
.menu-item { padding: 10px !important; border-radius: 11px !important; gap: 10px !important; }
.menu-item-emoji, .menu-item-img { width: 70px !important; height: 70px !important; font-size: 34px !important; border-radius: 8px !important; }
.menu-item-name { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 2px !important; }
.menu-item-desc { font-size: 10px !important; line-height: 1.4 !important; margin-bottom: 4px !important; }
.menu-item-popular { font-size: 8px !important; }
.menu-item-price { font-size: 13px !important; font-weight: 900 !important; }
.add-btn { padding: 6px 10px !important; font-size: 10px !important; border-radius: 7px !important; }
.qty-btn { width: 24px !important; height: 24px !important; font-size: 14px !important; }
.qty-num { font-size: 12px !important; }

/* ══════════════════════════════════════════════
   BOTTOM NAV — premium
══════════════════════════════════════════════ */
.bottom-nav {
  height: 56px !important;
  padding: 5px 4px env(safe-area-inset-bottom, 4px) !important;
  background: rgba(5,5,5,0.97) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
}
.bnav-item {
  min-width: 46px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  gap: 2px !important;
  border-radius: 8px !important;
  padding: 3px 5px !important;
  transition: all 0.12s ease !important;
}
.bnav-item i { font-size: 16px !important; }
.bnav-item.active { background: rgba(255,255,255,0.05) !important; }

/* ══════════════════════════════════════════════
   HOMEPAGE (index.html) — compact sections
══════════════════════════════════════════════ */

/* Category tiles grid: tighter */
.categories {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 8px !important;
}
.cat-card-premium {
  padding: 14px 10px !important;
  border-radius: 14px !important;
  min-height: 88px !important;
  transition: transform 0.15s, filter 0.15s !important;
}
.cat-card-premium:hover { transform: translateY(-2px) !important; filter: brightness(1.07) !important; }
.ccp-icon { font-size: 28px !important; }
.ccp-info h3 { font-size: 11px !important; font-weight: 800 !important; margin-bottom: 1px !important; }
.ccp-info p { font-size: 9px !important; line-height: 1.3 !important; }

/* Products grid: denser */
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
  gap: 10px !important;
  padding: 14px 20px 70px !important;
}
.product-card { border-radius: 13px !important; }
.product-card .card-img { height: 160px !important; }
.product-card .card-body { padding: 10px !important; }
.product-card .card-title { font-size: 12px !important; }
.product-card .card-price { font-size: 14px !important; }

/* Section headings on homepage */
.section-title h2 { font-size: 15px !important; margin-bottom: 2px !important; }
.section-sub { font-size: 11px !important; }
.new-arrivals-section, .section-wrapper {
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}
.new-arrivals-title-row { margin-bottom: 10px !important; }

/* Flash sales */
.flash-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 9px !important;
}

/* Tools strip */
.tools-strip a, [style*="min-width:150px"] {
  font-size: 11px !important;
  padding: 9px 12px !important;
}

/* ══════════════════════════════════════════════
   CATEGORY PAGE — compact pills + grid
══════════════════════════════════════════════ */
.cat-page-header { padding: 20px 20px 14px !important; }
.cat-page-icon { font-size: 34px !important; }
.cat-page-header h1 { font-size: 20px !important; margin-bottom: 4px !important; }
.cat-count-text { font-size: 11px !important; margin-bottom: 12px !important; }
.cat-nav-pills {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 5px !important;
  padding-bottom: 4px !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.cat-nav-pills::-webkit-scrollbar { display: none !important; }
.cat-pill {
  font-size: 10px !important; padding: 5px 10px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.cat-sort-bar { padding: 8px 20px !important; gap: 5px !important; }
.cat-filter-btn { padding: 6px 10px !important; font-size: 11px !important; border-radius: 7px !important; }

/* ══════════════════════════════════════════════
   SERVICE CTA BANNERS — compact
══════════════════════════════════════════════ */
.sv-cta {
  padding: 16px 20px !important;
  border-radius: 14px !important;
  margin: 14px 0 !important;
  gap: 14px !important;
}
.sv-cta-icon { font-size: 30px !important; }
.sv-cta-info h3 { font-size: 15px !important; margin-bottom: 3px !important; }
.sv-cta-info p { font-size: 11px !important; }
.sv-cta-btn { padding: 10px 18px !important; font-size: 12px !important; }

/* ══════════════════════════════════════════════
   FLOATING CART (food page)
══════════════════════════════════════════════ */
.float-cart {
  padding: 11px 20px !important;
  border-radius: 14px !important;
  bottom: 68px !important;
  font-size: 13px !important;
}
.float-cart-count { font-size: 11px !important; padding: 1px 8px !important; }
.float-cart-total { font-size: 14px !important; }

/* ══════════════════════════════════════════════
   JOB CARDS (services bookings)
══════════════════════════════════════════════ */
.job-card { padding: 12px 14px !important; border-radius: 12px !important; margin-bottom: 7px !important; }
.job-status { font-size: 9px !important; padding: 2px 7px !important; }

/* ══════════════════════════════════════════════
   INPUT FIELDS — prevent iOS zoom + premium feel
══════════════════════════════════════════════ */
input, select, textarea {
  font-size: max(16px, 1em) !important;
  border-radius: 9px !important;
}
@media (min-width: 601px) {
  input, select, textarea { font-size: 12px !important; }
}

/* ══════════════════════════════════════════════
   PHONE  ≤ 600px  —  mobile-specific overrides
══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Bodies */
  .bk-body, .fd-body, .sv-body, .hc-body { padding: 12px 14px 66px !important; }

  /* Heroes: very tight */
  .bk-hero, .fd-hero, .sv-hero, .hc-hero { padding: 16px 14px 12px !important; }
  .bk-hero h1, .fd-hero h1, .sv-hero h1 { font-size: 20px !important; }
  .bk-hero p, .fd-hero p { display: none !important; }
  .sv-hero p, .hc-hero p { font-size: 12px !important; margin-bottom: 12px !important; }
  .bk-hero-stats { flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; }
  .bk-stat-num { font-size: 15px !important; }
  .bk-hero-badge, .fd-hero-badge { font-size: 9px !important; padding: 3px 10px !important; margin-bottom: 6px !important; }

  /* Search: stack */
  .bk-search-bar, .fd-search-row, .sv-search-bar, .hc-search-bar {
    flex-direction: column !important; gap: 6px !important;
  }
  .bk-search-btn, .fd-search-btn, .sv-search-btn, .hc-search-btn { width: 100% !important; }

  /* QA tiles: 5 per row, label visible but tiny */
  .qa-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 5px !important; margin: 8px 0 !important; }
  .qa-tile { padding: 7px 3px !important; }
  .qa-tile .qa-icon { font-size: 17px !important; }
  .qa-tile .qa-label { font-size: 7px !important; }

  /* Tabs: horizontal scroll */
  .bk-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 8px 0 10px !important; }
  .bk-tab { padding: 5px 9px !important; font-size: 10px !important; }

  /* All multi-col grids → 1 col on phone */
  .bank-grid, .sacco-grid, .ins-grid, .inv-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* But insurance: 2 col since cards are compact */
  .ins-grid { grid-template-columns: 1fr 1fr !important; }

  /* Restaurant: 2 col */
  .rest-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .rest-cover, .rest-cover-emoji { height: 90px !important; }
  .rest-cover-emoji { font-size: 34px !important; }
  .rest-meta { display: none !important; } /* hide meta on small cards */
  .rest-name { font-size: 11px !important; }
  .rest-tags { display: none !important; } /* hide tags on small cards */

  /* Services grid: 2 col */
  .sv-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .sv-card-img, .sv-card-emoji { height: 90px !important; }
  .sv-card-emoji { font-size: 34px !important; }

  /* Promo: 2 col */
  .promo-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* Hub grid: 1 col */
  .hub-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .hub-card { padding: 10px 12px !important; }

  /* Mpesa steps: 2 col */
  .mpesa-steps { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* Alert banners: stack */
  .alert-banner { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .alert-btn { width: 100% !important; }

  /* Homepage categories */
  .categories { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .cat-card-premium { padding: 10px 6px !important; min-height: 76px !important; border-radius: 11px !important; }
  .ccp-icon { font-size: 22px !important; }
  .ccp-info h3 { font-size: 9px !important; }
  .ccp-info p { display: none !important; }

  /* Products grid */
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 10px 14px 66px !important; }

  /* Modal: slide up from bottom */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-box {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* Restaurant modal: full screen slide-up */
  .rest-modal-overlay { align-items: flex-end !important; }
  .rest-modal {
    border-radius: 18px 18px 0 0 !important;
    min-height: 88vh !important;
    max-height: 96vh !important;
    overflow-y: auto !important;
  }
  .rest-modal-cover, .rest-modal-cover-emoji { height: 130px !important; border-radius: 18px 18px 0 0 !important; }

  /* Floating cart */
  .float-cart {
    left: 10px !important; right: 10px !important;
    transform: none !important; bottom: 64px !important;
    width: calc(100% - 20px) !important; min-width: unset !important;
    padding: 10px 16px !important;
  }
  .float-cart:hover { transform: none !important; }

  /* Bottom nav */
  .bottom-nav { height: 54px !important; padding: 5px 2px env(safe-area-inset-bottom, 4px) !important; }
  .bnav-item { min-width: 42px !important; font-size: 8.5px !important; padding: 2px 4px !important; }
  .bnav-item i { font-size: 17px !important; }

  /* Section headings: even tighter */
  .bk-section-h, .fd-section-h, .sv-section-h { margin: 12px 0 6px !important; font-size: 9px !important; }

  /* Calc: single col */
  .calc-grid, .g2 { grid-template-columns: 1fr !important; }
  .calc-result { grid-template-columns: 1fr 1fr !important; }
  .calc-box { padding: 12px !important; }

  /* Category page */
  .cat-page-header { padding: 16px 14px 10px !important; }
  .cat-page-icon { font-size: 28px !important; }
  .cat-page-header h1 { font-size: 17px !important; }
}

/* ══════════════════════════════════════════════
   VERY SMALL PHONES  ≤ 380px
══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .categories { grid-template-columns: repeat(4, 1fr) !important; }
  .rest-grid { grid-template-columns: 1fr !important; }
  .ins-grid { grid-template-columns: 1fr !important; }
  .qa-tile .qa-label { font-size: 0 !important; margin: 0 !important; }
  .promo-row { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════
   LAPTOP / DESKTOP  ≥ 1024px — maximize density
══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .bank-grid { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important; }
  .sacco-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .ins-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .inv-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .rest-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; }
  .sv-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important; }
  .mpesa-steps { grid-template-columns: repeat(6, 1fr) !important; }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .categories { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important; }
  .qa-grid { grid-template-columns: repeat(10, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   LEGAL HUB — compact
══════════════════════════════════════════════ */
.law-hero { padding: 24px 24px 18px !important; }
.law-hero h1 { font-size: clamp(22px,4.5vw,36px) !important; margin-bottom: 6px !important; }
.law-hero p { font-size: 12px !important; margin-bottom: 14px !important; }
.law-badge { font-size: 9px !important; padding: 3px 10px !important; margin-bottom: 10px !important; }
.law-body { padding: 16px 20px 70px !important; max-width: 1100px !important; }
.law-tabs { padding: 0 20px !important; gap: 4px !important; }
.law-tab { padding: 7px 12px !important; font-size: 11px !important; border-radius: 8px 8px 0 0 !important; }

.lawyers-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 9px !important;
}
.lawyer-card { padding: 13px !important; border-radius: 13px !important; }
.lc-top { gap: 9px !important; margin-bottom: 8px !important; }
.lc-avatar { width: 40px !important; height: 40px !important; font-size: 16px !important; }
.lc-name { font-size: 12px !important; font-weight: 800 !important; }
.lc-spec { font-size: 10px !important; }
.lc-bar  { font-size: 9px !important; }
.lc-stars { font-size: 10px !important; }
.lc-skills { gap: 3px !important; margin-bottom: 6px !important; }
.lc-skill { font-size: 8.5px !important; padding: 1px 5px !important; }
.lc-rate { font-size: 13px !important; margin: 5px 0 6px !important; }
.lc-book-btn { padding: 8px !important; font-size: 11px !important; border-radius: 8px !important; }

.doc-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.doc-card { padding: 13px !important; border-radius: 11px !important; }
.doc-icon { font-size: 24px !important; margin-bottom: 6px !important; }
.doc-title { font-size: 11px !important; margin-bottom: 3px !important; }
.doc-desc { font-size: 9.5px !important; line-height: 1.45 !important; }

.court-card { padding: 12px 14px !important; border-radius: 11px !important; margin-bottom: 8px !important; }
.court-name { font-size: 12px !important; }
.court-loc  { font-size: 10px !important; }

.right-card { padding: 12px 14px !important; border-radius: 11px !important; margin-bottom: 7px !important; }
.right-title { font-size: 12px !important; margin-bottom: 4px !important; }
.right-body { font-size: 11px !important; line-height: 1.65 !important; }
.right-law  { font-size: 9px !important; }

.lh-section { padding: 14px 16px !important; border-radius: 12px !important; margin-bottom: 12px !important; }
.lh-section-title { font-size: 12px !important; margin-bottom: 10px !important; }
.lh-input, .lh-textarea { padding: 9px 11px !important; font-size: 12px !important; border-radius: 8px !important; margin-bottom: 7px !important; }
.lh-label { font-size: 9.5px !important; margin-bottom: 3px !important; }
.lh-grid2 { gap: 8px !important; }
.law-alert { padding: 10px 13px !important; font-size: 11px !important; border-radius: 10px !important; margin-bottom: 12px !important; }

/* Category filter buttons for lawyers */
.lc-filter-btn { padding: 5px 10px !important; font-size: 10px !important; border-radius: 999px !important; }

@media (max-width: 600px) {
  .law-hero { padding: 16px 14px 12px !important; }
  .law-body { padding: 12px 14px 66px !important; }
  .lawyers-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .doc-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .lh-grid2 { grid-template-columns: 1fr !important; }
  .law-tabs { padding: 0 12px !important; }
  /* Register form: 1 col on phone */
  #lawpane-register [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (min-width: 1024px) {
  .lawyers-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .doc-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   B2B / DIGITAL / MISC PAGES — compact
══════════════════════════════════════════════ */
/* b2b.html */
.b2b-hero, .b2b-section { padding: 22px 20px 16px !important; }
/* digital.html */
.dg-hero { padding: 22px 20px 16px !important; }
/* generic cards that appear on multiple pages */
.product-card, .flash-card {
  border-radius: 12px !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.product-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important; }

/* ══════════════════════════════════════════════
   PERFORMANCE — reduce paint cost
══════════════════════════════════════════════ */
.bank-card, .sacco-card, .ins-card, .inv-card,
.rest-card, .sv-card, .pv-card, .mpesa-step,
.lawyer-card, .doc-card, .product-card {
  will-change: transform;
  contain: layout style;
}