:root{--header-height: calc( var(--layout-spacer-3) + var(--layout-paddedSpacer) + var(--btn-size-small) + var(--layout-paddedSpacer) + var(--layout-paddedSpacer) )}header.nav{--color-fill: rgb(var(--color-green-500));color:var(--color-fill);padding-inline:var(--layout-spacer-3);padding-block-start:var(--layout-spacer-3);padding-block-end:var(--layout-paddedSpacer);position:fixed;transition:transform var(--animate-slow) ease,height var(--animate-slow) cubic-bezier(.4,0,.6,1) 80ms,padding var(--animate-slow) ease;z-index:1000}html:not(.show-menu) header.nav:not(.pinned) .wrap.trans{--color-fill: rgb(var(--color-chartreuse-500));color:var(--color-fill)}header.nav .wrap{background-color:transparent;border-radius:var(--layout-radius-s);padding-inline-start:calc(var(--layout-spacer-6) - var(--layout-paddedSpacer));padding-inline-end:var(--layout-paddedSpacer);padding-block:var(--layout-paddedSpacer);transition:background-color var(--animate-slow) ease,box-shadow var(--animate-slow) ease,padding var(--animate-slow) ease,border-radius var(--animate-slow) ease}header.nav.pinned,.show-menu header.nav{transform:translateY(calc(var(--layout-paddedSpacer) * -1))}header.nav.pinned .wrap,.show-menu header.nav .wrap{-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);background-color:rgba(var(--tint-300),.84);box-shadow:inset var(--color-bevel) 0 0 0 1px,var(--shadow-color-light) 0 var(--shadow-size) 0}.navPinner{height:1px;pointer-events:none;position:absolute;top:0;width:1px}header.nav .logo,header.nav a{transition:color var(--animate-slow) ease}header.nav .logo{height:1.5rem}header.nav .nav-menu{--cluster-gap: var(--layout-spacer-3);font-size:var(--font-size-xs);font-weight:500;letter-spacing:.025em;padding-left:var(--layout-spacer-6);text-transform:uppercase}header.nav .nav-menu a{color:inherit;position:relative}header.nav .nav-menu a:after{background:currentColor;bottom:-1em;content:"";height:2px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity var(--animate-fast) ease,bottom var(--animate-fast) ease}header.nav .nav-menu a:hover:after{bottom:-.5em;opacity:1}header.nav .logo-group{order:1}header.nav .open-cart{order:2;transition:var(--btn-transition),opacity var(--animate-slow) ease}header.nav .open-cart:not(.cart-full) .label:after{content:" Now"}header.nav .open-cart:hover [class*=icon--]{-webkit-mask-image:url(icon-account.svg);mask-image:url(icon-account.svg)}header.nav .open-cart:active [class*=icon--]{-webkit-mask-image:url(icon-account-hover.svg);mask-image:url(icon-account-hover.svg)}body:after{content:url(icon-account.svg) url(icon-account-hover.svg);height:0;overflow:hidden;pointer-events:none;position:absolute;width:0;z-index:-1}html:not(.show-menu) header:not(.pinned) .wrap.trans .btn{--color-bevel: rgba(var(--tint-100), .39)}header.nav .menu--mobile{display:none}@media (width < 1000px){:root{--navLeftMargin: calc( var(--layout-spacer-3) + var(--layout-spacer-3) );--menu-stagger-delay: 50ms;--menu-enter-duration: .42s;--menu-exit-duration: .21s;--menu-initial-delay: .12s}header.nav .nav-menu{--cluster-gap: var(--layout-spacer-3);align-items:flex-start;flex-direction:column;font-size:var(--font-size-xl);font-weight:400;left:var(--navLeftMargin);letter-spacing:0;padding-left:0;position:absolute;text-transform:none;top:calc(var(--header-height) + var(--layout-spacer-3));right:var(--layout-outerMargin)}header.nav .nav-menu .stack{--stack-gap: var(--layout-spacer-2)}html:not(.show-menu) header.nav .nav-menu{pointer-events:none;visibility:hidden}header.nav .open-cart:not(.cart-full) .label:after{display:none}html:not(.show-menu) header.nav:not(.pinned) .open-cart:not(.cart-full){opacity:0;pointer-events:none}header.nav .wrap{padding-inline-start:var(--layout-spacer-3)}header.nav .logo{left:50%;position:absolute;transform:translate(-50%);transition:transform var(--animate-slow) ease,left var(--animate-slow) ease}header.nav.pinned .logo,.show-menu header.nav .logo{left:calc(var(--layout-spacer-3) + 1.5rem + var(--layout-spacer-2));transform:translate(0)}.show-menu header.nav .logo{left:calc(var(--layout-spacer-3) + var(--layout-spacer-3) + 1.5rem + var(--layout-spacer-2))}header.nav .menu-btn{display:flex;cursor:pointer}header.nav .menu--mobile [class*=icon--]{height:1.5rem}.show-menu header.nav .menu-btn [class*=icon--]{-webkit-mask-image:url(icon-close.svg);mask-image:url(icon-close.svg)}header.nav .open-cart [class*=icon--]{height:43%}header.nav .open-cart.cart-full{padding-inline:calc(var(--layout-spacer-2) + (var(--layout-spacer) * .25))}.show-menu header.nav{height:calc(100dvh + var(--layout-paddedSpacer))!important;padding-inline:0;padding-block:0}.show-menu header.nav .wrap{border-radius:0;box-shadow:none;height:100%;padding-inline-start:var(--navLeftMargin);padding-inline-end:var(--layout-spacer-4);padding-block:calc(var(--layout-paddedSpacer) + var(--layout-spacer-3))}header.nav .menu--mobile{display:flex}header.nav .nav-menu .stack{--stack-gap: var(--layout-spacer-3);border-top:1px solid rgba(var(--color-green-300),.34);margin-block-start:var(--layout-spacer-1);padding-block-start:var(--layout-spacer-3);width:100%}header.nav .nav-menu .stack a:first-child,header.nav .nav-menu .stack a:last-child{color:rgb(var(--color-grapefruit-500))}header.nav .nav-menu .stack a:last-child:before{background:rgba(var(--color-green-300),.34);content:"";display:block;height:1px;margin-block-start:var(--layout-spacer-1);margin-block-end:var(--layout-spacer-3);width:calc(100vw - var(--navLeftMargin) - var(--layout-outerMargin))}header.nav .nav-menu a:after{display:none}html:not(.show-menu) header.nav .nav-menu>a,html:not(.show-menu) header.nav .nav-menu .stack>a{opacity:0;transform:translateY(-12px)}.show-menu header.nav .nav-menu>a,.show-menu header.nav .nav-menu .stack>a{animation:menuItemEnter var(--menu-enter-duration) cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--menu-initial-delay) + (var(--stagger-index) * var(--menu-stagger-delay)));opacity:0}@keyframes menuItemEnter{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}html:not(.show-menu) header.nav .nav-menu>a,html:not(.show-menu) header.nav .nav-menu .stack>a{animation:menuItemExit var(--menu-exit-duration) ease-out forwards;animation-delay:0ms}@keyframes menuItemExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/styles-header.css.map */