#header {
--menu-lines: 1;
--menu-spacer-width: var( --border-width ); position: -webkit-sticky;
position: -moz-sticky;
position: sticky; top: 0px;
z-index: 100;
}
#header__push {
position: absolute;
height: 50vh;
top: -50vh;
width: 100%;
background: var( --white );
z-index: 100;
}
#header.is-gone {
transition: top var( --link-transition-duration ) var( --link-transition-easing );
}
#header.is-gone.is-triggered--scroll,
#header.is-gone.is-triggered--hover {
top: 0 !important; }
#header__background {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: var( --white );
padding: var( --vertical-spacing ) calc( var( --horizontal-spacing ) * 0.5 );
box-sizing: content-box;
height: calc( var( --one-line--small ) * var( --menu-lines ) );
transition: height var( --link-transition-duration ) var( --link-transition-easing ), background var( --link-transition-duration ) var( --link-transition-easing );
} #header__navigation {
position: relative;
z-index: 20;
padding: var( --vertical-spacing ) calc( var( --horizontal-spacing ) * 0.5 );
}
#header__navigation .menu {
display: flex;
}
#header__navigation .menu .menu-item {
line-height: 1.1;
}
#header__navigation .menu .menu-item.menu-item-has-children > a {
pointer-events: none;
}
#header__navigation .menu .menu-item > a::after {
bottom: 0.07em !important;
}
#header__navigation .menu .menu-item > a .link__wrap {
height: 1em;
}
#header__navigation .menu > .menu-item {
position: relative;
flex: 1;
margin: 0 calc( var( --horizontal-spacing ) * 0.25 );
padding: 0 calc( var( --horizontal-spacing ) * 0.25 );
}
#header__navigation .menu > .menu-item::before,
#header__navigation .menu > .menu-item:last-child::after {
position: fixed;
content: '';
display: block;
width: var( --menu-spacer-width );
height: 1em;
background: currentColor; margin-left: calc( var( --horizontal-spacing ) * -0.5 - var( --menu-spacer-width ) * 0.5 );
top: var( --vertical-spacing );
}
#header__navigation .menu > .menu-item:last-child::after {
right: calc( var( --horizontal-spacing ) * 0.5 - var( --menu-spacer-width ) * 0.5 ); }
#header__navigation-search,
#header__navigation-cart {
position: absolute;
top: calc( var( --vertical-spacing ) - 0.05em );
right: calc( var( --horizontal-spacing ) + 0.1em ); width: 1.1em;
}
#header__navigation-cart {
top: calc( var( --vertical-spacing ) - 0.2em );
width: 1.2em;
}
#header__navigation-cart .cart-count {
position: absolute;
top: 63%;
left: 50%;
transform: translate( -50%, -50% );
font-size: 0.7em;
}
#header__navigation-trigger {
position: fixed;
width: calc( var( --horizontal-spacing ) * 0.7 );
height: 1em;
top: var( --vertical-spacing );
right: var( --horizontal-spacing );
pointer-events: all;
cursor: pointer;
}
#header__navigation-trigger::before,
#header__navigation-trigger::after {
content: '';
width: var( --menu-spacer-width );
height: 100%;
background: currentColor;
display: block;
position: absolute;
top: 0;
left: 0;
}
#header__navigation-trigger::after {
left: auto;
right: 0;
} @media ( max-width: 699px ) {
#header {
top: 0 !important;
height: calc( var( --vertical-spacing ) * 2 + 1em );
overflow: visible;
}
#header__navigation {
background: var( --white );
max-height: 100%;
overflow: hidden;
transition: max-height calc( var( --animation-transition-duration ) * 0.5 ) var( --animation-transition-easing );
}
#header__navigation .menu {
flex-wrap: wrap;
}
#header__navigation .menu > .menu-item {
min-width: 100%;
}
#header:not( .is-open ) #header__navigation .menu > .menu-item:not( :first-child ) > a,
#header:not( .is-open ) #header__navigation .sub-menu {
opacity: 0;
pointer-events: none;
transition-delay: 0s;
}
#header #header__navigation .menu > .menu-item:not( :first-child ) > a,
#header #header__navigation .sub-menu {
transition: opacity calc( var( --animation-transition-duration ) * 0.25 ) var( --animation-transition-easing ) calc( var( --animation-transition-duration ) * 0.25 );
}
.menu-item:hover > a .link__content,
.menu-item:active > a .link__content,
.menu-item.current-menu-item > a .link__content, 
.menu-item.current-menu-ancestor > a .link__content, 
.single-artist .menu-item.catalog-item > a .link__content {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
}
#header__navigation .sub-menu {
margin-left: calc( var( --horizontal-spacing ) * 1.5 );
}
#header__navigation-cart {
right: calc( var( --horizontal-spacing ) * 2 + 0.5em );
}
#header__navigation-search {
right: calc( var( --horizontal-spacing ) * 3 + 1.45em );
top: calc( var( --vertical-spacing ) - 0.1em );
width: 1.2em;
} 
#header__background {
display: none;
}
#header.is-open {}
#header.is-open #header__navigation {
max-height: 100vh;
}
}
@media ( min-width: 700px ) {
#header__navigation .menu > .menu-item.menu-item-has-children > a {
position: absolute;
}
#header__navigation .sub-menu > .menu-item > a .link__content {
-webkit-transform: translateY( 100% );
-moz-transform: translateY( 100% );
transform: translateY( 100% );
}
#header__navigation .menu-item.do-animate:hover > .sub-menu > .menu-item > a .link__content,
#header__navigation .menu-item.do-animate.current-menu-ancestor > .sub-menu > .menu-item > a .link__content,
body:not( .home ) #header__navigation .menu-item.current-menu-ancestor > .sub-menu > .menu-item > a .link__content,
.single-artist #header__navigation .menu-item.catalog-item > .sub-menu > .menu-item > a .link__content {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
#header__navigation-trigger,
#header__navigation-cart {
display: none;
}
} .home .menu-item:not( .do-animate ):not( .current-menu-ancestor ) > a .link__wrap > span {
-webkit-transform: translateY( 100% );
-moz-transform: translateY( 100% );
transform: translateY( 100% );
}