/* تحسين أبعاد الصور العامة للموبايل فقط */
@media (max-width: 768px) {
  /* تحسين أبعاد الصور */
  .s-product-card-image-contain, 
  .banner img,
  img {
    width: 100%; /* جعل الصور تناسب الحاوية */
    max-width: none; /* إزالة الحد الأقصى للعرض */
    height: auto; /* الحفاظ على النسبة */
    display: block; /* منع الفجوات داخل الصور */
    aspect-ratio: 1 / 1; /* النسبة المربعة ديناميكيًا */
    object-fit: cover; /* ملء الحاوية مع الحفاظ على النسبة */
  }

  /* تحسين تخطيط قسم المنتجات للموبايل */
  .s-block--fixed-products {
    padding: 20px; /* مساحة داخلية لمنع تغييرات التخطيط */
    min-height: 300px; /* ارتفاع أدنى للصناديق */
    box-sizing: border-box;
  }

  /* تحسين تخطيط الحاويات المتعددة للموبايل */
  .swiper.s-slider-container {
    min-height: 250px; /* منع تغييرات التخطيط في السلايدر */
    overflow: hidden; /* إخفاء أي محتوى زائد */
  }

  /* تحسين النصوص وتوزيع العناصر للموبايل */
  .s-product-card {
    min-height: 150px; /* ارتفاع أدنى للصناديق لتجنب القفزات */
    text-align: center; /* محاذاة النصوص */
    overflow: hidden; /* منع النصوص الطويلة من تجاوز الحاوية */
  }

  /* تحسين تخطيط الصناديق للموبايل */
  .s-block {
    min-height: 400px; /* تحديد ارتفاع ثابت للصناديق */
  }

  /* تخصيص البانر للموبايل */
  .banner img {
    width: 100%; /* جعل البانر يعرض بكامل عرض الشاشة */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    margin-top: 10px; /* مسافة علوية */
    padding: 10px; /* حواف داخلية */
    border-radius: 10px; /* زوايا مستديرة */
  }

  /* تخصيص Lazy Loading للصور */
  img[loading="lazy"] {
    transition: opacity 0.3s ease-in-out; /* تأثير انتقال بسيط عند تحميل الصورة */
    opacity: 0; /* إخفاء الصورة عند تحميلها */
  }

  img[loading="lazy"].loaded {
    opacity: 1; /* إظهار الصورة بعد تحميلها */
  }

  /* تحسين النصوص والأزرار للموبايل */
  .s-product-card h2, .s-product-card p {
    opacity: 0;
    transition: opacity 0.5s ease-out; /* تأثير تدريجي */
  }

  .s-product-card.loaded h2, .s-product-card.loaded p {
    opacity: 1; /* إظهار النصوص بشكل تدريجي بعد تحميل الصفحة */
  }

  /* تحسين أبعاد الأزرار والعناصر للموبايل */
  .button, .product-card {
    min-height: 50px; /* تحديد ارتفاع ثابت للأزرار */
    padding: 10px 20px; /* مسافة داخلية ثابتة */
    box-sizing: border-box; /* ضمان تناسب العناصر مع الحاوية */
  }
}

/* تنسيق الحقل الكتابي */
.editable-quantity {
  width: 50px;
  text-align: center;
  font-size: 14px;
  padding: 5px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* تنسيق الأزرار */
.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #f5f5f5;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.quantity-btn:hover {
  background-color: #e0e0e0;
}

.minus-btn {
  margin-right: 5px; /* المسافة بين الزر والكمية */
}

.plus-btn {
  margin-left: 5px; /* المسافة بين الزر والكمية */
}
    .s-block {
        margin-top: 10px;
    }
}
@font-face {
    font-family: 'Amazon Ember';
    src: url('font-url.woff2') format('woff2');
    font-display: swap;
}