/* ==== css/69-category-tiles.css ==== */
/* [R13-G 2026-11] Category tiles: REAL photos kept (owner's decision), presented in a friendly, clean
 * container like the owner's "Kategoria za Bidhaa" reference: white rounded card, soft shadow, photo
 * framed inside with its own radius, bold label under it. Desktop home: 2 rows x 6 + "Zaidi". */
.cps-t-d { display: none; }
.cps-grid-ic { display: none; }

/* ---------- home: phone (one row, ref 11) — photos now sit inside small white cards ---------- */
@media (max-width: 899px) {
    body:has(#navTabHome.active) #categoryPhotoStrip { gap: 5px !important; }
    body:has(#navTabHome.active) #categoryPhotoStrip .cps-card { background: #fff !important; border: 1px solid #E6EEEA !important; border-radius: 12px !important;
        padding: 3px 3px 5px !important; box-shadow: 0 1px 4px rgba(15, 60, 45, .07) !important; }
    body:has(#navTabHome.active) #categoryPhotoStrip .cps-card-img { border-radius: 9px !important; box-shadow: none !important; background: #F3F7F5; }
    body:has(#navTabHome.active) #categoryPhotoStrip .cps-card { padding: 2px 2px 4px !important; gap: 3px !important; }
    body:has(#navTabHome.active) #categoryPhotoStrip .cps-card-name { font-weight: 700 !important; color: #1E3A31 !important; font-size: 9.5px !important; letter-spacing: -.2px; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    body:has(#navTabHome.active) #categoryPhotoStrip .cps-card--more .cps-more-ico { border-radius: 9px; }
}

/* ---------- home: desktop grid "Kategoria za Bidhaa" ---------- */
@media (min-width: 900px) {
    #categoryStrip .cps-t-m { display: none; }
    #categoryStrip .cps-t-d { display: inline; }
    #categoryStrip .cps-title-bar { display: none !important; }
    #categoryStrip .cps-grid-ic { display: inline-grid; color: #12946F; margin-right: 10px; vertical-align: -5px; }
    #categoryStrip .cps-title { font: 900 26px/1.15 Inter, system-ui, sans-serif !important; color: #0F3B2E !important; display: flex; align-items: center; }
    #categoryStrip .cps-head-rule { display: none !important; }
    #categoryStrip .cps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    #categoryStrip .cps-more { border: 1.5px solid #12946F !important; border-radius: 999px !important; padding: 10px 18px !important; color: #0F6E55 !important;
        background: #fff !important; font: 800 15px/1 Inter, system-ui, sans-serif !important; display: inline-flex; gap: 8px; align-items: center; }
    #categoryStrip .cps-more:hover { background: #EEF8F3 !important; }
    #categoryStrip #categoryPhotoStrip.cps-strip { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px !important; overflow: visible !important; padding: 2px !important; }
    #categoryStrip #categoryPhotoStrip .cps-card { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; background: #fff !important;
        border: 1px solid #E8EFEC !important; border-radius: 20px !important; padding: 10px 10px 12px !important; gap: 10px !important; box-shadow: 0 2px 10px rgba(16, 52, 40, .06) !important;
        display: flex !important; flex-direction: column !important; align-items: stretch !important; transition: transform .15s ease, box-shadow .15s ease; }
    #categoryStrip #categoryPhotoStrip .cps-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 52, 40, .12) !important; }
    #categoryStrip #categoryPhotoStrip .cps-card-img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border-radius: 14px !important; overflow: hidden; background: #F3F7F5; }
    #categoryStrip #categoryPhotoStrip .cps-card-name { padding: 0 !important; font: 800 16px/1.2 Inter, system-ui, sans-serif !important; color: #10231D !important; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none !important; }
    #categoryStrip #categoryPhotoStrip .cps-card--more { justify-content: center !important; align-items: center !important; min-height: 0 !important; }
    #categoryStrip #categoryPhotoStrip .cps-card--more .cps-more-ico { width: 72px !important; height: 72px !important; border-radius: 50% !important; background: #12946F !important; color: #fff !important; display: grid; place-items: center; }
    #categoryStrip #categoryPhotoStrip .cps-card--more b { font: 800 16px/1.2 Inter, system-ui, sans-serif; color: #10231D; }
}

/* ---------- Category explorer ("Chagua Kategoria"): framed photos in white cards ---------- */
#categoryModal .cat-box { background: #fff !important; border: 1px solid #E8EFEC !important; border-radius: 18px !important; padding: 8px 8px 10px !important;
    box-shadow: 0 2px 10px rgba(16, 52, 40, .06) !important; overflow: hidden; }
#categoryModal .cat-box:hover { box-shadow: 0 8px 20px rgba(16, 52, 40, .11) !important; }
#categoryModal .cat-box .cat-icon.skh-cat-photo { height: auto !important; aspect-ratio: 4 / 3; border-radius: 13px !important; background: #F3F7F5 !important; }
#categoryModal .cat-name { font: 800 13px/1.25 Inter, system-ui, sans-serif !important; color: #10231D !important; padding: 9px 2px 0 !important; text-transform: none !important; }
/* placeholder (photo still being sourced): calm, no grey box */
#categoryModal .skh-photo-pending { background: linear-gradient(160deg, #F1F8F4, #E6F3EC) !important; }
#categoryModal .skh-photo-pending .skh-img-fallback-letter { width: 46px; height: 46px; font-size: 20px !important; }