.page-header.is-transparent-light {
  background: linear-gradient(var(--wp--preset--color--black), transparent);
  color: var(--wp--preset--color--white);
}

.page-header.is-transparent-light.stick {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  border-bottom: 1px solid var(--wp--preset--color--grey-lighter);
}

.page-header.is-transparent-light ~ .page-hero {
  margin-top: -72px;
}

.page-header.is-transparent-light .menu-item:hover > a,
.page-header.is-transparent-light .menu-item a:active,
.page-header.is-transparent-light .menu-item a:focus,
.page-header.is-transparent-light .menu-item:focus-within > a,
.page-header.is-transparent-light .page-headerButton:hover,
.page-header.is-transparent-light .page-headerButton:active,
.page-header.is-transparent-light .page-headerButton:focus {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}

.page-header.is-transparent-light .mobile-menu .menu-item a:hover,
.page-header.is-transparent-light .mobile-menu .menu-item a:active,
.page-header.is-transparent-light .mobile-menu .menu-item a:focus {
  background-color: var(--wp--preset--color--grey-lighter);
}

.page-header.is-transparent-light .mobile-menu .menu-item-has-children.is-open > a {
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
}

.page-header.is-transparent-light .mobile-menu .menu-item-has-children.is-open > a:hover,
.page-header.is-transparent-light .mobile-menu .menu-item-has-children.is-open > a:active,
.page-header.is-transparent-light .mobile-menu .menu-item-has-children.is-open > a:focus,
.page-header.is-transparent-light .sub-menu .menu-item a:hover,
.page-header.is-transparent-light .sub-menu .menu-item a:active,
.page-header.is-transparent-light .sub-menu .menu-item a:focus {
  background-color: var(--wp--preset--color--grey-dark);
  color: var(--wp--preset--color--white);
}

.page-header.is-transparent-light .page-nav--main .current-menu-item,
.page-header.is-transparent-light .page-nav--main .current-menu-ancestor {
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
}

.page-header.is-transparent-light .page-nav--main .mobile-menu .current-menu-item,
.page-header.is-transparent-light .page-nav--main .mobile-menu .current-menu-ancestor {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}

.page-header.is-transparent-light .icon-cart {
  @extend %icon-cart-light;
}

.page-header.is-transparent-light .site-separator {
  display: none;
}
