/* Add custom CSS styles below */

/* Apply the background and base text color to the footer */
footer.store-footer {
  background-color: #d78f53 !important;
  color: white !important;
}

/* Ensure all descendants inherit the white color for text, borders, and icons */
footer.store-footer *,
footer.store-footer *::before,
footer.store-footer *::after {
  color: white !important;
  border-color: white !important;
  fill: white !important;
  stroke: white !important;
}

/* Remove any background colors on internal sections to let the footer background show through */
footer.store-footer .store-footer__inner,
footer.store-footer [class*="container"] {
  background-color: transparent !important;
}


/* Target all banner sections to be full width */
section.s-block.s-block--fixed-banner {
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
}

/* Make the internal container full width as well */
section.s-block.s-block--fixed-banner .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure images or background content inside fill the area */
section.s-block.s-block--fixed-banner img {
  width: 100%;
  height: auto;
  display: block;
}


/* Apply changes only to desktop (1024px+) and index page */
@media (min-width: 1024px) {

  body.index header.store-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }


  /* Clear backgrounds of all internal header components */
  body.index header.store-header .top-navbar,
  body.index header.store-header .main-nav-container,
  body.index header.store-header .inner.bg-inherit,
  body.index header.store-header .bg-white {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }


  /* Remove top margin from the main content and the first banner section */
  body.index main#main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  body.index section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }


  /* Ensure the container inside the banner fills the full width */
  body.index section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }


  /* Optional: Ensure header text/icons are visible against the banner */
  body.index header.store-header * {
    /* color: white !important; */
    /* Adjust if your banner is light */
  }

}





/* Remove banner top margin */
body.index section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
  margin-top: 0 !important;
}


/* Button hover color */
.s-button-primary-outline:hover {
  color: white !important;
}
.top-navbar .topnav-link-item,
.top-navbar .s-contacts-topnav-link {
    color: #000000 !important;
}

.top-navbar .s-search-input {
    color: #000 !important;
    border: 1px solid #d6d6d6 !important;
    box-shadow: none !important;
}

.store-footer {
    transform: translateY(-100px);
    margin-bottom: -100px;
}

.s-infinite-scroll-wrapper {
  display: flex !important;
  justify-content: center;
  width: 100%;
  grid-column: 1 / -1;
  margin-top: 24px !important;
  margin-bottom: 130px !important; /* 100 بتاعة الفوتر + 30 مسافة */
  position: relative;
  z-index: 2;
}