/* ======================================================
   Olla: Top Banner (section.olla-banner) Full Width فعلي
   - يلغي px-* على السكشن
   - يلغي قيود container داخله
   - يجعل الصورة 100% عرض
   ====================================================== */

/* 1) السكشن نفسه يطلع 100vw + بدون أي padding */
section.olla-banner{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) أي كونتينر داخل البنر: الغِ max-width والـ auto margins */
section.olla-banner .container,
section.olla-banner .container.mx-auto{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) البنر نفسه */
section.olla-banner a.banner{
  display: block !important;
  width: 100% !important;
}

/* 4) الصورة تاخد العرض كامل */
section.olla-banner a.banner > img{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;

  /* لو عايزها بدون زوايا */
  border-radius: 0 !important;
}
/* ======================================================
   Olla – Top Banner Mobile Fix
   ====================================================== */

@media (max-width: 768px){

  /* تأكيد إن السكشن فل ويدث في الموبايل */
  section.olla-banner{
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
  }

  /* إلغاء أي كونتينر داخلي */
  section.olla-banner .container,
  section.olla-banner .container.mx-auto{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* الصورة في الموبايل */
  section.olla-banner a.banner > img{
    width: 100% !important;
    height: 42vh !important;      /* ارتفاع مناسب للموبايل */
    max-height: 520px;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}



/* ======================================================
   Mobile ONLY:
   Reduce height of SECOND fixed banner (not first)
   Target: section.olla-banner:not(:first-of-type)
   ====================================================== */

@media (max-width: 768px){

  /* استهداف البنر الثابت الثاني فقط */
  section.olla-banner:not(:first-of-type) a.banner.banner--fixed img{
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* بديل أدق: تحديد ارتفاع فعلي مناسب للموبايل */
  section.olla-banner:not(:first-of-type) a.banner.banner--fixed{
    height: 140px !important;   /* ≈ نصف الحجم الحالي */
    overflow: hidden !important;
  }

  section.olla-banner:not(:first-of-type) a.banner.banner--fixed img{
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}


/* ======================================================
   Global Store Background Color
   ====================================================== */

body,
#app,
.app-inner,
main {
  background-color: #f2f3f5 !important;
}
/* إزالة الخلفيات البيضاء الافتراضية */
.bg-white {
  background-color: transparent !important;
}