/*
 * Styles for Out of Stock products in WoodMart theme
 */

/* 
   این کلاس (.outofstock) توسط ووکامرس به صورت خودکار به محصولاتی
   که موجودی آن‌ها صفر است، اضافه می‌شود.
*/

/* ۱. انتخاب والد اصلی محصول که کلاس .outofstock را دارد */
.product.outofstock {
    position: relative;
    /* لازم برای لایه رویی */
}

/* ۲. ایجاد یک لایه نیمه‌شفاف روی کل محصول */
.product.outofstock .product-element-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* رنگ خاکستری با شفافیت ۵۰٪ */
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 2;
    /* لایه را روی عکس قرار می‌دهد */
    transition: background-color 0.3s ease;
}

/* ۳. کم‌رنگ کردن خود عکس برای تاثیر بیشتر */
.product.outofstock .product-element-top .product-image-link img {
    opacity: 0.6;
    filter: grayscale(80%);
    /* عکس را کمی سیاه و سفید می‌کند */
}

/* ۴. استایل جدید برای برچسب "ناموجود" */
.product.outofstock .outofstock-label {
    background-color: #8a8a8a !important;
    /* رنگ خاکستری تیره */
    color: #fff !important;
    font-weight: bold;
    border-radius: 4px;
    padding: 5px 12px;
    z-index: 3;
    /* برچسب را روی لایه خاکستری نمایش می‌دهد */

    /* حذف استایل‌های پیش‌فرض قالب */
    width: auto;
    height: auto;
    line-height: normal;
    text-align: center;
}

/* ۵. جلوگیری از تغییر رنگ لایه رویی هنگام هاور */
.product.outofstock:hover .product-element-top::after {
    background-color: rgba(235, 235, 235, 0.6);
}

/* ۶. (اختیاری) تغییر شکل موس روی محصولات ناموجود */
.product.outofstock a {
    cursor: not-allowed;
}