/* Add custom CSS styles below */ 

body {
    background-color: #ffffff; /* لون الخلفية */
    margin: 5rem auto 0 auto; /* توحيد خصائص الـ margin */
    padding: 0; /* توحيد خصائص الـ padding */
    min-height: 100vh;
    width: 100%;
}

/* شكل المربع */ 
.banner-entry {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  width: 390px; /* حجم الصورة الافتراضي */
  height: 680px; /* حجم الصورة الافتراضي */
}

/* الافتراضي: 3 أعمدة */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* المسافة بين العناصر */
  max-width: 1280px; /* الحد الأقصى للعرض */
  width: 100%;
}

/* تعديل حجم العناصر حسب الشاشة */
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 عناصر في كل صف */
  }
  .banner-entry {
    width: 390px; /* تغيير حجم الصورة */
    height: 680px; /* تغيير حجم الصورة */
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 أعمدة حتى على الشاشات الصغيرة */
  }
  .banner-entry {
    width: 170px; /* تغيير حجم الصورة */
    height: 300px; /* تغيير حجم الصورة */
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* الحفاظ على 3 أعمدة */
  }
  .banner-entry {
    width: 130px; /* تغيير حجم الصورة لتكون أكبر قليلاً */
    height: 230px; /* تغيير حجم الصورة لتناسب الشاشة الصغيرة */
  }
}

/* فوتر */
.store-footer {
    margin-top: 0; /* إلغاء تأثير margin-top من body */
    background-color: #fca379;
    color: #fff;
    padding: 2rem 1rem;
}

.store-footer__inner {
 background-color: #ededed!important; /* لون الخلفية للعنصر */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px; /* padding داخلي */
  border-radius: 20px 20px 0 0; /* حواف دائرية فقط في الأعلى */
}
.store-footer__inner .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    text-align: center;
}

.store-footer__inner h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.store-footer__inner a {
    color: #f8a13b; /* لون الروابط */
    text-decoration: none;
}

.store-footer__inner a:hover {
    text-decoration: underline;
}

/* التعديل حسب الشاشات */
@media (min-width: 768px) {
    .store-footer__inner .container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .store-footer__inner .container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.store-footer {
    background-color: #ffffff!important; /* لون الخلفية للعنصر */
  
}

@media (max-width: 768px) { /* للأجهزة ذات الشاشات الصغيرة */
    .grid {
        display: flex; /* استخدام Flexbox بدلاً من Grid */
        flex-direction: row; /* العناصر في صف واحد */
        flex-wrap: nowrap; /* منع التغليف للحفاظ على الصف الواحد */
        justify-content: space-between; /* توزيع البلوكات بالتساوي */
        gap: 10px; /* المحافظة على المسافة بين البلوكات */
    }
    .s-block.s-block--features.container {
        flex: 1; /* تمكين الاستطالة لكل بلوك ليأخذ جزءاً متساوياً من العرض */
    }