/**
 * Category images 300×200 (aspect 3:2) — fit without regenerating.
 *
 * ROLLBACK: dequeue by removing require of inc/category-thumbs-fit.php
 * from functions.php, or delete this file.
 *
 * Idea: card width matches 3:2 so media height stays ≈ old 132px / 112px,
 * object-fit:contain shows the full image (no crop, no letterbox when ratio matches).
 */

/* Rail cards (home, /shop, category archives) */
.yulamix-cats {
    --yulamix-cats-card-w: 186px;
    --yulamix-cats-media-ratio: 3 / 2;
}

.yulamix-cats__card {
    padding: 10px 10px 8px !important;
    gap: 6px;
}

.yulamix-cats__media {
    height: auto !important;
    aspect-ratio: var(--yulamix-cats-media-ratio);
}

.yulamix-cats__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    background-color: #fff !important;
}

.yulamix-cats__caption {
    min-height: 0;
    gap: 1px;
}

.yulamix-cats__count {
    margin: 0;
    padding: 0;
}

@media (max-width: 816px) {
    .yulamix-cats {
        --yulamix-cats-card-w: 158px;
    }

    .yulamix-cats__card {
        padding: 8px 8px 6px !important;
        gap: 5px;
    }

    .yulamix-cats__media {
        height: auto !important;
    }

    .yulamix-cats__caption {
        min-height: 0;
    }
}

/* Legacy subcategory / slider tiles still used on some shop/category views */
.subcategories .subcategory a > img,
.category-container #categoty-slider .subcategory a > img,
.category-container #categoty-slider a > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
    object-fit: contain !important;
    object-position: center center;
    background-color: #fff !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Woo loop product-category tiles (if present) */
ul.products li.product-category a img,
ul.products li.product-category img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: contain !important;
    object-position: center center;
    background-color: #fff !important;
}

/*
 * Mobile bottom-menu category modal (#category-modal).
 * Images are 3:2 landscape — circle 50×50 cropped them badly.
 * Match homepage rail: 3:2 frame + contain, soft radius (not circle).
 */
#category-modal .category-list {
    max-width: 132px;
}

#category-modal .category-item {
    padding: 8px 6px;
    gap: 6px;
}

#category-modal .category-item img {
    width: 96px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    border-radius: 10px !important;
    object-fit: contain !important;
    object-position: center center;
    background-color: #fff !important;
    border: 1px solid #e4e4ee;
    box-sizing: border-box;
    flex-shrink: 0;
}

#category-modal .category-item.active img {
    border-color: rgba(255, 255, 255, 0.55);
    background-color: #fff !important;
}

#category-modal .subcategory-item img,
#category-modal .subcategory-item img.subcategory-image {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: contain !important;
    object-position: center center;
    background-color: #fff !important;
    border-radius: 10px !important;
    border: solid 1px #d3d3d3;
}