/* Add custom CSS styles below */ 
/* لون زر "إضافة للسلة" — سجادة الروضة (ثيم رائد على سلة)
   يُلصق في خانة أكواد CSS المخصصة في إعدادات تصميم المتجر.
   غيّر الألوان الثلاثة هنا فقط: */

:root {
  --cart-btn-bg: #00696c;       /* لون الزر */
  --cart-btn-bg-hover: #00474a; /* لون الزر عند المرور أو الضغط */
  --cart-btn-text: #ffffff;     /* لون النص والأيقونة */
}

/* الزر في بطاقات المنتجات (الصفحة الرئيسية والتصنيفات) */
.s-product-card-entry salla-add-product-button .s-button-btn,
.s-product-card-entry .s-product-card-content-footer .s-button-btn,
.s-products-slider-card salla-add-product-button .s-button-btn {
  background-color: var(--cart-btn-bg) !important;
  border-color: var(--cart-btn-bg) !important;
  color: var(--cart-btn-text) !important;
  border-radius: 8px;
  width: 100%;
}

/* الزر في صفحة المنتج */
.product-form salla-add-product-button .s-button-btn,
.sticky-product-bar salla-add-product-button .s-button-btn {
  background-color: var(--cart-btn-bg) !important;
  border-color: var(--cart-btn-bg) !important;
  color: var(--cart-btn-text) !important;
  border-radius: 8px;
}

/* لون الأيقونة والنص داخل الزر */
salla-add-product-button .s-button-btn *,
salla-add-product-button .s-button-btn i {
  color: var(--cart-btn-text) !important;
}

/* عند المرور أو الضغط */
salla-add-product-button .s-button-btn:hover,
salla-add-product-button .s-button-btn:focus,
salla-add-product-button .s-button-btn:active {
  background-color: var(--cart-btn-bg-hover) !important;
  border-color: var(--cart-btn-bg-hover) !important;
}
/* عناوين أقسام نصية مزخرفة بدل صور الفواصل — سجادة الروضة (ثيم رائد على سلة)
   يُلصق في خانة أكواد CSS المخصصة في إعدادات تصميم المتجر.
   يحوّل عنوان كل قسم في الصفحة الرئيسية (العروض، الأكثر مبيعاً...) إلى عنوان
   في المنتصف بخطين ذهبيين ونقطة صغيرة على كل جانب. */

:root {
  --rw-title-color: #00696c; /* لون نص العنوان (لون المتجر) */
  --rw-ornament:    #b8955a; /* لون الزخرفة (ذهبي) */
}

/* حاوية العنوان: النص في المنتصف، و"عرض الكل" تحته */
.index .s-slider-block__title,
.index .s-block__title {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 20px !important;
}

/* العنوان نفسه */
.index .s-slider-block__title h2,
.index .s-block__title h2 {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  color: var(--rw-title-color) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4;
}

/* الخط والنقطة على الجانبين */
.index .s-slider-block__title h2::before,
.index .s-slider-block__title h2::after,
.index .s-block__title h2::before,
.index .s-block__title h2::after {
  content: "";
  flex: none;
  width: 56px;
  height: 10px;
  background:
    linear-gradient(var(--rw-ornament), var(--rw-ornament)) center / 100% 1.5px no-repeat;
}
.index .s-slider-block__title h2::before,
.index .s-block__title h2::before {
  background:
    radial-gradient(circle, var(--rw-ornament) 3.5px, transparent 4px) right center / 10px 10px no-repeat,
    linear-gradient(var(--rw-ornament), var(--rw-ornament)) left center / calc(100% - 14px) 1.5px no-repeat;
}
.index .s-slider-block__title h2::after,
.index .s-block__title h2::after {
  background:
    radial-gradient(circle, var(--rw-ornament) 3.5px, transparent 4px) left center / 10px 10px no-repeat,
    linear-gradient(var(--rw-ornament), var(--rw-ornament)) right center / calc(100% - 14px) 1.5px no-repeat;
}

/* رابط "عرض الكل" صغير تحت العنوان */
.index .s-slider-block__title a,
.index .s-block__title a {
  font-size: 13px !important;
  color: var(--rw-ornament) !important;
}

/* الجوال */
@media (max-width: 768px) {
  .index .s-slider-block__title h2,
  .index .s-block__title h2 { font-size: 18px !important; gap: 10px; }
  .index .s-slider-block__title h2::before,
  .index .s-slider-block__title h2::after,
  .index .s-block__title h2::before,
  .index .s-block__title h2::after { width: 36px; }
}