/* ====== CSS: قص العنوان لسطرين ====== */
.product-card__title,
.product-title,
.card__heading,
.grid-product__title,
.product-card__title a,
.product-title a,
.card__heading a,
.grid-product__title a {
  /* الجزء الأهم لقص النص بعد سطرين */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  /* السطر ده مهم جداً عشان نلغي أي أوامر بتفرض النص يبقى سطر واحد في الموبايل */
  white-space: normal !important; 
  
  /* خصائص إضافية لضمان النتيجة الصحيحة */
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  line-height: 1.4; /* مش محتاجين !important هنا عادةً */
}








/* ===== كود لتغيير لون عنصر القائمة عند مرور الماوس ===== */

/* الخطوة الأولى (اختيارية لكن بتدي شكل احترافي): 
  الكود ده بيخلي تغيير اللون يحصل بشكل ناعم وسلس (Transition) 
  بدل ما اللون "ينط" فجأة.
*/
.main-menu .root-level > a {
  transition: color 0.3s ease;
}

/* الخطوة الثانية (الكود الأساسي):
  الكود ده هو اللي بيغير اللون للون اللي اخترته لما الماوس يقف على العنصر.
*/
.main-menu .root-level:hover > a {
  color: #01BAAD !important;
}








/* ===== كود لتغيير لون أي عنصر في الـ "ساب منيو" عند مرور الماوس ===== */

/* الخطوة الأولى (اختيارية لكن بتدي شكل احترافي): 
  الكود ده بيخلي تغيير اللون يحصل بشكل ناعم وسلس (Transition) 
  لأي لينك جوه أي ساب منيو.
*/
.sub-menu a {
  transition: color 0.3s ease;
}

/* الخطوة الثانية (الكود الأساسي):
  الكود ده هو اللي بيغير اللون للون اللي اخترته لما الماوس يقف على العنصر.
*/
.sub-menu li:hover > a {
  color: #B8FFFA !important;
}










/* ===== كود لتغيير حجم خط المنيو الرئيسية في الديسك توب ===== */
.main-menu .root-level > a {
  font-size: 15px !important;
}