/*
 * Wrapper عمومی روی HTML نهایی Featured Image.
 * اندازه Wrapper از خود تصویر می‌آید؛ بنابراین 150×150 و 107×107 را
 * بدون تنظیم جداگانه دنبال می‌کند.
 */
.yilko-product-cover-image {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    isolation: isolate;
    vertical-align: top;
}

.yilko-product-cover-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    background-image: var(--yilko-product-cover-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.yilko-product-cover-image > a,
.yilko-product-cover-image > picture,
.yilko-product-cover-image img {
    display: block;
    max-width: 100%;
}

/*
 * قاب کارت محصول
 * Wrapper فقط دور Featured Image ساخته می‌شود.
 */
.woocommerce ul.products li.product .yilko-product-cover-image,
.woocommerce-page ul.products li.product .yilko-product-cover-image,
.elementor-loop-container .e-loop-item .yilko-product-cover-image,
.elementor-widget-loop-grid .e-loop-item .yilko-product-cover-image,
.wc-block-grid__product .yilko-product-cover-image,
.wp-block-woocommerce-product-template .yilko-product-cover-image {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    isolation: isolate;
}

.woocommerce ul.products li.product .yilko-product-cover-image::after,
.woocommerce-page ul.products li.product .yilko-product-cover-image::after,
.elementor-loop-container .e-loop-item .yilko-product-cover-image::after,
.elementor-widget-loop-grid .e-loop-item .yilko-product-cover-image::after,
.wc-block-grid__product .yilko-product-cover-image::after,
.wp-block-woocommerce-product-template .yilko-product-cover-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    background-image: var(--yilko-product-cover-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.woocommerce ul.products li.product .yilko-product-cover-image > img,
.woocommerce-page ul.products li.product .yilko-product-cover-image > img,
.elementor-loop-container .e-loop-item .yilko-product-cover-image > img,
.elementor-widget-loop-grid .e-loop-item .yilko-product-cover-image > img,
.wc-block-grid__product .yilko-product-cover-image > img,
.wp-block-woocommerce-product-template .yilko-product-cover-image > img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * فقط تصویر اصلی صفحه تکی محصول.
 * اسلایدهای بعدی و Thumbnailهای گالری قاب نمی‌گیرند.
 */
.single-product .woocommerce-product-gallery.yilko-product-cover-gallery
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.single-product .woocommerce-product-gallery.yilko-product-cover-gallery
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    background-image: var(--yilko-product-cover-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

/*
 * پشتیبانی از کارت محصول سفارشی المنتور.
 * کلاس فعال فقط برای محصولاتی اضافه می‌شود که قاب دسته‌بندی آن‌ها روشن است.
 */
.elementor-widget.yilko-product-cover-elementor-image > .elementor-widget-container {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    isolation: isolate;
}

.elementor-widget.yilko-product-cover-elementor-image > .elementor-widget-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    background-image: var(--yilko-product-cover-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.elementor-widget.yilko-product-cover-elementor-image > .elementor-widget-container img {
    display: block;
    width: 100%;
    height: auto;
}