/* ============================================================
   TELESHOP KENYA - Core stylesheet
   Mobile-first. No horizontal scroll. Lightweight (no framework).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--color-black, #111);
  background: var(--site-bg, #f4f6f8);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-header, 'Poppins', sans-serif); line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Boxed layout: the whole site sits inside a centered, shadowed "card" on a
   distinct background - a genuinely different visual treatment from wide,
   not just a narrower container. */
.layout-boxed { background: var(--site-bg, #eef1f4); }
.layout-boxed .site-shell {
  max-width: 1320px;
  margin: 0 auto;
  background: var(--content-bg, #fff);
  box-shadow: 0 0 40px rgba(0,0,0,.08);
  min-height: 100vh;
}
.layout-boxed .container { max-width: 1180px; }
.layout-wide .site-shell { background: transparent; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: #fff; padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------- Header ---------------- */
.site-header { background: var(--header-bg, #fff); border-bottom: 1px solid rgba(0,0,0,.06); z-index: 100; }
.site-header.is-sticky { position: sticky; top: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand-logo { max-height: 42px; }
.brand-text { font-family: var(--font-header); font-weight: 800; font-size: 1.35rem; color: var(--color-primary); }

.nav-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--nav-active-bg, #eaf7ef); border-radius: 10px; border: 0; cursor: pointer; z-index: 110;
}
.nav-toggle-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 20px; height: 16px; }
.nav-toggle-icon span { display: block; height: 2px; background: var(--nav-active-color, var(--nav-color, #111)); border-radius: 2px; }
.nav-toggle-label {
  font-size: .78rem; font-weight: 800; color: var(--nav-active-color, var(--nav-color, #111));
  text-transform: uppercase; letter-spacing: .05em;
}

.main-nav {
  font-family: var(--font-nav);
  position: fixed; top: 0; right: -100%; height: 100vh; width: min(78vw, 320px);
  background: var(--mobile-menu-bg, #fff); box-shadow: -6px 0 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column; padding: 0 24px 24px;
  transition: right .25s ease; overflow-y: auto; z-index: 210;
}
.main-nav.open { right: 0; }
.nav-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; margin-bottom: 8px; border-bottom: 1px solid #eee;
  position: sticky; top: 0; background: var(--mobile-menu-bg, #fff);
}
.nav-drawer-title { font-family: var(--font-header); font-weight: 800; color: var(--color-primary); }
.nav-close {
  background: var(--nav-active-bg, #f3f4f6); border: 0; width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; color: var(--nav-color, #333); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-close:hover { filter: brightness(0.94); }
.nav-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 205;
}
.nav-backdrop.open { display: block; }
.main-nav a {
  color: var(--nav-color, #111); font-weight: 600; padding: 12px 10px; border-radius: 8px; margin-bottom: 4px;
}
.main-nav a.active, .main-nav a:hover { color: var(--nav-active-color); background: var(--nav-active-bg); }
.nav-uppercase a { text-transform: uppercase; letter-spacing: .03em; font-size: .88rem; }
.nav-uppercase .cart-count { text-transform: none; letter-spacing: normal; } /* the "0" badge shouldn't be affected */
.nav-cart { display: flex; align-items: center; gap: 6px; }
.nav-download-app {
  display: inline-block; background: var(--download-app-color, var(--color-primary)) !important; color: #fff !important;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  margin: 4px 0;
}
.nav-download-app:hover { opacity: .9; }
@media (min-width: 900px) { .nav-download-app { margin: 0 4px; } }
.cart-count {
  background: var(--color-secondary); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-drawer-header { display: none; }
  .nav-backdrop { display: none !important; }
  .main-nav {
    position: static; height: auto; width: auto; box-shadow: none; flex-direction: row;
    padding: 0; align-items: center; gap: 4px; overflow: visible;
    background: transparent; /* the custom mobile-menu background must never bleed into the desktop nav bar */
  }
}

/* Mobile menu theme (Light/Dark, set in Admin -> Appearance -> Mobile Menu)
   controls text/icon contrast only - the background color itself is set
   independently via the Background Color picker, so any custom color can
   be paired with whichever text scheme reads best against it.
   Scoped to mobile only - the desktop nav bar keeps using the regular
   header color settings, since it sits inline in the site header rather
   than as its own panel. */
@media (max-width: 899.98px) {
  .main-nav.theme-dark { box-shadow: -6px 0 24px rgba(0,0,0,.35); }
  .main-nav.theme-dark .nav-drawer-header { border-bottom-color: rgba(255,255,255,.12); }
  .main-nav.theme-dark .nav-drawer-title { color: #fff; }
  .main-nav.theme-dark .nav-close {
    background: rgba(255,255,255,.12); color: #fff;
  }
  .main-nav.theme-dark .nav-close:hover { background: rgba(255,255,255,.22); }
  .main-nav.theme-dark a { color: #e5e7eb; }
  .main-nav.theme-dark a.active, .main-nav.theme-dark a:hover { background: rgba(255,255,255,.1); }
}

/* ---------------- Hero ---------------- */
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; padding: 56px 0; text-align: center;
}
.hero.dark { background: linear-gradient(135deg, #0b1f16, #06282c); }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: .4em; }
.hero p { font-size: 1.05rem; opacity: .95; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px; font-weight: 700;
  border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:hover { opacity: .92; }

/* ---------------- Section wrapper ---------------- */
.section { padding: 48px 0; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.section-head p { color: #666; }

/* ---------------- Category cards ---------------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.provider-card {
  background: var(--content-bg, #fff); border-radius: 14px; padding: 22px 16px; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); border-top: 4px solid var(--color-primary);
  transition: transform .15s ease;
}
.provider-card:hover { transform: translateY(-4px); }
.provider-card .icon { font-size: 2rem; margin-bottom: 8px; }

.category-feature-card {
  display: block; background: var(--content-bg, #fff); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .15s ease;
}
.category-feature-card:hover { transform: translateY(-4px); }
.category-feature-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f0f2f4; }
.category-feature-name { padding: 14px; text-align: center; font-weight: 700; font-size: .95rem; }

/* ---------------- Help Center articles ---------------- */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.article-card {
  display: block; background: var(--content-bg, #fff); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .15s ease;
}
.article-card:hover { transform: translateY(-3px); }
.article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #f0f2f4; }
.article-card-body { padding: 16px; }
.article-card-body h3 { font-size: 1rem; margin-bottom: 6px; }
.article-card-body p { font-size: .88rem; color: #666; margin-bottom: 10px; }
.article-read-more { font-size: .85rem; font-weight: 700; color: var(--color-primary); }
.article-content { font-size: 1rem; line-height: 1.75; }
.article-content h2 { margin-top: 1.6em; font-size: 1.35rem; }
.article-content h3 { margin-top: 1.3em; font-size: 1.1rem; }
.article-content p { margin-bottom: 1.1em; }
.article-content ul, .article-content ol { margin: 0 0 1.1em 1.4em; }

/* ---------------- Product grid ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(var(--mobile-product-columns, 2), 1fr); gap: 12px; }
  .product-card .body { padding: 10px; gap: 4px; }
  .product-card .name { font-size: .85rem; }
  .product-card .cat { font-size: .72rem; }
  .product-card .price { font-size: .92rem; }
  .product-card .body .btn { padding: 7px; font-size: .78rem; }
}
.product-card {
  background: var(--content-bg, #fff); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); display: flex; flex-direction: column;
}
.product-card img { aspect-ratio: 1/1; object-fit: cover; background: #f0f2f4; }
.product-card .body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-weight: 700; font-size: .95rem; }
.product-card .cat { font-size: .78rem; color: #888; }
.product-card .price { font-weight: 800; color: var(--color-primary); font-size: 1.05rem; margin-top: auto; }
.product-list-item {
  display: flex; gap: 16px; background: var(--content-bg,#fff); border-radius: 12px; padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); align-items: center;
}
.product-list-item img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.badge-out { background: #eee; color: #999; padding: 2px 8px; border-radius: 6px; font-size: .72rem; }

/* ---------------- Why choose us ---------------- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.feature-card { text-align: center; padding: 20px; }
.feature-card .icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--nav-active-bg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-weight: 800; }

/* ---------------- Testimonials ---------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.testimonial-card { background: var(--content-bg,#fff); border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.stars { color: #f5a623; letter-spacing: 2px; }

/* ---------------- FAQ ---------------- */
.faq-item { border-bottom: 1px solid #e4e7eb; padding: 14px 0; }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 10px; color: #555; }

/* ---------------- Contact page ---------------- */
.contact-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 8px;
}
.contact-lede { color: #666; font-size: 1.02rem; max-width: 620px; margin-bottom: 28px; }
.contact-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-methods { display: flex; flex-direction: column; gap: 12px; }
.contact-method-card {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px;
  background: var(--content-bg, #fff); border: 1px solid #e9ecef; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
a.contact-method-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.contact-method-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--nav-active-bg);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
}
.contact-method-icon svg { width: 22px; height: 22px; }
.contact-method-whatsapp .contact-method-icon { background: #25D366; color: #fff; }
.contact-method-static { cursor: default; box-shadow: none; }
.contact-method-body { display: flex; flex-direction: column; gap: 2px; }
.contact-method-body strong { font-size: .95rem; }
.contact-method-body span { font-size: .84rem; color: #777; }

.contact-form-panel {
  background: var(--content-bg, #fff); border: 1px solid #e9ecef; border-radius: 16px; padding: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.contact-form-panel h2 { font-size: 1.1rem; margin-bottom: 18px; }


.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.filter-hint { font-size: .78rem; color: #888; margin: 6px 0 0; }
.product-action-divider {
  display: flex; align-items: center; text-align: center; max-width: 320px;
  margin: 22px 0; color: #888; font-size: .85rem;
}
.product-action-divider::before, .product-action-divider::after {
  content: ''; flex: 1; border-bottom: 1px solid #e4e7eb;
}
.product-action-divider span { padding: 0 12px; white-space: nowrap; }
.form-control {
  width: 100%; padding: 12px 14px; border: 1px solid #d7dbe0; border-radius: 10px; background: #fff;
}
.form-control:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.notice {
  padding: 12px 16px; border-radius: 10px; font-size: .9rem; margin-bottom: 16px;
}
.notice-warning { background: #fff7e6; border: 1px solid #e6b800; color: #7a5b00; }
.notice-error { background: #fdeceb; border: 1px solid var(--color-secondary); color: #9d1f2e; }
.notice-success { background: #e9f8ef; border: 1px solid var(--color-primary); color: #0b5a31; }

/* ---------------- Cart / checkout ---------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 12px 8px; border-bottom: 1px solid #eee; text-align: left; }
.qty-input { width: 60px; padding: 6px; border-radius: 8px; border: 1px solid #d7dbe0; }

/* Mobile cart: cards instead of a table, so nothing needs horizontal
   scrolling and every control (especially quantity and Remove) has a
   comfortable tap target. */
.cart-list-mobile { display: none; }
@media (max-width: 640px) {
  .cart-table-desktop { display: none; }
  .cart-list-mobile { display: flex; flex-direction: column; gap: 14px; }
  .cart-item-card {
    border: 1px solid #e4e7eb; border-radius: 14px; padding: 16px;
    background: var(--content-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  .cart-item-card-name { font-weight: 700; font-size: .98rem; margin-bottom: 10px; }
  .cart-item-card-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-top: 1px solid #f0f1f3; font-size: .92rem;
  }
  .cart-item-card-label { color: #888; font-size: .85rem; }
  .cart-item-card-total { font-weight: 700; }
  .cart-item-card .qty-input { width: 90px; padding: 10px; font-size: 1rem; text-align: center; }
  .cart-item-card-remove { margin-top: 12px; }
}
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1.3fr 1fr; } }
.summary-box { background: var(--content-bg,#fff); border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }

.payment-method-options { display: flex; flex-direction: column; gap: 10px; }
.payment-method-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1.5px solid #e4e7eb; border-radius: 10px; cursor: pointer; font-weight: 400;
  transition: border-color .12s ease, background .12s ease;
}
.payment-method-option:has(input:checked) {
  border-color: var(--color-primary);
  background: #eaf7ef; /* fallback for browsers without color-mix() support */
  background: color-mix(in srgb, var(--color-primary) 12%, white);
}
.payment-method-option.is-selected {
  border-color: var(--color-primary);
  background: #eaf7ef;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
}
.payment-method-option input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.payment-method-body { display: flex; flex-direction: column; gap: 2px; }
.payment-method-body strong { font-size: .92rem; }
.payment-method-body small { color: #777; font-size: .8rem; }

/* ---------------- Till payment instructions page ---------------- */
.till-amount-box {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff;
  border-radius: 14px; padding: 22px; text-align: center; margin: 20px 0;
}
.till-amount-label { display: block; font-size: .82rem; opacity: .9; margin-bottom: 4px; }
.till-amount-value { display: block; font-size: 2rem; font-weight: 800; }
.till-details { background: var(--content-bg,#fff); border-radius: 12px; padding: 4px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 24px; }
.till-detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; font-size: .92rem; }
.till-detail-row:last-child { border-bottom: 0; }
.till-steps { padding-left: 20px; }
.till-steps li { margin-bottom: 10px; line-height: 1.5; }

/* ---------------- 404 / not found page ---------------- */
.not-found-section { padding-top: 40px; }
.not-found-code {
  font-family: var(--font-header); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1; background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px;
}
.not-found-search {
  display: flex; gap: 10px; max-width: 440px; margin: 28px auto 20px; flex-wrap: wrap;
}
.not-found-search input { flex: 1; min-width: 200px; }
.not-found-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.not-found-subheading { font-weight: 700; color: #555; margin: 24px 0 14px; font-size: .95rem; }

/* ---------------- Footer ---------------- */
.site-footer { padding: 48px 0 0; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-bottom: 8px; }
.sitemap-col h2, .sitemap-col h3 { font-size: 1rem; margin-bottom: 10px; }
.sitemap-col h3 a { color: inherit; }
.sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.sitemap-col ul ul { padding-left: 16px; margin-top: 6px; }
.sitemap-col li { margin-bottom: 8px; font-size: .92rem; }
.sitemap-col a { color: #444; }
.sitemap-col a:hover { color: var(--color-primary); }
.footer-col h4 { margin-bottom: 12px; }
.footer-col ul li { margin-bottom: 8px; }
.social-links { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.footer-bottom { text-align: center; padding: 20px 0; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }

.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
}
.whatsapp-float-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .12s ease;
}
.whatsapp-float:hover .whatsapp-float-icon { transform: scale(1.06); }
.whatsapp-float-icon svg { width: 30px; height: 30px; }
.whatsapp-float-label {
  background: #fff; color: #111; font-size: .68rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  white-space: nowrap;
}

/* ---------------- Shop navigation: network tabs + merged category tree ---------------- */
/* This is pure navigation (links), not a form - clicking anything here jumps
   straight to that category's products, nothing to "fill in" or "submit". */
.shop-nav { margin-bottom: 22px; }

.network-hero { text-align: center; margin-bottom: 34px; }
.network-hero-title { font-size: 1.5rem; margin-bottom: 6px; }
.network-hero-sub { color: #666; margin-bottom: 22px; }
.network-hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
  max-width: 900px; margin: 0 auto;
}
.network-hero-card {
  position: relative; display: block; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.1); transition: transform .18s ease, box-shadow .18s ease;
  border: 3px solid transparent;
}
.network-hero-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tab-color, var(--color-primary)) 35%, transparent);
  border-color: var(--tab-color, var(--color-primary));
}
.network-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.network-hero-card-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; text-align: left;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
}
.network-hero-card-name { color: #fff; font-size: 1.15rem; font-weight: 800; }
.network-hero-card-count { color: rgba(255,255,255,.9); font-size: .84rem; font-weight: 600; margin-top: 2px; }
.network-hero-skip {
  display: inline-block; margin-top: 22px; font-size: .84rem; font-weight: 600;
  color: #999; text-decoration: underline; text-underline-offset: 3px;
}
.network-hero-skip:hover { color: var(--color-primary); }

.network-tabs-label {
  display: block; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #999; margin-bottom: 10px;
}

.network-tabs {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.network-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; font-size: .92rem; font-weight: 800;
  border-radius: 14px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  background: color-mix(in srgb, var(--tab-color, var(--color-primary)) 10%, #fff);
  border: 2px solid color-mix(in srgb, var(--tab-color, var(--color-primary)) 22%, #fff);
  color: var(--tab-color, var(--color-primary));
}
.network-tab:hover {
  transform: translateY(-2px);
  border-color: var(--tab-color, var(--color-primary));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tab-color, var(--color-primary)) 30%, transparent);
}
.network-tab.active {
  background: var(--tab-color, var(--color-primary)); border-color: var(--tab-color, var(--color-primary)); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tab-color, var(--color-primary)) 45%, transparent);
}
.network-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--tab-color, var(--color-primary)); }
.network-tab.active .network-dot { background: #fff !important; }
.pill-count {
  font-weight: 800; font-size: .78rem; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tab-color, var(--color-primary)) 16%, #fff); opacity: 1;
}
.network-tab.active .pill-count { background: rgba(255,255,255,.25); color: #fff; }

/* Category tree: top-level categories with their subcategories shown
   together, all at once - no multi-step reveal, so the exact package a
   customer wants is always visible and one click away. Uses the site's own
   primary color rather than the active provider's brand color - provider
   identity is already carried by the hero cards, network tabs, and product
   badges elsewhere on the page, so these buttons staying consistent avoids
   the whole page washing into a single provider color (e.g. all green on
   Safaricom's pages). */
.category-tree {
  display: flex; flex-wrap: wrap; gap: 14px 18px; padding: 4px 0 4px;
}
.category-group { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.category-group-link {
  display: inline-flex; align-items: center; font-size: .88rem; font-weight: 700;
  padding: 9px 16px; border-radius: 10px;
  background: var(--color-primary); color: #fff; white-space: nowrap;
  border: 1.5px solid var(--color-primary);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.category-group-link:hover { transform: translateY(-1px); filter: brightness(0.92); }
.category-group-link.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary), 0 3px 10px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.category-children { display: flex; flex-wrap: wrap; gap: 6px; }
.category-child-link {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--content-bg, #fff); color: #555; border: 1px solid #e4e7eb;
  transition: border-color .12s ease, color .12s ease;
}
.category-child-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.category-child-link.active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700;
}
.category-tree-show-all {
  display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700;
  padding: 9px 16px; border-radius: 10px; white-space: nowrap;
  background: #fff; color: var(--color-primary); border: 1.5px solid var(--color-primary);
  transition: all .12s ease;
}
.category-tree-show-all:hover { background: var(--color-primary); color: #fff; }

/* ---------------- Shop listing page ---------------- */
.breadcrumbs { font-size: .85rem; color: #777; margin: 18px 0 10px; }
.breadcrumbs a { color: #777; }
.breadcrumbs a:hover { color: var(--color-primary); }

.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #eee;
}
.shop-title { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0; flex: 1 1 auto; }
.shop-result-count { color: #777; font-size: .85rem; margin: 0; flex: 0 0 auto; }
.sort-form { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sort-label { font-size: .85rem; font-weight: 600; color: #555; white-space: nowrap; }
.sort-form select { min-width: 170px; padding: 8px 10px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Prevent any horizontal overflow on small screens */
img, table { max-width: 100%; }
table { display: block; overflow-x: auto; white-space: nowrap; }