/* =Header */

:root {
--header-color-alt:#fff;
--header-background-color:transparent;
--header-overlay-background-color:#EBE3D7;
--header-button-color:#D03238;
--header-toggle-color-default:#849893;
--header-toggle-color-hover:#D03238;
--header-toggle-color-alt:#fff;
--header-toggle-color-menu:#849893;
}

.header-block {
position: relative;
top:0;
left:0;
width:100%;
}
.header-sticky .header-main,
.header-block[data-header-sticky="true"] .header-main {
position: fixed;
}
.header[-blockdata-header-transparent="true"] .header-main {
position:absolute;
background-color: transparent;
}
.header-main {
background-color: var(--header-background-color);
}
.hero-page .header-main,
.hero-page .header-utility-menu {
color:var(--header-color-alt);
}

/* =Proxy */

:root {
--header-default-height: 260px;
/* --header-sticky-height: 150px; */
}
.header-position {
position: absolute;
top:0;
left:0;
}
.header-proxy {
position: relative;
height:var(--header-default-height);
transition: all .5s ease;
}
.header-main {
position: absolute;
top:0;
left:0;
width:100%;
z-index: 100;
height:var(--header-default-height);
transition: all .5s ease;
}
.header-sticky .header-main,
.header-sticky .header-proxy {
height:var(--header-sticky-height);
transition: all .5s ease;
}

.hero-page .header-proxy {
display: none;
}


/* =Logo */
:root {
--default-logo-width: 160px;
}

.header-logo {
position: absolute;
top: 30px;
left: 50%;
width: var(--default-logo-width);
transform: translate(-50%, 0%);
/* padding: 10px; */
}
@media screen and (min-width:999px) { /* mobile and tablet */
    /* .header-logo {
    margin-top:4rem;
    } */
}
.header-logo a {
display: block;
}
.header-logo svg {
display: block;
height:200px;
}
@media screen and (max-width:999px) {
    .header-logo svg {
    height: 150px !important;
    }
    
}

.hero-page .header-logo svg path {
fill: #fff !important;
}
/* .header-logo-default,
.header-logo-sticky {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .25s ease-in;
} */
.header-logo-default {
opacity: 1;
}

/* =Menus */

.header-block .menu {
list-style: none;
text-transform: uppercase;
font-size:14px;
letter-spacing: .1em;
font-weight: 600;
}
.header-main .menu {
opacity: 1;
transition: all .25s ease-in;
}
.header-main .menu a {
font-size:13px;
letter-spacing: .05em;
font-weight: 500;
text-transform: uppercase;
}


/* =Utility Menu */

.header-utility-menu {
position: absolute;
z-index: 100;
top:0;
right:0;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.header-utility-menu-item {
/* flex:1; */
margin-right: 10px;
}
.header-utility-menu-item svg {
height:24px;
width:24px;
padding:2px 5px;
}
.header-utility-menu-embed {
padding: 10px;
font-size:12px;
}
.header-utility-menu-button a {
padding: 6px 10px;
display: block;
text-transform: uppercase;
font-weight: 900;
/* font-style:italic; */
color:#fff;
border-radius: 1px;
font-size:12px;
letter-spacing: .1em;
white-space: nowrap;
}
.header-utility-menu-button a,
.header-utility-menu-button a:hover,
.header-utility-menu-button a:focus-visible {
position: relative;
overflow: hidden;
background-color: transparent;
color:#fff;
}
.header-utility-menu-button a:hover,
.header-utility-menu-button a:focus-visible {
font-style: italic;
}
.header-utility-menu-button a::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background: linear-gradient(
	0deg, 
	var(--red-light) 0%, 
	var(--red-light) 49%, 
	var(--red-dark) 51%, 
	var(--red-dark) 100%
);
z-index: -1;
transition: all 1s ease;
transform: translateY(0%);
}
.header-utility-menu-button a:hover::after,
.header-utility-menu-button a:focus-visible::after {
transform: translateY(-50%);
transition: all .5s ease;
}
@media (max-width:540px){/* mobile */
    .header-utility-menu-sign-up {
    display: none !important;
    }
    .header-overlay-toggle {
    padding: 0 !important;
    }

}
@media (max-width:768px){/* mobile/tablet */

    .header-overlay-content .menu a {
    font-size:17px;
    }
}

.account-link,
.cart-link {
display: inline-block;
}
.account-link {
position: relative;
top: 1px;
}
.cart-link svg path,
.cart-link svg polygon,
.cart-link svg polyline,
.cart-link svg circle,
.account-link circle,
.account-link path,
.account-link polygon,
.account-link polyline {
stroke-width: 3px !important;
}
.hero-page .cart-link path,
.hero-page .cart-link polyline,
.hero-page .cart-link circle,
.hero-page .account-link circle,
.hero-page .account-link path,
.hero-page .account-link polyline {
stroke: #fff;
}
.hero-page .cart-link polygon,
.hero-page .account-link polygon,
.hero-page .account-link path {
fill: #fff;
}
.hero-page .cart-link circle {
fill: #fff;
stroke: #fff;
stroke-width: 2px;
}
.hero-page .account-link circle {
stroke: #fff;
stroke-width: 2px;
}

/* =Header Overlay */

/* header overlay toggle */

/* align left */
.header-overlay-toggle {
top:0;
left:15px;
/* opacity: 0; */
/* pointer-events: none; */
}

.header-overlay-toggle {
position: fixed;
/* transform:translate(-30px, 30px); */
z-index: 1004;
opacity: 1;
pointer-events: auto;
display: block;
text-transform: uppercase;
padding: 10px;
height:60px;
width:60px;
box-sizing:border-box;
margin: 0;
background-color:transparent;
border:none;
transition: .5s all ease;
box-shadow:none;
cursor: pointer;
}
.header-overlay-toggle:hover,
.header-overlay-toggle:focus-visible,
.header-overlay-toggle:active {
background-color:transparent;
border:none;
/* padding: 10px; */
}

/* mobile and tablet */
@media screen and (max-width:1000px){

}

@media screen and (min-width:1000px){/* desktop */
    .header-overlay-toggle:hover,
    .header-overlay-toggle:focus-visible,
    .header-overlay-toggle:active {
    background-color:transparent;
    border:none;
    /* padding: 10px; */
    }
    .header-proxy-exited .header-overlay-toggle {
    transform:translate(0, -10px);
    transition: .5s all ease;
    }

}
.header-logo {
animation: logoIn .5s ease-out forwards;
}
.header-proxy-exited .header-logo {
animation: logoOut .75s ease-out forwards;
}
@keyframes logoIn {
    from {
        opacity: 0;
        pointer-events: none;
    }
    to {
        opacity: 1;
        pointer-events: all;
    }
}
@keyframes logoOut {
    from {
        opacity: 1;
        pointer-events: all;
    }
    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* toggle labels */
.toggle-label {
display: none;
opacity: 0;
position: absolute;
top:50%;
right: 100%;
translate: 0 -50%;
font-family: var(--font-sans-small);	
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
font-style: normal;
}
.home .toggle-label {
opacity: 1;
}
.home:not(.header-overlay-show) .toggle-label-close {
opacity: 0;
}
.toggle-label-menu {
transition: all .5s ease-in;
}
.header-overlay-show .toggle-label-menu,
.header-overlay-show .header-overlay-toggle:hover .toggle-label-menu,
.header-overlay-show .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 0;
transition: all .5s ease-in;
}
.header-overlay-toggle:hover .toggle-label-menu,
.header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 1;
transition: all .25s ease-in;
}
.toggle-label-close {
opacity: 0;
transition: all .25s ease-in;
}
.header-overlay-show .header-overlay-toggle:hover .toggle-label-close,
.header-overlay-show .header-overlay-toggle:focus-visible .toggle-label-close {
opacity: 1;
transition: all .25s ease-in;
}

.header-overlay-show .toggle-label-menu {
opacity: 0;
transition: all 0 ease-in;
}
.header-overlay-show .header-overlay-toggle:hover .toggle-label-close,
.header-overlay-show .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 1;
transition: all .25s ease-in;
}
.header-overlay-show .header-overlay-toggle:hover .toggle-label-menu,
.header-overlay-show .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 0;
transition: all .25s ease-in;
}


/* toggle icon animated */

.toggle-icon-animated { 
max-width: 50px;
margin: auto;
}
.toggle-icon-animated svg { 
height:50px;
width:50px;
}
.waves {
animation:wavesStop 1s linear infinite;
}
.toggle-icon-animated:hover .waves {
animation:wavesMove 1s linear infinite;
}
@keyframes wavesMove {
  from { transform:translateX(0); }
  to { transform:translateX(-20px); }
}
@keyframes wavesStop {
  from { transform:translateX(0); }
  to { transform:translateX(0); }
}


.toggle-icon-animated path {
stroke: var(--header-toggle-color-default);
}
.hero-page .toggle-icon-animated path {
stroke: var(--header-toggle-color-alt);
}
.hero-exited.hero-page .toggle-icon-animated path {
stroke: var(--header-toggle-color-default);
}
.header-overlay-show .toggle-icon-animated path {
stroke: var(--header-toggle-color-menu);
}
.header-overlay-show .toggle-icon-animated {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="36px" height="36px"><path d="M 2 2 L 34 34" stroke="black" stroke-width="2" vector-effect="non-scaling-stroke"/><path d="M 34 2 L 2 34" stroke="black" stroke-width="2" vector-effect="non-scaling-stroke"/></svg>'), auto;
}
.toggle-icon:hover path,
.toggle-icon:focus-visible path {
stroke: var(--header-toggle-color-hover);
}
.hero-page .toggle-icon-animated path {
stroke: var(--header-toggle-color-alt);
}
.hero-page.header-overlay-show .toggle-icon-animated path {
stroke: var(--header-toggle-color-menu);
}
    


/* toggle icon */
.toggle-icon {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
}

/* header overlay show */

#main,
.header-main,
.footer-block,
[data-block="hook:196"],
.ct-footer {
transition: all .25s ease;
}
.header-overlay-show #main,
.header-overlay-show .header-main,
.header-overlay-show .footer-block,
.header-overlay-show [data-block="hook:196"],
.header-overlay-show .ct-footer {
transform: translateX(400px);
transition: all .5s ease;
} 
.header-overlay-show {
overflow: hidden;
}
.header-overlay-show .header-overlay,
.header-overlay:focus-within {
transform:translateX(0);
/* opacity: 1; */
pointer-events: auto;
transition: all .25s ease-out;
}

      

/* header overlay */

.header-overlay {
/* opacity: 0; */
transform:translateX(-400px);
pointer-events: none;
position: fixed;
z-index:1003;
width: 100%;
height:100%;
height:100vh;
top:0;
left:0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .25s ease-out;
}
.header-overlay-closer {
/* backdrop-filter:blur(5px); */
pointer-events: none;
opacity: 0;
background: rgba(0,0,0,.7);
position: fixed;
z-index:101;
top:0;
left:0;
height:100%;
width:100%;
transition: all .125s ease-out;
/* animation: header-closer-hide .5s ease-out forwards; */
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="36px" height="36px"><path d="M 2 2 L 34 34" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/><path d="M 34 2 L 2 34" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/></svg>'), auto;
}
.header-overlay-show .header-overlay-closer {
pointer-events: all;
animation: headerCloserShow .25s ease-out forwards;
/* animation-delay: .25s; */
}
@keyframes headerCloserShow {
    from {
        opacity: 0;
        /* filter:blur(0); */
    }
    to {
        opacity: 1;
        /* filter:blur(5px); */
    }
}
@keyframes header-closer-hide {
    from {
        opacity: 1;
        /* filter:blur(5px); */
    }
    to {
        opacity: 0;
        /* filter:blur(0); */
    }
}


.header-overlay {
width: 400px;
max-width: 100%;
}
.header-overlay-content {
width: 400px;
max-width: 100%;
background: var(--header-overlay-background-color);
min-height: 100vh;
min-height: 100svh;
box-sizing: border-box;
position: relative;
z-index: 5;
padding: 100px 60px 100px 120px;
}
.header-overlay .logo {
display: none;
}

.header-overlay-background {
position: fixed;
z-index: 1;
top:0;
left:0;
width:100%;
height:100%;
}
img.header-overlay-background-image {
position: fixed;
z-index: 1;
top:0;
left:0;
width:100%;
height:100%;
object-fit: cover;
}
.header-overlay-logo {
text-align: left;
margin-bottom: 2.5em;
}
.header-overlay-logo img {
height:150px;
}
.header-overlay .menu,
.header-overlay .menu li.menu-item,
.header-overlay .menu li.page_item {
display: block;
text-align: left;
}
.header-overlay .menu a {
display: block;
padding: .5em 0;
}
.header-overlay .menu {
margin-bottom: 1.5em;
}


/* menus */

/* .header-main .menu a {
display: block;
padding: 10px;
} */


/* tablet */
@media screen and (min-width:541px) and (max-width:999px) {
    .header-overlay-content {
    padding: 100px 90px;
    }
}

/* mobile & tablet */
@media screen and (max-width:999px) {

    .header-logo {
        padding: 60px 0;
    }
    .header-overlay-show .logo {
    opacity: 0 !important;
    pointer-events: none !important;
    }
    .header-overlay-show .toggle-label-close {
    opacity: 0 !important;
    }
    .header-overlay-content li {
    list-style-type: none;
    }
    .header-overlay .menu-primary-menu-container > ul.menu > li > a {
    font-size: 36px;
    line-height: 36px;
    display: block;
    padding: 10px 0;
    }
    .header-overlay .menu-tertiary-menu-container {
    margin:2rem 0;
    }
    .header-overlay .sub-menu li {
    margin:1rem 0;
    }
    .header-overlay .social-links {
    margin: 2rem 0;
    }
    .menu-primary-menu-container ul li {
    position: relative;
    }
    /* .menu-primary-menu-container > ul > li > a {
    border-top:1px solid var(--border-color);
    }       */
    .header-overlay {
    text-align: center;
    }
    .header-overlay .color-selection {
    text-align: center;
    }
    .header-overlay .color-selection li {
    display: inline-block;
    margin: 0 10px;;
    }
    .header-overlay .color-selection button {
    height:30px;
    width:30px;
    border-radius:50%;
    }
    .header-overlay .social-links i {
    font-size:24px;
    }

}

/* desktop */
@media screen and (min-width: 1000px){

    .header-overlay .background-image {
    position: fixed;
    z-index: 0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
    .menu-primary-menu-container {
    text-align: left;
    }
    .menu-primary-menu-container ul.menu {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    }
    .menu-primary-menu-container ul.menu {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .menu-primary-menu-container li {
    list-style-type: none;
    display: flex;
    flex-direction:column;
    }

    /* entrance animation */
    /* .header-overlay-show .menu-primary-menu-container > ul.menu > li {
    opacity:0;
    animation:menu-item-in 0.75s ease-out forwards;
    } */
    /* .header-overlay-show .menu-primary-menu-container > ul.menu > li:nth-child(1){
    animation-delay:0.1s;
    }
    .header-overlay-show .menu-primary-menu-container > ul.menu > li:nth-child(2){
    animation-delay:0.2s;
    }
    .header-overlay-show .menu-primary-menu-container > ul.menu > li:nth-child(3){
    animation-delay:0.3s;
    }
    .header-overlay-show .menu-primary-menu-container > ul.menu > li:nth-child(4){
    animation-delay:0.4s;
    }
    .header-overlay-show .menu-primary-menu-container > ul.menu > li:nth-child(5){
    animation-delay:0.5s;
    } */
    

    /* .header-overlay .social-links {
    } */
    
}/* desktop */
    
@media screen and (min-width:999px) and (max-height: 650px) {
    .menu-primary-menu-container .menu > li {
    font-size: 48px;
    }
}
@keyframes menu-item-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}