.elementor-604 .elementor-element.elementor-element-9d2a7b0 .wd-products-with-bg, .elementor-604 .elementor-element.elementor-element-9d2a7b0 .wd-products-with-bg .wd-cat{--wd-prod-bg:#00000000;--wd-bordered-bg:#00000000;}/* Start custom CSS for wd_product_categories, class: .elementor-element-9d2a7b0 *//* ==========================================================================
   تصميم مخصص لهوفر تصنيفات ووكومرس / اليمنتور / ووردمارت (wd-cat-*)
   السلوك:
   - افتراضيًا: الصورة تملأ الكارت بالكامل، والاسم مخفي تمامًا.
   - عند الهوفر: الصورة تنزاح ناحية اليسار مع تصغير خفيف (بدون تغيير قيم
     width/height بتاعتها، تصغير عن طريق transform: scale فقط)، واسم
     التصنيف يظهر بشكل smooth ناحية اليمين وينزل لتحت بمقدار ثابت (26px).
   - فيه ظبط خاص لشاشات الجوال في آخر الملف (media query).
   - عدّل نسبة translateX(-38%) و scale(.85) تحت لو حابب تتحكم في مقدار
     الإزاحة والتصغير.
   ========================================================================== */

/* الخلفية الثابتة لكل الكروت - صورة بدل اللون */
.wd-cat-wrap .wd-cat-inner.wrapp-category {
  --cat-bg-image: url('http://tanagm.com/wp-content/uploads/2026/08/Frame-2147223140.png');
  --anim-speed: .5s;

  position: relative;
  /* لا يوجد overflow:hidden هنا عمدًا، عشان الصورة متتقصش وهي بتتحرك.
     الزوايا الدائرية للخلفية بتتظبط لوحدها عن طريق border-radius
     حتى من غير overflow:hidden، لأنه خاصية على نفس العنصر مش على أبناءه. */
  height: 182px;
  border-radius: 16px;
  background-image: var(--cat-bg-image);
  background-size: cover;      /* غيّرها لـ contain لو الصورة شكل/شعار مش خلفية ممتدة */
  background-position: center;
  background-repeat: no-repeat;
}

/* الثيم بيحط overflow:hidden على أكتر من عنصر هنا أصلاً (كان مستخدم لتأثير الزوم القديم)
   فلازم نلغيه بالقوة من على كل العناصر دي عشان الصورة متتقصش نهائيًا */
.wd-cat-wrap,
.wd-cat-inner.wrapp-category,
.wd-cat-inner.wrapp-category .wd-cat-thumb.category-image-wrapp,
.wd-cat-inner.wrapp-category .wd-cat-image.category-image {
  overflow: visible !important;
}

/* عشان الكارت اللي عليه هوفر يظهر فوق باقي الكروت المجاورة وهو بيتحرك بره حدوده */
.wd-cat-wrap:hover {
  position: relative;
  z-index: 5;
}

/* حاوية الصورة: تملأ الكارت بالكامل افتراضيًا، وبنفس حجمها دايمًا */
.wd-cat-inner.wrapp-category .wd-cat-thumb.category-image-wrapp {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform var(--anim-speed) cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}

.wd-cat-inner.wrapp-category .wd-cat-thumb.category-image-wrapp img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* الحجم يفضل ثابت في كل الحالات */
}

/* صندوق اسم التصنيف: مخفي تمامًا افتراضيًا، وموضعه في المنتصف (عموديًا) وناحية اليمين */
.wd-cat-inner.wrapp-category .wd-cat-content.hover-mask {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 22px !important;
  left: auto !important;
  max-width: 55%;
  z-index: 1;
  text-align: right;
  opacity: 0;
  transform: translateY(-50%) translateX(18px);
  transition: opacity .45s ease .08s, transform .45s ease .08s;
  pointer-events: none;
  background: none !important; /* إلغاء أي خلفية hover-mask افتراضية من الثيم */
}

.wd-cat-inner.wrapp-category .wd-cat-content .wd-entities-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #2b2b2b;
}

.wd-cat-inner.wrapp-category .wd-cat-content .wd-cat-count a {
  font-size: 12px;
  opacity: .75;
}

/* ============================ حالة الهوفر ============================ */
/* الصورة بتتحرك ناحية اليسار وتصغر شوية (مش scale كبير زي الأول، مجرد تصغير خفيف) */
.wd-cat-inner.wrapp-category:hover .wd-cat-thumb.category-image-wrapp,
.wd-cat-inner.wrapp-category.wd-cat-active .wd-cat-thumb.category-image-wrapp {
  transform: translateX(-38%) scale(.85);
}

.wd-cat-inner.wrapp-category:hover .wd-cat-content.hover-mask,
.wd-cat-inner.wrapp-category.wd-cat-active .wd-cat-content.hover-mask {
  opacity: 1;
  /* calc بدل النسبة المئوية عشان النزول يبان بوضوح مهما كان ارتفاع صندوق النص */
  transform: translateY(calc(-50% + 26px)) translateX(0) !important;
  pointer-events: auto;
}

/* رابط الملء الشفاف يبقى فوق كل حاجة عشان الضغط يشتغل */
.wd-cat-inner.wrapp-category .wd-fill.category-link {
  z-index: 3;
}

/* ============================ ظبط شاشة الجوال ============================ */
@media (max-width: 767px) {
  .wd-cat-wrap .wd-cat-inner.wrapp-category {
    height: 130px;
    border-radius: 12px;
  }

  .wd-cat-inner.wrapp-category .wd-cat-content.hover-mask {
    right: 12px !important;
    max-width: 62%;
  }

  .wd-cat-inner.wrapp-category .wd-cat-content .wd-entities-title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }

  .wd-cat-inner.wrapp-category .wd-cat-content .wd-cat-count a {
    font-size: 10px;
  }

  /* على الجوال الإزاحة أقل عشان الكارت أصغر، والتصغير أوضح شوية عشان يفضل مكان كافي للنص */
  .wd-cat-inner.wrapp-category:hover .wd-cat-thumb.category-image-wrapp,
  .wd-cat-inner.wrapp-category.wd-cat-active .wd-cat-thumb.category-image-wrapp {
    transform: translateX(-30%) scale(.78);
  }
}/* End custom CSS */