/* HEADER (hh-header.css)
--------------------------------------------------- */
#hh-mfe-category {
	scroll-margin-top: 5rem;
}
#hh-header {
	background: var(--hh-red);
	color: #fff;
	padding: calc(var(--gap) * .5) var(--gap);
	display: grid;
	grid-gap: calc(var(--gap) * 2);
	grid-template-columns: auto auto auto 1fr auto;
	grid-template-rows: auto;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: +999;
	line-height: 110%;
	outline: 1.5px solid #fff5;
}
#hh-header > * {
	grid-row: 1/2;
}

#hh-header-logo			{ grid-column: 1/2 }
#hh-header-ul-a			{ grid-column: 2/3 }
#hh-mfe-header-search	{ grid-column: 3/4 }
#hh-mfe-header-location	{ grid-column: 4/5 }
#hh-header-ul-b			{ grid-column: 5/6 }

#hh-header-logo img {
	width: auto;
	height: calc(var(--gap) * 2.5);
	vertical-align: middle;
	padding: 0;
}

#hh-header a {
	text-decoration: none;
}


#hh-mfe-header-search {
	padding: 0;
	border: 0;
	margin: 0;
	/* font-family: "hhAgendaLight", sans-serif; */
	white-space: nowrap;
	/* position: initial !important; */
	position: inherit;
}
#hh-mfe-header-search fieldset {
	padding: 0;
	border: 0;
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr auto;
	grid-gap: calc(var(--gap) / 2);
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	border-radius: var(--gap);
	padding: 0 1em; 
	}
#hh-mfe-header-search fieldset input[type="text"] {
	-webkit-appearance: none;
	border: none;
	font: inherit;
	padding: 0;
	background: transparent;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	}
#hh-mfe-header-search fieldset button {
	-webkit-appearance: none;
	border: none;
	font: inherit;
	padding: calc(var(--gap) / 3) 0;
	width: var(--gap);
	background: transparent url(/_svg/icon.search-red.svg) no-repeat 50% 50% / var(--gap);
	text-indent: -444rem;
	display: inline-block;
	cursor: pointer;
	background-size: 80%;
	}
#hh-mfe-header-search fieldset button[type="reset"],
#hh-mfe-header-search fieldset a[href^="#"] {
	background-image: url(/_svg/icon.close-red.svg);
	background-size: 75%;
	-webkit-appearance: none;	
	outline: none;
	}

#hh-mfe-header-location {
	justify-self: center;
	}
#hh-mfe-header-location > a > strong,
#hh-mfe-header-location > a > small {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
#hh-mfe-header-location > a.noscript {
	display: grid;
	color: #ffffff;
	grid-template-columns: auto auto;
	column-gap: calc(var(--gap) / 4);
	place-items: end;
}
#hh-mfe-header-location .location-fail {
	align-items: center;
}

#hh-header > ul {
	display: grid;
	grid-auto-flow: column;
	grid-gap: var(--gap);
	grid-gap: calc(var(--gap) * 2);
	align-items: center;
	justify-content: flex-end;
	list-style: none;
	/* font-family: "hhAgendaBold", sans-serif; */
	margin: 0;
	padding: 0;
}
#hh-header > ul a {
	display: block;
	color: #fff;
	padding: 0;
	cursor: pointer;
}
#hh-header > ul > li > a {
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: row;
	place-items: center;
	gap: 0.5em;
}
#hh-header a img.icon {
	height: var(--gap);
	width: auto;
}
#hh-mfe-header-cart{
	position: relative;
}


@media (hover: hover) {
	#hh-header a img.icon {
		transition: transform .3s ease;
		transform-origin: bottom center;
		transform: scale(.9);
	}
	#hh-header a:hover img.icon {
		transform: scale(1);
	}
	#hh-header #hh-mfe-header-location img {
		transform-origin: unset;
	}
}

@media (min-width:600px) and (max-width: 999px) { 
	#hh-header {
		grid-template-columns: auto auto auto 1fr auto;
		grid-template-rows: auto;
		grid-gap: var(--gap);
	}
	
	#hh-header-logo			{ grid-column: 1/2 }
	#hh-header-ul-a			{ grid-column: 2/3 }
	#hh-mfe-header-search	{ grid-column: 3/4 }
	#hh-mfe-header-location	{ grid-column: 4/5 }
	#hh-header-ul-b			{ grid-column: 5/6 }

	#hh-header-ul-b .mobile,	
	#hh-mfe-header-search button[type="reset"]	 {
		display: none;
	}
	#hh-mfe-header-search fieldset input[type="text"] {
		width: 80px;
	}
	#hh-header > ul {
		grid-gap: var(--gap);
	}
	#hh-mfe-header-search fieldset input[type="text"]::placeholder {
		color: #ffffff;
	}
	[lang="fr"] #hh-header, 
	[lang="fr"] #hh-header > ul {
		grid-gap: 12px;
	}
	
}

@media (max-width: 1024px) {
	#hh-order-status {
		display: none !important;
	}
}

/* @media (min-width:600px) and (max-width: 1300px) { */
@media (min-width:600px) and (max-width: 1260px) {
	#hh-mfe-header-search fieldset input[type="text"]::placeholder {
		color: #ffffff;
	}
	nav#hh-top-nav {
		display: none;
	}
	#hh-header {
		grid-template-columns: auto auto auto 1fr auto;
		grid-template-rows: auto;
		grid-gap: var(--gap);
	}
	#hh-header > ul {
		grid-gap: var(--gap);
	}
	[lang="fr"] #hh-header, 
	[lang="fr"] #hh-header > ul {
		grid-gap: 12px;
	}
}
#hh-mfe-header-cart > a{
	position: relative;
}

@media (max-width: 600px) {
	#hh-header {
		grid-template-columns: auto auto 1fr auto;
		grid-template-rows: auto auto;
		grid-gap: var(--gap);
		column-gap: calc(var(--gap) * 1.1);
		background-color: transparent;
		/* position: relative; */
		outline: none;
		pointer-events: none;
	}
	
	#hh-header-logo			{ grid-column: 1/2 }
	#hh-header-ul-a			{ grid-column: 2/3 }
	#hh-mfe-header-location	{ grid-column: 3/4 }
	#hh-header-ul-b			{ grid-column: 4/5 }
	#hh-mfe-header-search	{ grid-column: 2/5 }

	#hh-header > * {
		grid-row: 1/2;
		transition: transform .5s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .5s cubic-bezier(0.770, 0.000, 0.175, 1.000), display 0s linear .5s;
		opacity: 1;
		pointer-events: auto;
	}
	#hh-header::before {
		content: " ";
		grid-row: 1/2;
		grid-column: 1/-1;
		margin: calc(var(--gap) * -.5) calc(var(--gap) * -1) !important;
		padding: calc(var(--gap) * .5) calc(var(--gap) * 1) !important;
		background: var(--hh-red);
		height: 100%;
		outline: 1.5px solid transparent;
		transition: outline-color .5s ease;
		box-sizing: content-box;
	}

	#hh-mfe-header-search {
		grid-row: 2/3;
		grid-column: 1/-1;
		margin: calc(var(--gap) * -.5) calc(var(--gap) * -1) !important;
		padding: calc(var(--gap) * .5) calc(var(--gap) * 1) !important;
		background: var(--hh-white);
		z-index: -1;
	}
	#hh-mfe-header-search > fieldset {
		border: 1px solid var(--hh-medium-grey);
	}
	#hh-mfe-header-search > fieldset > button {
		transform: scale(1.6);
	}
	#hh-mfe-header-search #search-input:placeholder-shown ~ button[type="reset"] {
		display: none;
	}
	/* #hh-mfe-header-search > fieldset > button:last-of-type {
		display: none;
	} */
	
	/* #hh-header #hh-mfe-header-search hh-dropdown.hh-dropdown {
		margin: 0 !important;
		left: 0 !important;
		top: 2px !important;
		position: relative;
		width: calc(100vw - (var(--gap) * 2));
		border-radius: 4px;
		max-height: calc(100vh - 6.5rem) !important;
	} */
	#hh-header #hh-mfe-header-search hh-dropdown.hh-dropdown {
		margin: 0 !important;
		left: calc(var(--gap) * -1) !important;
		top: 2px !important;
		position: relative;
		width: 100vw;
		max-height: calc(100vh - 6.5rem) !important;
	}


	#hh-mfe-header-location {
		align-self: stretch;
		display: flex;
	}
	#hh-mfe-header-location > .location {
		align-items: center;
	}
	#hh-mfe-header-location .location img.icon {
		display: none !important;
	}
	#hh-mfe-header-location .location strong {
		font-family: "hhAgendaMedium", sans-serif !important;
		font-weight: normal !important;
	}

	/* hide these */
	#hh-mfe-header-search-mobile,
	/* #hh-mfe-header-account, */
	#hh-mfe-header-account + * {
		display: none !important;
	}


	body[data-scroll-direction="down"] #hh-mfe-header-search {
		transform: translateY(-200%);
	}
	body[data-scroll-direction="down"] #hh-header::before {
		outline-color: #fff5;
	}
	#hh-mfe-header-search fieldset {
		justify-content: flex-end;
	}
	#hh-mfe-header-searchfieldset input[type="text"] {
		width: 100%;
	}
	#hh-header > ul a {
		background-size: var(--gap);
	}
	#hh-header > ul {
		grid-gap: var(--gap);
		/* make click targets bigger */
		align-self: stretch;
		display: flex;
	}
	/* make click targets bigger */
	#hh-header > ul > li {
		align-self: stretch;
		display: flex;
	}
	#hh-header > ul > li > a {
		display: block;
		width: calc(var(--gap) * 1.5);
		height: auto;
		overflow: hidden;
		/* make click targets bigger */
		display: flex;
	}
	

	#hh-header a img.icon {
		transform: scale(1);
		height: calc(var(--gap) * 1.5);
		width: calc(var(--gap) * 1.5);
	}
	#hh-mfe-header-cart > a {
		position: initial;
	}
	#hh-mfe-header-cart .cart-count {
		transform: translateY(1em);
	}
}

@media screen and (min-width: 1400px) {
	#hh-mfe-header-search fieldset input[type="text"] {		
		width: 282px;
		padding-top: 3px;
	}
	
}
@media (min-width: 1000px) {
	.mobile,
	#hh-mfe-header-search button[type="reset"],
	#hh-mfe-header-search fieldset a[href^="#"] {
		display: none;
	}
}




/* TOP NAV (hh-top-nav.css)
--------------------------------------------------- */
#hh-top-nav {
	background: #fff;
	border-bottom: 1px solid var(--hh-grey);
	/* padding-block: 0; */
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	justify-content: space-between;
	overflow-x: auto;
	column-gap: var(--gap);
	white-space: nowrap;
	font-size: 18px;
}
#hh-top-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	grid-gap: var(--gap);
	align-items: center;
}
#hh-top-nav a {
	color: inherit;
	display: block;
	padding: calc(var(--gap) / 2) 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
}
#hh-top-nav ul + ul li + li:before {
	content: '|';
	position: absolute;
	transform: translate(-14px, 12px);
	color: var(--hh-grey);
}
#hh-top-nav a:hover {
	border-color: var(--hh-red);
}
#hh-top-nav ul a .icon {
	display: inline-block;
	height: 0.9em;
	width: auto;
	padding-right: .25em;
	vertical-align: -10%;
}
#hh-top-nav li span {
	margin-left: -1em;
	margin-right: 0.5em;
	color: #000000;
}
/* #hh-top-nav ul a.switchlang {
	color: var(--hh-red);
} */


@media (max-width: 699px) {
	#hh-top-nav {
		display: none;
	}
}




/* NAVIGATION (hh-navigation.css)
--------------------------------------------------- */
#navigation {
	border: 0 !important;
	padding: 0 !important;
}
#navigation > button {
	margin: 0 !important
}

#navigation > div:nth-child(1) > ul:nth-child(2) > li:nth-child(n+2){
	font-family: "hhAgendaMedium", sans-serif;
	font-size: 24px;
	color: #000000;
}