/* ════════════════════════════════════════════════════════════
   indexstyle.css  —  KivexMall Homepage  (Jumia/Kilimall style)
   Font: 'Plus Jakarta Sans' + 'DM Sans'
   Primary:  #E8192C  (vivid red)
   Accent:   #F68B1E  (warm orange)
   Success:  #00A650  (price green)
   Neutral:  #F2F2F2  (page bg)
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

/* ── CSS Variables ── */
:root {
  --km-red:        #E8192C;
  --km-red-dark:   #c41024;
  --km-red-light:  #fff0f1;
  --km-orange:     #F68B1E;
  --km-orange-dk:  #e07a0c;
  --km-green:      #00A650;
  --km-blue:       #0070C9;
  --km-bg:         #F0F0F0;
  --km-white:      #FFFFFF;
  --km-border:     #E5E5E5;
  --km-text:       #1A1A1A;
  --km-muted:      #757575;
  --km-light:      #F7F7F7;
  --km-star:       #F5A623;
  --km-radius:     8px;
  --km-radius-lg:  12px;
  --km-shadow:     0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --km-shadow-md:  0 4px 12px rgba(0,0,0,.10);
  --km-shadow-h:   0 8px 24px rgba(0,0,0,.15);
  --km-card-w:     175px;
  --km-trans:      .2s cubic-bezier(.4,0,.2,1);
  --km-font:       'Plus Jakarta Sans', 'DM Sans', -apple-system, sans-serif;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
a   { color: inherit; }

/* ── Page base ── */
.km-home {
  font-family: var(--km-font);
  background: var(--km-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.km-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px 32px;
}


/* ════════════════════════════════════════════════════════════
   PRODUCT CARD  —  Jumia-style fully-clickable card
   ════════════════════════════════════════════════════════════ */
.km-pcard {
  display: flex;
  flex-direction: column;
  width: var(--km-card-w);
  min-width: var(--km-card-w);
  background: var(--km-white);
  border-radius: var(--km-radius);
  text-decoration: none;
  color: var(--km-text);
  overflow: hidden;
  border: 1px solid var(--km-border);
  transition: box-shadow var(--km-trans), transform var(--km-trans), border-color var(--km-trans);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  will-change: transform;
}
.km-pcard:hover {
  box-shadow: var(--km-shadow-h);
  transform: translateY(-3px);
  border-color: #ccc;
  z-index: 2;
}
.km-pcard:active { transform: translateY(-1px); }

/* Wishlist button */
.km-pcard__wish {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--km-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #bbb;
  cursor: pointer;
  z-index: 3;
  transition: color var(--km-trans), border-color var(--km-trans), background var(--km-trans);
  backdrop-filter: blur(4px);
}
.km-pcard__wish:hover,
.km-pcard__wish.active { color: var(--km-red); border-color: var(--km-red); background: #fff; }

/* Discount badge */
.km-pcard__discount {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--km-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: .2px;
  line-height: 1.6;
}

/* Verified / official badge */
.km-pcard__official {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg,#003087,#0070C9);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 3px 6px;
  letter-spacing: .4px;
  text-transform: uppercase;
  z-index: 2;
}

/* Out-of-stock tag */
.km-pcard__oos-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: .3px;
}

/* Product image */
.km-pcard__img-wrap {
  width: 100%;
  height: 168px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  position: relative;
}
.km-pcard__img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.km-pcard:hover .km-pcard__img-wrap img { transform: scale(1.06); }

/* Card body */
.km-pcard__body {
  padding: 10px 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  border-top: 1px solid var(--km-border);
}

/* Product name */
.km-pcard__name {
  font-size: 12.5px;
  font-weight: 500;
  color: #2a2a2a;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  letter-spacing: .01em;
}

/* Pricing row */
.km-pcard__pricing {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.km-pcard__price {
  font-size: 15px;
  font-weight: 800;
  color: var(--km-red);
  letter-spacing: -.4px;
  line-height: 1;
}
.km-pcard__old {
  font-size: 11px;
  color: #bbb;
  text-decoration: line-through;
  font-weight: 400;
}

/* Stars */
.km-pcard__stars {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-top: 3px;
}
.km-pcard__stars .fa-star,
.km-pcard__stars .fa-star-half-o { color: var(--km-star); font-size: 10px; }
.km-pcard__stars .fa-star-o      { color: #ddd; font-size: 10px; }
.km-pcard__review-count {
  font-size: 10px;
  color: var(--km-muted);
  margin-left: 3px;
  font-weight: 400;
}

/* Free shipping badge */
.km-pcard__free-ship {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--km-green);
  letter-spacing: .2px;
  margin-top: 2px;
}

/* OOS state */
.km-pcard--oos .km-pcard__img-wrap img { opacity: .5; }
.km-pcard--oos .km-pcard__price { color: var(--km-muted); }


/* ════════════════════════════════════════════════════════════
   SCROLLABLE TRACK
   ════════════════════════════════════════════════════════════ */
.km-track-wrap {
  overflow: hidden;
  position: relative;
}
/* fade edges on desktop */
.km-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 10px;
  width: 50px;
  background: linear-gradient(to left, var(--km-white) 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}
.km-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.km-track::-webkit-scrollbar { display: none; }
.km-track .km-pcard { scroll-snap-align: start; }


/* ════════════════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════════════════ */
.km-section { margin: 10px 0; }
.km-section__box {
  background: var(--km-white);
  border-radius: var(--km-radius-lg);
  padding: 16px 16px 8px;
  box-shadow: var(--km-shadow);
  border: 1px solid rgba(0,0,0,.04);
}

/* Section header */
.km-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.km-sec-head__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.km-sec-head__bar {
  width: 4px;
  height: 40px;
  border-radius: 4px;
  background: var(--km-orange);
  flex-shrink: 0;
}
.km-sec-head__bar--red    { background: var(--km-red); }
.km-sec-head__bar--orange { background: var(--km-orange); }
.km-sec-head__bar--green  { background: var(--km-green); }
.km-sec-head__bar--blue   { background: var(--km-blue); }

.km-sec-head h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--km-text);
  margin: 0 0 2px;
  line-height: 1.2;
  letter-spacing: -.3px;
}
.km-sec-head p {
  font-size: 11.5px;
  color: var(--km-muted);
  margin: 0;
  font-weight: 400;
}
.km-sec-head__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* See all link */
.km-see-all {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--km-red);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--km-trans), gap var(--km-trans);
  padding: 5px 10px;
  border: 1.5px solid var(--km-red);
  border-radius: 20px;
  line-height: 1;
}
.km-see-all:hover { background: var(--km-red); color: #fff; }

/* Scroll nav buttons */
.km-scroll-nav { display: flex; gap: 4px; }
.km-scroll-nav button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--km-border);
  background: var(--km-white);
  color: var(--km-text);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--km-trans), border-color var(--km-trans), color var(--km-trans), transform var(--km-trans);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.km-scroll-nav button:hover {
  background: var(--km-red);
  color: #fff;
  border-color: var(--km-red);
  transform: scale(1.08);
}
.km-scroll-nav button:disabled { opacity: .35; cursor: default; transform: none; }


/* ════════════════════════════════════════════════════════════
   FLASH DEALS SECTION
   ════════════════════════════════════════════════════════════ */
.km-section--deals .km-section__box {
  border-top: 3px solid var(--km-red);
}
.km-sec-head--flash .km-sec-head__left { gap: 14px; }
.km-flash-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--km-red), #ff4757);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  animation: km-pulse 2s infinite;
  box-shadow: 0 4px 12px rgba(232,25,44,.35);
}
@keyframes km-pulse {
  0%,100% { box-shadow: 0 4px 12px rgba(232,25,44,.35), 0 0 0 0 rgba(232,25,44,.4); }
  50%      { box-shadow: 0 4px 12px rgba(232,25,44,.35), 0 0 0 8px rgba(232,25,44,0); }
}
.km-sec-head--flash h2 { color: var(--km-red); }

/* Countdown timer */
.km-countdown {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.km-countdown__label {
  font-size: 11px;
  color: var(--km-muted);
  font-weight: 500;
  margin-right: 2px;
}
.km-countdown__unit {
  background: var(--km-text);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.km-countdown__sep { color: var(--km-red); font-weight: 800; font-size: 13px; }


/* ════════════════════════════════════════════════════════════
   CATEGORY QUICK-NAV (icon row)
   ════════════════════════════════════════════════════════════ */
.km-cat-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--km-white);
  border-radius: var(--km-radius-lg);
  margin: 10px 0;
  padding: 14px 12px;
  box-shadow: var(--km-shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.km-cat-nav::-webkit-scrollbar { display: none; }

.km-cat-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--km-text);
  flex-shrink: 0;
  transition: transform var(--km-trans);
  min-width: 70px;
  text-align: center;
  padding: 4px 6px 6px;
  border-radius: 8px;
}
.km-cat-nav__item:hover { transform: translateY(-4px); background: var(--km-light); }
.km-cat-nav__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform var(--km-trans), box-shadow var(--km-trans);
}
.km-cat-nav__item:hover .km-cat-nav__icon {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.km-cat-nav__item span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--km-text);
  line-height: 1.25;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════
   HERO ROW
   ════════════════════════════════════════════════════════════ */
.km-hero-row {
  display: grid;
  grid-template-columns: 220px 1fr 158px;
  gap: 10px;
  margin: 10px 0;
}
@media (max-width: 1024px) {
  .km-hero-row { grid-template-columns: 200px 1fr 145px; }
}
@media (max-width: 820px) {
  .km-hero-row { grid-template-columns: 1fr; }
  .km-cat-sidebar, .km-shops-panel { display: none; }
}

/* ── Category sidebar ── */
.km-cat-sidebar {
  background: var(--km-white);
  border-radius: var(--km-radius-lg);
  overflow: hidden;
  box-shadow: var(--km-shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.km-cat-sidebar__head {
  background: linear-gradient(135deg, var(--km-red), var(--km-red-dark));
  color: #fff;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1px;
}
.km-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 360px;
}
.km-cat-list::-webkit-scrollbar { width: 3px; }
.km-cat-list::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
.km-cat-list li { position: relative; }
.km-cat-list__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f4f4f4;
  transition: background var(--km-trans), color var(--km-trans), padding-left var(--km-trans);
}
.km-cat-list__link:hover { background: var(--km-red-light); color: var(--km-red); padding-left: 17px; }
.km-cat-list__link .cat-icon { color: #bbb; font-size: 12px; flex-shrink: 0; }
.km-cat-list__link:hover .cat-icon { color: var(--km-red); }
.km-cat-list__link .arrow { margin-left: auto; font-size: 10px; color: #ccc; }

/* Flyout sub-menu */
.km-cat-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--km-white);
  border: 1px solid var(--km-border);
  border-radius: 0 var(--km-radius) var(--km-radius) 0;
  min-width: 200px;
  box-shadow: var(--km-shadow-md);
  z-index: 999;
  padding: 6px 0;
}
.km-cat-list li:hover .km-cat-flyout { display: block; }
.km-cat-flyout a {
  display: block;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #444;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--km-trans), background var(--km-trans);
  border-bottom: 1px solid #f9f9f9;
}
.km-cat-flyout a:hover { color: var(--km-red); background: var(--km-red-light); }

/* ── Slider ── */
.km-slider-col { position: relative; }
.km-slider-wrap {
  border-radius: var(--km-radius-lg);
  overflow: hidden;
  position: relative;
  height: 360px;
  box-shadow: var(--km-shadow-md);
}
.km-slide-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.km-slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}
.km-slide--empty {
  background: linear-gradient(135deg, #1a1a2e 0%, var(--km-red) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.km-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.km-slide__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 32px;
}
.km-slide__text { max-width: 290px; }
.km-slide__text.pos-right  { margin-left: auto; text-align: right; }
.km-slide__text.pos-center { margin: 0 auto; text-align: center; }
.km-slide__eyebrow {
  display: inline-block;
  background: var(--km-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.km-slide__text h2 {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  line-height: 1.15;
  letter-spacing: -.5px;
}
.km-slide__text p {
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  margin: 0 0 16px;
  line-height: 1.5;
}
.km-slide__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--km-orange);
  color: #fff;
  padding: 9px 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--km-trans), transform var(--km-trans);
  box-shadow: 0 4px 12px rgba(246,139,30,.4);
}
.km-slide__btn:hover { background: var(--km-orange-dk); transform: translateX(3px); }

.km-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: background var(--km-trans), transform var(--km-trans);
  z-index: 10;
}
.km-slider-btn:hover { background: #fff; transform: translateY(-50%) scale(1.12); }
.km-slider-btn--prev { left: 12px; }
.km-slider-btn--next { right: 12px; }

.km-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.km-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  border: none;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  padding: 0;
  transition: background var(--km-trans), width var(--km-trans);
}
.km-slider-dot.active {
  background: #fff;
  width: 18px;
}


/* ════════════════════════════════════════════════════════════
   POPULAR SHOPS PANEL
   Desktop: vertical list inside hero row column
   Mobile:  full-width horizontal swipeable row
   ════════════════════════════════════════════════════════════ */

/* ── Desktop (default) ── */
.km-shops-panel {
  background: var(--km-white);
  border-radius: var(--km-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--km-shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.km-shops-panel__head {
  background: linear-gradient(135deg, var(--km-orange), var(--km-orange-dk));
  color: #fff;
  padding: 12px 12px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1px;
  flex-shrink: 0;
}
.km-shops-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.km-shops-panel__body::-webkit-scrollbar { display: none; }

.km-shop-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--km-text);
  border-bottom: 1px solid #f5f5f5;
  transition: background var(--km-trans);
  position: relative;
}
.km-shop-chip:hover { background: #fff8f0; }

.km-shop-chip__logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--km-border);
}
.km-shop-chip__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.km-shop-chip__name {
  font-size: 12px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
}
.km-shop-chip__cat {
  font-size: 9.5px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  margin-top: 1px;
}
.km-shop-chip__verified {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  font-size: 7px;
  color: #fff;
}

/* ── Mobile: horizontal swipeable shops row ── */
@media (max-width: 820px) {

  /* Override the hero-row hiding rule specifically for shops panel */
  .km-shops-panel {
    display: flex !important;         /* re-show the panel */
    flex-direction: column;
    border-radius: var(--km-radius-lg);
    overflow: hidden;
    box-shadow: var(--km-shadow);
    border: 1px solid rgba(0,0,0,.04);
    background: var(--km-white);
    margin: 10px 0;
  }

  /* Header stays full width */
  .km-shops-panel__head {
    border-radius: var(--km-radius-lg) var(--km-radius-lg) 0 0;
    padding: 11px 14px;
    font-size: 13px;
  }

  /* Body becomes horizontal scroll container */
  .km-shops-panel__body {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 10px 12px;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* fade right edge */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .km-shops-panel__body::-webkit-scrollbar { display: none; }

  /* Each chip becomes a vertical card */
  .km-shop-chip {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 12px 10px 11px;
    border-bottom: none;
    border-radius: 10px;
    border: 1px solid var(--km-border);
    background: var(--km-white);
    min-width: 80px;
    width: 80px;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: box-shadow var(--km-trans), transform var(--km-trans), border-color var(--km-trans);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .km-shop-chip:hover {
    background: #fff8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    transform: translateY(-2px);
    border-color: var(--km-orange);
  }
  .km-shop-chip:active { transform: translateY(0); }

  /* Logo centred and a touch larger */
  .km-shop-chip__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--km-border);
    flex-shrink: 0;
  }

  /* Info column below logo */
  .km-shop-chip__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
  }
  .km-shop-chip__name {
    font-size: 10.5px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
    text-align: center;
  }
  .km-shop-chip__cat {
    font-size: 9px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
    text-align: center;
    margin-top: 0;
  }

  /* Verified badge: bottom-right of logo */
  .km-shop-chip__verified {
    position: absolute;
    top: auto;
    bottom: 38px;   /* sits on logo bottom-right */
    right: calc(50% - 26px);
    width: 13px;
    height: 13px;
    font-size: 6px;
  }
}


/* ════════════════════════════════════════════════════════════
   CATEGORY PROMO BANNER
   ════════════════════════════════════════════════════════════ */
.km-promo-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0;
}
@media (max-width: 900px) { .km-promo-banner { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .km-promo-banner { grid-template-columns: repeat(2,1fr); gap: 8px; } }

.km-promo-tile {
  border-radius: 12px;
  padding: 14px 13px 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  min-height: 196px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform var(--km-trans), box-shadow var(--km-trans);
}
.km-promo-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.km-promo-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.km-promo-tile__head,
.km-promo-tile__img,
.km-promo-tile__info { position: relative; z-index: 2; }
.km-promo-tile__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .6px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  margin-bottom: 5px;
}
.km-promo-tile__icon {
  font-size: 14px;
  background: rgba(255,255,255,.2);
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.km-promo-tile__img {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.km-promo-tile__img img {
  max-height: 108px;
  max-width: 92%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.km-promo-tile:hover .km-promo-tile__img img { transform: scale(1.08) translateY(-4px); }
.km-promo-tile__info {
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-radius: 0 0 11px 11px;
  padding: 7px 11px 12px;
  margin: 5px -13px 0;
}
.km-promo-tile__name {
  font-size: 11px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.km-promo-tile__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.km-promo-tile__now  { font-size: 16px; font-weight: 900; letter-spacing: -.4px; color: #fff; }
.km-promo-tile__old  { font-size: 10.5px; color: rgba(255,255,255,.5); text-decoration: line-through; }


/* ════════════════════════════════════════════════════════════
   CAMPAIGN TICKER
   ════════════════════════════════════════════════════════════ */
.km-campaign {
  background: linear-gradient(90deg, var(--km-red-dark), var(--km-red), var(--km-red-dark));
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
}
.km-campaign__track {
  display: inline-flex;
  animation: km-ticker 30s linear infinite;
}
@keyframes km-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.km-campaign__item {
  padding: 0 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .1px;
}
.km-campaign__item .fa { margin-right: 5px; opacity: .85; }
.km-campaign__sep { color: rgba(255,255,255,.35); font-size: 11px; }


/* ════════════════════════════════════════════════════════════
   TRUST STRIP (icons row: fast delivery, secure pay, etc.)
   ════════════════════════════════════════════════════════════ */
.km-trust-strip {
  display: flex;
  align-items: stretch;
  background: var(--km-white);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow);
  overflow: hidden;
  margin: 10px 0;
  border: 1px solid rgba(0,0,0,.04);
}
.km-trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-right: 1px solid var(--km-border);
}
.km-trust-item:last-child { border-right: none; }
.km-trust-item__icon {
  font-size: 22px;
  color: var(--km-red);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--km-red-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-trust-item__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--km-text);
  line-height: 1.3;
}
.km-trust-item__sub {
  font-size: 10.5px;
  color: var(--km-muted);
  margin-top: 1px;
  font-weight: 400;
}
@media (max-width: 760px) {
  .km-trust-strip { display: none; }
}


/* ════════════════════════════════════════════════════════════
   CTA BANNER
   ════════════════════════════════════════════════════════════ */
.km-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #c41024 0%, var(--km-red) 50%, #ff4757 100%);
  border-radius: var(--km-radius-lg);
  padding: 34px 40px;
  overflow: hidden;
  position: relative;
}
.km-cta::before {
  content: '';
  position: absolute;
  right: -50px; top: -50px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.km-cta::after {
  content: '';
  position: absolute;
  right: 100px; bottom: -70px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.km-cta__text { position: relative; z-index: 1; }
.km-cta__text h2 {
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.4px;
  line-height: 1.2;
}
.km-cta__text p {
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  margin: 0 0 18px;
  max-width: 400px;
  line-height: 1.6;
}
.km-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--km-red);
  padding: 11px 24px;
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--km-trans), box-shadow var(--km-trans);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.km-cta__link:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.km-cta__img {
  position: relative;
  z-index: 1;
  max-width: 230px;
}
.km-cta__img img {
  width: 100%;
  border-radius: var(--km-radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
@media (max-width: 600px) {
  .km-cta { flex-direction: column; padding: 24px 20px; }
  .km-cta__img { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (Jumia-style)
   ════════════════════════════════════════════════════════════ */
.km-mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--km-white);
  border-top: 1px solid var(--km-border);
  z-index: 1100;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 820px) { .km-mob-nav { display: flex; } }

.km-mob-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px;
  text-decoration: none;
  color: var(--km-muted);
  font-size: 10px;
  font-weight: 600;
  transition: color var(--km-trans);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.km-mob-nav__item.active { color: var(--km-red); }
.km-mob-nav__item i { font-size: 20px; line-height: 1; }
.km-mob-nav__badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 4px);
  background: var(--km-red);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #fff;
  line-height: 1;
}

/* extra bottom padding so content isn't hidden behind nav */
@media (max-width: 820px) {
  .km-home { padding-bottom: 60px; }
  .km-wrap { padding-bottom: 8px; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE SEARCH BAR (sticky top)
   ════════════════════════════════════════════════════════════ */
.km-mob-search {
  display: none;
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--km-red);
  padding: 8px 12px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
@media (max-width: 820px) { .km-mob-search { display: block; } }

.km-mob-search__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 6px;
  padding: 9px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.km-mob-search__inner i {
  color: var(--km-muted);
  font-size: 15px;
  flex-shrink: 0;
}
.km-mob-search__inner input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--km-font);
  color: var(--km-text);
  background: transparent;
  caret-color: var(--km-red);
}
.km-mob-search__inner input::placeholder { color: #bbb; font-size: 13px; }
.km-mob-search__mic {
  background: none;
  border: none;
  color: var(--km-red);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   MOBILE BUTTON + DRAWER
   ════════════════════════════════════════════════════════════ */
.km-cat-mobile-btn {
  display: none;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--km-red-dark), var(--km-red));
  color: #fff;
  border: none;
  border-radius: var(--km-radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin: 8px 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--km-font);
  letter-spacing: .1px;
  box-shadow: 0 3px 10px rgba(232,25,44,.3);
}
@media (max-width: 820px) { .km-cat-mobile-btn { display: flex; } }

.km-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1200;
  backdrop-filter: blur(2px);
}
.km-drawer-overlay.open { display: block; }

.km-cat-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 285px;
  background: var(--km-white);
  z-index: 1300;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.km-cat-drawer.open { transform: translateX(0); box-shadow: 8px 0 30px rgba(0,0,0,.2); }
.km-cat-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--km-red-dark), var(--km-red));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}
.km-cat-drawer__close {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--km-trans);
}
.km-cat-drawer__close:hover { background: rgba(255,255,255,.3); }


/* ════════════════════════════════════════════════════════════
   MOBILE SECTION TITLES (tighter on small screens)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .km-section__box { padding: 12px 12px 6px; }
  .km-sec-head h2  { font-size: 15px; }
  .km-sec-head p   { font-size: 10.5px; }
  .km-see-all      { font-size: 11px; padding: 4px 9px; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE 2-COLUMN PRODUCT GRID (replaces horizontal scroll)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Grid variant cards for 2-col layout */
  .km-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px 2px 8px;
  }
  .km-grid-2 .km-pcard {
    width: 100%;
    min-width: 0;
  }
  /* Scrollable track fallback: widen cards slightly */
  .km-track .km-pcard {
    min-width: 148px;
    width: 148px;
  }
  .km-pcard__img-wrap { height: 145px; }
  .km-pcard__price { font-size: 14px; }
}
@media (max-width: 400px) {
  .km-track .km-pcard { min-width: 138px; width: 138px; }
  .km-pcard__img-wrap { height: 135px; }
  .km-promo-banner { gap: 7px; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE WRAPPERS
   ════════════════════════════════════════════════════════════ */
:root {
  --km-card-w: 175px;
}
@media (max-width: 640px) {
  :root { --km-card-w: 148px; }
  .km-cta { padding: 22px 18px; }
  .km-cta__text h2 { font-size: 20px; }
}
@media (max-width: 400px) {
  :root { --km-card-w: 138px; }
}


/* ════════════════════════════════════════════════════════════
   SKELETON LOADING STATES
   ════════════════════════════════════════════════════════════ */
@keyframes km-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.km-skeleton {
  background: linear-gradient(90deg, #ebebeb 25%, #f5f5f5 50%, #ebebeb 75%);
  background-size: 800px 100%;
  animation: km-shimmer 1.4s infinite;
  border-radius: 4px;
}
.km-pcard--loading .km-pcard__img-wrap { background: #ebebeb; }
.km-pcard--loading .km-skeleton-name   { height: 12px; margin-bottom: 6px; }
.km-pcard--loading .km-skeleton-price  { height: 15px; width: 70%; }


/* ════════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════════ */
.km-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.6;
}
.km-badge--red    { background: var(--km-red-light);    color: var(--km-red); }
.km-badge--green  { background: #e6f7ee;                color: var(--km-green); }
.km-badge--orange { background: #fff3e4;                color: var(--km-orange-dk); }
.km-badge--blue   { background: #e5f1fb;                color: var(--km-blue); }

.km-divider {
  border: none;
  border-top: 1px solid var(--km-border);
  margin: 12px 0;
}
.km-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}