/* MPD v1.0.1 — only WooCommerce CATEGORY thumbnails are styled.
   Installed images are not modified. Product photos and galleries are excluded. */

/* Standard WooCommerce category grids and Block/Elementor category widgets. */
.woocommerce ul.products li.product-category img,
.woocommerce-page ul.products li.product-category img,
ul.products li.product-category img,
.wc-block-product-categories-list-item__image img,
.wc-block-product-category img,
.wc-block-product-categories__item img,
.elementor-widget-woocommerce-product-categories img,
.elementor-widget-wc-categories img,
.mpd-category-card img,
.mpd-cat-card img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* JavaScript creates a real square clipping frame — unlike an image-only
   aspect-ratio rule, this works even when a theme sets image height: auto
   or the image has intrinsic rectangular dimensions. */
.mpd-square-category-frame {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    isolation: isolate;
}
.mpd-square-category-frame > img,
.mpd-square-category-frame > picture,
.mpd-square-category-frame > picture > img {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
}
/* Some Elementor themes apply object-fit styles to the picture itself.
   Preserve responsive <source> behavior while keeping the picture square. */
.mpd-square-category-frame > picture > img { inset: 0 !important; }

/* v1.0.2: the custom /dj-drop-categories/ uses illustrated/gradient
   CATEGORY CARD HEADERS, not WooCommerce <li.product-category> images.
   JS identifies only those header elements and applies this class. */
body .mpd-square-category-cover {
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: var(--mpd-category-square-height, auto) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
body .mpd-square-category-cover > img,
body .mpd-square-category-cover > picture,
body .mpd-square-category-cover > picture > img,
body .mpd-square-category-cover img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
}
body img.mpd-square-category-cover {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}