.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	pointer-events: none;

	@media screen and (max-width: 1280px) {
		z-index: 80;
	}

	* {
		pointer-events: auto;
	}

	ul {
		list-style: none;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--xs);
		max-width: 1600px;
		margin: 0 auto;
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);

		@media screen and (max-width: 1280px) {
			flex-wrap: wrap;
		}
	}

	.site-header__inner,
	.product-navigation__container--header {
		@media screen and (max-width: 768px) {
			padding-inline: var(--wp--preset--spacing--xs);
		}
	}

	.site-header__left {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2-xs);
		background: var(--wp--preset--color--bleu-fonce);
		padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--l);
		border-radius: 999px;
	}

	.site-header__logo-link {
		display: inline-flex;
		align-items: center;
		background: var(--wp--preset--color--bleu-fonce);
		border-radius: 999px;

		svg {
			display: block;
			width: 132px;
			max-height: 50px;
			height: auto;
		}
	}

	.site-header__buttons {
		display: flex;
		column-gap: var(--wp--preset--spacing--3-xs);
	}

	.site-header__inner > .site-header__actions {
		align-self: stretch;

		.site-header__buttons {
			@media screen and (max-width: 1440px) {
				display: none;
			}
		}
	}

	.site-header__button {
		/* margin-left: 10px; */
		text-align: center;
		margin-left: 0 !important;
	}

	.site-header__button {
		padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--2-xs) !important;

		a {
			font-size: var(--wp--preset--font-size--minus-2) !important;
			padding: 0 !important;
		}
	}

	.site-header__store-trigger {
		padding: 0;
		font-size: var(--wp--preset--font-size--2);

		@media screen and (min-width: 1281px) {
			display: inline-flex;
			align-items: center;
			gap: var(--wp--preset--spacing--2-xs);
			padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
			background: var(--wp--preset--color--bleu-ciel);
			color: #ffffff;
			border-radius: 999px;
			font-size: var(--wp--preset--font-size--minus-1);
			font-weight: 500;
			line-height: 1;
			transition: filter 150ms ease;
			anchor-name: --store-selector-trigger;
		}

		&:hover,
		&:focus-visible {
			filter: brightness(0.95);
		}
	}

	.site-header__store-anchor {
		position: relative;
	}

	.site-header__store-trigger-hamburger {
		display: none;

		@media screen and (min-width: 1281px) {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			gap: 3px;
			width: 11px;
			height: 14px;
		}
	}

	.site-header__store-trigger-line {
		display: block;
		width: 100%;
		height: 2px;
		background-color: currentColor;
		transform-origin: center;
		transition:
			transform 0.25s ease,
			opacity 0.2s ease;
	}

	.site-header__store-trigger {
		&.is-open {
			.site-header__store-trigger-line:nth-child(1) {
				transform: translateY(2.5px) rotate(45deg);
			}

			.site-header__store-trigger-line:nth-child(2) {
				transform: translateY(-2.5px) rotate(-45deg);
			}
		}
	}

	.site-header__nav {
		flex: 1;
		min-width: 0;
		color: white;

		@media screen and (max-width: 1280px) {
			position: fixed;
			top: 0;
			left: 0;
			order: 3;
			width: min(86vw, 420px);
			height: -webkit-fill-available;
			padding: var(--wp--preset--spacing--m);
			background: white;
			color: var(--wp--preset--color--bleu-fonce);
			transform: translateX(-100%);
			visibility: hidden;
			transition:
				transform 0.3s ease,
				visibility 0.3s ease;
			z-index: 110;
			display: flex;
			flex-direction: column;
		}

		&.is-open {
			@media screen and (max-width: 1280px) {
				transform: translateX(0);
				visibility: visible;
			}
		}

		.menu {
			display: inline-flex;
			align-items: center;
			gap: var(--wp--preset--spacing--xs);
			margin: 0;
			list-style: none;

			@media screen and (max-width: 1280px) {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				flex-wrap: nowrap;
			}

			li {
				padding: 0;

				@media screen and (max-width: 1280px) {
					width: 100%;
				}

				@media screen and (max-width: 1280px) {
					> ul {
						display: none;
					}
				}

				a {
					display: inline-block;
					padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--3-xs);
					color: currentColor;
					font-size: var(--wp--preset--font-size--0);
					font-weight: 500;

					@media screen and (max-width: 1280px) {
						width: 100%;
						padding-inline: 0;
						font-size: var(--wp--preset--font-size--2);
					}

					small {
						display: block;
						font-size: var(--wp--preset--font-size--minus-2);
						@media screen and (min-width: 1281px) {
							font-size: var(--wp--preset--font-size--minus-1);
							font-weight: 400;
						}
					}
				}

				.sub-menu,
				.store-selector__body {
					padding-top: var(--wp--preset--spacing--2-xs);
					padding-left: var(--wp--preset--spacing--xs);
				}

				.sub-menu:not(:has(ul)) span {
					/* font-size: var(--wp--preset--font-size--0); */
					/* font-weight: 400; */
				}

				&.menu-item-has-children > a,
				&.menu-item-has-children:not(.store-item) .header-submenu__parent-link {
					@media screen and (max-width: 1280px) {
						display: inline-flex;
						align-items: center;
						gap: var(--wp--preset--spacing--2-xs);
						width: 100%;
					}

					&::after {
						@media screen and (max-width: 1280px) {
							transition: transform 0.2s ease;
						}
					}
				}

				ul,
				.store-selector__body {
					@media screen and (max-width: 1280px) {
						width: 100%;
						margin: 0;
					}

					a {
						@media screen and (max-width: 1280px) {
							/* display: inline-block; */
							padding: var(--wp--preset--spacing--xs) 0;
							color: currentColor;
						}
					}
				}
			}
		}
	}
	.menu-main-menu-cta-container .menu {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2-xs);
	}

	.menu-main-menu-container {
		@media screen and (max-width: 1280px) {
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			overflow-x: clip;
		}
	}

	.site-header__menu-close,
	.site-header__mobile-backdrop {
		display: none;
	}

	.site-header__menu-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 3px;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border-radius: 999px;
		background: #ffffff;
		color: var(--wp--preset--color--bleu-fonce);
		transition: background-color 0.2s ease;

		@media screen and (max-width: 1280px) {
			display: inline-flex;
		}

		&.is-open {
			.site-header__menu-toggle-line:nth-child(2) {
				transform: translateY(2.5px) rotate(45deg);
			}

			.site-header__menu-toggle-line:nth-child(3) {
				transform: translateY(-2.5px) rotate(-45deg);
			}
		}
	}

	.site-header__menu-toggle-line {
		display: block;
		width: 11px;
		height: 2px;
		background-color: currentColor;
		transform-origin: center;
		transition:
			transform 0.25s ease,
			opacity 0.2s ease;
	}

	.site-header__menu-close {
		@media screen and (max-width: 1280px) {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 2rem;
			height: 2rem;
			margin-left: auto;
			margin-bottom: var(--wp--preset--spacing--xs);
			padding: 0;
			/* border: 1px solid var(--wp--preset--color--bleu-fonce); */
			border-radius: 999px;
			background: transparent;
			font-size: 1.25rem;
			line-height: 1;
			span {
				color: var(--wp--preset--color--bleu-fonce);
			}
		}
	}

	.site-header__mobile-backdrop {
		@media screen and (max-width: 1280px) {
			position: fixed;
			inset: 0;
			display: block;
			border: none;
			background: rgba(0, 0, 0, 0.35);
			opacity: 0;
			visibility: hidden;
			transition:
				opacity 0.3s ease,
				visibility 0.3s ease;
			z-index: 105;
			pointer-events: none;
		}

		&.is-open {
			@media screen and (max-width: 1280px) {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}
		}
	}

	.site-header__store-trigger,
	.site-header__nav .menu li a,
	.site-header__nav .menu li.menu-item-has-children:not(.store-item) .header-submenu__parent-link {
		&:has(+ .store-selector),
		&:has(+ ul) {
			@media screen and (max-width: 1280px) {
				color: currentColor;
				/* padding: 0; */
				font-weight: 600;
				display: flex;
				/* justify-content: space-between; */
				align-items: center;
				gap: var(--wp--preset--spacing--2-xs);
				width: 100%;
				/* padding: var(--wp--preset--spacing--3-xs) 0; */
			}

			&::after {
				@media screen and (max-width: 1280px) {
					content: "";
					position: relative;
					bottom: 1px;
					display: block;
					width: 14px;
					height: 8px;
					transform: rotate(180deg);
					transition: transform 0.2s ease;
					-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7841 6.60104L6.8022 0.999751L0.999487 6.81714" stroke="%230099CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
					-webkit-mask-size: contain;
					-webkit-mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7841 6.60104L6.8022 0.999751L0.999487 6.81714" stroke="%230099CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
					mask-size: contain;
					mask-repeat: no-repeat;
					mask-position: center;
					background-color: var(--wp--preset--color--bleu-fonce);
				}
			}
		}
	}

	.site-header__store-trigger.is-open,
	.site-header__nav .menu li.is-open > a,
	.site-header__nav .menu li.is-open > .header-submenu__trigger .header-submenu__parent-link {
		&:has(+ .store-selector),
		&:has(+ ul) {
			@media screen and (max-width: 1280px) {
				color: var(--wp--preset--color--bleu-ciel);
			}

			&::after {
				@media screen and (max-width: 1280px) {
					transform: rotate(0deg);
					background-color: var(--wp--preset--color--bleu-ciel);
				}
			}
		}
	}

	.site-header__nav .menu > li.menu-item-has-children:not(.store-item) .header-submenu__parent-link {
		@media screen and (max-width: 1280px) {
			font-weight: 600;
		}

		&::after {
			@media screen and (max-width: 1280px) {
				content: "";
				position: relative;
				bottom: 1px;
				display: block;
				width: 14px;
				height: 8px;
				/* margin-left: auto; */
				transform: rotate(180deg);
				transition: transform 0.2s ease;
				-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7841 6.60104L6.8022 0.999751L0.999487 6.81714" stroke="%230099CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				-webkit-mask-size: contain;
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-position: center;
				mask-image: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7841 6.60104L6.8022 0.999751L0.999487 6.81714" stroke="%230099CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: center;
				background-color: var(--wp--preset--color--bleu-fonce);
			}
		}
	}

	.site-header__nav .menu > li.menu-item-has-children.is-open:not(.store-item) .header-submenu__parent-link {
		@media screen and (max-width: 1280px) {
			color: var(--wp--preset--color--bleu-ciel);
		}

		&::after {
			@media screen and (max-width: 1280px) {
				transform: rotate(0deg);
				background-color: var(--wp--preset--color--bleu-ciel);
			}
		}
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2-xs);
		@media screen and (min-width: 1281px) {
			background: white;
			border-radius: 999px;
			/* height: -webkit-fill-available; */
		}
	}

	.site-header__actions-desktop {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--s);

		@media screen and (max-width: 1280px) {
			display: none;
		}
	}

	.site-header__actions-mobile {
		flex-shrink: 0;
		padding-top: var(--wp--preset--spacing--xs);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--m);
		align-items: flex-end;
		justify-content: space-between;

		@media screen and (min-width: 1281px) {
			display: none;
		}
	}

	.site-header__lang-switcher {
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 1px;

		a {
			text-decoration: none;
		}
	}

	.site-header__icon-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: fit-content;
		isolation: isolate;

		/* border-radius: 999px; */
		/* font-size: 1rem; */

		span {
			height: fit-content;
			display: flex;
		}
	}

	.site-header__cart-link {
		position: relative;
	}

	span.site-header__cart-count {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 2px;
		min-width: 22px;
		height: 22px;
		font-size: var(--wp--preset--font-size--minus-2);
		font-weight: 600;
		line-height: 1;
		color: #ffffff;
		background: var(--wp--preset--color--rouge);
		border-radius: 999px;
		transform: translate(50%, -50%);
		pointer-events: none;
		/* z-index: -1; */

		&.is-empty {
			display: none;
		}
	}

	.site-header__search-anchor {
		anchor-name: --header-search-anchor;
	}

	.site-header__search-panel {
		position: absolute;
		position-anchor: --header-search-anchor;
		top: calc(anchor(bottom) + var(--wp--preset--spacing--m));
		right: anchor(right);
		width: min(90vw, 420px);
		padding: var(--wp--preset--spacing--2-xs);
		background: #ffffff;
		border-radius: 90px;
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		pointer-events: none;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			visibility 0.25s ease;
		z-index: 130;

		@media screen and (max-width: 1280px) {
			top: unset;
			bottom: calc(anchor(bottom) + var(--wp--preset--spacing--m));
			left: anchor(left);
			right: unset;
			width: min(72vw, 420px);
		}

		&.is-open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			pointer-events: auto;
		}
	}

	.site-header__search-form {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3-xs);
	}

	.site-header__search-input {
		flex: 1 1 auto;
		min-width: 0;
		/* min-width: 0;
		height: 2.25rem;
		padding: 0 var(--wp--preset--spacing--2-xs);
		border: 1px solid rgba(3, 26, 57, 0.24);
		border-radius: 999px;
		background: #ffffff;
		color: var(--wp--preset--color--bleu-fonce);
		font-size: var(--wp--preset--font-size--minus-1);

		&::placeholder {
			color: rgba(3, 26, 57, 0.55);
		} */
	}

	.site-header__search-submit {
		flex: 0 0 auto;
		/* height: 2.25rem; */
		padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--s);
		border-radius: 999px;
		background: var(--wp--preset--color--bleu-fonce);
		color: #ffffff;
		font-size: var(--wp--preset--font-size--minus-1);
		font-weight: 600;
		line-height: 1;
		transition: filter 150ms ease;

		&:hover,
		&:focus-visible {
			filter: brightness(1.08);
		}
	}

	.site-header__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--minus-2);
		font-weight: 500;
		line-height: 1;
	}

	.site-header__cta--secondary {
		background: var(--wp--preset--color--bleu-ciel);
		color: #ffffff;
	}

	.site-header__cta--primary {
		background: var(--wp--preset--color--bleu-fonce);
		color: #ffffff;
	}
}

.store-selector {
	@media screen and (min-width: 1281px) {
		position: fixed;
		inset: 0;
		display: none;
		z-index: 90;
	}

	&.is-open {
		display: block;
	}

	.store-selector__backdrop {
		display: none;

		@media screen and (min-width: 1281px) {
			display: block;
			position: absolute;
			inset: 0;
			background: transparent;
		}
	}

	.store-selector__dialog {
		@media screen and (min-width: 1281px) {
			position: fixed;
			position-anchor: --store-selector-trigger;
			top: calc(anchor(bottom) + var(--wp--preset--spacing--xs));
			left: anchor(left);
			width: min(100%, 420px);
			padding: var(--wp--preset--spacing--s);
			background: #ffffff;
			border: 1px solid rgba(0, 0, 0, 0.09);
			border-radius: 12px;
			box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
			z-index: 100;
		}

		@media screen and (max-width: 768px) {
			width: calc(100% - (2 * var(--wp--preset--spacing--xs)));
			left: var(--wp--preset--spacing--xs);
		}
	}

	.store-selector__header {
		display: none;

		@media screen and (min-width: 1281px) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--wp--preset--spacing--2-xs);
			margin-bottom: var(--wp--preset--spacing--xs);
		}
	}

	.store-selector__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--0);
		font-weight: 600;
		color: var(--wp--preset--color--bleu-fonce);
	}

	.store-selector__close {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3-xs);
		padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
		border: 1px solid var(--wp--preset--color--bleu-fonce);
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--minus-1);
		color: var(--wp--preset--color--bleu-fonce);
		font-weight: bold;
	}

	.store-selector__body {
		display: flex;
		flex-direction: column;

		.store-selector__item:first-child {
			border-top: none;
			padding-top: 0;
		}
	}

	.store-selector__item {
		line-height: 1;

		@media screen and (min-width: 1281px) {
			display: flex !important;
			align-items: center;
			justify-content: space-between;
			gap: var(--wp--preset--spacing--2-xs);
			padding-block: var(--wp--preset--spacing--xs);
			border-top: 1px solid rgba(3, 26, 57, 0.2);
		}

		svg {
			display: none;

			@media screen and (min-width: 1281px) {
				display: block;
			}
		}
	}

	.store-selector__item-content {
		margin: 0;
		color: var(--wp--preset--color--bleu-fonce);
		display: flex;
		flex-direction: column;

		@media screen and (min-width: 1281px) {
			font-weight: 600;
			font-size: var(--wp--preset--font-size--6-4);
		}

		small {
			display: none;

			@media screen and (min-width: 1281px) {
				display: block;
				font-weight: 400;
				font-size: var(--wp--preset--font-size--0);
			}
		}
	}

	.store-selector__item-copy {
		margin: 0;
		font-size: var(--wp--preset--font-size--minus-1);
		color: var(--wp--preset--color--text);
	}

	.store-selector__item-arrow {
		font-size: var(--wp--preset--font-size--2);
		color: var(--wp--preset--color--bleu-ciel);
	}
}

body {
	&.is-store-selector-open {
		overflow: hidden;
	}

	&.is-mobile-menu-open {
		@media screen and (max-width: 1280px) {
			overflow: hidden;
		}
	}
}