/* White-surface palette: ink, muted violet, silver, slate blue, ink. */
.brand-link{position:relative;--logo-white-gradient:linear-gradient(115deg,#30384f 18%,#6d5e80 35%,#a8afc2 48%,#586786 61%,#353e59 80%)}
@supports (mask-image:url('/assets/logo.png')) or (-webkit-mask-image:url('/assets/logo.png')){
  .brand-link::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background-image:var(--logo-white-gradient);background-position:center;background-size:60px 60px;background-repeat:no-repeat;-webkit-mask:url('/assets/logo.png') center/contain no-repeat;mask:url('/assets/logo.png') center/contain no-repeat;filter:invert(1)}
  /* The header still uses difference blending. Pre-inverting only this layer
     makes its displayed colors on white equal the chosen gradient above. */
  .brand-link[data-logo-surface="light"] img{opacity:0}
  .brand-link[data-logo-surface="light"]::after{opacity:1}
  html.fa-a11y-contrast .brand-link[data-logo-surface="light"] img{opacity:1}
  html.fa-a11y-contrast .brand-link[data-logo-surface="light"]::after{opacity:0}
}

/* Shop 29: keep the logo stable while Menu/Search opens and closes.
   The overlay header no longer blends as one big group. Its controls can still
   use difference blending independently, while the logo keeps its intended palette. */
.shop-overlay .overlay-header{mix-blend-mode:normal;color:#000}
.shop-overlay .overlay-header .header-right{color:#fff;mix-blend-mode:difference}

@supports (mask-image:url('/assets/logo.png')) or (-webkit-mask-image:url('/assets/logo.png')){
  /* On normal light pages, preserve the same darker logo palette seen before
     opening the panel, but without double-inverting it inside the dialog. */
  .shop-overlay .overlay-header .brand-link[data-logo-surface="light"] img{opacity:0!important}
  .shop-overlay .overlay-header .brand-link[data-logo-surface="light"]::after{opacity:1!important;filter:none!important}
  .shop-overlay .overlay-header .brand-link[data-logo-surface="dark"] img{opacity:1!important}
  .shop-overlay .overlay-header .brand-link[data-logo-surface="dark"]::after{opacity:0!important}

  /* Product-image pages always show the actual original logo colors, both
     normally and while Menu/Search is open. */
  body.product-page>[data-main-header]{mix-blend-mode:normal}
  body.product-page>[data-main-header] .header-left,
  body.product-page>[data-main-header] .header-right{color:#fff;mix-blend-mode:difference}
  body.product-page>[data-main-header] .brand-link img,
  body.product-page .shop-overlay .overlay-header .brand-link img{opacity:1!important}
  body.product-page>[data-main-header] .brand-link::after,
  body.product-page .shop-overlay .overlay-header .brand-link::after{opacity:0!important}
}

/* Shop 36: one real header, with surface-aware colors and no duplicate layers.
   White information pages use dark controls. Product-image pages use light controls.
   The video home page keeps difference blending only while the drawer is closed so
   it can remain readable as the user scrolls across the hero. */
[data-main-header]{
  mix-blend-mode:normal!important;
  color:inherit!important;
}
[data-main-header] .header-left,
[data-main-header] .header-right{
  mix-blend-mode:normal!important;
  color:inherit!important;
}
[data-main-header] .header-control{
  color:inherit!important;
  mix-blend-mode:normal!important;
  transition:color .30s ease,opacity .22s ease;
}
body.product-page [data-main-header]{color:#f2f2f2!important}

/* The dark moving homepage is the only closed state that still needs true
   surface blending while scrolling. Opening a drawer switches back to the
   ordinary single-header palette so the drawer animation stays artifact-free. */
@supports selector(body:has(.hero.has-video)){
  body:has(.hero.has-video):not(.shop-panel-open) [data-main-header] .header-control{
    color:#fff!important;
    mix-blend-mode:difference!important;
  }
}

/* The same Menu/Search controls smoothly become dark as the solid white drawer
   arrives underneath them. Close keeps that state until the drawer starts
   leaving, then eases back to the page's normal header color. */
body.shop-panel-open:not(.shop-panel-closing) [data-main-header] .header-left .header-control{
  color:#111!important;
}
body.shop-panel-closing [data-main-header] .header-left .header-control{
  color:inherit!important;
}
@supports selector(body:has(.hero.has-video)){
  body:has(.hero.has-video).shop-panel-closing [data-main-header] .header-left .header-control{
    color:#fff!important;
  }
}

/* Account and Bag stay present but grey with the rest of the page while a
   drawer is open. The logo is handled beside the page veil in navigation CSS. */
[data-main-header] .header-right{transition:opacity .22s ease}
body.shop-panel-open [data-main-header] .header-right{opacity:.48}
body.shop-panel-closing [data-main-header] .header-right{opacity:.62}

/* Product-image screens keep the actual original logo artwork/colour. */
body.product-page [data-main-header] .brand-link img{opacity:1!important}
body.product-page [data-main-header] .brand-link::after{opacity:0!important}

/* The light-page logo is no longer inside a difference-blended parent, so render
   its chosen masked palette directly instead of pre-inverting it. */
@supports (mask-image:url('/assets/logo.png')) or (-webkit-mask-image:url('/assets/logo.png')){
  [data-main-header] .brand-link::after{filter:none!important}
}