header{
	--hover : hsl(105, 57%, 89%);
	position: sticky;
	background: #fff5eb;
	top: 0;
	transition: box-shadow 0.2s, height 0.2s;
	z-index: 99;
}
header .top__container{
	justify-content: space-between;
	align-items: center;
	padding-block: 5px;
	gap: 1rem;
	width: 100%;
}
header .blocks__container{
	align-items: center;
	gap: 2rem;
}
header .align-right{
	gap: .5rem;
}

header div.logo{
	padding-block: 10px;
}
header img.logo{
	transition: height 0.2s
}
header.scroll img.logo{
	height: 50px;
}

header .user-info{
	display: flex;
	gap: .5rem;
}
header a.btn.pro{
	display: flex;
	align-items: center;
}
header .language-selector{
	display: flex;
	padding: 0 1.1rem;
	gap: 8px;
	align-items: center;
	font-weight: 500;
}
header .language-selector .current{
	color: var(--primary-green);
}
header .blockcart.inactive,
header .blockcart.active a,
header .user-info a{
	display: flex;
	color: var(--primary-green);
	border: 2px solid currentColor;
	font-weight: 500;
	padding: 0 0.9rem;
	min-width: 42px;
	height: 42px;
	border-radius: 50px;
	transition: padding 0.2s;
	align-items: center;
	font-size: 0.8rem;
}
header .blockcart.inactive{
	color: gray;
}
header .blockcart a:hover,
header .user-info a:hover{
    color: var(--primaryhover) !important;
    border-color: currentColor !important;
    text-decoration: none;
}
#header .top-menu > li:hover > a[data-depth="0"]{
    color: var(--hover);
    text-decoration: none;
    background: rgba(255,255,255, 0.1);
}
header.scroll .blockcart{
	padding-block: 0.3rem;
}

header .blockcart a.added{
	animation: cartAdded 1s ease forwards;
}

@keyframes cartAdded{
	0%{
		background: var(--hover);
		color: var(--primary-green);
		border-color: var(--primary-green);
	}
	10%{
		background: transparent;
		color: white;
		border-color: white;
	}
	20%{
		background: var(--hover);
		color: var(--primary-green);
		border-color: var(--primary-green);
	}
	100%{
		background: transparent;
		color: var(--primary-green);
		border-color: var(--primary-green);
	}
}

header nav a:not(:hover){
	color: #fff
}

header .popover .collapse{
	display: none;
}
header #search_widget form{
	margin-bottom: 0;
}

button.mobile-nav-toggle{
	display: none;
	background: none;
	border: none;
	font-size: 1.4rem;
}
button.mobile-nav-toggle[data-toggle="true"]{
	color: var(--hover);
}


/**
 * MAIN NAV
**/
header nav.main{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 877px){
	header nav.main{
		--bg: #087a6b;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		background: var(--bg);
		line-height: 1;
/*		box-shadow: 0 0 0 100vmax var(--bg);*/
/*		clip-path: inset(0 -100vmax);*/
	}
}
header a.btn.pro{
	display: none;
}
header#header .container{
	padding-block: 0;
	height: 100%;
}
header#header .top__container{
	padding: 0;
}

header #_desktop_top_menu{
	height: 100%
}
header ul.top-menu{
	display: flex;
	align-items: center;
	margin-top: 0;
}

header ul.top-menu[data-depth="0"] > li{
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
header ul.top-menu[data-depth="0"] > li:hover > :is(.carret){
	color: var(--primary-green);
}
header ul.top-menu a[data-depth="0"]{
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 1rem;
	font-size: .825rem;
	font-weight: 500;
	text-transform: uppercase;
}

header ul.top-menu[data-depth="0"] > li.current > a,
#contact header #lnk-contact a
{
	color: var(--hover);
	background: rgba(255,255,255, 0.1);
}
header ul.top-menu #lnk-bons-plans > a{
	color: hsl(47deg 100% 44%);
}
#header ul.top-menu #lnk-bons-plans > a:hover{
	color: hsl(47deg 100% 48%);
}

header .blockcart svg, header .user-info svg{
	font-size: 1rem;
}

header .carret{
	font-size: 0.9rem;
}

@media(max-width: 876px){
	.navigation__container{
		flex-direction: column;
		align-items: initial;
		position: fixed;
		inset: var(--header-height) auto 0 0;
		background: #4e826e;
		padding: 1rem;
		width: max(50vw, 300px);
		translate: -100% 0;
		transition: translate 0.1s ease-out;
		z-index: 2;
	}
	.navigation__container[data-visible]{
		translate: 0 0;
	}
	main::before {
	    content: '';
	    background: #00000020;
	    inset: 0;
	    position: fixed;
	    backdrop-filter: blur(2px);
	    display: none;
	    z-index: 9;
	}
	header{
		align-items: flex-start;
	}
	header:has( .navigation__container[data-visible] ) + main::before {
	    display: block;
	}

	header ul.top-menu[data-depth="0"] > li > a{
		padding: 0.7rem 1rem 0.5rem;
		border-radius: 6px;
	}

	header .blockcart a{
		padding: 0.4rem 1.2rem;
	}
	button.mobile-nav-toggle{
		display: flex;
		color: var(--primary-green);
	}
	header{
		--header-height: 75px;
		padding: 0;
		height: var(--header-height);
		box-shadow: 0 -6px 14px #0000004a;
	}
	header .container{
		display: flex;
		gap: 1rem;
		width: 100%;
		padding: .8rem;
	}
	header img.logo,
	header.scroll img.logo{
		height: initial;
	}
	header img.logo{
		max-height: 50px;
		width: 100%;
	}
	header .blockcart.inactive, header .blockcart.active a, header .user-info a{
		padding-inline: .7rem;
	}
	header #search_widget form{
		padding: 0;
	}

	header nav .wrap{
		width: 100%;
	}

	header nav a span.float-xs-right.hidden-md-up{
		display: none;
	}

	header ul.top-menu{
		gap: 5px;
		align-items: flex-start;
		flex-direction: column;
	}
	header .carret{
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 9px 8px 6px;
	}
	header .carret[data-visible="true"]{
		color: var(--primary-green);
		border-color: currentColor;
	}
	header ul.top-menu li{
		display: flex;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	header ul.top-menu a[data-depth="0"]{
		width: auto;
	}
	header .top-menu[data-depth="1"]{
		gap: 5px;
	}
	header .popover, header .top-menu .collapse{
		position: static;
		display: none;
		width: 100%;
	}
	header .top-menu .collapse{
		padding-left: 1rem;
	}
	header .carret[data-visible="true"] + :is(.popover, .collapse){
		display: block;
		visibility: visible;
		opacity: 1;
	}
	header .top-menu a:is([data-depth="1"], [data-depth="2"]){
		padding: 0;
		display: inline-block;
		width: auto;
	}
	header [data-depth="2"] .carret{
		display: none;
	}
	header .top__container #search_widget{
		display: none;
	}
	header nav #search_widget{
		display: block;
	}


}


/*DROPDOWN MENU*/
@media(min-width: 877px){
	header ul.top-menu[data-depth="0"],
	header ul.top-menu[data-depth="0"] > li,
	header ul.top-menu[data-depth="0"] > li > a{
		height: 3.125rem;
	}

	header .top__container #search_widget{
		display: block;
	}
	header nav #search_widget{
		display: none;
	}

	header ul.top-menu a[data-depth="0"]{
		justify-content: space-between;
	}
	header ul.top-menu[data-depth="0"] > li > .popover{
		--padding: 1rem;
		position: absolute;
		bottom: 10px;
		top: initial !important;
		left: 50%;
		translate: -50% 100%;
		background: #fff;
		width: min(100% - 3rem, var(--site-width));
		border: 1px solid var(--primary-green);
		border-radius: 6px;
		padding: var(--padding);
	}
	header li.has-children:hover > .popover{
		display: block;
	}

	.popover ul[data-depth="1"]{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin: 0;
		width: 30%;
		gap: 0;
		border-right: 1px solid var(--accent);
	}
	.popover ul[data-depth="1"] > li{
		width: 100%;
		display: flex;
		border-radius: 6px 0 0 6px;
	}
	.popover ul[data-depth="1"] > li > a{
		display: flex;
		gap: 0.6rem;
		font-size: .8rem;
		font-weight: 600;
		padding: 10px 20px;
		width: 100%;
		align-items: center;
	}
	.popover ul[data-depth="1"] > li > a > svg{
		font-size: 1.2rem;
	}
	header .popover ul[data-depth="1"] > li:hover,
	header .popover ul[data-depth="1"] div.collapse ul a:hover{
		color: var(--primary-green);
		background: var(--accent);
	}

	/*Dropdown third level (Right pane)*/
	.popover ul[data-depth="1"] div.collapse{
		position: absolute;
		inset: 0 0 0 auto;
		padding-left: var(--padding);
		padding-block: var(--padding);
		width: 70%;
	}
	.popover ul[data-depth="1"] div.collapse ul{
		width: 100%;
		/*display: grid;
		grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
		*/
		display: block;
		gap: 0;
	}
	.popover ul[data-depth="1"] div.collapse ul:has( > li:nth-child(8)){
		columns: 2;
	}
	.popover ul[data-depth="1"] div.collapse ul:has( > li:nth-child(15)){
		columns: 3;
	}
	.popover ul[data-depth="1"] div.collapse ul a{
		padding: 0.425rem 1rem;
		text-wrap: wrap;
		line-height: 1.2;
		border-radius: 6px;
	}
	.popover ul[data-depth="1"] > li:hover div.collapse,
	.popover ul[data-depth="1"]  div.collapse:hover{
		display: block;
	}
	#header .popover ul[data-depth="2"] div.collapse,
	#header .popover ul[data-depth="2"] span.navbar-toggler{
		display: none;
	}
	.popover span.navbar-toggler{
		margin-left: auto;
	}
}

#page .popover ul[data-depth="2"] div.collapse,
#page .popover ul[data-depth="3"]{
	display: none;
}