/* إزالة المسافات بين جميع الأقسام (تطبق على الموبايل والديسكتوب) */
.s-block,
.custom-section,
section[class*="section"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- تجميع كل تعديلات الموبايل في استعلام واحد لسرعة تحميل الـ CSS --- */
@media (max-width: 768px) {
  
  /* 1. منع أي خروج أفقي في كل الصفحة مع ضمان حدود العناصر */
  body,
  html,
  main,
  .s-block {
    overflow-x: hidden !important;
    max-width: 100vw !important; /* استخدمنا vw لضمان عدم تجاوز عرض الشاشة الفعلي */
    box-sizing: border-box !important;
  }

  /* 2. تصغير المسافة العلوية للأول قسم على الموبايل */
  main > section:first-of-type,
  .s-block:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3. ضبط عناوين الأقسام عشان متتقصش */
  .s-block h2,
  .s-block h3,
  section h2,
  section h3 {
    padding-right: 16px !important;
    padding-left: 16px !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* 4. ضبط سلايدر المنتجات */
  .s-block-products,
  .products-slider,
  .s-products-slider {
    padding-right: 12px !important;
    padding-left: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* 5. حاوية أزرار الهيرو نفسها (ضمان عدم خروجها عن الشاشة) */
  .hero-section .buttons,
  .hero-section .btns,
  .hero-section .actions,
  .s-block--hero .s-button-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* تم التعديل لمنع تمدد العناصر خارج الحاوية */
    padding-right: 16px !important;
    padding-left: 16px !important;
    box-sizing: border-box !important;
    gap: 10px !important; /* مسافة أمان بين الزراير فوق بعض */
  }

  /* 6. أزرار الهيرو - توسيط وامتداد آمن */
  .hero-section a,
  .hero-section button,
  .hero-section .s-button,
  .hero-section salla-button,
  .s-block--hero salla-button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 7. زر "عرض الكل" في الأكثر طلباً ومبيعاً */
  .s-block a[href*="products"],
  .view-all,
  .s-block-title a,
  .s-block-title salla-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 10px auto !important;
    width: 92% !important; /* نسبة مئوية آمنة أفضل من calc لتجنب مشاكل الـ padding */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}