/* header top >> */
.header-top {
	width: 100%;
	z-index: 501;
}
.header-top .sections {
	display: flex;
	align-items: center;
}
.header-top,
.header-top .sections {
	padding: 0;
	margin: 0;
	background: var(--bg-color);
}
.header-top img.home-logo {
	width: 100%;
	max-width: 300px;
	min-height: 50px;
	max-height: 70px;
}
/* header top – forms > */
#searchForm > span {
	display: none;
}
#searchForm > span .icon {
	transform: rotateY(180deg);
}
#searchForm.input-group .form-control,
#loginForm.input-group .form-control:first-of-type {
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}
#searchForm input {
	max-width: 26rem;
	padding-right: 0.375rem;
	text-overflow: ellipsis;
}
#searchForm button img {
	display: inline;
	margin-inline: 0.5rem;
}
#searchForm button span {
	display: none;
}
.header-top .user-login {
	display: none;
}
.user-login #loginForm {
	flex-wrap: nowrap;
	margin: 0 10px 0.6rem 10px;
}
.user-login #loginForm input#bidLogin,
.user-login #loginForm input#bidPassword {
	max-width: 6.25rem;
	padding-right: 0.375rem;
}
.user-login #loginForm > span {
	display: none;
}
.user-login #loginForm button img {
	display: inline;
}
.user-login #loginForm button span {
	display: none;
}
.user-login .links {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}
#userLogoutButton {
	margin-right: 10px;
}
#userLogoutButton img {
	margin-inline: 0.5rem;
}
#userLogoutButton span {
	display: none;
}
/* < header top – forms */
.header-top .left-section {
	display: flex;
	flex: 0 0 auto;
	width: 33.333%;
	padding-right: 0.75rem;
}
.header-top .middle-section {
	display: flex;
	flex: 0 0 auto;
	width: 66.667%;
}
.header-top .right-section {
	display: none;
	flex-direction: row-reverse;
	line-height: 1.2em;
	font-size: 0.9rem;
	z-index: 499;
}
.header-top .right-section i {
	display: inline-block;
	width: 20px;
}
.header-top .right-section a,
.header-top .right-section .noa,
.cart.modal a.delivery-date {
	display: inline-block;
	padding: 0.1rem 0.6rem;
	margin: 0.1rem;
}
.cart.modal a.delivery-date {
	padding-block: calc(0.2rem + 1px);
	margin-left: auto;
}
.header-top .right-section a span,
.cart.modal a.delivery-date span {
	font-size: 0.9rem;
	color: var(--prmr);
}
#change-delivery-date .delivery-text,
#change-delivery-date-my-account .delivery-text {
	display: none;
}
.header-top .right-section a:hover,
.cart.modal a.delivery-date:hover {
	background-color: var(--category-bg);
	border-radius: 0.3rem;
}
.header-top .right-section span,
.cart.modal a.delivery-date span {
	vertical-align: middle;
}
.header-top .company-info a img.icon,
.header-top .company-info .noa img.icon,
.cart.modal a.delivery-date img.icon {
	margin-right: 0.5rem;
	filter: var(--fc-prmr);
}
.company-info .noa img.icon {
	filter: var(--fc-4);
}
.header-top .anonym.userLogged {
	display: none;
}
.anonym .links a {
	padding: 0.3rem 0.6rem;
	margin-left: 10px;
	color: var(--prmr);
}
.anonym .links a:hover {
	padding: 0.3rem 0.6rem;
	margin-left: 10px;
	color: var(--prmr);
	background-color: var(--category-bg);
	border-radius: 0.3rem;
}
.anonym a#register {
	margin-right: 10px;
}
.header-top .right-section span.alias {
    display: inline-block;
    max-width: calc(35vw - 3rem);
    padding-right: 0.5rem;
    padding-left: 2.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-top .company-info {
	width: 30vw;
	min-width: 250px;
}
.header-top .company-info .alias {
	display: none;
}
.header-top .user-logout {
	position: absolute;
	top: 10px;
	right: 0;
}
/* << header top */
/* HEADER NAVIGATION >> */
body > header {
	position: relative;
	flex: 0;
	z-index: 500;
	background-color: var(--skin1c);
	transition: all 0.5s ease-in-out;
}
body > header .navigation {
	width: 100%;
}
/* burger navigation > */
.burger-nav {
	display: flex;
	background-color: var(--bg-color);
	justify-content: space-around;
}
.burger-nav a img.icon {
	filter: var(--fc-prmr);
}
.burger-nav a:hover img.icon {
	filter: var(--fc-prmr-hov);
}
body > header .nav-btn {
	flex: 0 0 auto;
	padding-block: 0;
}
#shopping-cart .number {
	display: inline-block;
	min-width: 0.9rem;
	padding: 0.125rem;
	border-radius: var(--rad-maxi);
	margin: 0 0.25rem 0.4rem -0.25rem;
	font-size: 0.6rem;
	line-height: initial;
	color: var(--color);
	background-color: var(--login-bg);
}
body[data-in-cart='0'] #shopping-cart {
	pointer-events: none;
	touch-action: none;
	opacity: 0.25;
}
body > header .nav-btn:active i {
	color: var(--sccss);
}
body > header .nav-btn:focus i {
	color: var(--sccss);
}
/* < burger navigation */

/* header menu – navigation > */
.nav-pills {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	top: -0.5rem;
	min-width: var(--sidebar);
	height: 0;
	opacity: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	transition: all 0.25s ease-in-out;
}
header.visible .nav-pills {
	top: 0;
	height: 100%;
	opacity: 1;
}
header:not(.visible) .nav-pills {
	pointer-events: none;
	touch-action: none;
}
.nav-link {
	display: block;
	background: 0 0;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0.2rem 0.8rem 0.2rem 0.6rem;
	margin: 0.4rem;
	border: 0;
	border-radius: var(--radius);
	transition:
		color 0.15s ease-in-out,
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
}
.nav-link span {
	font-size: 1.2rem;
	color: var(--prmr-text);
}
.nav-link:hover {
	color: var(--sccss-text-hov);
	background-color: var(--sccss-hov);
}
.nav-pills .nav-item.active .nav-link {
	background-color: var(--sccss);
	cursor: pointer;
	user-select: none;
}
.nav-pills .nav-item.active .nav-link span {
	color: var(--sccss-text);
}
.nav-pills .nav-item.active img.icon {
	filter: var(--fc-3);
}
.nav-pills .nav-item img.icon,
.header-links img.icon {
	height: 1.6em;
	margin-right: 0.4em;
	filter: var(--fc-f);
}
/* < header menu – navigation */
/* header menu – submenu > */
body > header .header-links {
	display: flex;
	flex-wrap: wrap;
	flex: 1 0 0%;
	position: relative;
	top: -0.5rem;
	height: 0;
	opacity: 0;
	border-bottom: 0.2rem solid var(--bg-color);
	margin: 0;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: all 0.25s ease-in-out;
}
header.visible .header-links {
	top: 0;
	height: 100%;
	opacity: 1;
}
header:not(.visible) .header-links {
	pointer-events: none;
	touch-action: none;
}
.header-links .hl-item {
	flex: 0 0 auto;
	width: auto;
	padding-inline: 0.75rem;
	margin: 0.5rem 0.2rem;
}

.header-links .hl-item span {
	color: var(--prmr-text);
}

.header-links a {
	display: block;
	position: relative;
	padding-inline: 0.2rem;
	font-weight: 500;
	text-decoration: none;
}

/* < header menu – submenu */
/* flags > */
.flags {
	flex: 0 0 auto;
	min-width: 4.2rem;
	min-height: 2rem;
	margin: 0.2rem 10px 0.2rem auto;
	position: relative;
}

.flags div {
	display: grid;
	position: absolute;
	right: 0;
	top: 0;
	background-color: var(--category-bg);
	border-radius: var(--radius);
	z-index: 501;
}

img.flag {
	height: 1.2rem;
}

.flags img.chevron-icon {
	grid-column-start: 2;
	grid-row-start: 1;
	align-self: center;
	width: 1.5rem;
	margin-inline: -0.2rem 0.2rem;
}

.flags a {
	display: none;
	line-height: 0;
	padding: 0.2rem 0.4rem;
	margin: 0.2rem 0 0.2rem 0.2rem;
	transition: all 0.25s ease-in-out;
}

.flags a.active {
	display: inline !important;
}

.flags div:hover a,
.flags div:focus-within a {
	display: grid;
	grid-column-start: 1;
}

.flags a:hover {
	background-color: var(--category-bg-hov);
	border-radius: var(--radius);
}

/* < flags */
/* << HEADER NAVIGATION */


/* sm */
@media (min-width: 576px) {
	#change-delivery-date-my-account .delivery-text {
		display: inline-block;
	}
}

/* md */
@media (min-width: 768px) {
	.header-top .sections {
		height: 7rem;
	}

	.header-top .left-section {
		width: 25%;
	}

	.header-top .middle-section {
		width: 40%;
	}

	.header-top .right-section {
		display: flex;
		flex: 0 0 auto;
		width: 35%;
	}

	.header-top .user-login {
		display: flex;
	}

	body > header .navigation {
		display: inline-block;
	}

	.burger-nav {
		display: none;
	}

	body > header .nav-pills {
		top: 0;
		height: 100%;
		opacity: 1;
		padding-right: 1.8rem;
	}

	body > header .header-links {
		top: 0;
		height: 100%;
		opacity: 1;
		padding-bottom: 0.2rem;
		border-bottom: none;
	}

	header:not(.visible) .nav-pills,
	header:not(.visible) .header-links {
		pointer-events: auto;
		touch-action: auto;
	}

	.flags div {
		z-index: 100;
	}

	.flags a.active {
		display: grid;
		grid-column-start: 1;
	}

	.header-top .userLogged .flags div {
		right: 0;
		top: 2rem;
	}

	.main-content .user-login {
		display: none;
	}
}

/* lg */
@media (min-width: 992px) {
	.header-top .left-section {
		width: 35%;
	}

	.header-top .middle-section {
		width: 30%;
	}

	.header-top .company-info .alias {
		display: inline-block;
	}

	#userLogoutButton img {
		margin-inline: 0.2rem;
	}

	#userLogoutButton span {
		display: inline-block;
	}

	body > header .navigation {
		display: flex;
		align-items: center;
	}
}

/* xl */
@media (min-width: 1200px) {
	#searchForm > span {
		display: flex;
	}

	#searchForm.input-group .form-control,
	#loginForm.input-group .form-control:first-of-type {
		border-radius: unset;
	}

	#searchForm button img {
		display: none;
		margin-inline: 0;
	}

	#searchForm button span {
		display: inline;
	}

	.user-login #loginForm > span {
		display: flex;
	}

	.user-login #loginForm button img {
		display: none;
	}

	.user-login #loginForm button span {
		display: inline;
	}

	.header-top .company-info {
		width: 400px;
	}

	#change-delivery-date .delivery-text {
		display: inline-block;
	}
}