/* For Her v1.20.312: true transparent hero/header integration.
   Announcement stays independently colored. Only the header overlaps imagery.
   Scope is the home hero selected in the Hero Slider editor. */

/* Main layout normally reserves the whole fixed shell height. Pull only the
   navigation row back over the image; do not pull the banner under announcements. */
html body .elite-hero.elite-hero--header-overlap{
  position:relative;
  z-index:1;
  margin-top:calc(-1 * (var(--elite-header-overlap-height,70px) + var(--hero-header-overlap-offset,0px)))!important;
  padding-top:0!important;
}
html body:has(.elite-hero--header-overlap) main#main{overflow:visible}
html body .elite-hero--header-overlap.elite-hero--viewport{
  height:calc(100svh - var(--elite-announcement-actual-height,40px))!important;
  min-height:450px;
}
/* Respect a mobile-only user choice without interfering with desktop styles. */
@media(min-width:769px){
  html body .elite-hero--header-overlap.elite-hero--header-overlap-mobile-only{
    margin-top:0!important;
    padding-top:0!important;
  }
  html body .elite-hero--header-overlap.elite-hero--header-overlap-mobile-only.elite-hero--viewport{
    height:calc(100svh - 110px)!important;
  }
}
@media(max-width:768px){
  html body .elite-hero--header-overlap.elite-hero--viewport{
    min-height:450px;
    height:calc(100svh - var(--elite-announcement-actual-height,40px))!important;
  }
}

/* Header transparency is applied only when selected AND the current device is
   eligible. Native header settings retain their existing control over height,
   icons, logo dimensions, navigation menus and announcement colors. */
html body.elite-hero-overlap-enabled .elite-header-shell{
  background:transparent!important;
  box-shadow:none!important;
}
html body.elite-hero-overlap-enabled .elite-header-shell .elite-announcement.announcement-bar{
  background:var(--announce-bg,#000)!important;
  color:var(--announce-color,#fff)!important;
  box-shadow:none!important;
}
html body.elite-hero-overlap-enabled .elite-header-shell .elite-header,
html body.elite-hero-overlap-enabled .elite-header-shell.elite-header-shell--custom .elite-header,
html body.elite-hero-overlap-enabled .elite-header-shell[data-scroll-glass="true"] .elite-header{
  background:transparent!important;
  background-color:transparent!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.elite-hero-overlap-enabled .elite-header-shell .elite-header__inner{
  background:transparent!important;
}
/* Do not force white icons or invert the logo: the existing brand colors
   remain readable on a light hero like the one provided by the customer. */

/* After scrolling a little, restore the merchant-configured header surface.
   Always preserve the announcement's separate --announce-bg color. */
html body.elite-hero-overlap-enabled .elite-header-shell.is-hero-overlap-past{
  background:var(--elite-header-background,var(--elite-bg,#fff))!important;
  box-shadow:0 7px 24px rgba(15,18,30,.055)!important;
}
html body.elite-hero-overlap-enabled .elite-header-shell.is-hero-overlap-past .elite-header,
html body.elite-hero-overlap-enabled .elite-header-shell.is-hero-overlap-past.elite-header-shell--custom .elite-header,
html body.elite-hero-overlap-enabled .elite-header-shell.is-hero-overlap-past[data-scroll-glass="true"] .elite-header{
  background:var(--elite-header-background,var(--elite-bg,#fff))!important;
  background-color:var(--elite-header-background,var(--elite-bg,#fff))!important;
  border-bottom-color:var(--elite-header-border-color,transparent)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.elite-hero-overlap-enabled .elite-header-shell.is-hero-overlap-past .elite-header__inner{
  background:transparent!important;
}

/* Avoid artificial dimming or black overlays; banner slides keep the selected
   overlay opacity from their own Zid section settings. */
@media(prefers-reduced-motion:reduce){
  html body.elite-hero-overlap-enabled .elite-header-shell,
  html body.elite-hero-overlap-enabled .elite-header{transition:none!important}
}