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


header{
	--gap: .5rem;
	position: sticky;
	background: #fff;
	top: 0;
	display: flex;
	align-items: center;
	gap: var(--gap);
	padding-block: 0.5rem;
	transition: box-shadow 0.2s, height 0.2s;
	z-index: 99;
}
header .top__container{
	justify-content: space-between;
	width: 100%;
}
header .blocks__container{
	align-self: flex-end;
	align-items: center;
	gap: var(--gap);
}

header .logo{
	display: inline-flex;
}
header .logo :is(img, svg){
	width: 120px;
}

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);
}
header .blockcart.inactive,
header .blockcart.active a,
header .user-info a{
	border: 2px solid #efefef;
	font-weight: 500;
	padding: 0 1.1rem;
	height: 48px;
	border-radius: 50px;
	transition: padding 0.2s;
	align-items: center;
}
header .blockcart a:hover,
header .user-info a:hover{
    color: var(--primary);
    border-color: currentColor;
    text-decoration: none;
}
header.scroll .blockcart{
	padding-block: 0.3rem;
}

header a:not(:hover){
	color: var(--color);
}

header .navigation__container{
	padding-top: 1.4rem;
}
header .popover .collapse{
	display: none;
}
header #search_widget form{
	margin-bottom: 0;
	padding-right: 2rem;
}

/**
 * MAIN NAV
**/
header nav.main, header .menu{
	width: 100%;
}
header ul.top-menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	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(a, .carret),
header ul.top-menu[data-depth="0"] > li.current > :is(a, .carret){
	color: var(--primary);
}
header ul.top-menu a[data-depth="0"]{
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0.725rem 0;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}
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 .carret{
	font-size: 0.9rem;
}
header ul.top-menu[data-depth="2"] .carret{
	display: none;
}

@media(max-width: 876px){
	.navigation__container{
		flex-direction: column;
		align-items: initial;
		position: fixed;
		inset: var(--header-height) auto 0 0;
		background: #fff;
		padding: 1rem;
		width: max(70vw, 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 .blockcart a{
		padding: 0.4rem 1.2rem;
	}
	button.mobile-nav-toggle{
		display: flex;
	}
	header:not(.scroll){
		--header-height: 125px;
	}
	header{
		--header-height: 70px;
		padding: 0;
		height: var(--header-height);
	}
	header .container{
		display: flex;
		gap: 1rem;
		width: 100%;
		padding: .8rem;
	}
	header .logo img{
		height: 50px;
		width: auto;
	}
	header .logo .equinutri{
		display: none;
	}
	header #search_widget{
		position: absolute;
		inset: auto 20px 0;
	}
	header #search_widget form{
		padding: 0;
	}
	header.scroll #search_widget{
		display: none;
	}

	header ul.top-menu{
		gap: 0;
		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);
		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;
	}

}


/*DROPDOWN MENU*/
@media(min-width: 877px){
	header ul.top-menu a[data-depth="0"]{
		padding-block: 0.625rem;
		justify-content: space-between;
	}
	header ul.top-menu[data-depth="0"] > li > .popover{
		position: absolute;
		bottom: 10px;
		top: initial !important;
		left: 50%;
		translate: -50% 100%;
		background: #fff;
		width: min(100% - 3rem, var(--site-width));
		border: 1px solid #cdcdcd;
		border-radius: 6px;
	}
	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;
		width: 35%;
		min-height: 300px;
		gap: 0;
		border-right: 1px solid #cdcdcd;
	}
	.popover ul[data-depth="1"] > li{
		width: 100%;
		display: flex;
		padding-right: 1rem;
	}
	.popover ul[data-depth="1"] > li > a{
		display: flex;
		gap: 0.6rem;
		font-size: var(--fs-100);
		font-weight: 600;
		text-transform: uppercase;
		padding: 10px 20px;
		width: 100%;
		align-items: center;
	}
	.popover ul[data-depth="1"] > li:hover,
	.popover ul[data-depth="1"] div.collapse ul a:hover{
		background: #f9f9f9;
	}

	/*Dropdown third level (Right pane)*/
	.popover ul[data-depth="1"] div.collapse{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 64%;
	}
	.popover ul[data-depth="1"] div.collapse ul{
		display: grid;
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
		gap: 0;
		padding: 1rem;
	}
	.popover ul[data-depth="1"] div.collapse ul a{
		padding: 0.425rem 1rem;
		text-wrap: wrap;
		line-height: 1.2;
	}
	.popover ul[data-depth="1"] > li:hover div.collapse,
	.popover ul[data-depth="1"]  div.collapse:hover{
		display: block;
	}
	#page .popover ul[data-depth="2"] div.collapse,
	#page .popover ul[data-depth="2"] span.navbar-toggler{
		display: none;
	}
	.popover span.navbar-toggler{
		margin-left: auto;
	}
}