/* ==== css/64-image-quality.css ==== */
/* [R13-C 2026-11] Owner decision: real photos, not 3D illustrations, as the main pictures.
 * 1. Product cards: square 1:1, whole product visible (object-fit: contain), clean white frame.
 * 2. Category / service / transport tiles: photos fill the tile (cover); a category without a
 *    licensed photo yet shows a calm placeholder (initial + "Picha inakuja"), never another
 *    category's photo and never a drawing. */

/* ---------- 1. product cards: 1:1 + contain (overrides the 4:3 cover rule in 52) ---------- */
.feed-card-box.skh-card--product .feed-img-box.skh-img,
.feed-card-box.skh-card .feed-img-box {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    background: #fff !important;
    border-bottom: 1px solid #EEF3F1;
}
.feed-card-box.skh-card--product .feed-img-box.skh-img > img,
.feed-card-box.skh-card .feed-img-box > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 6px !important;
    background: #fff;
}
/* transport cards keep their 4:3 vehicle photo (owner: keep each card's proportion) */
.feed-card-box.skh-card--transport .feed-img-box,
.feed-card-box.skh-card--transport .skh-img { aspect-ratio: 4 / 3 !important; padding: 0 !important; }
.feed-card-box.skh-card--transport .skh-img img { object-fit: cover !important; border-radius: 0 !important; }

/* ---------- 2. category photos: cover, consistent frame ---------- */
img[src*="categories/clean/"] { object-fit: cover !important; object-position: center; background: #EEF3F1; }
.gds-tile-img img[src*="categories/clean/"],
.cps-card-img img[src*="categories/clean/"],
.skh-cat-photo img[src*="categories/clean/"] { width: 100% !important; height: 100% !important; padding: 0 !important; }

/* placeholder for a category whose photo is still being sourced */
.skh-photo-pending { flex-direction: column; gap: 4px; background: linear-gradient(160deg, #F4F8F6, #EAF3EF) !important; }
.skh-photo-pending::after { display: none; }
.skh-photo-pending .skh-img-fallback-letter { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    font-size: 18px !important; color: #0F7A5C; box-shadow: 0 2px 8px rgba(15, 122, 92, .12); }
.skh-photo-pending-note { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; color: #6B7F78; letter-spacing: .02em; }
.cps-chip-ico .skh-photo-pending-note, .skh-cat-photo.skh-img-fallback .skh-photo-pending-note { display: none; }

/* ---------- 3. live cards: real product photo when the live has one ---------- */
.lvx-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; box-sizing: border-box; }
.lvx-card-media.has-photo { background: #fff; }