/* ================================================================
   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; }
/* overflow-x: clip (not hidden) — avoids iOS Safari scroll trap while still preventing horizontal bleed */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
  /* overflow-y intentionally unset — overflow-y:auto on body creates a new
     scroll container on iOS Safari, causing position:fixed elements to scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: auto;
}
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 — premium sizing (services.html)
══════════════════════════════════════════════ */
.sv-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}
.sv-card {
  border-radius: 18px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.sv-card-img  { height: 160px !important; }
.sv-card-emoji {
  height: 140px !important; font-size: 56px !important;
  background: linear-gradient(135deg, rgba(113,255,0,0.06), rgba(0,170,255,0.06)) !important;
}
.sv-card-body  { padding: 16px !important; }
.sv-card-title { font-size: 15px !important; font-weight: 800 !important; margin-bottom: 4px !important; }
.sv-card-seller { font-size: 12px !important; margin-bottom: 8px !important; color: rgba(255,255,255,0.5) !important; }
.sv-card-price { font-size: 18px !important; font-weight: 900 !important; margin-bottom: 10px !important; }
.sv-card-tags  { margin-bottom: 12px !important; gap: 5px !important; }
.sv-tag        { font-size: 11px !important; padding: 3px 9px !important; }
/* Book button — full-width, properly sized, always visible */
.sv-book-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  min-height: 48px !important;
}

/* ══════════════════════════════════════════════
   PROVIDER CARDS — shared premium overrides
   Applies to: .pg-provider-card (electrical/plumbing/phone-repair/car-rental)
               .cl-provider-card (cleaning)
   All pages load premium.css so one rule set covers all hubs.
══════════════════════════════════════════════ */
.pg-provider-card,
.cl-provider-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 20px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  transition: transform .2s, border-color .2s, box-shadow .2s !important;
}
.pg-provider-card:hover,
.cl-provider-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

/* Avatar */
.pg-prov-avatar, .cl-prov-avatar {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  font-size: 26px !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* Name */
.pg-prov-name, .cl-prov-name {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: 3px !important;
}

/* Location */
.pg-prov-loc, .cl-prov-loc {
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
}

/* Stars + rating text */
.pg-prov-stars, .cl-prov-stars { font-size: 13px !important; }
.pg-prov-rnum,  .cl-prov-rnum  { font-size: 12px !important; color: rgba(255,255,255,0.45) !important; }

/* Bio */
.pg-prov-bio, .cl-prov-bio {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 12px !important;
  margin-top: 12px !important;
}

/* Skill chips */
.pg-prov-skill, .cl-prov-skill {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}
.pg-prov-skills, .cl-prov-skills {
  margin-bottom: 14px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  display: flex !important;
}

/* Rate price */
.pg-prov-rate, .cl-prov-rate {
  font-size: 20px !important;
  font-weight: 900 !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.pg-prov-rate small, .cl-prov-rate small {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.4) !important;
}

/* Footer: stack vertically so book button is full-width */
.pg-prov-foot, .cl-prov-foot {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin-top: auto !important;
}

/* Primary action row — WhatsApp + Book side by side, both full flex */
.pg-prov-foot > div:first-child,
.cl-prov-foot > div:first-child {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* BOOK BUTTON — prominent, properly sized, always visible */
.pg-book-btn, .cl-book-btn {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  text-align: center !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* WhatsApp button — consistent size */
.pg-wa-btn, .cl-wa-btn {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 13px 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

/* Verified badge */
.pg-verified-badge, .cl-verified-badge {
  font-size: 10px !important;
  padding: 3px 9px !important;
}

/* Availability indicator */
.pg-avail-dot, .cl-avail-dot {
  width: 8px !important; height: 8px !important;
}

/* Provider grid — 2 columns on desktop (each card has more info; 3 would be cramped) */
.pg-provider-grid, .cl-provider-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 18px !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,
.bnav-item.active-bnav { 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: 16px !important; }
}

/* ══════════════════════════════════════════════
   SELECT / DROPDOWN — global dark theme fix
   Removes native browser chrome on all hubs
══════════════════════════════════════════════ */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M7 9.5L1.5 4h11z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: white !important;
  padding-right: 36px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color .2s, background-color .2s !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
}
select:hover {
  border-color: rgba(255,255,255,0.24) !important;
  background-color: rgba(255,255,255,0.09) !important;
}
select:focus {
  border-color: rgba(113,255,0,0.5) !important;
  background-color: rgba(113,255,0,0.05) !important;
  outline: none !important;
}
select option {
  background: #111 !important;
  color: white !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
select optgroup {
  background: #0a0a0a !important;
  color: rgba(255,255,255,0.45) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
/* Light-mode override — keep selects readable on white backgrounds */
body.light-mode select {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='rgba(0,0,0,0.4)' d='M7 9.5L1.5 4h11z'/%3E%3C/svg%3E") !important;
  color: #111 !important;
  border-color: rgba(0,0,0,0.15) !important;
}
body.light-mode select option { background: #fff !important; color: #111 !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 on mobile, proportional heights */
  .sv-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .sv-card-img  { height: 110px !important; }
  .sv-card-emoji { height: 100px !important; font-size: 40px !important; }
  .sv-card-title { font-size: 13px !important; }
  .sv-card-price { font-size: 15px !important; }
  .sv-book-btn   { padding: 12px !important; font-size: 13px !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; width: 44px !important; height: 44px !important; }
  .ccp-info h3 { font-size: 11px !important; line-height: 1.25 !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; }
  /* Service provider cards: 260px min so they're readable on desktop */
  .sv-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 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(280px, 1fr)) !important;
  gap: 16px !important;
}
.lawyer-card {
  padding: 20px !important; border-radius: 18px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
}
.lc-top    { gap: 12px !important; margin-bottom: 12px !important; }
.lc-avatar { width: 52px !important; height: 52px !important; font-size: 24px !important; }
.lc-name   { font-size: 15px !important; font-weight: 900 !important; }
.lc-spec   { font-size: 12px !important; }
.lc-bar    { font-size: 11px !important; }
.lc-stars  { font-size: 12px !important; }
.lc-skills { gap: 5px !important; margin-bottom: 10px !important; }
.lc-skill  { font-size: 11px !important; padding: 3px 9px !important; }
.lc-rate   { font-size: 18px !important; font-weight: 900 !important; margin: 8px 0 12px !important; }
.lc-book-btn {
  display: block !important; width: 100% !important;
  padding: 13px 12px !important; font-size: 14px !important;
  font-weight: 900 !important; border-radius: 12px !important; min-height: 48px !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: 3 columns max on desktop — cards have enough content to warrant space */
  .lawyers-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 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;
}

/* ══════════════════════════════════════════════
   PREMIUM PHONE — extra density & polish
   Applied on top of mobile.css premium system
══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Homepage glass hero — floating premium card ── */
  .glass-hero {
    width: calc(100% - 32px) !important;
    max-width: 900px !important;
    margin: 16px auto !important;
    border-radius: 24px !important;
  }
  .glass-hero-card {
    border-radius: 20px !important;
    padding: 20px !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  }

  /* ── Product grid — 2 column square cards ── */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .product-card {
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
  }
  .product-card:active { transform: scale(0.96) !important; }

  /* Product image — square aspect */
  .product-image-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .product-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Product info — tight */
  .product-info { padding: 10px !important; }
  .product-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .product-price { font-size: 14px !important; margin-top: 4px !important; }

  /* ── Category pills — horizontal scroll ── */
  .categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .categories::-webkit-scrollbar { display: none !important; }
  .category-item {
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: all 0.15s !important;
  }
  .category-item.active, .category-item:active {
    background: rgba(113,255,0,0.1) !important;
    border-color: rgba(113,255,0,0.3) !important;
    color: #71ff00 !important;
  }

  /* ── Section titles ── */
  .section-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .section-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255,255,255,0.07) !important;
  }

  /* ── Service cards — 2x2 grid on mobile ── */
  .sv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .sv-card {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  /* ── Healthcare cards ── */
  .hc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .hc-card { border-radius: 16px !important; }

  /* ── Food restaurant cards ── */
  .fd-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Banner / promo cards — full bleed ── */
  .promo-banner, .flash-banner, [class*="-banner"] {
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* ── Quantity selectors ── */
  .qty-btn, .quantity-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  /* ── Cart items ── */
  .cart-item {
    border-radius: 16px !important;
    padding: 14px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    margin-bottom: 10px !important;
  }

  /* ── Checkout steps ── */
  .co-step-header {
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 16px !important;
  }

  /* ── Profile sections ── */
  .profile-section, .profile-card {
    border-radius: 18px !important;
    padding: 18px 16px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    margin-bottom: 12px !important;
  }

  /* ── Seller dashboard cards ── */
  .seller-stat-card, .seller-section-card {
    border-radius: 16px !important;
    padding: 16px 14px !important;
  }

  /* ── Track order steps ── */
  .track-step.step-done .step-dot {
    background: #71ff00 !important;
    box-shadow: 0 0 10px rgba(113,255,0,0.5) !important;
  }

  /* ── Reviews ── */
  .review-card {
    border-radius: 16px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    margin-bottom: 10px !important;
  }

  /* ── Flash sale items ── */
  .flash-item {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* ── Driver page stats ── */
  .driver-stat {
    border-radius: 16px !important;
    padding: 16px !important;
  }

  /* ── Forms — full width on mobile ── */
  .form-group, .co-form-group {
    width: 100% !important;
  }

  /* ── M-Pesa prompt ── */
  .mpesa-prompt, .payment-modal, [class*="mpesa"] {
    border-radius: 20px !important;
    padding: 24px !important;
  }

  /* ── Wishlist ── */
  .wishlist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}