/* ------------------ ألوان السلة والسعر في كامل الموقع ------------------ */

/* تعريف اللون الدموي */
:root {
  --g-blood: #b10016;   /* الأحمر الدموي */
}

/* ===== 1) تلوين السعر في كامل الموقع ===== */
.price-wrapper .total-price,
.price-wrapper .total-price i,
.s-product-price,
.product-price,
.product-card .price,
.s-block--product .price,
.total-price {
  color: var(--g-blood) !important;
}

/* ===== 2) زر السلة الرئيسي (جميع الأزرار) ===== */
salla-add-product-button .s-button-element,
button.add-to-cart,
.s-button.s-button-primary,
button.s-button-primary,
.product-card button,
.s-product-card button,
.custom-salla-product-card button,
.salla-add-product-button .s-button-element {
  background-color: var(--g-blood) !important;
  border-color: var(--g-blood) !important;
  color: #fff !important; /* نص الزر أبيض */
}

/* ===== 3) أيقونة السلة داخل الزر ===== */
salla-add-product-button .s-button-text i,
.s-button-element i,
button.add-to-cart i,
.s-product-card button i,
.custom-salla-product-card button i {
  color: #fff !important; /* أيقونة السلة — أبيض */
}

/* ===== 4) حالات الهوفر ===== */
salla-add-product-button .s-button-element:hover,
button.s-button-primary:hover,
.s-button.s-button-primary:hover {
  background-color: #8c0012 !important; /* غامق شوي على الهوفر */
  border-color: #8c0012 !important;
}

/* ------------------ نهاية ألوان السلة والسعر ------------------ */



/* ==================================================
   ------------------ 1) سلايدر الهوم (بنر لابتوب + جوال) ------------------
   - إخفاء السلايدر لحين تهيئة Swiper (منع الفلاش)
   - ضبط الصور بدون قص
   - منطق لابتوب/جوال حتى 20 شريحة (زوجي = لابتوب، فردي = جوال)
================================================== */

/* إخفاء السلايدر حتى يتهيأ Swiper */
salla-slider#default-home-slider-0 > .swiper.s-slider-container {
  opacity: 0 !important;
}

/* إظهاره بعد التهيئة */
salla-slider#default-home-slider-0 > .swiper.s-slider-container.swiper-initialized {
  opacity: 1 !important;
  transition: opacity 0.25s ease;
}

/* شكل الصور داخل السلايدر */
salla-slider#default-home-slider-0 .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* لا نخفي أي سلايد بشكل عام */
salla-slider#default-home-slider-0 .swiper-slide {
  display: block !important;
  visibility: visible !important;
}

/* منطق: شرائح لابتوب/جوال بناء على index
   - حتى 768px = موبايل
   - من 768px وفوق = لابتوب/تابلت
*/

/* --- شرائح اللابتوب/التابلت: نخفي شرائح الموبايل (الفردية) --- */
@media (min-width: 768px) {
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="1"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="3"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="5"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="7"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="9"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="11"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="13"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="15"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="17"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="19"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="1"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="3"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="5"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="7"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="9"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="11"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="13"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="15"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="17"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="19"] {
    display: none !important;
  }
}

/* --- شرائح الموبايل: نخفي شرائح اللابتوب (الزوجية) --- */
@media (max-width: 767px) {
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="0"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="2"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="4"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="6"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="8"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="10"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="12"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="14"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="16"],
  salla-slider#default-home-slider-0 .swiper-slide[data-swiper-slide-index="18"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="0"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="2"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="4"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="6"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="8"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="10"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="12"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="14"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="16"],
  salla-slider#default-home-slider-0 .swiper-slide-duplicate[data-swiper-slide-index="18"] {
    display: none !important;
  }
}

/* لمس طبيعي للسلايدر (كل الأجهزة) */
#default-home-slider-0 {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  user-select: none;
}

/* ------------------ نهاية سلايدر الهوم ------------------ */





/* ==================================================
   ------------------ 2) الهيدر + تكبير الشعار ------------------
   - تكبير الشعار (كمبيوتر + جوال)
   - تقليل ارتفاع الهيدر على الكمبيوتر فقط
================================================== */

/* إلغاء أي تحريك قديم للشعار */
.header-components-inner .navbar-brand img,
.store-header .navbar-brand img {
  transform: none !important;
}

/* جعل منطقة الشعار مضبوطة على حجمه بدون مساحات غريبة */
.header-components-inner .navbar-brand,
.store-header .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
}

/* الهيدر أنحف على الكمبيوتر فقط */
@media (min-width: 1024px) {
  .store-header .header-components-inner {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    min-height: 1px !important;
  }

  /* تكبير خطوط القائمة داخل الهيدر (كمبيوتر فقط) */
  .main-menu > li > a span {
    font-size: 20px !important;
    font-weight: 600 !important;
  }
}

/* تكبير الشعار في الكمبيوتر */
@media (min-width: 769px) {
  .store-header .header-components-inner .navbar-brand img {
    width: 80px !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
  }

  /* تحريك بسيط حسب اللغة */
  html[dir="rtl"] .store-header .header-components-inner .navbar-brand img {
    margin-right: 10px !important;
    margin-left: 0 !important;
  }

  html[dir="ltr"] .store-header .header-components-inner .navbar-brand img {
    margin-left: 10px !important;
    margin-right: 0 !important;
  }
}

/* تكبير الشعار في الجوال (استثناء مسموح) */
@media (max-width: 768px) {
  .header-components-inner .navbar-brand img,
  .store-header .navbar-brand img {
    width: 70px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* ------------------ نهاية الهيدر + تكبير الشعار ------------------ */





/* ==================================================
   ------------------ 3) ألوان عامة + تهيئة بطاقات المنتجات ------------------
   - تعريف اللون الدموي
   - تلوين السعر والسلة (يعمل على كل الأجهزة)
   - ضبط الخلفيات والظلال للبطاقات
================================================== */

/* اللون الدموي الأساسي */
:root {
  --g-blood: #b10016;
}

/* إزالة الخلفية والظل عن جميع بطاقات المنتجات في كل صفحات الموقع (كمبيوتر + جوال) */
.product-card,
.product-card .card,
.s-product-card,
.s-product-card .card,
.grid-cols-2 .card,
.grid-cols-3 .card,
.grid-cols-4 .card,
.s-products-grid .card,
.s-block--product .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* إزالة أي خلفية أو ظل عن قسم صورة المنتج (كل الأجهزة) */
.product-entry__image {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.product-entry__image::before,
.product-entry__image::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* لون السعر دموي (كل الأجهزة – نحافظ عليه كما طلبت) */
div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .price-wrapper .total-price,
div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .price-wrapper .total-price i {
  color: var(--g-blood) !important;
}

/* زر السلة بخلفية دموي + أيقونة بيضاء (كل الأجهزة) */
div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card salla-add-product-button .s-button-element {
  background: var(--g-blood) !important;
  border-color: var(--g-blood) !important;
  color: #fff !important;
}
div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card salla-add-product-button .s-button-text i {
  color: #fff !important;
}

/* ------------------ نهاية الألوان العامة والتهيئة ------------------ */





/* ==================================================
   ------------------ 4) بطاقات المنتجات في الصفحة الرئيسية (كمبيوتر فقط) ------------------
   - 5 منتجات في الصف
   - تكبير الصورة وتوسيطها وتحريكها داخل البطاقة
================================================== */

/* متغيرات تحكم لحجم/موضع صورة المنتج (يُستخدم في الكمبيوتر فقط) */
:root {
  --card-img-h: 200px;  /* ارتفاع مساحة الصورة */
  --move-x: -65px;      /* موجب = يمين / سالب = يسار */
  --move-y: 0px;        /* موجب = أسفل / سالب = أعلى */
  --scale-img: 1.2;     /* تكبير الصورة (1 = الحجم الأصلي) */
}

@media (min-width: 1024px) {

  /* 5 منتجات في الصف على الشاشات الكبيرة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* البطاقة نفسها أنحف ونظيفة بدون ظل */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card {
    display: block !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #eee !important;
  }

  /* منطقة الصورة داخل البطاقة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .product-entry__image {
    height: var(--card-img-h) !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* إزالة قيود الرابط حول الصورة وتكبير المساحة قليلاً */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .product-entry__image > a,
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .product-entry__image > a.relative {
    width: 110% !important;
    height: 110% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* الصورة نفسها: تكبير + تحريك + بدون قص */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .product-entry__image img,
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card img.s-product-card-image-contain {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    filter: none !important;
    transform: translate(var(--move-x), var(--move-y)) scale(var(--scale-img)) !important;
    transition: transform 0.4s ease-in-out !important;
    transform-origin: center center !important;
  }

  /* بعض الثيمات تحدد حد أقصى أثناء الوضع الأفقي — نلغيه */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card.product-entry--horizontal .product-entry__image {
    max-height: none !important;
  }

/* ------------------ تثبيت بطاقة المنتج على سطح المكتب (4 أسطر) ------------------ */
@media (min-width: 1024px) {

  /* 1) تثبيت ارتفاع البطاقة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card {
    height: 400px !important;        /* ← عدّل الرقم حسب شكل بطاقتك */
    max-height: 430px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* 2) العنوان — 4 أسطر فقط — بدون تمدد */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .s-product-card-content-title a {

    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;  /* ← 4 أسطر كما طلبت */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 15px !important;
    line-height: 1.35 !important;

    min-height: 70px !important;  /* ← يثبت المساحة */
    max-height: 70px !important;
  }

  /* 3) تثبيت مساحة السعر */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .price-wrapper {
    height: 32px !important;
    margin: 6px 0 !important;
  }

  /* 4) تثبيت مساحة السلة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card salla-add-product-button {
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


}
/* ------------------ نهاية تثبيت بطاقة المنتج على سطح المكتب ------------------ */


  /* إخفاء أي حدود/طبقات إضافية في البطاقة داخل هذه الشبكة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 custom-salla-product-card .card-border {
    display: none !important;
  }

  /* جعل تبويب المنتجات (featured) يعرض 5 أعمدة وإخفاء ما بعد العنصر الخامس */
  #featured-products-style2-2-QwWwoX_1 .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #featured-products-style2-2-QwWwoX_1 .grid > :nth-child(n+6) {
    display: none !important;
  }
}

/* ------------------ نهاية بطاقات المنتجات في الصفحة الرئيسية ------------------ */





/* ==================================================
   ------------------ 5) ترتيب أقسام الصفحة (كمبيوتر فقط) ------------------
   - رفع التصنيفات
   - رفع تبويبات المنتجات
   - ضبط أقسام بطاقات الشحن
   - تسوق حسب البراند
   - المميزات
================================================== */

/* رفع قسم "التصنيفات الرئيسية" للأعلى على الكمبيوتر فقط */
@media (min-width: 1024px) {
  #main-links-1.s-block.s-block--categories-2 {
    position: relative;
    top: -90px;
  }

  /* إنزال عنوان "تسوّق حسب القسم" قليلاً */
  #main-links-1 .mb-6.sm\:mb-8 {
    position: relative;
    top: 20px; /* غيّر القيمة حسب ما تريد */
  }

  /* رفع تبويب المنتجات (الأكثر مبيعاً / مميزة...) */
  #featured-products-style2-2.s-block.s-block-tabs {
    position: relative;
    top: -180px;
  }

  #featured-products-style2-2 .s-slider-wrapper,
  #featured-products-style2-2 .swiper.s-slider-container {
    margin-top: -30px !important;
  }

  .s-block.s-block-tabs.s-block--tabs-produtcs.overflow-x-hidden.as-slider.bg-gray-1002.tabs-initialized {
    position: relative;
    top: -300px;
  }
}

/* ضبط قسم بطاقات الشحن في قالب وسام (كمبيوتر فقط) */
@media (min-width: 1024px) {

  /* القسم الرئيسي */
  #square-static-images-4.s-block.s-block--banners {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    min-height: auto !important;
    height: auto !important;
    position: relative;
    top: -270px !important;  /* رفع القسم كامل */
  }

  /* الكونتينر الداخلي */
  #square-static-images-4 .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: 250px !important;  /* ارتفاع كامل القسم */
  }

  /* حاوية البطاقات */
  #square-static-images-4 .square-static-images-itmes {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;   /* المسافة بين الصور */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* كل بطاقة */
  #square-static-images-4 .square-static-item {
    width: 100% !important;
    max-width: 250px !important;
  }

  /* صورة البطاقة نفسها */
  #square-static-images-4 .lazy__bg {
    height: 300px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px !important;
  }

  /* عنوان القسم */
  #square-static-images-4 .s-block__title {
    font-size: 20px !important;
    margin-bottom: 120px !important;
  }

  /* إلغاء تأثيرات الهوفر الافتراضية */
  #square-static-images-4 .lazy__bg,
  #square-static-images-4 .square-static-item {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* تكبير البطاقة عند الهوفر */
  #square-static-images-4 .square-static-item:hover {
    transform: scale(1.08) !important;
    transition: 0.25s ease !important;
  }

  /* منع تكبير الصورة وحدها */
  #square-static-images-4 .square-static-item:hover .lazy__bg {
    transform: none !important;
  }

  /* رفع القسم رقم 5 لأعلى */
  #square-static-images-5.s-block.s-block--banners {
    position: relative;
    top: -150px !important;
  }

  /* رفع قسم "تسوّق حسب البراند" */
  #main-links-6.s-block.s-block--categories.categories-five {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: -140px !important;
  }

  #main-links-6 .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* قسم المميزات: رفعه، إزالة الخلفية، وتوسيط العناصر */
  section#s-block--features-8,
  section.s-block--features {
    margin-top: -80px !important;
    padding-top: 0 !important;
  }

  section#s-block--features-8 .features-home-grid,
  .features-home-wrapper,
  .s-block--features {
    background: transparent !important;
    box-shadow: none !important;
  }

  section#s-block--features-8 .features-home-grid-normal,
  section#s-block--features-8 .features-home-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
  }

  section#s-block--features-8 .s-block--features__item {
    width: 260px !important;
    height: 200px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
  }

  /* رفع سلايدر التقييمات على اللابتوب فقط */
  #testimonials-slider-7 {
    margin-top: -60px !important;
    position: relative;
    top: -60px !important;
  }
}

/* ------------------ نهاية ترتيب أقسام الصفحة على الكمبيوتر ------------------ */





/* ==================================================
   ------------------ 6) بطاقة تقييم العملاء (كل الأجهزة) ------------------
   - إطار أحمر دموي
   - تصغير الكرت وتوسيطة
================================================== */

/* إطار أحمر دموي حول بطاقة تقييم العملاء */
#testimonials-slider-7 .testimonials-itme {
  border: 3px solid #b10016 !important;
  border-radius: 20px !important;
  background-color: #ffffff !important;
  padding: 24px !important;
}

/* تصغير حجم بطاقة التقييم وتوسيطها */
#testimonials-slider-7 .testimonials-itme {
  width: 260px !important;
  height: auto !important;
  padding: 15px !important;
  border: 3px solid #b10016 !important;
  border-radius: 16px !important;
  background: #fff !important;
  margin: 0 auto !important;
}

/* ------------------ نهاية بطاقة تقييم العملاء ------------------ */

/* ------------------ بداية التعديل على التلفون (الصفحة الرئيسية فقط) ------------------ */
@media (max-width: 767px) {

  /* === 1) حل مشكلة الحد الذي يقص الصورة + تكبير الصورة === */
  
  /* مساحة الإطار الرئيسي للصورة */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image {
    height: 150px !important;
    overflow: visible !important;
  }

  /* تكبير العنصر الذي يحد الصورة (a.relative) */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image > a.relative {
    width: 180% !important;
    height: 180% !important;
    transform: translate(0, -60px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* الصورة نفسها */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image img {
    width: 300% !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }


  /* === 2) تحريك صورة البطاقة يمين/يسار === */

  :root {
    --m-shift-x: 10px;    /* موجب = يمين / سالب = يسار */
    --m-shift-y: -60px;   /* موجب = تحت / سالب = فوق */
  }

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image > a.relative {
    transform: translate(var(--m-shift-x), var(--m-shift-y)) !important;
  }


  /* === 3) تثبيت طول بطاقة المنتج بالكامل على الهوم === */

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card {
    height: 360px !important;       /* ← طول البطاقة الكامل */
    max-height: 300px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* عنوان المنتج — 4 أسطر فقط + حجم ثابت */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 13px !important;
    line-height: 1.35 !important;

    min-height: 54px !important;
    max-height: 54px !important;
  }

}
/* ------------------ نهاية التعديل على التلفون (الصفحة الرئيسية فقط) ------------------ */

/* ------------------ إخفاء السطر الفرعي تحت العنوان في الصفحة الرئيسية (الهاتف فقط) ------------------ */
@media (max-width: 767px) {
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card p.s-product-card-content-subtitle {
    display: none !important;
  }
}
/* --------------------------------------------------------------------- */
/* ------------------ تحريك صورة البطاقة على الهاتف عند اللغة العربية فقط ------------------ */
@media (max-width: 767px) {
  html[dir="rtl"] div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image > a.relative {

    /* ← غيّر قيم التحريك حسب ما يناسبك */
    transform: translate(-10px, -60px) !important;
  }
}
/* --------------------------------------------------------------------------- */
/* ------------------ رفع وتصغير قسم Featured Products Style 2 على الجوال ------------------ */
@media (max-width: 767px) {

  /* 2) تصغير حجم البطاقات داخل السلايدر */
  section#featured-products-style2-3 custom-salla-product-card {
    transform: scale(0.95) !important;  /* ← صغّر البطاقة */
    transform-origin: top center !important;
  }

  /* 3) تقليل العرض والمسافات بين البطاقات */
  section#featured-products-style2-3 .swiper-slide {
    width: 205px !important;      /* ← عرض البطاقة */
    margin-right: 0px !important; /* ← المسافة بين البطاقات */
  }

  /* 4) تصغير العنوان داخل البطاقة */
  section#featured-products-style2-3 custom-salla-product-card .s-product-card-content-title a {
    font-size: 12px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }

  /* 5) تصغير السعر والسلة */
  section#featured-products-style2-3 .price-wrapper .total-price {
    font-size: 13px !important;
  }

  section#featured-products-style2-3 salla-add-product-button .s-button-element {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}
/* ------------------ نهاية تصغير القسم على الجوال ------------------ */

/* ------------------ رفع قسم featured-products-style2-3 فقط ------------------ */
@media (max-width: 767px) {
  #featured-products-style2-3 {
    position: relative !important;
    top: -2px !important;   /* ← غيّر الرقم لزيادة أو تقليل الرفع */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* --------------------------------------------------------------------------- */

/* ------------------ إعادة زر الإعجاب للزاوية في كل بطاقات المنتجات ------------------ */

/* نجعل بطاقة المنتج نفسها مرجع للتموضع */
.s-product-card,
.product-entry,
custom-salla-product-card,
.custom-salla-product-card,
.s-product-card-fit-height {
  position: relative !important;
}

/* أي زر/أيقونة لها علاقة بالـ wishlist داخل بطاقة المنتج */
.s-product-card [class*="wishlist"],
.product-entry [class*="wishlist"],
.custom-salla-product-card [class*="wishlist"],
.salla-product-card [class*="wishlist"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: absolute !important;

  /* نستخدم inset-inline-end عشان يشتغل في العربي والإنجليزي */
  top: 10px !important;
  inset-inline-end: 10px !important;   /* يمين في RTL, يسار في LTR */

  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* أيقونة القلب داخل الزر */
.s-product-card [class*="wishlist"] i,
.product-entry [class*="wishlist"] i,
.custom-salla-product-card [class*="wishlist"] i,
.salla-product-card [class*="wishlist"] i,
[class*="wishlist"] svg {
  color: #ff3b3b !important;     /* لون القلب */
  font-size: 16px !important;
  stroke: #ff3b3b !important;
  fill: #ff3b3b !important;
}
/* ------------------ ضبط بطاقات #square-static-/* ------------------ تعديل حجم بطاقات الشحن بالكامل (الهاتف فقط) ------------------ */
@media (max-width: 767px) {

  /* الحاوية: بطاقتين جنب بعض */
  #square-static-images-4 .square-static-images-itmes {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  /* نفس أبعاد البطاقة لكل العناصر داخلها */
  #square-static-images-4 .square-static-item {
    width: calc(50% - 3px) !important; 
    height: 190px !important;                 /* ← عدّل الطول المناسب */
    max-width: calc(50% - 3px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #fff !important;
  }

  /* طبقة التحميل */
  #square-static-images-4 .square-static-item .loading-effect {
    width: 100% !important;
    height: 100% !important;
  }

  /* الصورة نفسها */
  #square-static-images-4 .square-static-item .lazy__bg {
    width: 100% !important;
    height: 100% !important;                  /* ← نفس ارتفاع البطاقة */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 14px !important;
  }

  /* إزالة المساحة الفارغة تحت الصورة */
  #square-static-images-4 .square-static-item-data {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* ------------------ نهاية التعديل ------------------ */
/* ------------------ تأثير تكبير بطاقة الشحن بالكامل (الهاتف فقط) ------------------ */
@media (max-width: 767px) {

  /* إزالة تأثيرات التحميل/Zoom القديمة */
  #square-static-images-4 .square-static-item,
  #square-static-images-4 .lazy__bg {
    transform: none !important;
    transition: none !important;
  }

  /* البطاقة الأساسية */
  #square-static-images-4 .square-static-item {
    transition: transform 0.25s ease-out !important; /* حركة ناعمة */
    will-change: transform !important;               /* يحسّن السموث */
  }

  /* عند اللمس أو الهوفر — تكبير انسيابي */
  #square-static-images-4 .square-static-item:active,
  #square-static-images-4 .square-static-item:hover {
    transform: scale(1.04) !important;   /* ← التكبير */
    transition: transform 0.25s ease-in-out !important;
  }
}
/* ------------------ تأثير تكبير بطاقة الشحن بالكامل (كمبيوتر فقط) ------------------ */
@media (min-width: 768px) {

  /* إزالة أي تأثير قديم */
  #square-static-images-4 .square-static-item,
  #square-static-images-4 .lazy__bg {
    transform: none !important;
    transition: none !important;
  }

  /* البطاقة الأساسية */
  #square-static-images-4 .square-static-item {
    transition: transform 0.25s ease-out !important;  /* سمووث */
    will-change: transform !important;
    cursor: pointer !important;  /* يعطي إحساس click */
  }

  /* عند تمرير الماوس (Hover) */
  #square-static-images-4 .square-static-item:hover {
    transform: scale(1.05) !important;               /* تكبير خفيف جميل */
    transition: transform 0.25s ease-in-out !important;
  }
}

/* تحريك صورة بطاقة المنتج إذا كانت الصفحة باللغة الإنجليزية */

/* على الكمبيوتر (ديسكتوب) */
@media (min-width: 1024px) {
  html[dir="ltr"] {
    --move-x: 70px;   /* موجب = يمين, سالب = يسار */
    /* مثال: 
       30px = يمين
      -30px = يسار
    */
  }
}

/* تحريك صورة بطاقة المنتج فوق/تحت في الكمبيوتر — يعمل على اللغتين */
@media (min-width: 1024px) {
  :root {
    --move-y: 20px;   /* سالب = فوق / موجب = تحت */
  }

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image img {
    transform: translate(
      var(--move-x, 0px),
      var(--move-y)
    ) scale(var(--scale-img, 1.1)) !important;
  }
}

/* تحريك صورة بطاقة المنتج فوق/تحت في الجوال — يعمل على اللغتين */
@media (max-width: 767px) {
  :root {
    --m-shift-y: -40px;   /* سالب = فوق / موجب = تحت */
  }

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image > a.relative {
    transform: translate(
      var(--m-shift-x, 0px),
      var(--m-shift-y)
    ) !important;
  }
}

@media (min-width: 1024px) {
  /* فك التثبيت عن ارتفاع العنوان */
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .s-product-card-content-title a {
    min-height: auto !important;
    max-height: none !important;
  }
}

/* تحريك نص بطاقة المنتج (الاسم + الوصف + السعر) على اللابتوب فقط */
@media (min-width: 1024px) {

  :root {
    --text-shift-y: 45px;   /* سالب = لفوق / موجب = لتحت */
  }

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .s-product-card-content-main {
    position: relative !important;
    top: var(--text-shift-y) !important;
  }
}
/* تحريك نص بطاقة المنتج (الاسم + الوصف + السعر + السلة) على الجوال فقط */
@media (max-width: 767px) {

  :root {
    --text-shift-mobile: 30px;   /* سالب = فوق / موجب = تحت */
  }

  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .s-product-card-content-main {
    position: relative !important;
    top: var(--text-shift-mobile) !important;
  }
}

/* تحريك صورة المنتج على الجوال فقط للغة العربية (RTL) */
@media (max-width: 767px) {
  html[dir="rtl"] 
  div.grid.grid-cols-2.lg\:grid-cols-4.gap-2\.5.lg\:gap-5 
  custom-salla-product-card .product-entry__image > a.relative {

    transform: translate(var(--img-ar-x, 0px), var(--img-ar-y, -50px)) !important;
  }

  /* متغيرات تحكم للتحريك على العربي فقط */
  :root {
    --img-ar-x: 0px;    /* موجب = يمين / سالب = يسار */
    --img-ar-y: -40px;  /* موجب = تحت / سالب = فوق */
  }
}
/* -------------صفحة المنتج--------------- */
/* ==================================================
   سلايدر صور المنتج في صفحة التفاصيل
   - تعديل شكل العمود الجانبي (الثمبنيلز)
   - إظهار 4 صور فقط في العامود
   - بدون لمس السلايدر الرئيسي
/* ==================================================
   Fix: إزالة الفراغ الكبير خلف السلايدر 
   وجعل الخلفية تتبع نفس ارتفاع السلايد
================================================== */

@media (min-width: 1024px) {

  :root {
    --details-main-height: 500px; /* ارتفاع السلايد الرئيسي */
    --details-main-width: 450px;  /* عرض السلايد الرئيسي */
    --thumbs-width: 350px;         /* عرض الثمبنيلز */
  }

  /* ===== 1) إصلاح الارتفاعات الخاطئة ===== */
  .sidebar.w-full.has-many-images,
  .details-slider-wrapper,
  .details-slider-wrapper > div,
  .details-slider-wrapper * {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* ===== 2) ضبط السلايدر الرئيسي ===== */
  .details-slider-wrapper .s-slider-container {
    width: var(--details-main-width) !important;
    height: var(--details-main-height) !important;
    max-height: var(--details-main-height) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .details-slider-wrapper .s-slider-container .swiper-slide,
  .details-slider-wrapper .s-slider-container .swiper-wrapper {
    height: 100% !important;
  }

  .details-slider-wrapper .s-slider-container img,
  .details-slider-wrapper .s-slider-container video,
  .details-slider-wrapper .s-slider-container iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ===== 3) ضبط عمود الثمبنيلز (٤ صور فقط) ===== */
  .details-slider-wrapper .s-slider-thumbs {
    width: var(--thumbs-width) !important;
    height: var(--details-main-height) !important;
    overflow: hidden !important;
  }

  .details-slider-wrapper .s-slider-thumbs .s-slider-thumbs-container {
    height: 100% !important;
  }

  .details-slider-wrapper .s-slider-thumbs .swiper-slide {
    height: calc(25% - 8px) !important; /* 4 صور فقط */
    margin-bottom: 8px !important;
  }

  .details-slider-wrapper .s-slider-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
  }

  /* ===== 4) جعل الحاوية الخلفية تأخذ نفس حجم السلايدر ===== */
  .details-slider-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    height: var(--details-main-height) !important;
  }
}

@media (min-width: 1024px) {

  /* التحكم بالمسافة يمين/يسار للسلايدر الرئيسي */
  .details-slider-wrapper .s-slider-container {
    margin-left: 1px !important;   /* ← مسافة يسار */
    margin-right: 5px !important;  /* ← مسافة يمين */
  }

  /* التحكم بالمسافة بين السلايدر الرئيسي والثمبنيلز */
  .details-slider-wrapper {
    gap: 1px !important;  /* ← عدّل الرقم لتكبير/تصغير المسافة */
  }
.details-slider-wrapper .s-slider-container {
  margin-left: 50px !important;   /* ← يحركه يمين */
  margin-right: 500px !important;   /* ← يحركه يسار */
}
  .s-block.w-full.overflow-hidden {
    padding-top: 30px !important;    /* المسافة من فوق – صغّرها أو كبّرها */
    padding-bottom: 10px !important; /* مسافة بسيطة من تحت */
    margin-top: 0 !important;        /* إزالة أي margin من فوق */
    height: auto !important;         /* لا يكون ثابت 520 أو 1046 */
    min-height: 0 !important;
  }

  
}

/* ===== إخفاء دوائر التحميل (Loader) في سلايدر المنتج ===== */
.loading-effect,
.details-slider-wrapper .loading-effect,
.s-slider-container .loading-effect,
.s-slider-main .loading-effect,
.s-slider-thumbs .loading-effect {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}



/* تحريك السلايدر الرئيسي يمين/يسار فقط على النسخة الإنجليزية */
html[dir="ltr"] .details-slider-wrapper {
    position: relative !important;
    left: -60px !important;  /* ← حرّكه لليسار */
    /* لو تبغى يمين: left: 40px !important; */
}
/* تحريك صندوق الـ Quantity على الديسكتوب فقط */
@media (min-width: 1024px) {

  .order-1.md\:order-2.block.md\:sticky.top-24.shrink-0.h-fit {
    /* تبقى sticky كالمعتاد */
    position: sticky;
    top: 100px !important;           /* مسافة الصندوق من أعلى الشاشة أثناء السكرول
                                       صغّر الرقم يطلع لفوق، كبّر ينزل لتحت */

    /* هذا يحرك مكانه الأساسي في الصفحة */
    margin-top: -600px !important;   /* قيمة سالبة = يطلع لفوق
                                       لو تبغيه ينزل، حط قيمة موجبة مثل 40px */
  }
html[dir="ltr"] .details-slider-wrapper .s-slider-container {
  transform: translateX(-90px) !important;
}
html[dir="rtl"] .details-slider-wrapper .s-slider-container {
  transform: translateX(400px) !important;
}
  
}