:root{--site-header-height:80px;--header-overlap:16px}
body .header.header{position:sticky;top:0;inset-inline:auto;bottom:auto;height:var(--site-header-height);padding:0 56px;color:var(--ink);background:none;border:0;isolation:isolate;z-index:20}
body .header.header:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/header-soft.svg') center/100% 100% no-repeat;pointer-events:none}
body .header.header .logo{content:url('assets/logo black.svg');width:80px;height:58px;object-fit:contain;transform:translateY(-3px)}
body .header.header .bag img{filter:none}
body .header.header .bag:is(:hover,:focus-visible) img{filter:brightness(0) saturate(100%) invert(44%) sepia(17%) saturate(1330%) hue-rotate(100deg) brightness(91%) contrast(86%)}
body .header.header .menu-button span{background:var(--green)}
body:not(.pdp-page) .hero{margin-top:calc(-1 * var(--header-overlap))}
@media(max-width:1000px){body .header.header{padding-inline:32px}}
@media(max-width:640px){:root{--site-header-height:70px;--header-overlap:14px}body .header.header{padding-inline:18px}body .header.header .logo{width:69px;height:50px}body .header.header nav{top:70px}}

body.home-page .header.header{position:fixed;inset:0 0 auto}
body.home-page .hero{margin-top:0}
body.home-page:not(.is-past-hero) .header.header{color:white}
body.home-page:not(.is-past-hero) .header.header:before{opacity:0}
body.home-page:not(.is-past-hero) .header.header .logo{content:url('assets/logo white.svg')}
body.home-page:not(.is-past-hero) .header.header .bag img{filter:brightness(0) invert(1)}
body.home-page:not(.is-past-hero) .header.header .bag:is(:hover,:focus-visible) img{filter:brightness(0) saturate(100%) invert(44%) sepia(17%) saturate(1330%) hue-rotate(100deg) brightness(91%) contrast(86%)}
body.home-page:not(.is-past-hero) .header.header .menu-button span{background:white}
body.home-page .header.header nav.open{color:var(--ink)}

#about{scroll-margin-top:calc(var(--site-header-height,80px) + 20px)}
@media(max-width:640px){#about{scroll-margin-top:calc(var(--site-header-height,70px) + 4px)}}
