/*
=================================================
  تخصيص فاصل عنوان الأقسام (النسخة النهائية)
=================================================
*/

/* 0. ضبط العنصر الأب ليظهر فيه الدائرة */
.s-angel--divider .divider-wrapper {
  position: relative; /* مهم جدًا لظهور الدائرة */
}

h2.da-cp {
  font-size: 25px !important;
}


/* 1. إخفاء الخطوط الرمادية الأصلية */
.s-angel--divider .vertical-lines {
  display: none;
}

/* 2. تهيئة العنوان ليكون مرجعًا للفاصل */
.s-angel--divider .divider-title h2 {
  position: relative;
  padding-bottom: 30px; /* زيادة المسافة السفلية لتوفير مساحة للفاصل */
}

/* 3. إنشاء الخط الأيسر */
.s-angel--divider .divider-title h2::before {
  content: '';
  position: absolute;
  bottom: 7px; /* ضبط ارتفاع الخط عموديًا */
  right: calc(50% + 25px); /* مسافة صغيرة عن الدائرة */
  width: 100px; /* عرض الخط */
  height: 3px;  /* سماكة الخط */
  background-color: #000; /* لون الخط */
}

/* 4. إنشاء الخط الأيمن */
.s-angel--divider .divider-title h2::after {
  content: '';
  position: absolute;
  bottom: 7px; /* ضبط ارتفاع الخط عموديًا */
  left: calc(50% + 25px); /* مسافة صغيرة عن الدائرة */
  width: 100px; /* عرض الخط */
  height: 3px;  /* سماكة الخط */
  background-color: #000; /* لون الخط */
}

/* 5. إنشاء الدائرة */
.s-angel--divider .divider-wrapper::after {
  content: '';
  position: absolute;
  bottom: 1px; /* رفع خفيف جدًا لتكون متناسقة مع الخطوط */
  left: 50%;
  transform: translateX(-50%);
  width: 18px;  /* عرض الدائرة */
  height: 18px; /* ارتفاع الدائرة */
  background-color: #fff; /* لون خلفية الصفحة */
  border: 3px solid #000; /* سماكة إطار الدائرة */
  border-radius: 50%;
  z-index: 1; /* للتأكد من أنها فوق الخطوط */
}
/*
=================================================
  تخصيص فاصل عنوان الأقسام (النسخة النهائية)
  مع تعديل زر "عرض الكل"
=================================================
*/

/* 1. إخفاء الخطوط الرمادية الأصلية */
.s-angel--divider .vertical-lines {
  display: none;
}

/* 2. تهيئة العنوان ليكون مرجعًا للفاصل */
.s-angel--divider .divider-title h2 {
  position: relative;
  padding-bottom: 30px; /* زيادة المسافة السفلية لتوفير مساحة للفاصل */
}

/* 3. إنشاء الخط الأيسر */
.s-angel--divider .divider-title h2::before {
  content: '';
  position: absolute;
  bottom: 7px;
  right: calc(50% + 25px);
  width: 100px;
  height: 3px;
  background-color: #000;
}

/* 4. إنشاء الخط الأيمن */
.s-angel--divider .divider-title h2::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: calc(50% + 25px);
  width: 100px;
  height: 3px;
  background-color: #000;
}

/* 5. إنشاء الدائرة */
.s-angel--divider .divider-wrapper::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 20px;
  background-color: #fff;
  border: 3px solid #000;
  border-radius: 50%;
  z-index: 1;
}
/* اجعل الحاوية نسبية */
.s-angel--divider {
  position: relative;
}

/* تعديل زر "عرض الكل" */
.s-angel--divider .s-block__display-all {
  position: absolute;
  left: 0;              /* أقصى اليسار */
  top: 50%;             /* يظل بمحاذاة منتصف العنوان عموديًا */
  transform: translateY(-50%); /* لضبط المحاذاة عموديًا بالضبط */
  color: #888888;       /* لون النص رمادي */
  font-weight: normal;
}
/* ===== Skeleton Products افتراضي ===== */
.product-skeleton {
  width: 200px;
  height: 300px;
  background-color: #f0f0f0;
  margin: 10px;
  display: inline-block;
}

/* ===== زر الكل ===== */
.s-angel--divider {
  position: relative;
}

.s-angel--divider .s-block__display-all {
  position: absolute;
  left: 0;               /* أقصى اليسار */
  top: 50%;              /* منتصف العنوان عموديًا */
  transform: translateY(-50%);
  color: #888888;        /* لون رمادي */
  font-weight: normal;
  font-size: 10px;
}