/*
 * BePlugin - Niedostepne produkty v4.0.0
 *
 * Selektor bazowy: div.etheme-product-grid-item.outofstock
 * Klasa outofstock jest ustawiana przez XStore/WooCommerce.
 * Klasa bpoos-outofstock jest dodawana przez nasz JS (dla badge i pewnosci).
 *
 * Uzywamy OBU klas jednoczesnie - CSS dziala od razu bez JS,
 * JS sluzy wylacznie do wstrzykniecia badge.
 */

:root {
    --bpoos-op: 0.40;
    --bpoos-gs: 80%;
    --bpoos-bl: 0px;
}

/* -----------------------------------------------------------------------
   Obrazek produktu
   Selektor precyzyjny: div.etheme-product-grid-item z klasa outofstock
   ----------------------------------------------------------------------- */
div.etheme-product-grid-item.outofstock .etheme-product-grid-image,
div.etheme-product-grid-item.outofstock .etheme-product-grid-image img,
div.etheme-product-grid-item.outofstock .etheme-product-grid-image a img {
    filter:  grayscale(var(--bpoos-gs)) blur(var(--bpoos-bl)) !important;
    opacity: var(--bpoos-op) !important;
    transition: filter .3s ease, opacity .3s ease;
}

/* -----------------------------------------------------------------------
   Tytul, cena
   ----------------------------------------------------------------------- */
div.etheme-product-grid-item.outofstock .etheme-product-grid-content,
div.etheme-product-grid-item.outofstock .woocommerce-loop-product__title,
div.etheme-product-grid-item.outofstock .etheme-product-grid-title,
div.etheme-product-grid-item.outofstock .price {
    opacity: var(--bpoos-op) !important;
    transition: opacity .3s ease;
}

/* -----------------------------------------------------------------------
   Hover - lekkie rozjasnienie
   ----------------------------------------------------------------------- */
div.etheme-product-grid-item.outofstock:hover .etheme-product-grid-image,
div.etheme-product-grid-item.outofstock:hover .etheme-product-grid-image img {
    filter:  grayscale(30%) blur(0px) !important;
    opacity: 0.65 !important;
}

div.etheme-product-grid-item.outofstock:hover .etheme-product-grid-content,
div.etheme-product-grid-item.outofstock:hover .woocommerce-loop-product__title,
div.etheme-product-grid-item.outofstock:hover .price {
    opacity: 0.65 !important;
}

/* -----------------------------------------------------------------------
   Pozycjonowanie dla badge
   ----------------------------------------------------------------------- */
div.etheme-product-grid-item.outofstock {
    position: relative !important;
}

/* -----------------------------------------------------------------------
   Badge - wstrzykiwany przez JS do div.etheme-product-grid-item.outofstock
   ----------------------------------------------------------------------- */
.bpoos-badge {
    position:    absolute;
    top:         10px;
    left:        10px;
    z-index:     99;
    background:  rgba(20, 20, 20, .82);
    color:       #fff;
    font-size:   11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:     4px 10px;
    border-radius: 3px;
    pointer-events: none;
    line-height: 1.5;
    white-space: nowrap;
}

/* Badge sam w sobie nigdy nie wyszarzamy */
div.etheme-product-grid-item.outofstock .bpoos-badge {
    opacity: 1 !important;
    filter:  none !important;
}

/* -----------------------------------------------------------------------
   XStore - zachowaj widocznosc wishlist
   ----------------------------------------------------------------------- */
div.etheme-product-grid-item.outofstock .et-wishlist,
div.etheme-product-grid-item.outofstock .yith-wcwl-add-to-wishlist,
div.etheme-product-grid-item.outofstock .product-links-icons {
    opacity: 1 !important;
    filter:  none !important;
}

/* -----------------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .bpoos-badge {
        font-size: 9px;
        padding:   3px 7px;
        top:       7px;
        left:      7px;
    }
}