/* Add custom CSS styles below */ 
/* ==========================================================================
   قسم "قصص نجاحنا منكم" - كروت مربعة بحجم معقول + ظل وحدود مظللة
   الكود ده مخصص لقسم التقييمات فقط ومش بيأثر على أي حاجة تانية بالمتجر
   ========================================================================== */

#enhanced-testimonials-slider-1 {
  --testi-section-bg: #faf6ec;
  --testi-card-bg: #fffdf9;
  --testi-border: rgba(0, 0, 0, 0.15);
  --testi-text-main: #262626;
  --testi-text-sub: #6f6a61;
  --testi-accent: #e91e63;
}

#enhanced-testimonials-slider-1.s-block--enhanced-testimonials {
  background: var(--testi-section-bg) !important;
  padding: 50px 0 !important;
}

#enhanced-testimonials-slider-1 .lp-container,
#enhanced-testimonials-slider-1 .header,
#enhanced-testimonials-slider-1 .slider-wrap,
#enhanced-testimonials-slider-1 .lp-title {
  background: transparent !important;
}

#enhanced-testimonials-slider-1 .lp-title__main {
  color: var(--testi-text-main) !important;
  font-weight: 700 !important;
}

#enhanced-testimonials-slider-1 .lp-title__sub {
  color: var(--testi-text-sub) !important;
  opacity: 1 !important;
}

#enhanced-testimonials-slider-1 .swiper-wrapper {
  align-items: flex-start !important;
}

#enhanced-testimonials-slider-1 .swiper-slide {
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* --- الكارت المربع بحجم ثابت معقول --- */
#enhanced-testimonials-slider-1 .slide-card {
  background: var(--testi-card-bg) !important;
  border: 1.5px solid var(--testi-border) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 300px !important;   /* أقصى عرض للكارت عشان يفضل مربع بحجم معقول */
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.14),
    0 24px 48px rgba(0, 0, 0, 0.10) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#enhanced-testimonials-slider-1 .slide-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.14),
    0 18px 32px rgba(0, 0, 0, 0.18),
    0 32px 60px rgba(0, 0, 0, 0.12) !important;
}

#enhanced-testimonials-slider-1 .slide-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
  padding: 24px 20px !important;
  background: transparent !important;
}

#enhanced-testimonials-slider-1 .avatar {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
}

#enhanced-testimonials-slider-1 .name {
  color: var(--testi-text-main) !important;
  font-weight: 700 !important;
  margin: 12px 0 8px !important;
}

#enhanced-testimonials-slider-1 .text {
  color: var(--testi-text-sub) !important;
  opacity: 1 !important;
  line-height: 1.8 !important;
  font-size: 13.5px !important;
}

#enhanced-testimonials-slider-1 .nav-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--testi-border) !important;
  color: var(--testi-text-main) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#enhanced-testimonials-slider-1 .nav-btn:hover {
  background: var(--testi-accent) !important;
  border-color: var(--testi-accent) !important;
  color: #ffffff !important;
}

#enhanced-testimonials-slider-1 .testimonials-pagination .swiper-pagination-bullet {
  background: var(--testi-text-main) !important;
  opacity: 0.35 !important;
}

#enhanced-testimonials-slider-1 .testimonials-pagination .swiper-pagination-bullet-active {
  background: var(--testi-accent) !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  #enhanced-testimonials-slider-1 .slide-card {
    max-width: 240px !important;
  }
  #enhanced-testimonials-slider-1 .slide-content {
    padding: 20px 16px !important;
  }


  /* ==========================================================================
   إصلاح قص نص زرار "أضف إلى السلة" على الموبايل
   ========================================================================== */

@media (max-width: 640px) {

  /* السماح للنص يظهر كامل بدل ما يتقطع بـ "..." */
  .s-button-element .s-button-text .overflow-hidden {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;   /* يسمح للنص يلف سطرين لو محتاج */
    line-height: 1.3 !important;
  }

  /* محاذاة الأيقونة والنص جنب بعض بشكل مريح */
  .s-button-element .s-button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* تصغير الخط شوية على الشاشات الصغيرة عشان الجملة تتحشر أسهل في سطر واحد */
  .s-button-element.s-button-large {
    font-size: 13px !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 10px !important;
  }

  /* تصغير الأيقونة شوية عشان تسيب مساحة أكبر للنص */
  .s-button-element .s-button-text i.sicon-cart2 {
    font-size: 14px !important;
  }
}
padding: 8px 4px !important;

  }

/* ==========================================================================
   إصلاح جدول المقارنة "لماذا doutine" - استهداف ثابت بغض النظر عن اسم الوسم العشوائي
   ========================================================================== */

[component-name="comparison"] table {
  table-layout: fixed !important;
  width: 100% !important;
}

[component-name="comparison"] th:first-child,
[component-name="comparison"] td:first-child {
  width: 40% !important;
}

[component-name="comparison"] th:nth-child(2),
[component-name="comparison"] td:nth-child(2),
[component-name="comparison"] th:nth-child(3),
[component-name="comparison"] td:nth-child(3) {
  width: 30% !important;
}

[component-name="comparison"] th,
[component-name="comparison"] td {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 640px) {
  [component-name="comparison"] th,
  [component-name="comparison"] td {
    padding: 8px 4px !important;
  }

  [component-name="comparison"] th {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  [component-name="comparison"] td:first-child {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
}
/* ==========================================================================
   إصلاح سلايدر البانر الرئيسي (Cube Effect) على الموبايل
   نسبة الصندوق مطابقة تمامًا لأبعاد الصورة الأصلية (390×588) = صفر قص وصفر فراغ
   ========================================================================== */

@media (max-width: 767px) {

  .s-block--main-slider-2 {
    padding-top: 12px !important;
  }

  #main-slider-2-0 {
    height: auto !important;
    min-height: 0 !important;
  }

  #main-slider-2-0 .swiper,
  #main-slider-2-0 .swiper-wrapper {
    height: auto !important;
  }

  #main-slider-2-0 .swiper-slide,
  #main-slider-2-0 .swiper-lazy-wrap {
    height: auto !important;
    aspect-ratio: 65 / 98 !important;
  }

  #main-slider-2-0 .swiper-lazy-wrap img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #main-slider-2-0 .swiper-pagination {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: absolute !important;
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 20 !important;
  }

  #main-slider-2-0 .swiper-pagination-bullet {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    opacity: 0.6 !important;
  }

  #main-slider-2-0 .swiper-pagination-bullet .number {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #main-slider-2-0 .swiper-pagination-bullet-active {
    opacity: 1 !important;
  }

  #main-slider-2-0 .swiper-pagination-bullet-active .number {
    font-size: 15px !important;
  }
}

/* إخفاء أيقونة القلب (المفضلة) من كروت المنتجات */
.product-entry-btn--wishlist {
    display: none !important;
}

/* تكبير حجم اللوجو - ديسكتوب */
img[src*="0cda86bf-52b1-4a55-961d-40ccffa4b917"] {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
}

/* حجم اللوجو على الموبايل */
@media (max-width: 767px) {
    img[src*="0cda86bf-52b1-4a55-961d-40ccffa4b917"] {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
    }
}

/* إخفاء مربع البحث */
.header__search {
    display: none !important;
}

/* إخفاء أيقونة تعدد اللغات (الكرة الأرضية) */
a[onclick*="localization::open"] {
    display: none !important;
}

/* تغيير خلفية الهيدر للون الأبيض */
.main-nav__content {
    background-color: #ffffff !important;
}

/* تعديل لون النصوص والأيقونات داخل الهيدر عشان تبان واضحة على الأبيض */
.main-nav__content,
.main-nav__content .header-icon-button,
.main-nav__content .header-icon-button i,
.main-nav__content .header-icon-button p,
.main-nav__content .header-icon-button span,
.main-nav__content .s-cart-summary-content,
.main-nav__content .s-cart-summary-total,
.main-nav__content .s-cart-summary-icon,
.main-nav__content svg path {
    color: #000000 !important;
    stroke: #000000 !important;
}

/* أيقونة زرار المنيو (الهامبرجر) */
.main-nav__content .mburger span {
    background-color: #000000 !important;
}
/* تغيير خلفية الحاوية الخارجية للهيدر (main-nav) للون الأبيض */
#main-nav.main-nav {
    background-color: #ffffff !important;
    color: #000000 !important;
}
/* إخفاء عنصري "تخفيضات" و"الماركات التجارية" من الهيدر */
#offers,
#brands {
    display: none !important;
}
.s-social-icon svg {
    display: none !important;
}
.s-social-link a {
    background-color: transparent !important;
}
.s-social-icon img {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 50%;
}