.elementor-708 .elementor-element.elementor-element-4b9cab0 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-708 .elementor-element.elementor-element-4b9cab0{--wd-cat-brd-radius:50%;}.elementor-708 .elementor-element.elementor-element-4b9cab0 div.product-category .wd-entities-title{font-size:18px;}@media(max-width:1024px){.elementor-708 .elementor-element.elementor-element-4b9cab0 div.product-category .wd-entities-title{font-size:16px;}}@media(max-width:767px){.elementor-708 .elementor-element.elementor-element-4b9cab0 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-708 .elementor-element.elementor-element-4b9cab0 div.product-category .wd-entities-title{font-size:12px;}}/* Start custom CSS for wd_product_categories, class: .elementor-element-4b9cab0 *//* ==========================================
   ۱. حل مشکل وسط‌چین نشدن (تبدیل گرید به فلکس)
   ========================================== */
.elementor-708 .elementor-element.elementor-element-4b9cab0 .wd-grid-g {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* خواندن تعداد ستون‌های المنتور و تنظیم عرض آیتم‌ها */
.elementor-708 .elementor-element.elementor-element-4b9cab0 .category-grid-item {
    flex: 0 0 auto !important;
    width: calc(100% / var(--wd-col-lg) - var(--wd-gap-lg)) !important;
}

/* تنظیمات خودکار برای تبلت */
@media (max-width: 1024px) {
    .elementor-708 .elementor-element.elementor-element-4b9cab0 .category-grid-item {
        width: calc(100% / var(--wd-col-md) - var(--wd-gap-lg)) !important;
    }
}

/* تنظیمات خودکار برای موبایل */
@media (max-width: 767px) {
    .elementor-708 .elementor-element.elementor-element-4b9cab0 .category-grid-item {
        width: calc(100% / var(--wd-col-sm) - var(--wd-gap-sm)) !important;
    }
}

/* ==========================================
   ۲. ثابت موندن کادر عاجی + اصلاح پدینگ موبایل
   ========================================== */
.elementor-708 .elementor-element.elementor-element-4b9cab0 .wd-cat-thumb {
    background-color: #F8F5EF !important;
    padding: 20px !important; /* پدینگ  برای دسکتاپ */
    border: 1px solid transparent !important;
    transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* 💎  ریسپانسیو: کاهش پدینگ در موبایل برای بزرگ شدن کلاه 💎 */
@media (max-width: 767px) {
    .elementor-708 .elementor-element.elementor-element-4b9cab0 .wd-cat-thumb {
        padding: 8px !important; 
    }
}

/* موقع هاور، فقط سایه و یه حاشیه محو به کادر اضافه میشه */
.elementor-708 .elementor-element.elementor-element-4b9cab0 .category-grid-item:hover .wd-cat-thumb {
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.07) !important;
    border-color: #ECEAE4 !important;
}

/* ==========================================
   ۳.  پرش و زوم فقط برای عکس کلاه
   ========================================== */
.elementor-708 .elementor-element.elementor-element-4b9cab0 .wd-cat-image img {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.elementor-708 .elementor-element.elementor-element-4b9cab0 .category-grid-item:hover .wd-cat-image img {
    transform: translateY(-8px) scale(1.05) !important; 
}/* End custom CSS */