/* =Header */

:root {
--header-height-desktop:100px;
--header-height-mobile:140px;
}

.header-block {
z-index: 3;
top:0;
left:0;
width:100%;
height: var(--header-height-mobile);
pointer-events: none;
}
@media screen and (min-width: 769px) {
    .header-block {
    height: var(--header-height-desktop);
    }
}

.header-block[data-header-sticky="true"] {
position: fixed;
}
.header[-blockdata-header-transparent="true"] {
position:absolute;
background-color: transparent;
}
.header-logo {
position: absolute;
z-index: 1001;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
pointer-events: all;
transition: all .25s ease-in;

/* opacity: 0;
animation: header-logo-enter 1s ease-out forwards; */
}
@keyframes header-logo-enter {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.header-exited .header-logo {
opacity: 0;
pointer-events: none;
transition: all .25s ease-in;
}

.header-logo a {
display: block;
}
.header-logo-default img,
.header-logo-default svg {
width: 200px;
height: auto;
}
.header-logo-reverse {
display: none;
}
.header-logo-sticky {
display: none;
}

/* hide state */

.header-logo,
.c7-utility-menu {
opacity: 1;
transition: all .25s ease-in;
}
.header-scroll-up .header-logo,
.header-scroll-up .c7-utility-menu {
opacity: 0;
transition: all .25s ease-in;
}

/* =Layout */

.header-layout-split {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-layout-split-left {
flex: 1;
text-align: right;
}
.header-layout-split-right {
flex: 1;
text-align: left;
}
@media (max-width: 768px) {
    .header-layout-split {
    flex-direction: column;
    }
    .header-layout-split-left {
    order: 2;
    }
    .header-layout-split-right {
    order: 1;
    }
}


/* =Header Overlay */

/* header overlay toggle */

.header-overlay-toggle {
top:0;
left:40px;
color:#81685D;
opacity: 0;
animation: toggle-enter 1s ease-out forwards;
animation-delay: 1s;
}
@keyframes toggle-enter {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.header-overlay-toggle {
position: absolute;
transform:translate(-20px, 0);
z-index: 1004;
text-transform: uppercase;
display: block;
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;
}
@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;
    }
    .logo-proxy-exited .header-overlay-toggle {
    transition: 1s all ease;
    }
}

    
/* toggle labels */

.toggle-label {
display: inline-block;
opacity: 0;
position: absolute;
top: 50%;
left: 100%;
translate: 0 -45%;
font-family: 'Times New Roman', Times, serif;
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
font-style: normal;
}

.home .toggle-label {
opacity: 1;
}
@media screen and (max-width: 769px) {
    .toggle-label {
    display: none;
    }
}
.home .toggle-label-close {
opacity: 0;
}
.toggle-label-menu {
transition: all .25s ease-in;
}
.toggle-label-close {
opacity: 0;
}
.header-overlay-out .toggle-label-menu,
.header-overlay-out .header-overlay-toggle:hover .toggle-label-menu,
.header-overlay-out .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 0;
transition: all .25s ease-in;
}
.toggle-label-close {
opacity: 0;
transition: all .25s ease-in;
}
.header-overlay-out .toggle-label-menu {
opacity: 0;
transition: all 0 ease-in;
}
.header-overlay-out .header-overlay-toggle:hover .toggle-label-close,
.header-overlay-out .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 1;
transition: all .25s ease-in;
}
.header-overlay-out .header-overlay-toggle:hover .toggle-label-menu,
.header-overlay-out .header-overlay-toggle:focus-visible .toggle-label-menu {
opacity: 0;
transition: all .25s ease-in;
}

/* toggle icon */

.toggle-icon {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
}
.toggle-icon span {
position: absolute;
width: 40px;
height: 40px;
margin-left: -20px;
left: 50%;
top: 50%;
width:100%;
}
.toggle-icon span:before {
top: -6px;
}
.toggle-icon span:after {
bottom: -6px;
}
.header-overlay-toggle:hover span:before,
.header-overlay-toggle:focus-visible span:before {
top: -10px;
}
.header-overlay-toggle:hover span:after,
.header-overlay-toggle:focus-visible span:after {
bottom: -10px;
}
.toggle-icon span,
.toggle-icon span:before,
.toggle-icon span:after {
height: 2px;
position: absolute;
display: block;
content: '';
background-color: var(--wp--preset--color--brown-light);
transition: all .25s ease-in;
}
.home .toggle-icon span,
.home .toggle-icon span:before,
.home .toggle-icon span:after {
background-color: var(--wp--preset--color--brown-dark);
transition: all .25s ease-in;
}
.home.header-exited .toggle-icon span,
.home.header-exited .toggle-icon span:before,
.home.header-exited .toggle-icon span:after {
background-color: var(--wp--preset--color--brown-light);
transition: all .25s ease-in;
}

.toggle-icon span {
width: 40px;
}
.toggle-icon span:before {
width: 40px;
}
.toggle-icon span:after {
width: 40px;
}
.header-overlay-toggle:hover span,
.header-overlay-toggle:hover span:before,
.header-overlay-toggle:hover span:after,
.header-overlay-toggle:focus-visible span,
.header-overlay-toggle:focus-visible span:before,
.header-overlay-toggle:focus-visible span:after, 
.header-overlay-out .header-overlay-toggle span,
.header-overlay-out .header-overlay-toggle span:before,
.header-overlay-out .header-overlay-toggle span:after {
width:40px;
}
.toggle-icon span,
.toggle-icon span:before,
.toggle-icon span:after,
.header-overlay-toggle:hover span,
.header-overlay-toggle:hover span:before,
.header-overlay-toggle:hover span:after,
.header-overlay-toggle:focus-visible span,
.header-overlay-toggle:focus-visible span:before,
.header-overlay-toggle:focus-visible span:after,
.header-overlay-out .header-overlay-toggle span,
.header-overlay-out .header-overlay-toggle span:before,
.header-overlay-out .header-overlay-toggle span:after  {
transition: all .125s ease-in;
}
.header-overlay-out .toggle-icon span {
background-color: transparent !important;
}
.header-overlay-out .toggle-icon span:before {
top:0;
}
.header-overlay-out .toggle-icon span:after {
bottom:0;
}
.header-overlay-out .toggle-icon span:before {
transform: rotate(45deg);
}
.header-overlay-out .toggle-icon span:after {
transform: rotate(-45deg);
}
.header-overlay-out {
overflow: hidden;
}
.header-overlay-out .header-overlay,
.header-overlay:focus-within {
opacity:1;
pointer-events: auto;
transition: all .25s ease-out;
}

/* header overlay */

body .header-block > .header-overlay {
background-color: #fff;
opacity: 0;
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-block > div.header-overlay {
pointer-events: none;
}
body.header-overlay-out .header-block > .header-overlay,
body:not(.header-overlay-out) .header-block > .header-overlay:focus-within {
pointer-events: all;
opacity: 1;
}
.header-overlay-content {
min-height: 100vh;
min-height: 100svh;
box-sizing: border-box;
position: relative;
z-index: 5;
padding: 100px 60px;
}
.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;
opacity: .2;
}

.header-overlay a {
text-decoration: none;
}
.header-overlay-menu-primary .menu,
.header-overlay-menu-secondary .menu {
padding: 0;
}
.header-overlay-menu-primary .menu li,
.header-overlay-menu-secondary .menu li {
list-style-type: none;
/* margin: .5rem 0; */
}
.header-overlay-menu-primary .menu a,
.header-overlay-menu-secondary .menu a {
padding: .25em 0;
position: relative;
}
.header-overlay-menu-primary .menu a,
.header-overlay-menu-primary .menu a:hover,
.header-overlay-menu-primary .menu a:focus-visible,
.header-overlay-menu-secondary .menu a,
.header-overlay-menu-secondary .menu a:hover,
.header-overlay-menu-secondary .menu a:focus-visible {
text-decoration: none !important;
}


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

    .header-overlay-menu-primary .menu a::after,
    .header-overlay-menu-secondary .menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background-color: var(--wp--preset--color--gold-light);
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all .25s ease-in;
    }
    .header-overlay-menu-primary .menu a:hover::after,
    .header-overlay-menu-primary .menu a:focus-visible::after,
    .header-overlay-menu-secondary .menu a:hover::after,
    .header-overlay-menu-secondary .menu a:focus-visible::after {
    transform: scaleX(1.5);
    }
}

.header-overlay-menu-primary {
font-size: 1.5rem;
line-height: 2.625rem;
text-transform: uppercase;
}
.header-overlay-menu-secondary {
font-size: 1rem;
text-transform: uppercase;
}

@media screen and (max-width: 999px) {
    .header-overlay-menu-secondary {
    padding-top: 2rem !important;
    }
}

@media screen and (min-width: 1000px) {
    .header-overlay-content {
    padding: 100px 90px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    align-items: center;
    }
    .header-overlay-content > div {
    justify-content: center;
    align-items: center;
    }
}

.header-overlay-contact {
margin-top: 2rem;
text-transform: uppercase;
}
.header-overlay-contact p {
font-size: .9rem;
line-height: 1.25em;
margin-bottom: 1em;
}

ul.header-overlay-social-menu {
padding: 0;
display: flex;
flex-direction: column;
}
.header-overlay-social-menu li {
list-style-type: none;
}
.header-overlay-social-menu a {
text-transform: uppercase;
font-size: .9rem;
line-height: 1.25em;
}

@media screen and (max-width: 769px) {
  ul.header-overlay-social-menu {
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  justify-content: center;
  }
}


/* logo */

.header-overlay-logo {
text-align: center;
margin-bottom: 2rem;
}
.header-overlay-logo a {
display: inline-block;
}
.header-overlay-logo img {
max-width: 250px;
height: auto;
}

/* menus */

.header-overlay .menu a {
display: block;
/* text-align: center; */
/* padding: 10px; */
/* font-size: 1.5rem; */
}


/* 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-overlay-out .logo {
    opacity: 0 !important;
    pointer-events: none !important;
    }
    .header-overlay-out .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;
    }

/* sub menu */
/*

    .header-overlay ul.menu > li > .sub-menu > li {
    font-size:28px;
    }
    .menu-primary-menu-container .sub-menu .sub-menu {
    padding: 1rem 0 0;
    max-width:400px;
    margin: 0 auto;
    }
    .menu-primary-menu-container .sub-menu li:last-child .sub-menu li:last-child {
    padding-bottom: 0;
    }
    .sub-menu-toggle,
    .sub-menu-toggle:hover {
    position: absolute;
    top:15px;
    left:calc(100% + 10px);
    height:41px;
    width:41px;
    padding:0;
    cursor: pointer;
    }
    .sub-menu-toggle::after,
    .sub-menu-toggle::before {
    content:" ";
    display: block;
    position: absolute;
    background-color: var(--wp--preset--color--brown-dark);;
    }


    .sub-menu-toggle::after {
    height:20px;
    width:2px;
    left:19px;
    top: 10px;
    opacity: 1;
    }
    .sub-menu-toggle::before {
    height:2px;
    width:20px;
    top:19px;
    left:10px;
    }
    .sub-menu-toggle.is-open::after {
    opacity:0;
    }
    .header-overlay .menu-primary-menu-container > ul.menu > li > ul.sub-menu {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
    }
    .header-overlay ul.sub-menu li:last-child {
    padding-top: 1rem;
    padding-bottom: 2em;
    }
    .header-overlay ul.sub-menu ul.sub-menu li:last-child {
    padding-bottom: 0;
    padding-top: 0;
    }
    
    */
}

/* 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-out .menu-primary-menu-container > ul.menu > li {
    opacity:0;
    animation:menu-item-in 0.75s ease-out forwards;
    } */
    /* .header-overlay-out .menu-primary-menu-container > ul.menu > li:nth-child(1){
    animation-delay:0.1s;
    }
    .header-overlay-out .menu-primary-menu-container > ul.menu > li:nth-child(2){
    animation-delay:0.2s;
    }
    .header-overlay-out .menu-primary-menu-container > ul.menu > li:nth-child(3){
    animation-delay:0.3s;
    }
    .header-overlay-out .menu-primary-menu-container > ul.menu > li:nth-child(4){
    animation-delay:0.4s;
    }
    .header-overlay-out .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;
    }
}


/* utility menu */

.c7-utility-menu {
position: absolute;
}
.header-overlay-out .c7-utility-menu {
position: fixed;
z-index: 1004;
}
.c7-user-nav__account > a,
.c7-user-nav__cart > button.c7-link {
text-transform: uppercase;
font-size: .75rem;
vertical-align: top;
line-height: 1;
letter-spacing: .1em;
border: none !important;
}
.home .c7-user-nav__account > a, 
.home .c7-user-nav__cart > button {
font-weight: bold;
color:var(--wp--preset--color--brown-dark);
}
body .c7-user-nav__account > a, body .c7-user-nav__cart > button {
padding-bottom: 0;
}

.c7-utility-menu-before a,
.c7-utility-menu-before a:hover,
.c7-utility-menu-before a:focus-visible {
color: var(--c7-header-text-color) !important;
text-transform: uppercase;
font-weight: normal;
font-size: 0.75rem;
letter-spacing: 0.1em;
margin-right: 5px;
text-decoration: none !important;
line-height: 1 !important;
}
@media screen and (max-width: 400px) {
    .c7-utility-menu-before {
    display: none !important;
    }
}


/* spacer */

.header-spacer {
position: relative;
}
.header-position {
position: absolute;
top:0;
left:0;
opacity: 0;
width: 1px;
height: 20px;
}

/* mobile */
@media screen and (max-width: 999px) {
    .header-spacer {
    height: var(--header-height-mobile);
    }
}

/* desktop */
@media screen and (min-width: 1000px) {
    .header-spacer {
    height: var(--header-height-desktop);
    }
}