/* Refactoring CSS 11/2022 */

#product-category #content :not(:has(.ml-buy)) .product-thumb .image,
#product-search #content :not(:has(.ml-buy)) .product-thumb .image,
#product-product:not(:has(#button-cart)) .thumbnails .image-main {
    outline: 1px solid #80808036;
    margin: 1rem;
    /* pointer-events: none; */
    position: relative;
    opacity: 1;
    border-radius: .4em;
}

#product-category #content :not(:has(.ml-buy)) .product-thumb .image:before,
#product-search #content :not(:has(.ml-buy)) .product-thumb .image:before,
#product-product:not(:has(#button-cart)) .thumbnails .image-main:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .6;
    z-index: 1;
    pointer-events: none;
}


/* #product-category #content :not(:has(.ml-buy)) .product-thumb .image:after {
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/7387/7387740.png');
    content: '';
    background-position: center;
    background-size: 72px;
    background-repeat: no-repeat;
    opacity: .8;
    z-index: 2;
} */

html[lang="it"] #product-category #content :not(:has(.ml-buy)) .product-thumb .image:after,
html[lang="it"] #product-search #content :not(:has(.ml-buy)) .product-thumb .image:after,
html[lang="it"] #product-product:not(:has(#button-cart)) .thumbnails .image-main:after {
    content: 'Prodotto non disponibile';
}

html[lang="en"] #product-category #content :not(:has(.ml-buy)) .product-thumb .image:after,
html[lang="en"] #product-search #content :not(:has(.ml-buy)) .product-thumb .image:after,
html[lang="en"] #product-product:not(:has(#button-cart)) .thumbnails .image-main:after {
    content: 'Product not available';
}

@media screen and (min-width: 768px) {
    #product-search #content :not(:has(.ml-buy)) .product-thumb .image:after,
    #product-category #content :not(:has(.ml-buy)) .product-thumb .image:after,
    #product-product:not(:has(#button-cart)) .thumbnails .image-main:after {
        position: absolute;
        left: 50%;
        top: calc(100% - 32.5px);
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background-image: url(https://cdn-icons-png.flaticon.com/512/7387/7387740.png);
        font-size: 1.4em;
        font-weight: 600;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        background-position: center calc(50% - 50px);
        background-size: 72px;
        background-repeat: no-repeat;
        opacity: 1;
        z-index: 1;
        pointer-events: none;
    }
}

@media screen and (max-width: 767px) {
    #product-search #content :not(:has(.ml-buy)) .product-thumb .image:after,
    #product-category #content :not(:has(.ml-buy)) .product-thumb .image:after,
    #product-product:not(:has(#button-cart)) .thumbnails .image-main:after {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background-image: url(https://cdn-icons-png.flaticon.com/512/7387/7387740.png);
        font-size: 1.4em;
        font-weight: 600;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: center;
        text-align: left;
        background-position: 8px center;
        background-size: 72px;
        background-repeat: no-repeat;
        opacity: 1;
        z-index: 16;
        padding-left: 80px;
        color: #000;
        pointer-events: none;
    }
}

.product-thumb .image a {
    pointer-events: all;
}


/* div#product-product:not(:has(#button-cart)) .thumbnails .image-main */


/* #product-category #content .product-thumb:not(:has(.ml-buy)):before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    background: #000000c0;
}

#product-category #content :not(:has(.ml-buy)):after .product-thumb .image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 50px));
    width: 100%;
    height: 100%;
    background-image: url(https://cdn-icons-png.flaticon.com/512/7387/7387740.png);
    content: 'Prodotto non disponibile';
    font-size: 1.4em;
    font-weight: 600;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    background-position: center calc(50% - 50px);
    background-size: 72px;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 2;
    color: black;
    filter: invert(100%);
} */