/* Add custom CSS styles below */ 
/* لجعل بطاقات مميزات المتجر دائرية */
.s-block--enhanced-features__item {
  /* لضمان أن البطاقة مربعة قبل تطبيق نصف القطر */
  width: 200px; /* يمكنك تعديل هذا الحجم حسب رغبتك */
  height: 200px; /* يجب أن يكون نفس قيمة العرض */
  border-radius: 50% !important; /* لجعلها دائرية، !important لتجاوز ستايل الثيم الافتراضي 4px */
  overflow: hidden; /* لإخفاء أي محتوى يتجاوز حدود الدائرة */
  
  /* لضمان توسيط المحتوى داخل الدائرة */
  /* الخصائص التالية موجودة بالفعل على العنصر، لكن نؤكدها لضمان التوسيط بعد تغيير الأبعاد */
  display: flex;
  flex-direction: column;
  justify-content: center; /* توسيط عمودي */
  align-items: center; /* توسيط أفقي */
  text-align: center; /* لتوسيط النصوص أيضاً */
}

/* لتغيير لون الأيقونات (إذا كانت صور GIF/PNG) */
/* ملاحظة: لا يمكن تغيير لون صورة GIF/PNG مباشرة إلى لون ثابت بالـ CSS.
   هذا الكود يطبق فلتر (تظليل) لتغيير درجة اللون، وقد لا يعطي اللون المطلوب تماماً.
   للحصول على لون دقيق، يجب استبدال الصورة بأخرى باللون المطلوب أو استخدام أيقونات SVG. */
.s-block--enhanced-features__item .feature-icon img {
  /* مثال: لتظليل الأيقونة بلون يميل للأزرق/البنفسجي.
     يمكنك تجربة قيم مختلفة لـ hue-rotate و saturate و brightness للحصول على التأثير المطلوب. */
  filter: hue-rotate(200deg) saturate(200%) brightness(80%);
  
  /* تعديل حجم الصورة داخل البطاقة لتناسب الشكل الدائري */
  max-width: 70%; /* تصغير الصورة لتناسب الدائرة */
  max-height: 70%;
  object-fit: contain; /* لضمان عدم قص الصورة */
}

/* قد تحتاج لتعديل حجم الخطوط إذا كانت تخرج عن الدائرة */
.s-block--enhanced-features__item h2 {
  font-size: 1rem; /* مثال: تصغير حجم العنوان */
  line-height: 1.3;
}

.s-block--enhanced-features__item p {
  font-size: 0.8rem; /* مثال: تصغير حجم الوصف */
  line-height: 1.2;
}
/* إزالة الخلفية الرمادية خلف الأيقونات */
.s-block--enhanced-features__item .feature-icon {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}