/* ==== css/16-commerce-card.css ==== */
/* ============================================================
   SOKOHAI COMMERCE CARDS + DISCOVERY SECTIONS (2026-09)
   ------------------------------------------------------------
   Uboreshaji wa kadi za Bidhaa / Huduma / Usafiri na sehemu za
   kugundua (discovery) kwenye feed — hali ya kisasa ya soko,
   ya kuaminika, mobile-first.
   ⚠️ ADDITIVE tu: inajenga juu ya .feed-card-box / .feed-img-box /
   .feed-info-box zilizopo (grid + mobile overrides zinaendelea).
   ============================================================ */

/* ---------- 1) KADI: uso safi, mpaka laini, kivuli hafifu ---------- */
.feed-card-box.skh-card {
    background: var(--skh-surface, #ffffff);
    border: 1px solid #e7eef6;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .06) !important;
    overflow: hidden;
    position: relative;
    font-family: var(--skh-font);
    isolation: isolate;
}
@media (hover: hover) {
    .feed-card-box.skh-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 30px rgba(15, 23, 42, .11) !important;
        border-color: #d4e2f0;
    }
}
.feed-card-box.skh-card:active { transform: scale(.98); }
.feed-card-box.skh-card:focus-visible {
    outline: 2px solid var(--skh-primary, #1268A8);
    outline-offset: 2px;
}

/* ---------- 2) PICHA: uwiano thabiti + placeholder ---------- */
.feed-card-box.skh-card .skh-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #eef3f8 0%, #e4ecf4 100%);
    position: relative;
}
.feed-card-box.skh-card .skh-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f4f7fa;
    transition: transform .3s var(--skh-ease, ease-out);
}
@media (hover: hover) {
    .feed-card-box.skh-card:hover .skh-img img { transform: scale(1.04); }
}

/* Idadi ya picha (chini-kulia) */
.skh-photo-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(11, 27, 43, .62);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 11;
    pointer-events: none;
}

/* ---------- 3) LIKE / SAVE — juu-kulia, laini, kwa usalama wa tofauti ---------- */
.feed-card-box.skh-card .skh-eng-btn {
    position: absolute;
    z-index: 12;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #5b6b7d;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform .16s var(--skh-ease, ease-out), color .16s ease, background .16s ease, box-shadow .16s ease;
    line-height: 0;
}
.feed-card-box.skh-card .skh-eng-btn svg { pointer-events: none; width: 16px; height: 16px; }
.feed-card-box.skh-card .card-eng-like { top: 8px; right: 8px; left: auto; }
.feed-card-box.skh-card .card-eng-save { top: 44px; right: 8px; }
.feed-card-box.skh-card .skh-eng-btn:hover { background: #ffffff; box-shadow: 0 4px 12px rgba(15, 23, 42, .24); transform: scale(1.06); }
.feed-card-box.skh-card .skh-eng-btn:focus-visible { outline: 2px solid var(--skh-primary, #1268A8); outline-offset: 1px; }
.feed-card-box.skh-card .skh-eng-btn.skh-eng-on.card-eng-like { color: #e11d48; }
.feed-card-box.skh-card .skh-eng-btn.skh-eng-on.card-eng-save { color: #d97706; }

/* ---------- 4) BOOST BADGE — juu-kushoto (isigongane na like/save) ---------- */
.feed-card-box.skh-card .boost-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: linear-gradient(45deg, #FFD700, #FDB931);
    color: #5b4300;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 12;
    box-shadow: 0 2px 6px rgba(212, 175, 55, .4);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ---------- 5) MWILI WA KADI (body) ---------- */
.feed-card-box.skh-card .skh-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Safu ya chips (mode/type/availability) */
.skh-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 18px;
}
.skh-chip-row:empty { display: none; }

/* Badges za jumla */
.skh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}
.skh-badge svg { width: 10px; height: 10px; }
.skh-badge--in        { background: #e7f7f1; color: #0e7a5f; }
.skh-badge--low       { background: #fff4e0; color: #b45309; }
.skh-badge--out       { background: #fdecec; color: #b91c1c; }
.skh-badge--service   { background: var(--skh-primary-light, #e8f1fb); color: var(--skh-deep, #0B4F7A); }
.skh-badge--transport { background: #fff4e0; color: #b45309; }
.skh-badge--auction   { background: #fdecec; color: #c2410c; }
.skh-badge--drop      { background: #f3e8ff; color: #7c3aed; }
.skh-badge--group     { background: #e7f7f1; color: #0e7a5f; }
.skh-badge--wholesale{ background: #dbeafe; color: #0B4F7A; }

/* Kichwa (max mistari 2) */
.skh-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--skh-text, #173B56);
    margin: 1px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.32em * 2);
    word-break: break-word;
}

/* Bei — kali, rahisi kutambua */
.skh-price {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--skh-deep, #0B4F7A);
    line-height: 1.15;
    display: block;
}
.skh-price--service { font-size: 15px; }

/* Mwuza mtoa huduma / dereva */
.skh-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    margin-top: 1px;
}
.skh-seller {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 4px 2px 2px;
    margin-left: -2px;
    transition: background .15s ease;
}
@media (hover: hover) { .skh-seller:hover { background: #f2f7fc; } }
.skh-seller:focus-visible { outline: 2px solid var(--skh-primary, #1268A8); outline-offset: 1px; }
.skh-seller img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
}
.skh-seller-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--skh-primary, #1268A8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* [AUDIT 2026-09-16] Wafuasi karibu na jina la muuzaji (kwenye kadi) */
.skh-followers {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Tiki ya uthibitisho */
.skh-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #d3f2e7;
    color: #0e7a5f;
    flex-shrink: 0;
}
.skh-verified svg { width: 10px; height: 10px; }

/* Tathmini ya nyota */
.skh-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d97706;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.skh-rating svg { width: 11px; height: 11px; fill: none; }
.skh-rating b { font-weight: 800; color: #92400e; }
.skh-rating small { color: #94a3b8; font-size: 12.5px; font-weight: 600; }

/* Safu ya meta (eneo / views / aina) */
.skh-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    margin-top: 1px;
}
.skh-loc, .skh-views, .skh-cat, .skh-vehicle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.skh-loc svg, .skh-views svg, .skh-cat svg, .skh-vehicle svg { width: 11px; height: 11px; flex-shrink: 0; }
.skh-vehicle {
    background: #f1f6fb;
    color: var(--skh-deep, #0B4F7A);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ---------- 6) SAFARI (Usafiri): njia kwanza ---------- */
.skh-route {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--skh-text, #173B56);
    line-height: 1.25;
    margin-top: 1px;
    min-width: 0;
}
.skh-route > span:first-child,
.skh-route > span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skh-route .skh-route-arrow {
    color: var(--skh-primary, #1268A8);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.skh-route .skh-route-arrow svg { width: 13px; height: 13px; }
.skh-route-sub {
    font-size: 13px;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -2px;
}

/* ---------- 7) MIGUU YA KADI: ulinzi + CTA ---------- */
.skh-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid #eef3f8;
}
.skh-protect {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0e7a5f;
    white-space: nowrap;
}
.skh-protect svg { width: 11px; height: 11px; }
.skh-cta {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--skh-primary, #1268A8);
    white-space: nowrap;
    letter-spacing: .1px;
}

/* ---------- 8) SKELETON (inayolingana na muundo wa kadi) ---------- */
.skh-skeleton-card { pointer-events: none; }
.skh-skeleton-card .skh-img { background: #e9eff5; }
.skh-sk {
    background: linear-gradient(90deg, #edf1f6 25%, #f6f8fb 50%, #edf1f6 75%);
    background-size: 200px 100%;
    animation: skhShimmer 1.4s infinite linear;
    border-radius: 6px;
}
.skh-sk--chip { width: 52px; height: 16px; border-radius: 999px; }
.skh-sk--line { height: 11px; margin-top: 6px; }
@keyframes skhShimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* ---------- 9) HALI TUPU / HITILAFU (safi, si ya kutisha) ---------- */
.skh-empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--skh-muted, #64748b);
}
.skh-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--skh-primary-light, #e8f1fb);
    color: var(--skh-primary, #1268A8);
    margin-bottom: 12px;
}
.skh-empty-icon svg { width: 26px; height: 26px; }
.skh-empty b {
    display: block;
    font-size: 15px;
    color: var(--skh-text, #173B56);
    margin-bottom: 6px;
}
.skh-empty p { font-size: 12.5px; margin: 0 0 16px; }
.skh-empty-btn {
    padding: 11px 22px;
    background: var(--skh-primary, #1268A8);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.skh-empty-btn:hover { background: var(--skh-deep, #0B4F7A); }
.skh-empty-btn:active { transform: scale(.97); }
.skh-empty--error .skh-empty-icon { background: #fdecec; color: #b91c1c; }

/* ---------- 10) SEHEMU ZA KUGUNDUA (discovery sections) ---------- */
.strategy-row.skh-section {
    background: var(--skh-surface, #ffffff) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .06) !important;
    border: 1px solid #e7eef6;
    border-left: 4px solid var(--skh-primary, #1268A8) !important;
    border-radius: 16px !important;
    margin: 0 12px 16px;
    padding: 14px 16px 12px;
    position: relative;
}
.strategy-header.skh-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.skh-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-align: left;
}
/* [TEXT FIX 2026-09] Maneno yasikae wima au yakate vibaya — yaruhusiwe
   kufungamana kwa mistari asilia (sio nowrap ndani ya nafasi nyembamba). */
.skh-section-text { flex-direction: column; align-items: flex-start; }
.skh-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.skh-section-icon svg { width: 18px; height: 18px; }
.skh-section-icon--hot     { background: #fdecec; color: #e5484d; }
.skh-section-icon--nearby  { background: #e7f1fb; color: var(--skh-primary, #1268A8); }
.skh-section-icon--search  { background: #fff4e0; color: #b45309; }
.skh-section-text { display: flex; flex-direction: column; min-width: 0; }
.skh-section-text b {
    font-size: 14px;
    font-weight: 800;
    color: var(--skh-text, #173B56);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    writing-mode: horizontal-tb !important;
}
.skh-section-text small {
    font-size: 13px;
    color: #8aa0b5;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    writing-mode: horizontal-tb !important;
    line-height: 1.35;
}
.skh-seeall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f6fb;
    color: var(--skh-primary, #1268A8);
    border: none;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease;
}
.skh-seeall:hover { background: #e3eef9; }

/* ---------- 11) ACCESSIBILITY: usichukue rangi pekee ---------- */
@media (prefers-reduced-motion: reduce) {
    .feed-card-box.skh-card, .feed-card-box.skh-card .skh-img img,
    .skh-eng-btn, .skh-sk, .skh-empty-btn, .skh-seeall {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   12) CARD TEASER SYSTEM (2026-09) — muonekano wa reference:
   kadi ya discovery ni TEASER safi. Picha ndiyo shujaa;
   mwili: jina → bei (kijani) → muuzaji ✓ → eneo. Like/Save
   ni ikoni juu ya picha; verifi/njia/zimeisha ni OVERLAY.
   Override za sehemu zilizopita zinaishi hapa (later wins),
   bila kugusa UI nyingine yoyote.
   ============================================================ */

/* Picha ya mazingira ya juu — mraba-pana, picha ionekane zaidi */
.feed-card-box.skh-card .skh-img {
    aspect-ratio: 4 / 3;
    background: #eef4f9;
    border-bottom: 1px solid #eef3f8;
}
.feed-card-box.skh-card {
    border-radius: 18px;
    border: 1px solid #e8f0f7;
    box-shadow: 0 1px 2px rgba(18, 104, 168, .05), 0 6px 18px rgba(23, 59, 86, .06) !important;
}
@media (hover: hover) {
    .feed-card-box.skh-card:hover {
        box-shadow: 0 2px 6px rgba(18, 104, 168, .08), 0 14px 30px rgba(23, 59, 86, .12) !important;
        border-color: #d3e3f2;
    }
}

/* Like + Save: MBILI kando-kando juu-kulia (kama reference) */
.feed-card-box.skh-card .skh-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 12;
    display: flex;
    gap: 6px;
}
.feed-card-box.skh-card .skh-actions .skh-eng-btn {
    position: static;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(226, 235, 244, .9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #475569;
}
.feed-card-box.skh-card .skh-actions .skh-eng-btn:hover { background: #fff; }

/* Beji za hali (mnada/n.k.) juu-kushoto MWA picha — donge nyeupe */
.feed-card-box.skh-card .skh-img > .skh-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.feed-card-box.skh-card .skh-img > .skh-badge.skh-badge--auction { color: #c2410c; }
.feed-card-box.skh-card .skh-img > .skh-badge.skh-badge--drop { color: #6d28d9; }
.feed-card-box.skh-card .skh-img > .skh-badge.skh-badge--group { color: var(--skh-green-dark, #0E7A63); }
.skh-overlay-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11;
}
.skh-overlay-chip .skh-badge {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
    color: var(--skh-deep, #0B4F7A);
}

/* Kibandiko cha Verified chini-kushoto */
.skh-verified-pill {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--skh-green-dark, #0E7A63);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
    pointer-events: none;
}
.skh-verified-pill svg { display: block; }

/* Kibandiko cha njia (usafiri) chini-kushoto */
.skh-route-overlay {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 44px);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 31, 48, .66);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(11, 31, 48, .28);
    pointer-events: none;
}
.skh-route-overlay .skh-ro-pin { display: inline-flex; color: #9fe3d2; }
.skh-route-overlay .skh-ro-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}
.skh-route-overlay .skh-ro-arrow { color: #cfe7fb; font-size: 13px; flex-shrink: 0; }

/* Zimeisha: donge la kati + picha ya kijivu */
.skh-out-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: 11;
    padding: 6px 16px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    pointer-events: none;
}
.feed-card-box.skh-card .skh-img.skh-img--out img { filter: grayscale(.85); opacity: .65; }

/* BOOST bado juu-kushoto, lakini ibaki chini ya vitufe vya kulia */
.feed-card-box.skh-card .skh-img .boost-badge { z-index: 11; }
/* Beji mbili zisipishane: beji ya pili (mnada/aina) ishuke chini */
.feed-card-box.skh-card .skh-img .boost-badge ~ .skh-badge,
.feed-card-box.skh-card .skh-img .skh-overlay-chip ~ .skh-badge { top: 44px; }

/* Idadi ya picha ibaki chini-kulia, nje ya njia/verified */
.feed-card-box.skh-card .skh-photo-count { bottom: 10px; right: 10px; z-index: 11; }
.feed-card-box.skh-card:has(.skh-route-overlay) .skh-photo-count { display: none; }

/* ---------- MWILI WA KADI: nafasi wazi, hierarchy safi ---------- */
.feed-card-box.skh-card .skh-body {
    padding: 11px 13px 13px;
    gap: 4px;
}
.feed-card-box.skh-card .skh-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--skh-text, #173B56);
    min-height: calc(1.34em * 2);
    margin: 0;
    letter-spacing: -.1px;
}

/* BEI — kijani kinachodhibitiwa, kikubwa, cha haraka kuonekana */
.feed-card-box.skh-card .skh-price {
    font-size: 16.5px;
    font-weight: 900;
    color: var(--skh-green-dark, #0E7A63);
    letter-spacing: -.2px;
    margin: 1px 0 2px;
}
.feed-card-box.skh-card .skh-price--muted {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
}
.skh-price-prefix {
    font-size: 13px;
    font-weight: 700;
    color: #7b94a8;
    letter-spacing: 0;
    margin-right: 1px;
}

/* Mistari ya muuzaji na eneo — myembamba, tulivu */
.feed-card-box.skh-card .skh-seller-row { margin-top: 0; gap: 6px; }
.skh-seller-mini {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    cursor: pointer;
    border-radius: 7px;
    padding: 1px 3px 1px 1px;
    margin-left: -1px;
}
@media (hover: hover) { .skh-seller-mini:hover { background: #f1f7fc; } }
.skh-seller-mini:focus-visible { outline: 2px solid var(--skh-primary, #1268A8); outline-offset: 1px; }
.skh-seller-ic {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #e7f1f9;
    color: var(--skh-primary, #1268A8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.skh-seller-ic svg { width: 10px; height: 10px; }
.skh-seller-mini .skh-seller-name {
    font-size: 13px;
    font-weight: 700;
    color: #3d5468;
}
.skh-seller-mini .skh-verified {
    width: 14px;
    height: 14px;
    background: var(--skh-green, #18A982);
    color: #fff;
}
.skh-seller-mini .skh-verified svg { width: 8px; height: 8px; }

.feed-card-box.skh-card .skh-meta-row {
    justify-content: flex-start;
    margin-top: 0;
}
.skh-pinloc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8395a7;
    max-width: 100%;
}
.skh-pinloc svg { width: 11px; height: 11px; color: #9db1c2; flex-shrink: 0; }
.skh-pinloc span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skh-card-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--skh-deep, #0B4F7A);
    background: #eef5fb;
    border-radius: 999px;
    padding: 2px 8px;
    width: fit-content;
    margin: -1px 0 1px;
}
.skh-card-sub svg { width: 10px; height: 10px; }

/* Tathmini (huduma/usafiri) ibaki shwari upande wa kulia */
.feed-card-box.skh-card .skh-rating {
    margin-left: auto;
    background: #fffaf0;
    border: 1px solid #fbe7c3;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 12.5px;
}

/* Footer ya zamani (Imelindwa/CTA) haitumiki tena kwenye teaser —
   ikiwa na markup ya zamani mahali popote, ifichwe ili kadi ibaki nyepesi. */
.feed-card-box.skh-card .skh-foot { display: none; }

/* Kadi zisizo na tathmini/eneo: usibane mistari */
.feed-card-box.skh-card .skh-meta-row:empty { display: none; }

/* Mistari mirefu isivunje mpangilio wa gridi */
.feed-card-box.skh-card { break-inside: avoid; }

/* Kwenye vifaa vya kugusa, Like/Save vionekane PIA (reference ya rununu
   inaonyesha ♡ na 🔖 wazi juu ya picha) — futa kanuni ya zamani iliyozificha. */
@media (hover: none) {
    .feed-card-box.skh-card .skh-actions .skh-eng-btn,
    .feed-card-box.skh-card .skh-actions .skh-eng-btn.skh-eng-on {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Madoido mepesi ya rununu */
@media (max-width: 480px) {
    .feed-card-box.skh-card .skh-body { padding: 10px 11px 12px; }
    .feed-card-box.skh-card .skh-price { font-size: 15.5px; }
    .feed-card-box.skh-card .skh-title { font-size: 13px; }
}

/* ============================================================
   ROUTE MATCHER (2026-09) — bango la feed + matokeo ya magari
   ============================================================ */

/* Bango juu ya ukurasa wa usafiri */
.skh-route-cta{
    display:flex;align-items:center;gap:14px;
    background:#F0F7FA;
    color:#18352D;border:1px solid #D6E8EF;border-radius:18px;padding:16px 18px;margin-bottom:4px;
    box-shadow:0 4px 16px rgba(57,119,155,.10);
}
.skh-route-cta-ic{
    flex:0 0 auto;width:44px;height:44px;border-radius:13px;
    background:#fff;border:1px solid #D6E8EF;display:flex;align-items:center;justify-content:center;
}
.skh-route-cta-ic svg{stroke:#39779B;}
.skh-route-cta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.skh-route-cta-txt b{font-size:14px;font-weight:800;}
.skh-route-cta-txt span{font-size:12px;line-height:1.45;opacity:.92;}
.skh-route-cta-btn{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
    background:#18A982;color:#fff;border:none;border-radius:99px;
    padding:11px 17px;font-weight:800;font-size:13px;cursor:pointer;
    box-shadow:0 4px 12px rgba(11,79,122,.25);transition:transform .15s,box-shadow .15s;
}
.skh-route-cta-btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(11,79,122,.32);}
.skh-route-cta-btn svg{stroke:#0B4F7A;}
@media (max-width:560px){
    .skh-route-cta{flex-wrap:wrap;padding:14px;}
    .skh-route-cta-btn{width:100%;justify-content:center;}
}

/* Mshale wa njia ndani ya kichwa/mstari wa kadi */
.skh-title-arrow{display:inline-flex;vertical-align:middle;margin:0 5px;color:#2B82BD;}

/* Laha la matokeo (bottom-sheet kwenye simu, kati kwenye desktop) */
.rm-sheet{
    background:#F6F9FC;width:100%;max-width:560px;max-height:90vh;
    border-radius:24px;display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 60px rgba(11,79,122,.35);
    animation:rmPop .25s ease-out;
}
@keyframes rmPop{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.rm-head{
    display:flex;align-items:center;gap:12px;padding:16px 18px;
    background:#fff;border-bottom:1px solid #E6EDF3;
}
.rm-head-ic{
    flex:0 0 auto;width:40px;height:40px;border-radius:12px;
    background:rgba(18,104,168,.1);color:#1268A8;
    display:flex;align-items:center;justify-content:center;
}
.rm-head h3{margin:0;font-size:16px;font-weight:800;color:#173B56;}
.rm-sub{font-size: 13px;color:#64748B;line-height:1.4;}
.rm-close{
    margin-left:auto;flex:0 0 auto;width:36px;height:36px;border-radius:50%;
    border:none;background:#F1F5F9;color:#475569;font-size:20px;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.rm-close:hover{background:#E2E8F0;}

.rm-crit{display:flex;flex-wrap:wrap;gap:7px;padding:12px 18px 0;}
.rm-crit-chip{
    display:inline-flex;align-items:center;gap:5px;background:#fff;
    border:1px solid #E2E8F0;border-radius:99px;padding:6px 11px;
    font-size:12px;font-weight:700;color:#173B56;
}
.rm-crit-chip svg{stroke:#2B82BD;}
.rm-crit-arrow svg{stroke:#94A3B8;}

.rm-list{padding:14px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.rm-group-title{
    display:flex;align-items:center;gap:7px;margin:6px 0 -2px;
    font-size:12.5px;font-weight:800;color:#0B4F7A;text-transform:uppercase;letter-spacing:.03em;
}
.rm-group-title svg{stroke:#18A982;}
.rm-group-title--alt svg{stroke:#D97706;}
.rm-group-title--alt{color:#92400E;}
.rm-group{display:flex;flex-direction:column;gap:12px;}

.rm-card{
    display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 12px;
    background:#fff;border:1px solid #E6EDF3;border-radius:18px;padding:12px;
    box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.rm-img{
    flex:0 0 78px;width:78px;height:78px;border-radius:13px;overflow:hidden;
    border:1px solid #EDF2F7;padding:0;background:#F1F5F9;cursor:pointer;
}
.rm-img img{width:100%;height:100%;object-fit:cover;display:block;}
.rm-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;}
.rm-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.rm-name b{font-size:14px;font-weight:800;color:#173B56;}
.rm-verified{color:#18A982;display:inline-flex;}
.rm-online{display:inline-flex;align-items:center;gap:5px;font-size: 12.5px;font-weight:700;color:#18A982;}
.rm-online i{width:7px;height:7px;border-radius:50%;background:#18A982;display:inline-block;box-shadow:0 0 0 3px rgba(24,169,130,.15);}
.rm-route{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#334155;flex-wrap:wrap;}
.rm-route svg{stroke:#2B82BD;flex:0 0 auto;}
.rm-arrow{display:inline-flex;color:#94A3B8;}
.rm-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rm-price{font-size:13.5px;font-weight:800;color:#18A982;}
.rm-rating{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#B45309;}
.rm-rating svg{fill:#F59E0B;stroke:#F59E0B;}
.rm-chips{display:flex;gap:6px;flex-wrap:wrap;}
.rm-chip{
    display:inline-flex;align-items:center;gap:4px;background:#F1F5F9;
    border-radius:8px;padding:3px 8px;font-size: 13px;color:#475569;font-weight:600;
}
.rm-chip svg{stroke:#64748B;}
.rm-warn{display:inline-flex;align-items:center;gap:5px;font-size: 13px;color:#B45309;font-weight:600;}
.rm-warn svg{stroke:#D97706;}
.rm-actions{flex:0 0 100%;display:flex;gap:8px;padding-left:90px;}
.rm-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:800;cursor:pointer;
    border:1px solid transparent;transition:transform .12s,box-shadow .12s;
}
.rm-btn svg{display:block;}
.rm-btn:active{transform:scale(.98);}
.rm-btn-light{background:#fff;border-color:#CBD5E1;color:#334155;}
.rm-btn-light:hover{background:#F8FAFC;}
.rm-btn-primary{background:#18A982;color:#fff;flex:1;box-shadow:0 4px 12px rgba(18,104,168,.25);}
.rm-btn-primary:hover{background:#0B4F7A;}
.rm-btn-primary svg{stroke:#fff;}
.rm-btn-light svg{stroke:#475569;}

.rm-loading{display:flex;align-items:center;gap:10px;padding:30px 10px;color:#475569;font-size:13px;font-weight:600;}
.rm-spinner{
    width:20px;height:20px;border-radius:50%;
    border:2.5px solid #CBD5E1;border-top-color:#1268A8;animation:rmSpin .8s linear infinite;
}
@keyframes rmSpin{to{transform:rotate(360deg);}}
.rm-empty{text-align:center;padding:34px 14px;color:#475569;}
.rm-empty-ic{
    width:60px;height:60px;border-radius:50%;background:#EAF2F9;color:#1268A8;
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.rm-empty b{display:block;font-size:14.5px;color:#173B56;margin-bottom:6px;}
.rm-empty p{font-size:12.5px;line-height:1.55;margin:0 auto;max-width:380px;color:#64748B;}

.rm-foot{padding:12px 18px 16px;border-top:1px solid #E6EDF3;background:#fff;display:flex;flex-direction:column;gap:8px;}
.rm-foot-broadcast{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:13px;border-radius:12px;border:1px dashed #CBD5E1;
    background:transparent;color:#64748B;font-weight:800;font-size:12.5px;cursor:pointer;
}
.rm-foot-broadcast:hover{background:#F8FAFC;color:#0B4F7A;border-color:#2B82BD;}
.rm-foot-broadcast svg{stroke:currentColor;}
.rm-foot-back{
    width:100%;padding:11px;border-radius:12px;border:none;
    background:#E2E8F0;color:#334155;font-weight:800;font-size:13px;cursor:pointer;
}
@media (max-width:480px){
    .rm-card{gap:5px 10px;padding:10px;}
    .rm-img{flex-basis:64px;width:64px;height:64px;}
    .rm-actions{padding-left:0;}
}

/* [§6/§8/§13/§17/§21] Mode signal line — namba halisi chini ya bei ya kadi */
.skh-mode-line {
    display: flex; align-items: center; gap: 5px;
    margin: 2px 0 0 0; padding: 2px 0 0 0;
    font-size: 11px; line-height: 1.35; font-weight: 700;
    color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skh-mode-line--auction   { color: #c2410c; }
.skh-mode-line--drop      { color: #7c3aed; }
.skh-mode-line--group     { color: #0e7a5f; }
.skh-mode-line--wholesale { color: #0B4F7A; }

/* ============================================================
   [§6-§11 R8 MOBILE 360–412px] Kadi = quick discovery, muundo tayari.
   Mmadili gidilgies 412 — hakunakuliyni tiny text wala image distortion.
   ============================================================ */
@media (max-width: 420px) {
    /* Kadi iza kwa row 2 safa-umlke hakukuliny ladbanit */
    .feed-card-box.skh-card .skh-title {
        font-size: 13px;
        line-height: 1.35;
        /* Ruhexa 2 mistari (imeandikwa kupindana pekee): */
        -webkit-line-clamp: 2;
        min-height: calc(1.35em * 2);
    }
    .feed-card-box.skh-card .skh-price { font-size: 16px; }
    .feed-card-box.skh-card .skh-price-prefix { font-size: 11px; }

    /* Mode signal line — iigandze inapofungipwa bindis, si kikatazisid */
    .feed-card-box.skh-card .skh-mode-line {
        white-space: normal;           /* 2 - wildings kunaonekn sanity 360px */
        font-size: 11px;
        line-height: 1.4;
        display: block;                /* kuzuwa rip-width gumeia */
        text-overflow: clip;
        overflow: visible;
    }

    /* Seller-mini row: muuzaji + wafuasi hakuliny tiny — wanawezagen */
    .feed-card-box.skh-card .skh-seller-row {
        flex-wrap: wrap;
        gap: 4px 6px;
    }
    .feed-card-box.skh-card .skh-seller-mini { max-width: 100%; }
    .feed-card-box.skh-card .skh-followers { white-space: nowrap; }

    /* Badges: mpya ndezya — lady size inaonvel balbally */
    .skh-badge { font-size: 10.5px; padding: 3px 7px; }

    /* Image isiqri'nit ki kerir — lazima aspect kulaqdis */
    .feed-card-box.skh-card .skh-img img { object-fit: cover; }
}

/* 360px — ukungui wa kypeu: gfururi mbili zilizobaraku */
@media (max-width: 360px) {
    .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ═══ [§6-§11 R8 MOBILE CARDS] 420px & 360px: title 2-line clamp,
 * mode-line haitozidi kuwa kiwalifuwi, seller-row inaugauge line. */
@media (max-width: 420px) {
    .feed-card-box.skh-card .skh-title,
    .feed-card-box .skh-card-title { 
        font-size: 13px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: calc(1.35em * 2);
    }
    .feed-card-box.skh-card .skh-mode-line,
    .feed-card-box .skh-mode-line {
        white-space: normal !important;
        font-size: 10.5px !important;
        line-height: 1.5 !important;
        display: block !important;
        overflow: visible !important;
    }
    .feed-card-box.skh-card .skh-seller-row,
    .feed-card-box .skh-seller-row { flex-wrap: wrap !important; gap: 4px 6px !important; }
}

@media (max-width: 360px) {
    .feed-card-box.skh-card .skh-title,
    .feed-card-box .skh-card-title { font-size: 13px !important; }
    .feed-card-box.skh-card .skh-mode-line { font-size: 10px !important; }
}