header{
    --color: var(--white);
    transition: background-color 300ms ease-in-out;
}
header.fl-theme-builder-header-scrolled{
    background-color: var(--white);
    --color: var(--mahogany);
}

header:not(.fl-theme-builder-header-scrolled) .main_nav > a img:nth-child(2){
    opacity: 0;
}

header.fl-theme-builder-header-scrolled .main_nav > a img:nth-child(1){
    opacity: 0;
}

#header_navigation .fl-html{
    padding-block: 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#header_navigation .fl-html .main_nav{
    display: flex;
    align-items: center;
    gap: 4rem;
}

#header_navigation .fl-html .main_nav > a{
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    flex-shrink: 0;
}

#header_navigation .fl-html .main_nav img{
    grid-area: stack;
    width: 120px;
    height: auto;
    transition: opacity 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav > div ul{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

#header_navigation .fl-html .main_nav > div > ul > li > a{
    position: relative;
    color: var(--color);
    font-size: var(--body-large);
    text-decoration: none;

    transition: color 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav > div > ul > li > a::after{
    content: '';
    width: 100%;
    height: 1px;
    background-color: currentColor;
    position: absolute;
    top: 100%; left: 0;
    transform: scaleX(0);
    transform-origin: right;

    transition: transform 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav > div > ul > li > a:is(:hover,:active,:focus)::after,
#header_navigation .fl-html .main_nav > div > ul > li.current-menu-item > a::after{
    transform: scaleX(1);
    transform-origin: left;
}

#header_navigation .fl-html .main_nav .menu-item-has-children{
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#header_navigation .fl-html .main_nav .menu-item-has-children::after{
    content: '';
    width: .75rem; height: .75rem;
    transform: rotate(180deg);
    background-color: var(--color);
    --mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L5 1L1 5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask: var(--mask-image) no-repeat center / contain;
    -webkit-mask: var(--mask-image) no-repeat center / contain;
    transition: background-color 300ms ease-in-out, rotate 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav .menu-item-has-children:hover::after{
    rotate: 180deg;
}


#header_navigation .fl-html .main_nav .sub-menu{
    position: absolute;
    top: calc(100% + 20px);
    width: 250px;
    flex-direction: column;
    gap: .5rem;
    border-radius: .5rem;
    padding: .75rem;
    display: flex;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    background-color: #fff;
    transform: translateY(-20%);
    transition: transform 180ms ease-out, opacity 180ms ease-out;
}

#header_navigation .fl-html .main_nav .sub-menu::before{
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 100%;
    left: 0;
}

#header_navigation .fl-html .main_nav .sub-menu li{
    width: 100%;
}

#header_navigation .fl-html .main_nav .sub-menu li a{
    padding: .5rem .75rem;
    font-size: var(--body-small);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--mahogany-very-translucent);
    color: var(--mahogany);
    border-radius: .25rem;
    background-color: white;

    transition: background-color 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav .sub-menu li a::after{
    content: '';
    --mask-url: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.76741 0.686629L9.23223 0.757339M9.23223 0.757339L9.30295 4.22216M9.23223 0.757339L0.746954 9.24262' stroke='%233C1518' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: .75em; height: .75em;
    background-color: var(--mahogany-very-translucent);
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;

    transition: background-color 300ms ease-in-out;
}

#header_navigation .fl-html .main_nav .sub-menu li a:is(:hover,:active,:focus){
    background-color: var(--ivory);
}

#header_navigation .fl-html .main_nav .sub-menu li a:is(:hover,:active,:focus)::after{
    background-color: var(--mahogany);
}

#header_navigation .fl-html .main_nav .menu-item-has-children:is(:hover,:active,:focus) .sub-menu{
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

#header_navigation a.header_button{
  display: block;
  width: fit-content;
  padding: .75rem 1.5rem;
  border-radius: 3rem;
  background-color: var(--chili);
  color: var(--white);
  font-weight: var(--body-semibold);

  transition: background-color 300ms ease-in-out;
}

#header_navigation a.header_button:is(:hover,:active,:focus){
  color: var(--white);
  background-color: #C12626;
  text-decoration: none;
}

#header_navigation a.header_button .button_text{
  color: inherit;
}

#header_navigation a.header_button:is(:hover,:active,:focus) .button_text{
  color: inherit;
  text-decoration: none;
}

#header_navigation .fl-html .main_nav > div ul li a:is(:hover,:active,:focus){
    text-decoration: none;
}

#header_navigation .fl-html .foldout_container{
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: repeat(4, max-content);
    /* flex-direction: row; */
    gap: .5rem;
    align-items: center;
}

#header_navigation .fl-html .foldout_container.loading{
    opacity: 0;
}


#header_navigation .fl-html .foldout_container button{
    border: 1px solid var(--color);
    aspect-ratio: 1;
    /* background-color: var(--white); */
    border-radius: 50%;

    transition: border-color 300ms ease-in-out;
}

#header_navigation .fl-html .foldout_container button .icon_wrapper{
    display: flex;
    flex-direction: column;
    width: 1.5rem;
    height: 1.5rem;
    align-items: end;
}

/* #header_navigation .fl-html .foldout_container button .icon_wrapper::before{
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    flex-shrink: 0;
} */

#header_navigation .fl-html .foldout_container button span{
    display: block;
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
}

#header_navigation .fl-html .foldout_container .search{
    color: var(--color);
    background-color: transparent;

    transition: color 300ms ease-in-out;
}

#header_navigation .fl-html .foldout_container .search span{
    background-color: var(--color);
    width: 1.5rem; height: 1.5rem;
    display: block;
    --mask-url: url(/wp-content/uploads/2025/08/search.svg);

    transition: background-color 300ms ease-in-out;
}

#header_navigation .fl-html .menu-search-container .dgwt-wcas-search-wrapp {
	max-width: 100%; min-width: 0; color: var(--mahogany);
}
#header_navigation .fl-html .menu-search-container .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
	background: transparent; padding: 0; border-radius: 0;
}
#header_navigation .fl-html .menu-search-container .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	background-color: var(--ivory); font-size: 1rem; border: 1px solid var(--mahogany-very-translucent);
	border-radius: 0.5rem;
}
#header_navigation .fl-html .menu-search-container .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	top: 50%; translate: 0 -50%; left: 1rem; border: 0; border-radius: 0;
	background: transparent;
}
#header_navigation .fl-html .menu-search-container .dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto;
}
#header_navigation .fl-html .menu-search-container .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
	position: static; margin: 0;
}
#header_navigation .fl-html .menu-search-container .most-searched-products {
	display: flex; flex-direction: column; gap: 0.5rem;
	margin-block: 1rem;
}
#header_navigation .fl-html .menu-search-container .searched-product {
	display: flex; align-items: center; gap: 1rem;
	border-radius: 0.5rem; padding: 1rem; background: #ffffff;
	border: 1px solid var(--mahogany-very-translucent);
	transition: all 0.3s ease-in-out;
}
#header_navigation .fl-html .menu-search-container .searched-product:hover {
	background: rgba(241, 48, 48, 0.08); text-decoration: none; color: var(--mahogany);
}
#header_navigation .fl-html .menu-search-container .searched-product .product-image {
	max-width: 3.5rem; border-radius: 0.25rem; background-color: #fff;
	overflow: hidden;
}
#header_navigation .fl-html .menu-search-container .searched-product .product-title {
	font-size: 18px; font-weight: 600;
}

#header_navigation .fl-html .hamburger_wrapper{
    align-self: stretch;
    aspect-ratio: 1;
    max-height: 50px;
    max-width: 50px;
}

#header_navigation .fl-html .foldout_container .hamburger{
    background-color: var(--white);
    border: 1px solid var(--color);
    width: 100%;
    transition: border-color 300ms ease-in-out;
}

#header_navigation .fl-html .foldout_container .hamburger .icon{
    position: relative;
    height: 100%;
    width: 100%; aspect-ratio: 1;
    display: flex; justify-content: center; align-items: center;

}

#header_navigation .fl-html .foldout_container .hamburger span{
    background-color: var(--mahogany);
    width: 1rem;
    height: 1px;
}

#header_navigation .fl-html .foldout_container .hamburger span:not(:nth-child(2)){
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#header_navigation .fl-html .foldout_container .hamburger span:nth-child(1){
    translate: 0 -5px;
}

#header_navigation .fl-html .foldout_container .hamburger span:nth-child(3){
    translate: 0 5px;
}

#header_navigation .fl-html .hamburger_wrapper > div,
#header_navigation .fl-html .menu-search-container {
    position: absolute;
    background-color: var(--white);
    width: 100%;
    width: fit-content;
    right: 0;
    top: calc(100% + .5rem);
    padding-inline: 1rem;
    padding-block: 1rem;
    border-radius: .5rem;

    overflow: clip;

    transform-origin: top center;
}

#header_navigation .fl-html .menu-search-container,
#header_navigation .fl-html .hamburger_wrapper > div{
    max-height: 75vh;
    overflow-y: auto;
}

#header_navigation .fl-html .hamburger_wrapper > div .extra_content{
    padding: 1.5rem;
    font-size: var(--body-small);
}

#header_navigation .fl-html .hamburger_wrapper > div .extra_content .socials_container a{
    background-color: var(--ivory);
    color: var(--mahogany) !important;
}

#header_navigation .fl-html .hamburger_wrapper .sub-menu{
    height: 0;
    overflow: hidden;
}

#header_navigation .fl-html .hamburger_wrapper > div ul{
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    white-space: nowrap;
}

#header_navigation .fl-html .hamburger_wrapper > div ul.sub-menu{
    gap: .5rem;
    transition: height 300ms ease-in-out, padding 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul.sub-menu a{
    font-size: var(--body-small);
}

#header_navigation .fl-html .hamburger_wrapper > div ul.sub-menu.open{
    /* height: auto; */
    padding: .5rem 0 0 0;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li > a{
    font-size: var(--body-small);
    font-weight: var(--body-semibold);
    color: var(--mahogany);
    padding: .75rem .75rem .75rem 1.5rem;
    border: 1px solid var(--mahogany-very-translucent);
    border-radius: 3rem;
    display: grid;
    align-items: center;
    gap: .5rem;
    grid-template-areas: "text icon";
    grid-template-columns: auto min-content;

    transition: background-color 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li.menu-item-has-children{
    background-color: var(--ivory);
    border: 1px solid var(--mahogany-very-translucent);
    padding: .75rem .75rem .75rem 1.5rem;
    border-radius: 2rem;
    transition: border-radius 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li.menu-item-has-children:has(.sub-menu.open){
    border-radius: 1rem;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li.menu-item-has-children a::after{
    transition: rotate 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li.menu-item-has-children:has(.sub-menu.open) a::after{
    rotate: 90deg;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li.menu-item-has-children a{
    border: none;
    padding: 0;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li > a::before{
    grid-area: icon;
    place-self: center;
    content: '';
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--mahogany-very-translucent);
    transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul:not(.sub-menu) > li > a::after{
    grid-area: icon;
    place-self: center;
    content: '';
    width: .75rem; height: .75rem;
    background-color: var(--mahogany-very-translucent);
    --mask-url: url(/wp-content/uploads/2025/08/arrow.svg);
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
    transition: background-color 300ms ease-in-out;
}

#header_navigation .fl-html .hamburger_wrapper > div ul li.menu-item-has-children a::after{
    --mask-url: url(/wp-content/uploads/2025/08/arrow_right.svg);
}


#header_navigation .fl-html .hamburger_wrapper > div ul li a:is(:hover,:active,:focus){
    background-color: var(--ivory);
    text-decoration: none;
}

#header_navigation .fl-html .hamburger_wrapper > div ul li a:is(:hover,:active,:focus)::before{
    background-color: var(--chili);
    border-color: var(--chili);
}

#header_navigation .fl-html .hamburger_wrapper > div ul li a:is(:hover,:active,:focus)::after{
    background-color: var(--white);
}



#header_navigation .gt_float_switcher .gt_options{
  position: absolute;
  background-color: white;
}

#header_navigation .gt_float_switcher .gt-selected,
#header_navigation .gt_float_switcher{
  box-shadow: none;
  background-color: transparent !important;
}

#header_navigation .gt_float_switcher .gt_options a{
  font-size: 0px;
}

#header_navigation .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code{
  display: none;
}

#header_navigation #gt_float_wrapper{
  display: flex;
}

#header_navigation .gt_float_switcher .gt-selected .gt-current-lang{
  padding-right: 0px;
}

@media only screen and (min-width: 768px){
    #header_navigation .fl-html .hamburger_wrapper > div{
        min-width: 350px;
    }
}

@media only screen and (max-width: 1200px){

    #header_navigation .fl-html .main_nav img{
        width: 80px;
    }

    #header_navigation .fl-html .main_nav{
        gap: 2rem;
    }

    #header_navigation .fl-html .main_nav > div ul{
        gap: 1rem;
    }

    #header_navigation .fl-html .main_nav > div ul li a{
        font-size: var(--body-small);
    }

}


@media only screen and (max-width: 1024px){

    #header_navigation .fl-html .main_nav > div{
        display: none;
    }

    #header_navigation a.header_button{
        display: none;
    }
	#header_navigation .fl-html .hamburger_wrapper > div, 
	#header_navigation .fl-html .menu-search-container {
		width: calc(100vw - 40px); max-width: 350px;
	}
    #header_navigation .fl-html .hamburger_wrapper > div ul li a{
        background-color: var(--ivory);
        text-decoration: none;
    }

    #header_navigation .fl-html .hamburger_wrapper > div ul li a::before,
    #header_navigation .fl-html .hamburger_wrapper > div ul li a::after{
        opacity: 1;
    }
}

@media only screen and (min-width: 768px){
    .mobile_only{
        display: none;
    }

}

@media only screen and (max-width: 767px){
    #header_navigation .fl-html{
        padding-inline: 1rem;
        padding-block: .75rem;
    }

    #header_navigation .fl-html .foldout_container{
        position: static;
    }

    #header_navigation .foldout_container > .search_wrapper > div,
    #header_navigation .fl-html .hamburger_wrapper > div{
        width: calc(100vw - 1rem);
        max-width: unset;
        right: .5rem;
    }
    #header_navigation .fl-html .hamburger_wrapper > div ul li a{
        font-size: var(--body-regular);
    }

    .mobile_only{
        margin-bottom: .5rem;
    }
}