/* =========================
   1. Global Background
========================= */

body.index,
body.index main,
body.index .app,
body.index .store-home {
  background-color: #67aaa5 !important;
}



/*adding animation to section on hover */
body.index main#main-content > section.s-block.s-block--banners.container:nth-of-type(2) 
.banner-entry.square-photos {
  transition: 0.3s ease-in-out !important;
}

body.index main#main-content > section.s-block.s-block--banners.container:nth-of-type(2) 
.banner-entry.square-photos:hover {
  transform: translateY(5px) !important;
}


/* Menu font styling */
.main-nav-container a,
.main-nav-container .menu-item a {
  font-size: 17px !important;
  font-weight: 700 !important;
}



/* Mobile only - ONLY the 3 small images section (safe targeting) */
@media (max-width: 767px) {

  body.index main#main-content 
  section.s-block--banners.container
  .grid.one-row.md\:grid-cols-3 {

    gap: 14px !important;
  }

  body.index main#main-content 
  section.s-block--banners.container
  .grid.one-row.md\:grid-cols-3 > a.banner-entry.square-photos {

    width: 80% !important;
    height: 170px !important;
    margin: 0 auto !important;
  }

  body.index main#main-content 
  section.s-block--banners.container
  .grid.one-row.md\:grid-cols-3 > a.banner-entry.square-photos .lazy__bg {

    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}




/* =========================
   2. Fixed Banner Full Width
========================= */

section.s-block.s-block--fixed-banner.wide-placeholder > .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.banner--fixed img {
  background-color: #67aaa5 !important;
}

a.banner-entry.square-photos {
  background-color: transparent !important;
}

/* General banner height */
.banner-entry {
  height: 260px !important;
}

/* =========================
   3. Category Banner Sections
========================= */

/* Desktop category image height */
@media (min-width: 769px) {
  main#main-content > section.s-block--banners.container:nth-of-type(n+3):nth-of-type(-n+6)
  .grid > a.banner-entry.square-photos:nth-child(n+1):nth-child(-n+5) {
    height: 450px !important;
    min-height: 450px !important;
    overflow: hidden !important;
  }

  main#main-content > section.s-block--banners.container:nth-of-type(n+3):nth-of-type(-n+6)
  .grid > a.banner-entry.square-photos:nth-child(n+1):nth-child(-n+6) .lazy__bg {
    height: 100% !important;
    min-height: 450px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}

/* Mobile category sections */
@media (max-width: 768px) {
  main#main-content > section.s-block--banners.container:nth-of-type(4)
  .grid > a.banner-entry.square-photos,
  main#main-content > section.s-block--banners.container:nth-of-type(6)
  .grid > a.banner-entry.square-photos,
  main#main-content > section.s-block--banners.container:nth-of-type(4)
  .grid > a.banner-entry.square-photos .lazy__bg,
  main#main-content > section.s-block--banners.container:nth-of-type(6)
  .grid > a.banner-entry.square-photos .lazy__bg {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }

  main#main-content > section.s-block--banners.container:nth-of-type(4)
  .grid > a.banner-entry.square-photos .lazy__bg,
  main#main-content > section.s-block--banners.container:nth-of-type(6)
  .grid > a.banner-entry.square-photos .lazy__bg {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}

/* =========================
   4. Custom Title Above Category Section
========================= */

main#main-content > section.s-block--banners.container:nth-of-type(3) {
  position: relative;
  text-align: center;
  padding-top: 60px !important;
}

main#main-content > section.s-block--banners.container:nth-of-type(3)::before {
  content: "مجموعات صُممت\Aتعرّف على لغتها الخاصة على كل زاوية";
  white-space: pre-line;
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.7;
  margin-bottom: 55px;
  padding-bottom: 35px;
  background:
    radial-gradient(circle, #67aaa5 0 4px, #ffffff 5px 6px, transparent 7px),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff);
  background-size: 16px 16px, 80px 2px, 80px 2px;
  background-position:
    center bottom,
    calc(50% - 50px) calc(100% - 7px),
    calc(50% + 50px) calc(100% - 7px);
  background-repeat: no-repeat;
}

/* =========================
   5. Product Slider Titles
========================= */

#best-offers-6-slider .s-slider-block__title,
#best-offers-8-slider .s-slider-block__title,
#best-offers-10-slider .s-slider-block__title {
  position: relative !important;
  text-align: center !important;
  justify-content: center !important;
  margin-bottom: 55px !important;
}

/* Dark titles */
#best-offers-8-slider .s-slider-block__title h2,
#best-offers-10-slider .s-slider-block__title h2 {
  color: #282c3d !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.7 !important;
  margin: 0 auto !important;
  padding: 0 0 35px 0 !important;
  text-align: center !important;
  background:
    radial-gradient(circle, transparent 0 4px, #282c3d 4px 6px, transparent 6px),
    linear-gradient(#282c3d, #282c3d),
    linear-gradient(#282c3d, #282c3d) !important;
  background-size: 16px 16px, 80px 2px, 80px 2px !important;
  background-position:
    center bottom,
    calc(50% - 50px) calc(100% - 7px),
    calc(50% + 50px) calc(100% - 7px) !important;
  background-repeat: no-repeat !important;
}

/* White title for best offers 6 */
#best-offers-6-slider {
  padding-top: 80px !important;
}

#best-offers-6-slider .s-slider-block__title h2,
#best-offers-6-slider .s-slider-block__title h2 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#best-offers-6-slider .s-slider-block__title h2 {
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.7 !important;
  margin: 0 auto !important;
  padding: 0 0 35px 0 !important;
  text-align: center !important;
  background:
    radial-gradient(circle, transparent 0 4px, #ffffff 4px 6px, transparent 6px),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff) !important;
  background-size: 16px 16px, 80px 2px, 80px 2px !important;
  background-position:
    center bottom,
    calc(50% - 50px) calc(100% - 7px),
    calc(50% + 50px) calc(100% - 7px) !important;
  background-repeat: no-repeat !important;
}

/* Keep slider arrows on left */
#best-offers-6-slider .s-slider-block__title-left,
#best-offers-8-slider .s-slider-block__title-left,
#best-offers-10-slider .s-slider-block__title-left,
#best-offers-6-slider .s-slider-block__title-nav,
#best-offers-8-slider .s-slider-block__title-nav,
#best-offers-10-slider .s-slider-block__title-nav {
  position: absolute !important;
  left: 0 !important;
  top: 15px !important;
  width: auto !important;
}

/* Mobile slider titles */
@media (max-width: 768px) {
  #best-offers-6-slider .s-slider-block__title h2,
  #best-offers-8-slider .s-slider-block__title h2,
  #best-offers-10-slider .s-slider-block__title h2,
  main#main-content > section.s-block--banners.container:nth-of-type(3)::before {
    font-size: 20px !important;
    line-height: 1.6 !important;
    padding-bottom: 28px !important;
  }
}

/* =========================
   6. Grey GIF + Product Slider Area
========================= */

.custom-gif-section,
#best-offers-8-slider,
#best-offers-10-slider {
  background: #eaeaea !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Inner content spacing */
#best-offers-8-slider salla-products-slider,
#best-offers-10-slider salla-products-slider,
#best-offers-8-slider salla-slider,
#best-offers-10-slider salla-slider {
  display: block !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
}

/* Best offers spacing */
#best-offers-8-slider,
#best-offers-10-slider {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Cover green gaps above grey sections */
#best-offers-8-slider::before,
#best-offers-10-slider::before {
  content: "";
  display: block;
  height: 80px;
  background: #eaeaea;
  margin-top: -80px;
}

/* Remove default Salla section spacing on desktop */
@media (min-width: 640px) {
  .s-block {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .s-block--bundle-luxury-gallery {
    margin-top: 0 !important;
  }
}

/* Mobile inner spacing */
@media (max-width: 768px) {
  #best-offers-8-slider salla-products-slider,
  #best-offers-10-slider salla-products-slider,
  #best-offers-8-slider salla-slider,
  #best-offers-10-slider salla-slider {
    padding-inline: 15px !important;
  }
}





/* =========================
   7. Footer Styling
========================= */

.store-footer__inner,
footer.store-footer {
  background-color: #69a8a3 !important;
}

/* Footer text white */
.store-footer,
.store-footer * {
  color: #ffffff !important;
}

.store-footer a,
.store-footer p,
.store-footer span,
.store-footer strong,
.store-footer h3,
.store-footer h4,
.store-footer li {
  color: #ffffff !important;
}