﻿/*-------------------------------------------/*
 NEW MAIN HEADER
/*------------------------------------------*/
#nav-toggle { pointer-events: all; width: 22px; display: flex; aspect-ratio: 1; position: relative; z-index: 1010; }
#nav-toggle span { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: 0.4s all ease; cursor: pointer; height: 2px; width: 22px; background: #000; position: absolute; display: block; content: ''; margin: 0 !important; display: block; }
#nav-toggle span:before { top: -8px; }
#nav-toggle span:after { bottom: -8px; }
#nav-toggle.active span { background-color: transparent; }
#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
#nav-toggle.active span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
#nav-toggle.active span:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }

#main-header { padding: 0px; position: fixed; width: 100%; z-index: 9999; top: 0; background: #fff; }
#main-header.bg { background-color: #00000040; }
#main-header.bg .header-left img { display: block; }

#main-header .header-right { width: auto; display: inline-flex; height: 100%; align-items: center; flex-direction: row-reverse; }
#main-header .header-right .header-right-content { display: inline-flex; }

#main-header .menu-nav { position: relative; padding: 0; color: inherit; cursor: pointer; display: inline-block; float: none !important; }

#main-header .social-links { float: none !important; display: inline-block; }
#main-header .social-links a { display: inline-block; font-size: 100%; color: inherit; float: none !important; position: relative; }
#main-header .social-links a.whatsapp_icon svg path.whatsapp1 { fill: transparent; }

#main-header .header-container { display: flex; align-items: center; justify-content: space-between; position: relative; }
#main-header .header-container .header-left { align-items: center; display: inline-flex; gap: 10px; }

#main-header .address { display: inline-block; }
#main-header .address span { display: inline-block; }

#main-header .languages { display: inline-block; }
#main-header .languages a.lang { color: inherit; }

#main-header .phone-icon { display: none; }
#main-header .phone-icon i { color: inherit; }
#main-header .phone-icon.showPhoneDesktop { display: block; }
#main-header .phone-icon.showPhoneDesktop i { display: none; }

@media(max-width:1280px) and (min-width:1025px) {
    #main-header .header-center a:nth-child(4), #main-header .header-center a:nth-child(3) { display: none; }
}

@media(min-width:1025px) {
}

@media(max-width:1024px) {
    #main-header .header-center a:nth-child(2),
    #main-header .header-center a:nth-child(3),
    #main-header .header-center a:nth-child(4) { display: none; }

    #main-header .phone-icon a { display: inline-block; }
    #main-header .phone-icon.showPhoneDesktop .showPhoneDesktop { display: none; }
    #main-header .phone-icon.showPhoneDesktop i { display: block; }
    #main-header .header-center .address,
    #main-header .header-center .languages { display: none; }
}

#main-header:not(.header-hamburger) .header-right-content { display: flex; align-items: center; }
#main-header:not(.header-hamburger) .phone-icon { display: none; }
#main-header:not(.header-hamburger) .menu-nav { position: relative; margin: 0; width: max-content; }

.header-social-icons { display: flex; align-items: center; }
.header-shop-icons { display: flex; align-items: center; }
.header-shop-icons .navShopBtn, .header-shop-icons .navShopBtn a, .header-shop-icons .navShopBtn button { display: inline-flex; }

#main-header svg { width: 24px; aspect-ratio: 1; height: auto; }
#main-header svg path { fill: inherit; }
#main-header .whatsApp-icon-mobile { display: none; }
#main-header a.whatsapp_icon path.st0 { fill: none !important; }
.has-sub i.opensub { display: inline-block; vertical-align: middle; font-weight: unset; font-size: 100%; font-family: 'FontAwesome'; }

@media(min-width:1025px) {
    #main-header.header-hamburger .menu-nav ul.menu { position: fixed; width: 100vw; height: 100%; background: #fff; top: 0; right: 0; transform: translateX(100%); padding: 100px 0 0; overflow-y: auto; overflow-x: hidden; flex-direction: column; z-index: 1000; display: flex; }
    #main-header.header-hamburger.open .menu-nav ul.menu { transform: translateX(0%); }
    #main-header.header-hamburger .menu-sub { position: relative; width: 100%; padding: 0; display: none; }

    #main-header:not(.header-hamburger) .menu-sub { position: absolute; padding: 0; background: #fff; width: max-content; min-width: 100%; text-align: right; top: 100%; display: none; z-index: 1; right: 0; min-width: unset !important; }
    #main-header:not(.header-hamburger) .menu-sub.open { display: block; }
    #main-header:not(.header-hamburger) ul.menu li { display: inline-block; position: relative; width: max-content; color: inherit; pointer-events: fill; }
    #main-header:not(.header-hamburger) ul.menu .menu-sub li { width: 100%; }
    #main-header:not(.header-hamburger) .menu-nav ul.menu { display: flex; margin: 0; list-style: none; padding: 0; color: #000; }
    #main-header:not(.header-hamburger) .menu-nav #nav-toggle { display: none; }
}

@media(max-width:1024px) {
    #main-header .menu-nav #nav-toggle { display: flex; }
    #main-header .menu-nav ul.menu { position: fixed; width: 100vw; height: 100%; background: #fff; top: 0; right: 0; transform: translateX(100%); padding: 100px 0 0; overflow-y: auto; overflow-x: hidden; flex-direction: column; z-index: 1000; display: flex; transition: 0.4s all ease; }
    #main-header.open .menu-nav ul.menu { transform: translateX(0%); }
    #main-header ul.menu > li { width: 100%; }
    #main-header ul.menu li.active { text-decoration: underline; }
    #main-header .menu-sub { position: relative; width: 100%; padding: 0; display: none; }
    #main-header .address { display: none; }
    #main-header .languages { }
    #main-header .header-top { padding: 0; }
    #main-header.MenuFadeIn ul.menu li { opacity: 0; transform: translateY(10px); -webkit-transform: translateY(10px); transition: all 1000ms cubic-bezier(.17,.67,.83,.67); -webkit-transition: all 1000ms cubic-bezier(.17,.67,.83,.67); }
    #main-header.MenuFadeIn ul.menu li.showItem { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); transition: opacity 500ms ease-in, transform 400ms ease-in; -webkit-transition: opacity 500ms ease-in, transform 400ms ease-in; }
    #main-header .whatsApp-icon-mobile { display: inline-block; }
    #main-header .whatsApp-icon-mobile a { display: inline-block; }
    #main-header .whatsApp-icon-mobile svg { width: 24px; height: 24px; display: inline-block; fill: inherit; }
    #main-header .phone-icon.whatsappContainer a { display: inline-block; }
}


/*-------------------------------------------/*
 SEARCH BAR
/*------------------------------------------*/
.header-search { position: relative; }

.searchBtn { display: inline-block; width: auto; cursor: pointer; position: relative; }
.searchBtn svg { height: 100%; width: 100%; fill: inherit; display: inline-block; }
.searchBtn .close-search { display: none; }
header.search-open .searchBtn svg, #SiteHeader.search-open .searchSubmitWrapper svg { fill: inherit; }
svg polygon { fill: inherit; }
header.search-open form#searchFormHeader { color: inherit; }
header.search-open #searchFormHeaderContainer { width: 100%; }
header.search-open #searchFormHeaderContainer:after { display: none; }
header #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { width: 100%; background: #fff; border: unset; border-bottom: 1px solid; padding: 0; outline: unset; border-radius: 0; }
header.search-open #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { width: 100%; }
header.search-open #searchFormHeaderContainer form#searchFormHeader input#searchFormInput:focus { outline: 0; }
header.search-open .searchBtn { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); }
#main-header ul.menu li.search { margin-left: 0; }
header.search-open #main-header ul.menu > li:before { display: none; }
#searchFormHeader { opacity: 0; transition: 0.3s ease ease; position: relative; }
#searchFormHeader.active { opacity: 1; }
#searchFormHeader button.clearSearch { background: transparent; border: unset; display: flex; padding: 0; }
#searchFormHeader input::-webkit-input-placeholder { color: inherit; font-size: 100%; }
#searchFormHeader input:-moz-placeholder { color: inherit; opacity: 1; }
#searchFormHeader input::-moz-placeholder { color: inherit; opacity: 1; }
#searchFormHeader input:-ms-input-placeholder { color: inherit; }
#searchFormHeader .error { display: none; left: 0; color: inherit; bottom: 10px; top: auto; }

.searchSubmitWrapper { top: 50%; left: 0; cursor: pointer; display: flex; position: absolute; transform: translateY(-50%); width: 24px; height: 24px; }
.searchSubmitWrapper svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); pointer-events: none; }
header.search-open .searchSubmitWrapper svg { position: relative; left: auto; transform: translate(0,0); }
.searchSubmitWrapper input#searchCategoryFormSubmit { background: 0; border: 0; width: 40px; position: absolute; height: 40px; }
.searchSubmitWrapper input#searchFormSubmit { width: 100%; height: 100%; padding: 0; background: transparent; border: 0; }
#searchFormCategory { position: relative; margin: 0 auto; }
#searchFormCategory .searchSubmitWrapper { width: 40px; height: 40px; }
#searchFormCategory .searchSubmitWrapper { left: 25px; top: 5px; }
#searchFormCategory .searchSubmitWrapper svg { position: absolute; fill: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 30px; pointer-events: none; fill: inherit; }
#searchFormCategory #searchCategoryFormInput { width: 100%; background: #fff; border: 0; border-bottom: 2px solid; vertical-align: middle; border: 1px solid #000; height: 50px; padding: 0 25px; }
#searchFormCategory .error { display: none; left: 65px; color: inherit; bottom: 10px; top: auto; }

.searchResultsList { padding: 0; list-style: none; margin: 0; }
.searchResultsList .resultItem { position: relative; }
.resultCategory { font-size: 100%; }
.resultCategory a { font-size: 100%; display: inline-block; }
.searchResultsList .resultItem.hasImg { display: flex; width: 100%; }
.searchResultsList .resultItem.hasImg > a { display: flex; }
.searchResultsList .resultItem.hasImg .resultContent { display: flex; }
.searchResultsList .resultItem a { font-size: 100%; display: block; }

.BoxMode #text1 ul li { border: none; -webkit-column-break-inside: avoid; }
.BoxMode #text1 ul img { width: 100%; }
.BoxMode .resultItem.hasImg > a { display: block; width: 100%; }
.BoxMode .resultItem.hasImg .resultContent { display: block; width: 100%; }

@media(min-width:1025px) {
    /*.search-regular form#searchFormHeader { display: flex; }
    .search-regular form#searchFormHeader .searchSubmitWrapper { position: relative; left: unset; top: unset; transform: unset; }
    .search-regular form#searchFormHeader input#searchFormInput { min-width: 200px; }*/

    .search-toggle .search { display: flex; flex-direction: row-reverse; }
    .search-toggle .toggle-search { display: inline-flex; }
    .search-toggle .toggle-search button { border: unset; background: transparent; padding: 0; }
    .search-toggle .toggle-search button.toggle-open { display: inline-flex; }
    .search-toggle .toggle-search button.toggle-close { display: none; }
    .search-toggle.active .toggle-search button.toggle-open { display: none; }
    .search-toggle.active .toggle-search button.toggle-close { display: inline-flex; }
    .search-toggle #searchFormHeaderContainer { display: flex; align-items: center; }
    .search-toggle #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { min-width: 0; width: 0; transition: 0.4s all ease; }
    .search-toggle.active #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { min-width: 200px; }

    .search-fullwidth .search { position: fixed; left: 0; top: 0; height: var(--headerHeight); width: 100%; background: #fff; z-index: 1000; display: none; }
    .search-fullwidth.active .search { display: flex; align-items: center; justify-content: center; }
    .search-fullwidth .toggle-open { background: unset; border: unset; padding: 0; display: inline-flex; }
    .search-fullwidth .toggle-close { background: unset; border: unset; padding: 0; display: inline-flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
    .search-fullwidth .search #searchFormHeaderContainer { width: 50%; }
}

@media(max-width:1024px) {
    #main-header .header-right .header-right-content:has(.header-search.active) { z-index: 1200; }
    .header-search:not(.search-toggle) .search { position: fixed; left: 0; top: 0; height: var(--headerHeight); width: 100%; background: #fff; z-index: 1000; display: none; }
    .header-search:not(.search-toggle).active .search { flex-direction: row-reverse; display: flex; align-items: center; justify-content: center; gap: 16px; }
    .header-search:not(.search-toggle).active .search #searchFormHeaderContainer { width: 80%; }
    .header-search.search-toggle.active .search { position: fixed; left: 0; right: 0; top: 0; height: var(--headerHeight); width: 100vw; background: #fff; z-index: 1000; flex-direction: row-reverse; display: flex; align-items: center; gap: 16px; justify-content: flex-end; padding: 0 20px; }
    .header-search.search-toggle.active .search #searchFormHeaderContainer { flex-grow: 1; }
    .header-search.search-toggle.active .search #searchFormHeaderContainer form#searchFormHeader { display: block; }
    .header-search.search-toggle.active .search .toggle-search { display: flex; }
    .header-search.search-toggle .search #searchFormHeaderContainer form#searchFormHeader { display: none; }
    .header-search .search .toggle-open { background: unset; border: unset; padding: 0; display: inline-flex; }
    .header-search .search .toggle-close { position: relative; right: unset; transform: unset; top: unset; background: unset; border: unset; padding: 0; display: inline-flex; z-index: 1100; }
    .header-search button:is(.toggle-open, .toggle-close) { border: unset; background: transparent; padding: 0; }
    .header-search .search button.toggle-open { display: inline-flex; }
    .header-search .search button.toggle-close { display: none; }
    .header-search.active button.toggle-open { display: none; }
    .header-search.active button.toggle-close { display: inline-flex; }
    .header-search .search #searchFormHeaderContainer form#searchFormHeader { position: relative; }
    .header-search .search #searchFormHeaderContainer form#searchFormHeader input#searchFormInput { padding-inline-end: 30px; }
}


/*-------------------------------------------/*
 MEGA MENUS
/*------------------------------------------*/
#main-header:not(.header-hamburger) ul.menu .menu-sub.megaMenu li { width: max-content; display: inline-flex; }
#main-header:not(.header-hamburger) ul.menu li .megaMenu .megaMenuSub { padding: 0; margin: 0; list-style: none; }
#main-header:not(.header-hamburger) ul.menu li .megaMenu .megaMenuSub li { display: block; }
#main-header:not(.header-hamburger) ul.menu li .megaMenu .megaMenuGroup .megaMenuGroupImage img { width: 100%; }
.menuGroupTitle { font-size: 100%; margin: 0; }
.menuSvgArrowIcon { display: inline-block; }
.menuSvgArrowIcon svg { display: inline-block; fill: inherit; }
.menuSvgArrowIcon svg path { fill: inherit; }
.megaMenuSubItem.megaMenuSubItemHasImg .megaMenuSubItemImage,
#main-header:not(.header-hamburger) ul.menu li .menu-sub .megaMenuSubItem.megaMenuSubItemHasImg a { display: inline-block; float: none; }
.megaMenuSubItem.megaMenuSubItemHasImg .megaMenuSubItemImage img { max-width: 100%; }

@media (min-width:1025px) {
    #main-header:not(.header-hamburger) ul.menu li.megaMenuSection { display: none; }
    .visible-mobile, #main-header:not(.header-hamburger) ul.menu li.visible-mobile { display: none; }
}

@media (max-width:1024px) {
    .visible-desktop, #main-header ul.menu > li.visible-desktop,
    .has-sub i.opensub.visible-desktop, #main-header .menu-sub.visible-desktop { display: none !important; }
    #main-header ul.menu li.megaMenuSection { position: absolute; transform: translateX(100%); top: 0; right: 0; width: auto; padding: 0; top: 0; transition: 0.3s all ease; margin: 0; z-index: -10; }
    #main-header ul.menu li.megaMenuSection.menu-active { transform: translateX(0%); z-index: 5; }
    #main-header ul.menu li.megaMenuSection.menu-available { width: auto; height: 100%; max-width: 100%; min-width: 100%; }
    #main-header ul.menu li.megaMenuSection.megaMenuGroupSection.menu-active { z-index: 2; }
    ul.megaMenu { margin: 0; list-style: none; }
    ul.megaMenuSub { list-style: none; padding: 0; margin: 0; }
    ul.megaMenuSub li { display: block; width: 100%; }
    .megaMenuSectionContainer .megaMenuGroup { position: relative; }
    #main-header ul.menu li.megaMenuSection:hover { color: inherit; }
    #main-header ul.menu li.megaMenuSection button, .has-megamenu button { background: transparent; border: 0; border-radius: 0; -webkit-appearance: none; }
    .has-megamenu .menuSvgArrowIcon svg { fill: inherit; }
    .megaMenuGroup .menuSvgArrowIcon svg { fill: inherit; }
    .megaMenuSection .menuSvgArrowIcon svg { fill: inherit; }
}


/*-------------------------------------------/*
 OPEN SEARCH IN HEADER
/*------------------------------------------*/
#quick-search-container { width: 100%; position: absolute; height: 200px; left: 0; }
#quick-search-container #SearchResultContainer { background: #fff; overflow: hidden; }
#quick-search-container #SearchResultContainer .resultItem { margin: 0; display: block; color: inherit; }
#quick-search-container #SearchResultContainer .resultItem img { width: 100%; }
#quick-search-container #SearchResultContainer .finalResultItem { margin: 0; padding: 0; display: block; color: inherit; }
#quick-search-container #SearchResultContainer .resultItem a { color: inherit; position: relative; padding: 0; width: 100%; }
#quick-search-container #SearchResultContainer .resultItem .resultArrow { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: 0.3s all ease; opacity: 0; }
#quick-search-container #SearchResultContainer .resultItem .resultArrow svg { width: 6px; height: 11px; }
#quick-search-container #SearchResultContainer .resultItem a:hover .resultArrow,
#quick-search-container #SearchResultContainer .resultItem a:focus .resultArrow { opacity: 1; }
#quick-search-container .resultItem.resultItemHasImg .resultContent > a { display: flex; align-items: center; }
#quick-search-container .resultItem.resultItemHasImg .resultContent > a > img { margin-left: 15px; }


/*-------------------------------------------/*
 QUICK SEARCH RESULTS AUTO COMPLETE
/*------------------------------------------*/
.hasAutoComplete .search.desktop { position: relative; background-color: #000; top: 100%; }
.hasAutoComplete #quick-search-container { top: 100%; height: auto; }
#main-header.hasAutoComplete.fixedMenu { height: auto !important; }

.searchBtn.searchOpenDesk { position: relative; }
#main-header .searchOpenDesk #searchFormHeaderContainer form#searchFormHeader { margin: 0; border-radius: 30px; background: #dfe5eb; min-width: 200px; }
.searchOpenDesk input#searchFormInput { border: 0; padding-right: 10px; color: #000000; font-size: 90%; text-align: right; }
.searchOpenDesk .searchSubmitWrapper { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0px; background: #f5f6f7; height: 100%; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.searchOpenDesk .searchSubmitWrapper input#searchFormSubmit { position: relative; width: 30px; height: 100%; }
#main-header .searchOpenDesk .searchSubmitWrapper svg, header .searchOpenDesk .searchSubmitWrapper svg { fill: #ad0018; transform: translate(-50%,-50%) rotate(270deg); -webkit-transform: translate(-50%,-50%) rotate(270deg); width: 16px; }
#main-header ul.menu > li.searchBtn:before { border: 0; }
.searchOpenDesk button.clearSearch { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: transparent; padding: 0; border: 0; }
#main-header .searchOpenDesk button.clearSearch svg.clear-search-svg, header .searchOpenDesk button.clearSearch svg.clear-search-svg { fill: #000000; width: 10px; height: 10px; }
.searchOpenDesk button.clearSearch:focus, #main-header .searchOpenDesk button.clearSearch svg.clear-search-svg:focus, #main-header .searchOpenDesk button.clearSearch svg.clear-search-svg polygon:focus { outline: none; }


@media(max-width:1024px) {
    #quick-search-container { position: fixed; }
    #main-header .searchOpenDesk #searchFormHeaderContainer { display: inline-block; vertical-align: middle; width: 100%; }
    #main-header .searchOpenDesk #searchFormHeaderContainer form#searchFormHeader { position: relative; bottom: auto; left: auto; padding: 0; }
    #main-header .searchBtn.searchOpenDesk { position: relative; }
    #main-header .mobile-middle-kdm #quick-search-container #SearchResultContainer .resultItem a,
    #main-header .mobile-middle-kdm #quick-search-container #SearchResultContainer .resultItem a { color: inherit; }

    #main-header .searchOpenDesk.mobile-auto #searchFormHeaderContainer form#searchFormHeader { position: relative; opacity: 1; display: block !important; bottom: auto !important; }
    .searchOpenDesk.mobile-auto { position: absolute; left: 0; right: 0; top: 100%; }
    #main-header.search-open .searchOpenDesk.mobile-auto .searchSubmitWrapper svg { position: absolute; top: 50%; left: 60%; transform: translate(-50%,-50%) rotate(270deg); -webkit-transform: translate(-50%,-50%) rotate(270deg); pointer-events: none; }
    #main-header.search-open .searchOpenDesk.mobile-auto #quick-search-container { top: 100% !important; background: #ffffff; }
}


/*-------------------------------------------/*
  TOP MENU IN HEADER
/*------------------------------------------*/
@media(min-width:1025px) {
    nav.header-top-menu { font-size: 100%; }
    nav.header-top-menu ul.top-menu-group { list-style: none; display: inline-block; }
    nav.header-top-menu ul.top-menu-group li { display: inline-block; }
    #main-header #main-header ul.menu > li.header-top-menu-mobile { display: none; }
}

@media(max-width:1024px) {
    nav.header-top-menu { font-size: 100%; }
    nav.header-top-menu ul.top-menu-group { padding: 0; margin: 0; list-style: none; }
    nav.header-top-menu ul.top-menu-group li { display: block; }
    #main-header #main-header ul.menu > li.header-top-menu-mobile { font-size: inherit; }
    nav.header-top-menu { padding: 0; }
    .header-top-desktop { display: none; }
}
