/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2026 | 16:38:36 */
/* =======================================================
   MetNet WooCommerce Loop Buttons - Custom CSS (V 3.1.1)
   Always-Visible Override & High-Performance CWV Edition.
   Performance: Scoped CSSOM Traversal, GPU translate3d, Legacy WebView Failsafe.

   ── تغییرات 3.1.1 (فیکس نمایش متن دکمه واتساپ در دسکتاپ) ──
   [فیکس ۵] چیدمان دسکتاپ هم ستونی شد (مثل موبایل): قبلاً دکمه‌ها در دسکتاپ کنار
            هم بودن و در گرید ۴ستونه عرض هر دکمه حدود ۱۱۵ پیکسل می‌شد، در حالی که
            «مشاوره واتساپ» + آیکون حدود ۱۵۰ پیکسل جا می‌خواد → متن بریده می‌شد
            (فقط «مشاوره وا» دیده می‌شد). حالا دکمه‌ها در همه سایزها تمام‌عرض و
            زیر هم‌اند → متن هیچ‌وقت بریده نمی‌شه و رفتار دسکتاپ = موبایل.
            ⚠️ اسنیپت PHP دست نخورده؛ فقط همین فایل جایگزین شه.
            نکته: کارت‌ها در دسکتاپ حدود ۵۲px بلندتر می‌شن (یک ردیف دکمه کامل).

   ── تغییرات 3.1.0 ──
   [فیکس ۱] contain-intrinsic-size با کلیدواژهٔ auto: مرورگر بعد از اولین رندر،
            ارتفاع واقعی هر کارت رو به‌خاطر می‌سپاره → حذف پرش اسکرول‌بار (CLS).
            خط قبلی (بدون auto) به‌عنوان fallback مرورگرهای قدیمی موند
   [فیکس ۲] min-width:0 روی دکمه + سه‌نقطه روی متن: اگر روزی جا کم شد، متن
            «…» می‌گیره به‌جای بریدن نصفه‌کاره
   [فیکس ۳] حذف دستوراتِ «مرده» (تضاد Specificity با CSS داخل اسنیپت PHP):
            font-size:13px / padding:10px 5px / border-radius:8px / font-weight:800.
            ⚠️ استایل پایهٔ دکمه فقط از اسنیپت PHP میاد؛ این فایل فقط: Override
            وودمارت + تضمین همیشه‌دیده‌شدن + پرفورمنس + هاور
   [فیکس ۴] prefers-reduced-motion حالا هاور دسکتاپ رو هم می‌پوشونه (سلکتور هاور
            Specificity بالاتری داشت و این مدیا کوئری رو بی‌اثر می‌کرد)
   ======================================================= */

/* ۱. خنثی‌سازی هوشمند کانتینرهای والد وودمارت بدون تخریب موتور رندر پوسته */
.product-grid-item .fade-in-block,
.product-grid-item .wd-bottom-actions {
    position: static !important;
    display: block !important; 
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* حل باگ مهار تداخل دکمه‌های فرعی قالب (نظیر علاقه‌مندی و مقایسه) در ساختار رندرینگ وودمارت 
   [حل باگ ۱]: حذف flex-direction: column جهت ملوگیری از خرابی چیدمان سایر ابزارک‌های قالب */
.product-grid-item .wd-buttons {
    position: static !important;
    display: flex !important; /* تبدیل صریح به فلکس جهت پایداری ۱۰۰٪ لایه‌ها */
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* [حل باگ ۲]: حل مشکل عمق سلکتور (Selector Depth) جهت جلوگیری از پیمایش عمیق درخت DOM توسط مرورگر */
.wd-add-btn .add_to_cart_button,
.wd-add-btn .product_type_simple,
.wd-add-btn .product_type_variable {
    display: none !important;
}

/* ۳. مهار کادرهای اضافی هاور قالب و تولتیپ‌ها */
.mn-loop-btn .wd-tooltip-label,
.product-grid-item .hover-content {
    display: none !important;
}

/* [حل باگ ۸ و ۹]: شاهکار بهینه‌سازی سرعت اسکرول در موبایل (سرعت رندر کارت‌های خارج از صفحه به تعویق می‌افتد) */
.product-grid-item {
    min-height: auto !important; 
    content-visibility: auto; /* عدم رندر کارت‌های محصول قبل از اسکرول کاربر نزدیک آنها */
    /* رزرو ارتفاع حدودی ۵۰۰ پیکسل جهت جلوگیری از پرش چیدمان */
    contain-intrinsic-size: 500px;
    /* [فیکس ۱]: با auto، بعد از اولین رندر ارتفاعِ «واقعی» هر کارت به‌خاطر سپرده
       می‌شه و دیگه fallback خطا نمی‌ده → حذف پرش اسکرول‌بار (CLS).
       این خط برای مرورگرهای جدیدتره و خط بالا رو بازنویسی می‌کنه؛ مرورگرهایی
       که auto رو نمی‌شناسن (مثل Chrome 85..97) همون خط بالا رو استفاده می‌کنن */
    contain-intrinsic-size: auto 500px;
}

.product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
    padding-bottom: 15px !important;
    position: relative !important;
    z-index: 20 !important;
}

/* ۴. کادر دربرگیرنده دکمه‌های ما (همیشه روشن و ثابت - تضمین ۱۰۰٪ عدم غیب شدن) */
.mn-loop-buttons-wrapper {
    display: flex !important;
    /* [فیکس ۵]: دکمه‌ها در همه سایزها زیر هم — در دسکتاپِ گرید ۴ستونه، کنار هم
       جا برای «مشاوره واتساپ» نیست و متن بریده می‌شد */
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px;
    margin-top: 15px; 
    padding: 0 10px 10px 10px; 
    
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 50 !important;
    
    /* [حل باگ ۱]: ایزوله‌سازی رندر تیکر جهت مهار repaintهای بیهوده در اسکرول موبایل */
    contain: layout paint style; 
}

/* ۵. کپسول دکمه‌های مت‌نت
   [فیکس ۳]: فقط خواصی موندن که واقعاً اینجا برنده‌ستن؛ استایل پایه (فونت ۱۴px،
   وزن ۶۰۰، پدینگ ۱۲/۱۴، گوشه ۱۲px، حداقل ارتفاع ۴۴px) از اسنیپت PHP میاد */
.mn-loop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important; 
    
    /* [فیکس ۲]: اجازهٔ کوچک‌شدن در فضای باریک. بدون این، min-width:auto
       پیش‌فرضِ فلکس باعث می‌شد دکمه از لبهٔ کارت بزنه بیرون و کلیپ شه */
    min-width: 0;
    
    overflow: hidden;
    
    font-family: var(--wd-text-font), "Vazirmatn", Tahoma, sans-serif; 
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap; 
    
    /* [حل باگ ۶]: مهار تاخیر ۳۰۰ میلی‌ثانیه‌ای تاچ در موبایل جهت بهبود INP */
    touch-action: manipulation;
    
    /* [حل باگ ۲]: ترفیع سخت‌افزاری استاتیک کارت گرافیک بدون مصرف بیهوده VRAM */
    transform: translate3d(0, 0, 0) !important;
    
    /* [حل باگ ۲]: کاهش محدوده ریپینت دکمه‌ها */
    contain: layout paint style;
    
    /* حل باگ ۳: لغو ترانزیشن عمومی جهت مهار تاخیر تاچ در موبایل */
    transition: none !important;
}

/* [فیکس ۲]: متن دکمه وقتی واقعاً جا کمه «…» می‌گیره، به‌جای بریدن نصفه‌کاره */
.mn-loop-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mn-loop-btn::before, 
.mn-loop-btn::after { 
    display: none !important; 
}

/* [حل باگ ۷]: ملوگیری از پرش‌های ریز تراز متن و آیکون (Micro CLS) */
.mn-loop-btn svg { 
    width: 16px !important; 
    height: 16px !important; 
    flex-shrink: 0 !important; 
    margin: 0 !important; 
    display: block !important; 
}

.mn-loop-wa svg { 
    stroke: none !important; 
}

/* رنگ‌های دکمه‌ها */
.mn-loop-contact { 
    background: #5b21b6 !important; /* بنفش عمیق مت‌نت */
}
.mn-loop-wa { 
    background: #059669 !important; /* سبز استاندارد واتساپ */
}

/* افکت هاور روی دسکتاپ */
@media (hover: hover) and (pointer: fine) {
    .mn-loop-btn {
        /* [حل باگ ۳]: فعال‌سازی لایه گرافیکی (will-change) منحصراً در زمان هاور دسکتاپ */
        will-change: transform;
        /* [حل باگ ۴]: حذف ترانزیشن سنگین سایه (box-shadow) جهت سبک‌سازی لود */
        transition: transform 0.18s ease-out, background-color 0.18s ease-out !important;
    }
    .mn-loop-contact:hover { 
        background: #4c1d95 !important; 
        transform: translate3d(0, -2px, 0) !important; 
        /* [حل باگ ۵]: کاهش بلور سایه برای جلوگیری از پردازش‌های سنگین Rasterization */
        box-shadow: 0 1px 4px rgba(91, 33, 182, 0.15) !important; 
    }
    .mn-loop-wa:hover { 
        background: #047857 !important; 
        transform: translate3d(0, -2px, 0) !important; 
        box-shadow: 0 1px 4px rgba(5, 150, 105, 0.15) !important;
    }
}

.mn-loop-btn:focus-visible {
    outline: 2px solid #1c39bb !important;
    outline-offset: 3px !important;
}

/* --- تنظیمات موبایل و تبلت --- */
@media (max-width: 1024px) {
    .mn-loop-buttons-wrapper {
        padding: 0 5px 10px 5px;
    }
    .mn-loop-btn {
        width: 100% !important;
    }
}

/* حل باگ ۶ + [فیکس ۴]: مهار انیمیشن برای دسترسی‌پذیری بهتر کاربران حساس به حرکت
   (سلکتورهای هاور هم اضافه شدن، وگرنه به‌خاطر Specificity بالاترِ هاور بی‌اثر بودن) */
@media (prefers-reduced-motion: reduce) {
    .mn-loop-buttons-wrapper,
    .mn-loop-btn,
    .mn-loop-contact:hover,
    .mn-loop-wa:hover {
        transition: none !important;
        transform: none !important;
    }
}