header:has(.not-scrolled),
.megamenu--three.not-scrolled{
  background-color: transparent !important;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out;
}

header:has(.not-scrolled)::before{
  content: '';
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0px;
  bottom: 0%;
  background: linear-gradient(180deg, #F2E6D3 5.86%, rgba(242, 230, 211, 0) 99.56%);
  width: 100vw;
  height: 230%;
  transition: all 0.3s ease-in-out;
}
body header.nav-phase-3 div.megamenu--three .megamenu__item:hover > a, 
body header.nav-phase-3 div.megamenu--three .megamenu__item[aria-expanded=true] > a{
  color: var(--red);
}
header .megamenu--three .megamenu__panel{
  z-index: 1000;
}

@media(max-width: 1199px){
  body header.nav-phase-3 div.megamenu--three.is-opened{
        z-index: 1000;
  }
  body header.nav-phase-3.is-normal:has(.is-opened){
    background-color: var(--red) !important;
  }
  header.nav-phase-3.is-normal:has(.is-opened)::before{
    display: none;
  }
  
  header:has(.is-opened) img{
    filter: brightness(0) invert(1);
  }
  .megamenu--three.is-opened{
    background-color: var(--sandstone) !important;
  }

  .sticky-header__button{
    border-radius: 6px;
  }
  
  body header.nav-phase-3 div.megamenu--three .megamenu__item::after{
     background: #E4C5AC;
     height: 1.5px;
     border-top: none;
  }
  body header.nav-phase-3 div.megamenu--three:not(.position-center) .megamenu__panel[aria-expanded=true]{
    padding-bottom: 0;
  }

  body header.nav-phase-3 div.megamenu--three .megamenu__item > a{
    padding-block: 16px;
  }

  body:has(.is-opened.megamenu--three) .sticky-header__button{
    z-index: -1;
    transition: none;
  }
  body header.nav-phase-3 div.image--logo img{
    width: 80px;
  }
  body header.nav-phase-3 div.image:not(.image--logo) img{
    width: 120px;
  }
  .megamenu--three.is-opened .megamenu__toggle>div{
    background-color: white;
  }
}

body:has(.article-page) header:has(.not-scrolled)::before{
  display: none;
}

body:has(.article-page) header:has(.not-scrolled),
body:has(.article-page) .megamenu--three.not-scrolled{
  background: var(--sandstone) !important;
}

@media(min-width: 1200px){
  div .megamenu--three .megamenu__list{
    margin-left: 6%;
  }

}