/* ═══════════════════════════════════════════
   Narobazar — Global WooCommerce Styles
   ═══════════════════════════════════════════ */

/* Out-of-stock products: greyscale image
   Woodmart uses .product-grid-item.outofstock (no hyphens, from WC core) */
.product-grid-item.outofstock .product-image-link img,
.product-grid-item.outofstock .product-element-top img,
li.product.outofstock .product-image-link img,
li.product.outofstock .wp-post-image,
.naro-product-card.out-of-stock .naro-product-img {
    filter: grayscale(100%) !important;
    opacity: 0.75 !important;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Slightly restore on hover */
.product-grid-item.outofstock:hover .product-image-link img,
.product-grid-item.outofstock:hover .product-element-top img,
li.product.outofstock:hover .product-image-link img,
li.product.outofstock:hover .wp-post-image,
.naro-product-card.out-of-stock:hover .naro-product-img {
    filter: grayscale(40%) !important;
    opacity: 0.85 !important;
}

/* Single product page: greyscale when out of stock */
.single-product div.product.outofstock .woocommerce-product-gallery img,
.single-product div.product.outofstock .product-images img {
    filter: grayscale(100%) !important;
    opacity: 0.75 !important;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hide Woodmart's default "ناموجود" badge label */
.product-grid-item.outofstock .product-labels .out-of-stock.product-label,
.product-labels .out-of-stock.product-label,
li.product.outofstock .product-labels .out-of-stock {
    display: none !important;
}

/* "ناموجود" text overlay on the greyscale product image */
.product-grid-item.outofstock .product-image-link,
li.product.outofstock .product-image-link,
.naro-product-card.out-of-stock .naro-product-thumb {
    position: relative;
}

.product-grid-item.outofstock .product-image-link::after,
li.product.outofstock .product-image-link::after,
.naro-product-card.out-of-stock .naro-product-thumb::after {
    content: "ناموجود";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.75);
    color: #555;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0.5px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════
   Product Carousel — Left/Right Fade Edges
   ═══════════════════════════════════════════ */
.wd-carousel-container.slider-type-product {
    position: relative;
}

.wd-carousel-container.slider-type-product::before,
.wd-carousel-container.slider-type-product::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 5;
    pointer-events: none;
}

.wd-carousel-container.slider-type-product::before {
    right: 0;
    background: linear-gradient(to right, transparent, #fff);
}

.wd-carousel-container.slider-type-product::after {
    left: 0;
    background: linear-gradient(to left, transparent, #fff);
}

/* Also apply to related products section on product pages */
.related.products .wd-carousel-container::before,
.related.products .wd-carousel-container::after,
.upsells.products .wd-carousel-container::before,
.upsells.products .wd-carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 5;
    pointer-events: none;
}

.related.products .wd-carousel-container::before,
.upsells.products .wd-carousel-container::before {
    right: 0;
    background: linear-gradient(to right, transparent, #fff);
}

.related.products .wd-carousel-container::after,
.upsells.products .wd-carousel-container::after {
    left: 0;
    background: linear-gradient(to left, transparent, #fff);
}

.related.products .wd-carousel-container,
.upsells.products .wd-carousel-container {
    position: relative;
}