/* ===== DigiSoko Kenya – Premium Styles & Animations ===== */
/* Brand identity: Red/Orange primary, Green for success/statuses, Blue sparingly for links/info, Black/White for structure */

:root {
  /* ===== Fixed light brand tokens — WCAG-minded contrast ===== */
  /* Brand — red/orange primary */
  --km-red: #dc2626;
  --km-red-hot: #ef4444;
  --km-gold: #f59e0b;
  --km-gold-warm: #f97316;
  --km-orange: #f97316;
  --km-orange-500: #f97316;
  --km-orange-600: #ea580c;
  --km-orange-700: #c2410c;
  --km-orange-50: #fff7ed;
  --km-orange-100: #ffedd5;

  /* Success / status — green */
  --km-green: #16a34a;
  --km-green-600: #16a34a;
  --km-green-700: #15803d;
  --km-green-50: #ecfdf5;
  --km-green-100: #d1fae5;
  --km-emerald: #16a34a;
  --km-emerald-50: #ecfdf5;

  /* Info — blue sparingly */
  --km-accent-blue: #2563eb;

  /* Surfaces — black/white structure */
  --km-bg: #f8fafc;
  --km-bg-elevated: #ffffff;
  --km-bg-muted: #f1f5f9;
  --km-card: #ffffff;
  --km-border: #e5e7eb;
  --km-border-strong: #d1d5db;

  /* Text */
  --km-text: #111827;
  --km-text-secondary: #374151;
  --km-text-muted: #4b5563;
  --km-text-inverse: #ffffff;

  /* Interactive — orange brand */
  --km-link: #c2410c;
  --km-link-hover: #ea580c;
  --km-focus-ring: rgba(249, 115, 22, 0.45);
  --km-primary: #f97316;
  --km-primary-hover: #ea580c;
  --km-primary-contrast: #ffffff;

  /* Legacy aliases */
  --km-dark: #111827;
  --km-slate: #374151;
  --km-white: #ffffff;
  --km-gray-50: #f8fafc;
  --km-gray-100: #f3f4f6;
  --km-gray-200: #e5e7eb;
  --km-gray-500: #6b7280;
  --km-gray-700: #374151;
  --km-gray-900: #111827;

  --km-radius: 1rem;
  --km-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.12);
  --km-shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 4px 16px rgba(17, 24, 39, 0.04);
  --km-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --km-header-bg: #ffffff;
  --km-header-border: #e5e7eb;
  /* Brand topbar: black → red → orange (blue/green only as subtle ends) */
  --km-topbar: linear-gradient(90deg, #111827 0%, #dc2626 35%, #f97316 70%, #ea580c 100%);
  --km-cat-head-bg: linear-gradient(135deg, #fff7ed 0%, #ffedd5 55%, #fff7ed 100%);
  --km-cat-head-border: #fdba74;
  --km-drawer-bg: #ffffff;
  --km-overlay: rgba(17, 24, 39, 0.45);
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Public-site body defaults only — panel shells use .km-panel and set their own colours */
body:not(.km-panel) {
  background-color: var(--km-bg);
  color: var(--km-text);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== DigiSoko Kenya brand + icon system ===== */
:root {
  /* Red/orange brand gradient — blue/green only for status accents, not primary brand */
  --km-brand-gradient: linear-gradient(120deg, #111827 0%, #dc2626 32%, #f97316 68%, #ea580c 100%);
  --km-brand-soft: linear-gradient(135deg, rgba(220,38,38,.12), rgba(249,115,22,.14) 60%, rgba(234,88,12,.10));
  --km-dark-panel: #0b0f14;
}

.top-bar { background: var(--km-brand-gradient) !important; }
.brand-gradient, .km-brand-gradient { background: var(--km-brand-gradient) !important; }
.btn-primary { background: var(--km-brand-gradient) !important; border: 0; box-shadow: 0 8px 22px rgba(249,115,22,.18); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Make Font Awesome icons crisp, local and visually prominent. */
.fas, .far, .fab {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.icon-tile, .nav-icon, .metric-icon {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  background: var(--km-brand-soft);
  color: #f97316;
  border: 1px solid rgba(249,115,22,.14);
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.sidebar-link i, .nav-link i { font-size: 1.05rem; }
.sidebar-link i { width: 2rem !important; height: 2rem; display: inline-grid; place-items: center; border-radius: .65rem; background: rgba(255,255,255,.045); color: #94a3b8; }
.sidebar-link.active i { background: linear-gradient(135deg, rgba(220,38,38,.22), rgba(249,115,22,.22)); color: #fb923c !important; box-shadow: inset 0 0 0 1px rgba(249,115,22,.14); }
.payment-toggle { padding: .65rem .8rem; border: 1px solid rgba(148,163,184,.12); border-radius: .8rem; background: rgba(255,255,255,.035); cursor: pointer; transition: .18s ease; }
.payment-toggle:hover { border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.06); transform: translateY(-1px); }
.payment-toggle input { accent-color: #f97316; }
.km-icon-accent { color: #f97316 !important; }
.km-icon-blue { color: #2563eb !important; }
.km-icon-green { color: #16a34a !important; }
.km-icon-red { color: #dc2626 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ===== Keyframe Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* Utility animation classes */
.animate-fade-up { animation: fadeUp 0.16s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.18s ease-out forwards; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-slide-up { animation: slideUpFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Stagger children */
.stagger-children > * { opacity: 0; animation: fadeUp 0.18s ease-out forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.02s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.06s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.14s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.16s; }

/* ===== Category Pills ===== */
.category-pill {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--km-gray-500);
  border-radius: 9999px;
  white-space: nowrap;
  transition: var(--km-transition);
  background: transparent;
  border: 1px solid transparent;
}

.category-pill:hover {
  background: var(--km-orange-50);
  color: var(--km-orange-600);
  border-color: var(--km-orange-100);
}

.category-pill.active {
  background: var(--km-orange-50);
  color: var(--km-orange-600);
  font-weight: 600;
  border-color: #a7d4bc;
}

/* ===== Brand Chips ===== */
.brand-chip {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  background: white;
  border: 1px solid var(--km-gray-200);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--km-gray-700);
  transition: var(--km-transition);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.brand-chip:hover {
  border-color: #fb923c;
  color: var(--km-orange-600);
  background: var(--km-orange-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

/* ===== Product Cards ===== */
.product-card {
  background: white;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--km-gray-100);
  transition: var(--km-transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: #a7d4bc;
  box-shadow: 0 20px 40px -12px rgba(234, 88, 12, 0.18);
  transform: translateY(-6px);
}

.product-card .product-img-wrap {
  aspect-ratio: 1;
  background: var(--km-gray-100);
  position: relative;
  overflow: hidden;
}

.product-card .product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.06);
}

.product-card .badge-discount {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
  z-index: 2;
}

.product-card .wishlist-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: white;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--km-gray-500);
  transition: var(--km-transition);
  z-index: 2;
  border: none;
  cursor: pointer;
}

.product-card .wishlist-btn:hover,
.product-card .wishlist-btn.active {
  color: #ef4444;
  transform: scale(1.1);
}

.product-card .wishlist-btn.active {
  animation: heartBeat 0.6s ease;
}

/* ===== Verified Badge ===== */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 10px;
  font-weight: 600;
  color: #047857;
  background: var(--km-emerald-50);
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid #a7f3d0;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}

.verified-badge i { font-size: 9px; }

/* ===== Category Cards ===== */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: white;
  border-radius: 1.25rem;
  border: 1px solid var(--km-gray-100);
  transition: var(--km-transition);
  text-decoration: none;
  color: inherit;
}

.category-card:hover {
  border-color: #a7d4bc;
  box-shadow: 0 12px 28px -8px rgba(234, 88, 12, 0.15);
  transform: translateY(-5px);
}

.category-card .icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: var(--km-orange-50);
  color: var(--km-orange-600);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  transition: var(--km-transition);
}

.category-card:hover .icon-wrap {
  background: var(--km-orange-600);
  color: white;
  transform: scale(1.08);
}

/* ===== Delivery / Partner Cards ===== */
.delivery-card {
  background: white;
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--km-gray-100);
  transition: var(--km-transition);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04);
}

.delivery-card:hover {
  border-color: #bbf7d0;
  box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.15);
  transform: translateY(-6px);
}

/* ===== Hero & Floating Cards ===== */
.hero-card {
  animation: float 5s ease-in-out infinite;
  backdrop-filter: blur(8px);
}

.hero-card:nth-child(2) { animation-delay: 0.8s; }
.hero-card:nth-child(3) { animation-delay: 1.4s; }

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Header ===== */
#mainHeader, header.scrolled {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

header.scrolled {
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.1);
}

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--km-orange-500), var(--km-orange-600));
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.875rem;
  border: none;
  cursor: pointer;
  transition: var(--km-transition);
  box-shadow: 0 4px 14px rgba(8, 116, 67, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--km-orange-600), var(--km-orange-700));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: white;
  color: var(--km-orange-600);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.875rem;
  border: 2px solid #a7d4bc;
  cursor: pointer;
  transition: var(--km-transition);
}

.btn-secondary:hover {
  background: var(--km-orange-50);
  border-color: var(--km-orange-500);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--km-gray-700);
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  transition: var(--km-transition);
}

.btn-ghost:hover {
  background: var(--km-gray-100);
  color: var(--km-orange-600);
}

/* ===== Forms ===== */
.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--km-gray-200);
  border-radius: 0.875rem;
  font-size: 0.95rem;
  transition: var(--km-transition);
  background: white;
}

.input-field:focus {
  outline: none;
  border-color: var(--km-orange-500);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* ===== Cards & Panels ===== */
.panel {
  background: white;
  border-radius: 1.25rem;
  border: 1px solid var(--km-gray-100);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.panel-hover:hover {
  box-shadow: var(--km-shadow);
  border-color: #a7d4bc;
}

/* ===== Skeleton Loading ===== */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

/* ===== Line Clamp ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Focus & Accessibility ===== */
input:focus, button:focus, a:focus-visible {
  outline: none;
}

button:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35);
}

/* ===== Toast / Notifications ===== */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--km-dark);
  color: white;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 100;
  animation: slideUpFade 0.4s ease-out;
}

/* ===== Price styling ===== */
.price-current {
  font-weight: 800;
  color: var(--km-gray-900);
  font-size: 1.05rem;
}

.price-original {
  font-size: 0.8rem;
  color: var(--km-gray-500);
  text-decoration: line-through;
}

.price-save {
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
}

/* ===== Mobile Optimizations ===== */
@media (max-width: 640px) {
  .product-card { border-radius: 1rem; }
  .category-card { padding: 1rem 0.5rem; }
  .btn-primary, .btn-secondary { padding: 0.65rem 1.15rem; font-size: 0.9rem; }
}

/* ===== Dark top bar ===== */
.top-bar {
  background: linear-gradient(90deg, #111827, #1f2937);
}

/* ===== Gradient text / accents ===== */
.gradient-text {
  background: linear-gradient(135deg, var(--km-orange-500), #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Status pills ===== */
.status-available { background: #ecfdf5; color: #047857; }
.status-busy { background: #e8f5ee; color: #065c35; }
.status-offline { background: #f3f4f6; color: #6b7280; }

/* ===== Smooth page transitions helper ===== */
.page-enter {
  animation: fadeUp 0.45s ease-out;
}


/* ===== Verified badge (platform seal) ===== */
.km-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
  margin-left: 0.25rem;
  flex-shrink: 0;
}
.km-verified-badge svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(29, 155, 240, 0.45));
}
.km-verified-badge--lg svg {
  width: 22px;
  height: 22px;
}
.km-verified-badge--sm svg {
  width: 14px;
  height: 14px;
}
.km-name-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: nowrap;
}


/* Rider / product star ratings */
.km-stars {
  display: inline-flex;
  gap: 0.1rem;
  color: #f59e0b;
  font-size: 0.75rem;
  vertical-align: middle;
}
.km-stars .far { color: #d1d5db; }


/* Authentic verification badge (Meta / X style) */
.km-verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.2rem;
  line-height: 0;
  flex-shrink: 0;
}
.km-verified-badge svg {
  display: block;
}
.km-name-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

/* ===== Category sidebar (site-wide) ===== */
.km-cat-sidebar { animation: fadeIn 0.4s ease both; }
.km-cat-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.08);
}
.km-cat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #e8f5ee 0%, #d1ebdd 100%);
  border-bottom: 1px solid #a7d4bc;
}
.km-cat-head-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #0a8a50, #087443);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(8, 116, 67, 0.35);
}
.km-cat-title { font-weight: 800; font-size: 0.95rem; color: #111827; }
.km-cat-sub { font-size: 0.7rem; color: #065c35; opacity: 0.85; }
.km-cat-list { padding: 0.4rem; max-height: min(70vh, 520px); overflow-y: auto; }
.km-cat-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideInLeft 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.km-cat-item:hover {
  background: #e8f5ee;
  color: #065c35;
  transform: translateX(3px);
}
.km-cat-item.is-active {
  background: linear-gradient(135deg, #d1ebdd, #a7d4bc);
  color: #065c35;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #6bb892;
}
.km-cat-ico {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: #6b7280;
  flex-shrink: 0;
  transition: inherit;
}
.km-cat-item:hover .km-cat-ico,
.km-cat-item.is-active .km-cat-ico {
  background: #fff;
  color: #087443;
}
.km-cat-label { flex: 1; min-width: 0; }
.km-cat-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 9999px;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  text-align: center;
  line-height: 1.4;
}
.km-cat-item.is-active .km-cat-count {
  background: rgba(249, 115, 22, 0.15);
  color: #ea580c;
}
.km-cat-item:hover .km-cat-count {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}
.km-cat-arrow {
  font-size: 0.6rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  color: #f97316;
}
.km-cat-item:hover .km-cat-arrow,
.km-cat-item.is-active .km-cat-arrow {
  opacity: 1;
  transform: translateX(0);
}
.km-cat-foot {
  padding: 0.75rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.km-cat-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}
.km-cat-link:hover { background: #f9fafb; color: #087443; }

.km-page-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .km-page-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .km-page-main { flex: 1; min-width: 0; }
}

/* Mobile category drawer trigger */
.km-cat-mobile-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: #111827;
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
  .km-cat-mobile-toggle { display: none; }
}


/* ===== Mobile category drawer ===== */
.km-cat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.km-cat-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.km-cat-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 88vw);
  z-index: 70;
  background: #fff;
  box-shadow: 8px 0 30px rgba(0,0,0,0.12);
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.km-cat-drawer.is-open {
  transform: translateX(0);
}
.km-cat-drawer .km-cat-panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 100%;
}
@media (min-width: 1024px) {
  .km-cat-overlay, .km-cat-drawer-only { display: none !important; }
  .km-cat-sidebar.km-cat-desktop { display: block; }
}
@media (max-width: 1023px) {
  .km-cat-sidebar.km-cat-desktop { display: none; }
}

/* Primary buttons — Kenyan green */
.btn-primary-km, .km-btn-primary {
  background: linear-gradient(135deg, #0a8a50, #087443);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(8, 116, 67, 0.25);
}
.btn-primary-km:hover, .km-btn-primary:hover {
  background: linear-gradient(135deg, #087443, #065c35);
  box-shadow: 0 6px 18px rgba(8, 116, 67, 0.35);
}
.km-btn-danger {
  background: #c62828;
  color: #fff;
}
.km-btn-gold {
  background: linear-gradient(135deg, #e8961a, #d4a72c);
  color: #111827;
  font-weight: 700;
}

/* Top bar uses deep green */
.top-bar {
  background: linear-gradient(90deg, #065c35, #087443) !important;
}


/* ===== Theme-aware chrome ===== */
#mainHeader {
  background: var(--km-header-bg) !important;
  border-color: var(--km-header-border) !important;
  color: var(--km-text);
}
.top-bar {
  background: var(--km-topbar) !important;
  color: #fff;
}
.km-cat-panel {
  background: var(--km-card);
  border-color: var(--km-border);
}
.km-cat-head {
  background: var(--km-cat-head-bg);
  border-bottom-color: var(--km-cat-head-border);
}
.km-cat-title { color: var(--km-text); }
.km-cat-sub { color: var(--km-text-muted); }
.km-cat-item { color: var(--km-text-secondary); }
.km-cat-item:hover {
  background: var(--km-green-50);
  color: var(--km-link);
}
.km-cat-item.is-active {
  background: var(--km-green-100);
  color: var(--km-link);
  box-shadow: inset 0 0 0 1px var(--km-cat-head-border);
}
.km-cat-ico { background: var(--km-bg-muted); color: var(--km-text-muted); }
.km-cat-foot { border-top-color: var(--km-border); }
.km-cat-link { color: var(--km-text-secondary); }
.km-cat-drawer { background: var(--km-drawer-bg); }
.km-cat-overlay { background: var(--km-overlay); }
.km-cat-mobile-toggle {
  background: var(--km-card);
  border-color: var(--km-border);
  color: var(--km-text);
}

/* Cards / generic surfaces using tokens */
.km-surface {
  background: var(--km-card);
  border: 1px solid var(--km-border);
  color: var(--km-text);
  box-shadow: var(--km-shadow-card);
}
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--km-focus-ring);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Official verification badge polish */
.km-verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.25rem;
  line-height: 0;
  flex-shrink: 0;
}
.km-verified-badge svg {
  display: block;
}
.km-verified-badge--lg svg {
  width: 22px;
  height: 22px;
}
.km-verified-badge--sm svg {
  width: 14px;
  height: 14px;
}
.km-name-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}


/* ===== Official verification badge (design system) ===== */
.km-badge,
.km-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.25rem;
  line-height: 0;
  flex-shrink: 0;
  position: relative;
}
.km-badge svg,
.km-verified-badge svg {
  display: block;
  width: 18px;
  height: 18px;
}
.km-badge--sm svg,
.km-verified-badge--sm svg { width: 14px; height: 14px; }
.km-badge--md svg,
.km-verified-badge--md svg { width: 18px; height: 18px; }
.km-badge--lg svg,
.km-verified-badge--lg svg { width: 22px; height: 22px; }
.km-badge--xl svg { width: 28px; height: 28px; }

/* Style variants via data-style (set in PHP) */
.km-verified-badge[data-style="blue"] svg,
.km-badge--blue svg { filter: drop-shadow(0 1px 2px rgba(29, 155, 240, 0.45)); }
.km-verified-badge[data-style="meta"] svg,
.km-badge--meta svg { filter: drop-shadow(0 1px 2px rgba(8, 102, 255, 0.45)); }
.km-verified-badge[data-style="gold"] svg,
.km-badge--gold svg { filter: drop-shadow(0 1px 2px rgba(234, 179, 8, 0.5)); }
.km-verified-badge[data-style="rider"] svg,
.km-badge--rider svg { filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.45)); }

.km-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--km-text-secondary, #374151);
}
.km-badge-label .km-verified-badge { margin-left: 0; }

.km-name-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  max-width: 100%;
}

/* Soft pulse for newly verified highlight */
@keyframes kmBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.km-badge--pulse svg,
.km-verified-badge.km-badge--pulse svg {
  animation: kmBadgePulse 1.6s ease-in-out 2;
}

/* Real-time alert toasts */
.km-rt-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  max-width: 22rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: #111827;
  color: #f3f4f6;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.km-rt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.km-rt-toast__title { font-weight: 800; font-size: 0.9rem; margin-bottom: 0.2rem; }
.km-rt-toast__body { font-size: 0.8rem; color: #d1d5db; line-height: 1.4; }
.km-rt-toast--subscription { border-color: rgba(245, 158, 11, 0.45); }
.km-rt-toast--seller { border-color: rgba(16, 185, 129, 0.4); }
.km-rt-toast--message { border-color: rgba(59, 130, 246, 0.5); }
@media (max-width: 640px) {
  .km-rt-toast { left: 1rem; right: 1rem; max-width: none; bottom: 0.75rem; }
}

/* Content pages */
.km-prose h2 { margin-top: 1.25rem; }
.km-prose ul, .km-prose ol { margin: 0.5rem 0 0.75rem; }
.km-prose a { color: #ea580c; font-weight: 600; }
.km-prose details summary { list-style: none; }
.km-prose details summary::-webkit-details-marker { display: none; }

/* Homepage marquee pause on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .km-marquee-track { animation: none !important; }
}

/* ===== KM critical utilities (fallback while Tailwind loads) ===== */
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-8 { gap: 2rem; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-black { font-weight: 900; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.border { border: 1px solid var(--km-border, #e5e7eb); }
.bg-white { background: #fff; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-y-4 > * + * { margin-top: 1rem; }
.antialiased { -webkit-font-smoothing: antialiased; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:inline { display: inline; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex { display: flex; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}


/* ===== Force sidebar + main layout (do not rely on Tailwind utilities) ===== */
.km-page-layout {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.km-page-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.km-cat-sidebar.km-cat-desktop {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .km-page-layout {
    flex-direction: row !important;
    align-items: flex-start;
  }
  .km-cat-sidebar.km-cat-desktop {
    display: block !important;
    width: 16rem !important;
    max-width: 16rem !important;
    min-width: 16rem !important;
    flex: 0 0 16rem !important;
  }
  .km-page-main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
  }
}
@media (max-width: 1023px) {
  .km-cat-sidebar.km-cat-desktop { display: none !important; }
}

/* ===== Responsive grids (homepage + catalogue) — compact  up to 8 per row ===== */
.km-grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.km-grid-stores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.km-grid-riders {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.km-grid-stalls {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (min-width: 400px) {
  .km-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
}
@media (min-width: 560px) {
  .km-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .km-grid-stalls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .km-grid-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
  .km-grid-riders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
  .km-grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
}
@media (min-width: 768px) {
  .km-grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
  .km-grid-stalls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (min-width: 900px) {
  .km-grid-products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .km-grid-stores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .km-grid-products { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
  .km-grid-stalls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .km-grid-products { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.65rem; }
}
@media (min-width: 1400px) {
  .km-grid-products { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.7rem; }
  .km-grid-stalls { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
}

/* Compact product cards — smaller images, less padding */
.km-grid-products .product-card,
.product-card.km-compact {
  border-radius: 0.65rem;
  box-shadow: none;
}
.km-grid-products .product-card:hover,
.product-card.km-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(234, 88, 12, 0.18);
}
.km-grid-products .product-card .product-img-wrap,
.product-card.km-compact .product-img-wrap {
  aspect-ratio: 1 / 1;
  max-height: 140px;
}
@media (min-width: 1024px) {
  .km-grid-products .product-card .product-img-wrap,
  .product-card.km-compact .product-img-wrap {
    max-height: 120px;
  }
}
.km-grid-products .product-card h3,
.km-grid-products .product-card .product-title,
.product-card.km-compact h3,
.product-card.km-compact .product-title {
  font-size: 0.7rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.km-grid-products .product-card .price,
.km-grid-products .product-card .product-price,
.product-card.km-compact .price,
.product-card.km-compact .product-price {
  font-size: 0.8rem;
}
.km-grid-products .product-card .badge-discount,
.product-card.km-compact .badge-discount {
  font-size: 0.6rem;
  padding: 0.12rem 0.35rem;
  top: 0.4rem;
  left: 0.4rem;
}
.km-grid-products .product-card .wishlist-btn,
.product-card.km-compact .wishlist-btn {
  width: 1.6rem;
  height: 1.6rem;
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.7rem;
}
/* Tighter body padding inside cards */
.km-grid-products .product-card > div:not(.product-img-wrap),
.product-card.km-compact > div:not(.product-img-wrap) {
  padding: 0.4rem 0.5rem 0.55rem !important;
}
.km-grid-products .product-card .text-sm,
.product-card.km-compact .text-sm {
  font-size: 0.7rem !important;
}
.km-grid-products .product-card .text-xs,
.product-card.km-compact .text-xs {
  font-size: 0.65rem !important;
}

/* Stalls compact cards */
.km-stall-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.85rem;
  padding: 0.85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.km-stall-card h2 {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.km-stall-card .km-stall-meta {
  font-size: 0.75rem;
  color: #64748b;
}
.km-stall-card .km-stall-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ea580c;
}

/* Mobile polish */
@media (max-width: 639px) {
  .km-hero h1 { font-size: 1.75rem !important; line-height: 1.15 !important; }
  .km-best-slider > a { min-width: 9.5rem !important; }
  .km-marquee-track { gap: 0.65rem; }
  .km-marquee-track a { max-width: 85vw; }
  footer .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
  #mainHeader .top-bar { font-size: 0.65rem; }
  #mainHeader form { display: none !important; } /* search stays mobile-hidden in header; use catalog */
}

/* Touch-friendly targets */
@media (hover: none) {
  .km-cat-item, .btn, button, a.km-share {
    min-height: 2.5rem;
  }
}

/* Prevent horizontal page scroll from marquees */
body { overflow-x: hidden; }
.km-marquee { max-width: 100%; }
img { max-width: 100%; height: auto; }


/* fa-icon-fix — ensure Font Awesome glyphs render (panels + site) */
.fa, .fas, .far, .fal, .fat, .fad, .fab {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: 1;
}
.fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
}

/* =========================================================
   DigiSoko Kenya — Responsive flexbox + media queries
   Breakpoints: 480 (phone) · 640 (sm) · 768 (md) · 1024 (lg)
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Flex/grid children must be allowed to shrink */
.min-w-0, .km-page-main, .sp-wrap, .sp-meta, .sp-left {
  min-width: 0;
}

/* Header flex safety */
#mainHeader .max-w-7xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* Flash ticker never overflows viewport */
.km-flash-news,
.km-flash-news-inner {
  max-width: 100%;
  min-width: 0;
}

/* Product grids — fluid columns */
.km-product-grid,
.km-best-slider {
  display: flex;
  gap: 0.75rem;
  min-width: 0;
}

.km-best-slider {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}

.km-best-slider > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Seller / buyer / admin panel shells */
.km-panel main,
.sidebar-mobile + div,
.flex.min-h-screen > div.flex-1 {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Phone (≤480px) ---------- */
@media (max-width: 480px) {
  #mainHeader .max-w-7xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #mainHeader form.hidden.md\:flex {
    display: none !important;
  }

  .km-flash-news-badge {
    margin-left: 0.4rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }

  .km-flash-item {
    font-size: 0.72rem;
  }

  .km-page-layout {
    gap: 1rem;
  }

  .km-best-slider > a,
  .km-best-slider > * {
    min-width: 9.5rem !important;
    max-width: 11rem !important;
  }

  /* Stack hero stats */
  section .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .sp-row {
    padding: 0.65rem 0.7rem;
  }

  .sp-title {
    font-size: 0.78rem;
  }

  .sp-right {
    gap: 0.35rem 0.5rem;
  }

  /* Partner chips */
  .km-marquee-track a {
    max-width: 160px;
  }
}

/* ---------- Small tablets / large phones (≤640px) ---------- */
@media (max-width: 640px) {
  .max-w-7xl {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  h1, .text-2xl.md\:text-3xl {
    font-size: 1.35rem !important;
    line-height: 1.25;
  }

  h2, .text-xl.md\:text-2xl {
    font-size: 1.15rem !important;
  }

  /* Homepage product grids → 2 columns */
  .km-page-main .grid.grid-cols-2 {
    gap: 0.6rem;
  }

  /* Hide less-critical header links on very small screens */
  .top-bar .flex.gap-4 a:nth-child(n+3) {
    display: none;
  }

  /* Cart / checkout full width */
  .km-page-main form,
  .km-page-main .glass {
    max-width: 100%;
  }

  /* Seller product form */
  .glass.rounded-2xl {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

/* ---------- Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  .km-page-layout {
    flex-direction: column;
  }

  .km-page-main {
    width: 100%;
    min-width: 0;
  }

  /* Official partners — smaller logos already constrained */
  .km-marquee {
    overflow: hidden;
  }
}

/* ---------- Below desktop sidebar (≤1023px) ---------- */
@media (max-width: 1023px) {
  .km-page-layout {
    flex-direction: column;
  }

  /* Seller sidebar becomes overlay — content full width */
  .sidebar-mobile {
    max-width: min(18rem, 86vw);
  }

  main.flex-1,
  main.min-w-0 {
    width: 100%;
    max-width: 100vw;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  /* Tables that remain: allow horizontal scroll without page zoom */
  .overflow-x-auto,
  .scroll-thin {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ---------- Desktop (≥1024px) ---------- */
@media (min-width: 1024px) {
  .km-page-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .km-page-main {
    flex: 1 1 0%;
    min-width: 0;
  }

  .km-cat-sidebar.km-cat-desktop {
    flex: 0 0 260px;
    width: 260px;
    max-width: 280px;
  }
}

/* ---------- Wide desktop ---------- */
@media (min-width: 1280px) {
  .km-cat-sidebar.km-cat-desktop {
    flex: 0 0 280px;
    width: 280px;
  }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .km-cat-item,
  .sp-actions a,
  .sp-actions button,
  .btn {
    min-height: 2.5rem;
  }

  a, button {
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.15);
  }
}

/* Prevent iOS input zoom (font-size ≥16px on inputs) */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Print */
@media print {
  #mainHeader,
  .km-flash-news,
  .km-cat-sidebar,
  .sidebar-mobile,
  footer {
    display: none !important;
  }
  body { background: #fff; color: #000; }
}


/* ===== Force compact product tiles in all catalogue grids ===== */
.km-grid-products > a,
.km-grid-products > .product-card,
.km-grid-products > article {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.65rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.km-grid-products > a:hover,
.km-grid-products > .product-card:hover,
.km-grid-products > article:hover {
  border-color: #fed7aa;
  box-shadow: 0 6px 14px -6px rgba(234, 88, 12, 0.2);
  transform: translateY(-2px);
}
/* Image area — fixed short height so many fit per row */
.km-grid-products > a .aspect-square,
.km-grid-products > a .product-img-wrap,
.km-grid-products > .product-card .product-img-wrap,
.km-grid-products > a > div:first-child {
  aspect-ratio: 1 / 1;
  max-height: 130px;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  .km-grid-products > a .aspect-square,
  .km-grid-products > a .product-img-wrap,
  .km-grid-products > a > div:first-child {
    max-height: 110px;
  }
}
.km-grid-products > a img,
.km-grid-products .product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Body padding & type scale */
.km-grid-products > a > div:last-child,
.km-grid-products > a .p-3,
.km-grid-products > a .p-4 {
  padding: 0.4rem 0.45rem 0.5rem !important;
}
.km-grid-products > a h2,
.km-grid-products > a h3,
.km-grid-products > a .font-semibold {
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.15rem 0 !important;
}
.km-grid-products > a .text-sm {
  font-size: 0.72rem !important;
}
.km-grid-products > a .text-\[11px\],
.km-grid-products > a .text-xs {
  font-size: 0.62rem !important;
}
.km-grid-products > a .font-extrabold,
.km-grid-products > a .font-black,
.km-grid-products > a .font-bold.text-orange-600,
.km-grid-products > a [class*="orange"] {
  font-size: 0.8rem !important;
}