/* ==========================================================================
   [REMEDIATION 2026-11 R12] SYSTEM POLISH — CSS pekee, inapakiwa mwisho
   --------------------------------------------------------------------------
   1. Overlays: kioo cha nyuma kilikuwa navy karibu nyeusi (rgba(0,34,68,.95)),
      na overlay mbili zikipangana zilifunika ukurasa wote kwa rangi nyeusi
      (Category Explorer, maelezo ya Mnada/Kundi, n.k.). Sasa ni kioo chepesi
      cha kijani-giza chenye blur, kama refs za muundo mweupe.
   2. Nyumbani: banner ya jamii + njia za haraka (refs 11, 13, 14, 15).
   Hakuna handler, data wala DOM ya zamani iliyoondolewa.
   ========================================================================== */
:root {
    --skh-green: #18A982;
    --skh-green-dark: #0F6E55;
    --skh-ink: #0F2A24;
    --skh-gold: #D4A73C;
    --skh-scrim: rgba(12, 35, 29, .46);
}

/* ---------- 1. OVERLAYS ---------- */
.overlay-menu,
#modeRulesAlert {
    background: var(--skh-scrim) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}
/* Ukurasa wa bidhaa (#productModal) una mandhari yake nyeupe — usiguswe */
#productModal.overlay-menu { background: #F4F7F6 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- 2. NYUMBANI: BANNER + NJIA ZA HARAKA ---------- */
.shh { display: none; margin: 12px 12px 6px; }
body:has(#navTabHome.active) .shh { display: block; }

.shh-banner {
    position: relative; overflow: hidden; border-radius: 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.10) 0 30%, transparent 31%),
        linear-gradient(120deg, #16A07A 0%, #138A69 55%, #0F6E55 100%);
    color: #fff; min-height: 168px;
    display: grid; grid-template-columns: minmax(0, 1fr) 38%; align-items: stretch;
    box-shadow: 0 8px 22px rgba(15, 110, 85, .18);
}
.shh-banner::after { /* mstari wa dhahabu kama kwenye ref 15 */
    content: ""; position: absolute; top: -40%; bottom: -40%; right: 37%; width: 4px;
    background: linear-gradient(180deg, transparent, var(--skh-gold), transparent);
    transform: rotate(14deg); opacity: .9; pointer-events: none;
}
.shh-copy { position: relative; z-index: 1; padding: 16px 8px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.shh-kicker {
    align-self: flex-start; background: #fff; color: var(--skh-green-dark);
    font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 999px;
}
.shh-title { margin: 2px 0 0; font: 800 19px/1.18 Inter, system-ui, sans-serif; color: #fff; letter-spacing: -.01em; }
.shh-sub { margin: 0; font: 500 12px/1.45 Inter, system-ui, sans-serif; color: rgba(255,255,255,.9); }
.shh-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.shh-cta, .shh-cta2 {
    display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
    font: 800 12.5px/1 Inter, system-ui, sans-serif; padding: 10px 14px; border-radius: 999px;
}
.shh-cta { background: linear-gradient(180deg, #E6BE5A, var(--skh-gold)); color: #1E2A22; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.shh-cta2 { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.shh-cta .skh-ico svg { width: 14px; height: 14px; }
.shh-steps { display: none; }
.shh-photo {
    position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}

.shh-quick {
    margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.shh-quick button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    background: #fff; border: 1px solid #E3ECE9; border-radius: 14px; padding: 10px 6px; cursor: pointer;
    color: var(--skh-ink); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.shh-quick button:hover { border-color: #A9DFC9; box-shadow: 0 4px 14px rgba(15,110,85,.10); }
.shh-quick button:active { transform: scale(.97); }
.shh-quick button:focus-visible { outline: 2px solid var(--skh-gold); outline-offset: 2px; }
.shh-qi { width: 36px; height: 36px; border-radius: 11px; background: #EAF7F2; color: var(--skh-green-dark); display: grid; place-items: center; }
.shh-qi svg { width: 19px; height: 19px; }
.shh-quick b { font: 800 12px/1.2 Inter, system-ui, sans-serif; }
.shh-quick small { display: none; font: 500 11px/1.3 Inter, system-ui, sans-serif; color: #66787F; }

@media (max-width: 380px) {
    .shh-banner { grid-template-columns: minmax(0, 1fr) 30%; }
    .shh-title { font-size: 17px; }
    .shh-sub { display: none; }
}

@media (min-width: 760px) {
    .shh-banner { min-height: 220px; grid-template-columns: minmax(0, 1fr) 34%; }
    .shh-copy { padding: 26px 12px 26px 28px; gap: 8px; }
    .shh-title { font-size: 28px; }
    .shh-sub { font-size: 14px; max-width: 46ch; }
    .shh-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .shh-quick button { text-align: left; align-items: center; padding: 12px; }
    .shh-quick button > b, .shh-quick button > small { display: block; }
    .shh-quick button { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; }
    .shh-qi { grid-row: 1 / span 2; width: 38px; height: 38px; }
    .shh-quick b { font-size: 13px; align-self: end; }
    .shh-quick small { display: block; align-self: start; }
}
@media (min-width: 1100px) {
    .shh { margin: 14px 12px 8px; }
    .shh-banner { grid-template-columns: minmax(0, 1fr) auto 30%; min-height: 250px; }
    .shh-banner::after { right: 29%; }
    .shh-title { font-size: 34px; }
    .shh-steps {
        display: flex; flex-direction: column; justify-content: center; gap: 7px; margin: 0; padding: 0 8px; list-style: none;
        position: relative; z-index: 1;
    }
    .shh-steps li {
        display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.95); color: var(--skh-ink);
        font: 700 12.5px/1 Inter, system-ui, sans-serif; padding: 8px 12px 8px 9px; border-radius: 10px; white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .shh-steps .skh-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--skh-green); color: #fff; display: grid; place-items: center; }
    .shh-steps .skh-ico svg { width: 11px; height: 11px; }
}

/* ---------- 3. VITUFE VISIVYO NA MTINDO (vilionekana kama vitufe vya browser) ---------- */
.skh-chat-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--skh-green); color: #fff; border: 0; border-radius: 999px;
    padding: 10px 18px; font: 800 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
    box-shadow: 0 3px 10px rgba(24, 169, 130, .25);
}
.skh-chat-btn:hover { background: var(--skh-green-dark); }
.skh-chat-btn:focus-visible { outline: 2px solid var(--skh-gold); outline-offset: 2px; }

/* ---------- 4. RAIL YA DESKTOP: njia za ziada (ref 12) ---------- */
.nav-tab.nav-desk-only { display: none !important; }
@media (min-width: 1100px) {
    .bottom-nav-main .main-nav-icons .nav-tab.nav-desk-only { display: flex !important; }
    .bottom-nav-main .main-nav-icons .nav-tab.nav-desk-only .skh-ico svg { width: 22px; height: 22px; }
    .bottom-nav-main .main-nav-icons .nav-tab:not(.nav-desk-only) + .nav-desk-only { margin-top: 8px; box-shadow: 0 -9px 0 -8px #E3ECE9; }
}

/* ---------- 2b. Banner: urefu thabiti (picha isiamue urefu), maandishi yasizidiwe na h2 za jumla ---------- */
.shh-banner { height: 176px; min-height: 0; }
.shh-photo { height: 100% !important; min-height: 0; max-height: 100%; }
.shh .shh-title { font-size: 19px !important; line-height: 1.18 !important; color: #fff !important; font-weight: 800 !important; }
@media (min-width: 760px) { .shh-banner { height: 220px; } .shh .shh-title { font-size: 26px !important; } }
@media (min-width: 1100px) { .shh-banner { height: 250px; } .shh .shh-title { font-size: 32px !important; } }
@media (max-width: 380px) { .shh .shh-title { font-size: 17px !important; } }

/* ---------- 2c. Simu: banner inakua kulingana na maandishi; picha inakaa pembeni (haikati vitufe) ---------- */
@media (max-width: 759px) {
    .shh-banner { display: block; height: auto; min-height: 176px; }
    .shh-copy { width: 64%; padding: 14px 6px 14px 14px; }
    .shh-photo { position: absolute !important; top: 0; right: 0; width: 40%; height: 100% !important; }
    .shh-banner::after { right: 39%; }
    .shh .shh-title { font-size: 18px !important; }
    .shh-cta, .shh-cta2 { padding: 9px 12px; font-size: 12px; }
}
@media (max-width: 360px) { .shh-sub { display: none; } .shh-cta2 { display: none; } }

/* ---------- 5. [R13] Category illustrations (familia moja) ---------- */
img[src*="category-icons/"] { object-fit: contain !important; background: transparent; }
.cps-card-img:has(img[src*="category-icons/"]),
.skh-cat-photo:has(img[src*="category-icons/"]),
.gds-tile-img--ill { background: linear-gradient(180deg, #F6FCFA, #E6F5EF) !important; display: grid; place-items: center; }
.cps-card-img img[src*="category-icons/"] { width: auto !important; height: 100% !important; max-width: 100%; padding: 6px; box-sizing: border-box; }
.skh-cat-photo img[src*="category-icons/"] { width: auto !important; height: 100% !important; max-height: 118px; padding: 6px; box-sizing: border-box; }
.cps-chip-img[src*="category-icons/"] { border-radius: 50%; background: #fff; }