@use "../../../../dev/scss/variables";

body.ehp-body-after-scroll:not(:has(.has-behavior-onscroll-none)) {
	padding-top: var(--ehp-body-padding-top) !important;
}

[data-elementor-type="ehp-header"] {
	&:has(.shape-type-float) {
		height: 0px !important;
	}

	& > .e-con,
	& > .e-con > .e-con-inner {
		display: contents !important;
	}
}

.ehp-header {
	--ehp-body-padding-top: 0px;
	--header-logo-width: 68px;
	--header-logo-width-sticky: 34px;
	--header-site-title-color: #0052FF;
	--header-site-title-color-hover: #0052FF;
	--header-buttons-space-between: 16px;
	--header-logo-order: 0;
	--header-navigation-breakpoint: 767px;
	--header-menu-item-spacing: 32px;
	--header-title-size-sticky: 20px;
	--header-title-weight-sticky: 800;
	--header-align-menu: start;
	--header-element-spacing: 0px;
	--header-blur-level: 7px;

	--header-wp-admin-bar-height: 0px;
	--header-float-offset: 0px;
	--header-floating-bars-height: 0px;
	--header-float-height: calc(var(--header-wp-admin-bar-height) + var(--header-float-offset) + var(--header-floating-bars-height));
	--header-float-height-relative: calc( var(--header-float-offset) + var(--header-floating-bars-height));
	--header-float-width: 100%;
	--header-scroll-down: 0px;

	--header-button-primary-icon-spacing: 10px;
	--header-button-primary-text-color: #{variables.$global-colors-white};
	--header-button-primary-text-color-hover: #{variables.$global-colors-text};
	--header-button-primary-border-width: 0px;
	--header-button-primary-border-color: transparent;
	--header-button-primary-border-radius-block-end: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-block-start: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-inline-end: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-inline-start: #{variables.$corners-shape-default};

	--header-button-secondary-icon-spacing: 10px;
	--header-button-secondary-text-color: #{variables.$global-colors-secondary};
	--header-button-secondary-text-color-hover: #{variables.$global-colors-secondary};
	--header-button-secondary-border-width: 2px;
	--header-button-secondary-border-color: #{variables.$global-colors-secondary};
	--header-button-secondary-border-radius-block-end: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-block-start: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-inline-end: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-inline-start: #{variables.$corners-shape-default};

	--header-toggle-icon-color: #555963;
	--header-toggle-icon-color-active: #555963;
	--header-toggle-icon-size: 22px;

	--header-menu-item-color: #555963;
	--header-menu-item-color-hover: #555963;
	--header-menu-item-color-active: #555963;

	--header-pointer-hover-underline-width: 2px;
	--header-pointer-hover-underline-color: #0052FF;
	--header-pointer-hover-highlight-bg-color: #E0EAFF;
	--header-pointer-hover-highlight-padding-inline-default: 8px;
	--header-pointer-hover-highlight-padding-block-default: 4px;
	--header-pointer-hover-highlight-padding-inline-thin: 6px;
	--header-pointer-hover-highlight-padding-block-thin: 2px;
	--header-pointer-hover-highlight-padding-inline-thick: 8px;
	--header-pointer-hover-highlight-padding-block-thick: 8px;

	--header-pointer-hover-highlight-padding-inline: var(--header-pointer-hover-highlight-padding-inline-default);
	--header-pointer-hover-highlight-padding-block: var(--header-pointer-hover-highlight-padding-block-default);

	--header-focus-active-underline-width: 2px;
	--header-focus-active-underline-color: #0052FF;
	--header-focus-active-highlight-bg-color: #E0EAFF;
	--header-focus-active-highlight-padding-inline-default: 8px;
	--header-focus-active-highlight-padding-block-default: 4px;
	--header-focus-active-highlight-padding-inline-thin: 6px;
	--header-focus-active-highlight-padding-block-thin: 2px;
	--header-focus-active-highlight-padding-inline-thick: 8px;
	--header-focus-active-highlight-padding-block-thick: 8px;

	--header-focus-active-highlight-padding-inline: var(--header-focus-active-highlight-padding-inline-default);
	--header-focus-active-highlight-padding-block: var(--header-focus-active-highlight-padding-block-default);

	--header-dropdown-text-align: flex-start;
	--header-dropdown-divider-color: #E0E1E2;
	--header-dropdown-divider-width: 1px;

	--header-box-border-width: 1px;
	--header-box-border-color: #555963;

	--header-contact-button-size: 16px;
	--header-contact-button-spacing: 12px;

	--header-box-padding-block-start: 16px;
	--header-box-padding-block-end: 16px;
	--header-box-padding-inline-start: 32px;
	--header-box-padding-inline-end: 32px;

	$menu-cart-border-color: #E7E7E7;

	display: flex;
	max-width: var(--header-float-width);
	padding-block-start: var(--header-box-padding-block-start);
	padding-block-end: var(--header-box-padding-block-end);
	position: relative;
	z-index: variables.$above-layer;

	&.has-box-border {
		border-bottom: var(--header-box-border-width) solid var(--header-box-border-color);
	}

	&.has-behavior-float {
		--header-float-offset: 16px;
		--header-float-width: 1140px;

		&.has-box-border {
			border: var(--header-box-border-width) solid var(--header-box-border-color);
		}

		&.has-behavior-onscroll-none {
			--header-float-height-relative: var(--header-float-offset);
		}
	}

	&.has-behavior-onscroll-always,
	&.has-behavior-onscroll-scroll-up,
	&.has-behavior-float {
		position: relative;
		left: 0;
		margin: 0 auto;
		right: 0;
		top: var(--header-float-height-relative);
		transition: top 0.5s ease-in-out;
		width: 100%;
		z-index: variables.$top-layer;
	}

	body:not(.ehp-body-after-scroll) & {

		&:not(.shape-type-float) {

			&.has-behavior-onscroll-scroll-up,
			&.has-behavior-onscroll-always {
				inset-block-start: initial;
			}
		}

		&.has-behavior-float {
			top: var(--header-float-offset);
		}
	}

	body.ehp-body-after-scroll & {

		&.has-behavior-onscroll-always,
		&.has-behavior-onscroll-scroll-up,
		&.has-behavior-float:not(.has-behavior-onscroll-none) {
			position: fixed;
			top: var(--header-float-height);
			transition: top 0s;
		}

		&.has-behavior-onscroll-scroll-up {

			&.scroll-down {
				top: calc(-1 * var(--header-scroll-down));
				transition: top 0.5s ease-in-out;
			}
		}
	}

	&.has-blur-background {
		backdrop-filter: blur(var(--header-blur-background-level));
	}

	&.shape-type-float.has-shape-custom {
		--ehp-shapes-border-radius-block-end: var(--header-float-border-radius-custom-block-end, var(--header-float-border-radius-block-end));
		--ehp-shapes-border-radius-block-start: var(--header-float-border-radius-custom-block-start, var(--header-float-border-radius-block-start));
		--ehp-shapes-border-radius-inline-end: var(--header-float-border-radius-custom-inline-end, var(--header-float-border-radius-inline-end));
		--ehp-shapes-border-radius-inline-start: var(--header-float-border-radius-custom-inline-start, var(--header-float-border-radius-inline-start));
	}

	&__elements-container {
		display: grid;
		grid-gap: var(--header-element-spacing);
		grid-template-areas:
			"start center end";
		grid-template-columns: 1fr auto 1fr;
		flex-grow: 1;
		position: relative;
		padding-inline-start: var(--header-box-padding-inline-start);
		padding-inline-end: var(--header-box-padding-inline-end);

		& > .ehp-header__ctas-container {
			grid-area: end;
			justify-content: flex-end;
		}
	}

	&__site-link-container {
		display: flex;
	}

	&__site-link {
		align-items: center;
		display: flex;
	}

	&__site-logo,
	&__site-link img {
		width: var(--header-logo-width);

		&.has-border {
			border: var(--header-logo-border-width) solid var(--header-logo-border-color);
		}

		&.has-shape-custom {
			--ehp-shapes-border-radius-block-end: var(--header-logo-border-radius-block-end);
			--ehp-shapes-border-radius-block-start: var(--header-logo-border-radius-block-start);
			--ehp-shapes-border-radius-inline-end: var(--header-logo-border-radius-inline-end);
			--ehp-shapes-border-radius-inline-start: var(--header-logo-border-radius-inline-start);
		}
	}

	&__site-title {
		color: var(--header-site-title-color);
		margin: 0;

		.ehp-header__site-link:hover &,
		.ehp-header__site-link:focus & {
			color: var(--header-site-title-color-hover);
		}
	}

	&__ctas-container {
		align-items: center;
		display: flex;
		gap: var(--header-buttons-space-between);
		order: 3;
		position: relative;
	}

	& a.ehp-button,
	& a.ehp-button:not([href]):not([tabindex]) {
		--ehp-button-primary-icon-spacing: var(--header-button-primary-icon-spacing);
		--ehp-button-primary-text-color: var(--header-button-primary-text-color);
		--ehp-button-primary-text-color-hover: var(--header-button-primary-text-color-hover);
		--ehp-button-primary-border-width: var(--header-button-primary-border-width);
		--ehp-button-primary-border-color: var(--header-button-primary-border-color);
		--ehp-button-primary-padding-block-end: var(--header-button-primary-padding-block-end);
		--ehp-button-primary-padding-block-start: var(--header-button-primary-padding-block-start);
		--ehp-button-primary-padding-inline-end: var(--header-button-primary-padding-inline-end);
		--ehp-button-primary-padding-inline-start: var(--header-button-primary-padding-inline-start);
		--ehp-button-primary-border-radius-block-end: var(--header-button-primary-border-radius-block-end);
		--ehp-button-primary-border-radius-block-start: var(--header-button-primary-border-radius-block-start);
		--ehp-button-primary-border-radius-inline-end: var(--header-button-primary-border-radius-inline-end);
		--ehp-button-primary-border-radius-inline-start: var(--header-button-primary-border-radius-inline-start);

		--ehp-button-secondary-icon-spacing: var(--header-button-secondary-icon-spacing);
		--ehp-button-secondary-text-color: var(--header-button-secondary-text-color);
		--ehp-button-secondary-text-color-hover: var(--header-button-secondary-text-color-hover);
		--ehp-button-secondary-border-width: var(--header-button-secondary-border-width);
		--ehp-button-secondary-border-color: var(--header-button-secondary-border-color);
		--ehp-button-secondary-padding-block-end: var(--header-button-secondary-padding-block-end);
		--ehp-button-secondary-padding-block-start: var(--header-button-secondary-padding-block-start);
		--ehp-button-secondary-padding-inline-end: var(--header-button-secondary-padding-inline-end);
		--ehp-button-secondary-padding-inline-start: var(--header-button-secondary-padding-inline-start);
		--ehp-button-secondary-border-radius-block-end: var(--header-button-secondary-border-radius-block-end);
		--ehp-button-secondary-border-radius-block-start: var(--header-button-secondary-border-radius-block-start);
		--ehp-button-secondary-border-radius-inline-end: var(--header-button-secondary-border-radius-inline-end);
		--ehp-button-secondary-border-radius-inline-start: var(--header-button-secondary-border-radius-inline-start);
	}

	&__navigation {
		order: 1;
		z-index: variables.$top-layer;

		&[aria-hidden="true"] {
			display: none;
		}
	}

	&__toggle-icon {

		&--open {
			display: flex;
		}

		&--close {
			display: none;
		}
	}

	&__side-toggle {
		display: none;
		grid-area: end;
		justify-content: flex-end;
		gap: 16px;
		order: 3;
	}

	& button.ehp-header__button-toggle {
		align-items: center;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;

		&:hover,
		&:focus {
			background: none;
		}

		svg {
			fill: var(--header-toggle-icon-color);
			height: var(--header-toggle-icon-size);
			width: var(--header-toggle-icon-size);
		}

		&[aria-expanded="true"] {

			.ehp-header__toggle-icon--open {
				display: none;
			}

			.ehp-header__toggle-icon--close {
				display: flex;
			}
		}

		&[aria-expanded="false"] {

			.ehp-header__toggle-icon--open {
				display: flex;
			}

			.ehp-header__toggle-icon--close {
				display: none;
			}
		}
	}

	&__dropdown {
		display: flex;
		gap: var(--header-menu-item-spacing);
		left: -16px;
		list-style: none;
		padding: 0;
		position: absolute;
		top: calc(100% + var(--header-box-padding-block-end));
		width: auto;
		z-index: variables.$ninth-layer;

		.menu-item {
			flex-grow: 1;
		}

		&.shape-type-submenu.has-shape-custom {
			--ehp-shapes-border-radius-block-end: var(--header-submenu-border-radius-custom-block-end, var(--header-submenu-border-radius-block-end));
			--ehp-shapes-border-radius-block-start: var(--header-submenu-border-radius-custom-block-start, var(--header-submenu-border-radius-block-start));
			--ehp-shapes-border-radius-inline-end: var(--header-submenu-border-radius-custom-inline-end, var(--header-submenu-border-radius-inline-end));
			--ehp-shapes-border-radius-inline-start: var(--header-submenu-border-radius-custom-inline-start, var(--header-submenu-border-radius-inline-start));
		}

		&[aria-hidden="true"],
		&:not([aria-hidden]) {
			display: none;
		}
	}

	&__item--sub-level {
		white-space: nowrap;
	}

	& .ehp-header__item:is([type="button"]) {
		background-color: transparent;
	}

	& .ehp-header__item:has(+ .ehp-header__dropdown-toggle:hover) {
		color: var(--header-menu-item-color-hover);
		transition: variables.$transition;
	}

	& .ehp-header__item:is(a),
	& .ehp-header__item:is([type="button"]) {
		color: var(--header-menu-item-color);
		transition: variables.$transition;

		&:hover {
			color: var(--header-menu-item-color-hover);
			transition: variables.$transition;

			+ .ehp-header__dropdown-toggle {
				color: var(--header-menu-item-color-hover);
			}
		}

		&[aria-expanded="true"] {

			.ehp-header__submenu-toggle-icon {
				transform: rotate(180deg);
			}
		}
	}

	&__dropdown-toggle[type="button"] {
		border: unset;
		border-radius: unset;
		padding: unset;

		&:hover,
		&:focus {
			background: unset;
		}
	}

	.menu-item {
		align-items: center;
		display: flex;
		height: 100%;
		position: relative;

		&.current-menu-item {

			.ehp-header__item {
				color: var(--header-menu-item-color-active);
			}
		}
	}

	&__menu {
		align-items: center;
		display: flex;
		gap: var(--header-menu-item-spacing);
		list-style-type: none;
		padding: 0;

		&.has-focus-active {

			&-underline {

				.menu-item.current-menu-item {

					.ehp-header__item {
						position: relative;

						&:after {
							background-color: var(--header-focus-active-underline-color);
							bottom: -5px;
							height: var(--header-focus-active-underline-width);
							content: "";
							left: 0;
							position: absolute;
							width: 100%;
						}
					}
				}
			}

			&-highlight {

				.menu-item.current-menu-item {

					.ehp-header__item {
						border-radius: 8px;
						padding-inline: var(--header-focus-active-highlight-padding-inline);
						padding-block: var(--header-focus-active-highlight-padding-block);

						&:hover,
						&:focus {
							background-color: var(--header-focus-active-highlight-bg-color);
						}
					}
				}
			}
		}
	}

	&__submenu-toggle-icon {
		fill: currentColor;
		margin-left: 4px;
		height: 12px;
		width: 12px;
	}

	&__contact-buttons {
		align-items: center;
		display: flex;
		gap: var(--header-contact-button-spacing);
	}

	&__contact-button {

		& i,
		& .ehp-header__contact-button-label {
			color: var(--header-contact-button-color);
			transition: variables.$transition;
		}

		& svg {
			fill: var(--header-contact-button-color);
			transition: variables.$transition;
		}

		&:hover,
		&:focus {

			& i,
			& .ehp-header__contact-button-label {
				color: var(--header-contact-button-color-hover);
				transition: variables.$transition;
			}

			& svg {
				fill: var(--header-contact-button-color-hover);
				transition: variables.$transition;
			}
		}

		& i {
			font-size: var(--header-contact-button-size);
		}

		& svg {
			height: var(--header-contact-button-size);
			width: var(--header-contact-button-size);
		}
	}

	&__menu-cart {

		& button.ehp-header__menu-cart-button {
			background-color: transparent;
			border: none;
			display: flex;
			cursor: pointer;
			height: var(--header-menu-cart-icon-size);
			padding: 0;
			width: var(--header-menu-cart-icon-size);

			& svg {
				fill: var(--header-menu-cart-icon-color);
				height: var(--header-menu-cart-icon-size);
				pointer-events: none;
				transition: variables.$transition;
				width: var(--header-menu-cart-icon-size);
			}

			& i {
				color: var(--header-menu-cart-icon-color);
				pointer-events: none;
				font-size: var(--header-menu-cart-icon-size);
			}

			&:hover {
				background-color: transparent;

				& svg {
					fill: var(--header-menu-cart-icon-hover-color);
					transition: variables.$transition;
				}

				& i {
					color: var(--header-menu-cart-icon-hover-color);
					transition: variables.$transition;
				}
			}
		}

		&-items {
			flex-direction: column;
			gap: 10px;

			&[inert] {
				display: none;
			}

			&:not([inert]) {
				display: flex;
			}
		}

		&-item {
			padding-block: 10px;
		}

		&-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		&-close-container {
			display: flex;
			justify-content: flex-end;
		}

		& button.ehp-header__menu-cart-close {
			background-color: transparent;
			border: none;
			cursor: pointer;
			padding: 0;
			width: 16px;
			height: 16px;

			& svg {
				fill: var(--header-menu-item-color);
				height: 16px;
				pointer-events: none;
				transition: variables.$transition;
				width: 16px;
			}

			&:hover {
				background-color: transparent;

				& svg {
					fill: var(--header-menu-item-color-hover);
					transition: variables.$transition;
				}
			}
		}

		&-item-info {
			align-items: center;
			display: flex;
			flex-direction: row;
			gap: 10px;
		}

		&-item-info-content {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}

		&-item-price {
			color: var(--header-menu-item-color);
			font-size: .75em;
		}

		&-item-thumbnail {
			background-color: variables.$global-colors-white;
			border-radius: 0;
			border: 1px solid $menu-cart-border-color;
			height: 65px;
			object-fit: cover;
			object-position: center;
			width: 65px;
		}

		& a.ehp-header__menu-cart-item-remove {
			border: 1px solid var(--header-menu-item-color);
			border-radius: 50%;
			color: var(--header-menu-item-color);
			display: inline-block;
			font-size: 16px;
			font-weight: 700;
			height: 20px;
			line-height: 1;
			text-align: center;
			transition: variables.$transition;
			width: 20px;

			&:hover,
			&:focus {
				color: var(--header-menu-item-color-hover);
				border-color: var(--header-menu-item-color-hover);
			}
		}

		&-subtotal {
			align-items: center;
			color: var(--header-menu-item-color);
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			padding-block: 10px;
		}

		&-actions {
			display: flex;
			flex-direction: column;
			gap: 5px;
			padding-block: 10px;
		}

		&-view-cart.ehp-header__item {
			--header-menu-item-color: var(--header-menu-cart-view-cart-text-color);
			--header-menu-item-color-hover: var(--header-menu-cart-view-cart-text-color-hover);

			background-color: var(--header-menu-cart-view-cart-background-color);
			border-radius: 0;
			padding: 12px;
			text-align: center;

			&:hover,
			&:focus {
				background-color: var(--header-menu-cart-view-cart-background-color-hover);
			}
		}

		&-checkout {
			padding: 12px;
			text-align: center;
		}

		&-empty {
			color: var(--header-menu-item-color);
		}
	}

	&.has-behavior-onscroll-always {
		transition: variables.$transition;

		.ehp-header__site-link img,
		.ehp-header__site-title {
			transition: variables.$transition;
		}

		&.scroll-down {
			transition: variables.$transition;

			&.has-behavior-sticky-scale-logo {

				.ehp-header__site-link img {
					width: var(--header-logo-width-sticky);
					transition: variables.$transition;
				}
			}

			&.has-behavior-sticky-scale-title {

				.ehp-header__site-title {
					font-size: var(--header-title-size-sticky);
					font-weight: var(--header-title-weight-sticky);
					transition: variables.$transition;
				}
			}
		}
	}

	@mixin responsive_styles_mobile() {
		.ehp-header {

			&__elements-container > .ehp-header__ctas-container {
				& > .ehp-button {
					display: none;
				}

				& > .ehp-header__contact-buttons.has-responsive-display-dropdown {
					display: none;
				}
			}

			&__dropdown {
				align-items: var(--header-dropdown-text-align);
				background-color: transparent !important; // Override the default background color
				background-image: none !important; // Override the default background image
				border-radius: unset;
				flex-direction: column;
				left: unset;
				top: unset;
				position: relative;
				width: 100%;
			}

			&__navigation {
				left: 0;
				padding-block-start: var(--header-box-padding-block-start);
				padding-block-end: var(--header-box-padding-block-end);
				position: absolute;
				top: calc(100% + var(--header-box-padding-block-end));
				width: 100%;

				&:not([aria-hidden]) {
					display: none;
				}

				.ehp-header__ctas-container {
					align-items: stretch;
					display: flex;
					flex-direction: column;

					&.has-responsive-width-stretch {
						& .ehp-header__contact-buttons.has-responsive-display-dropdown {
							padding-inline-start: var(--header-box-padding-inline-start);
							padding-inline-end: var(--header-box-padding-inline-end);
						}
					}

					&.has-responsive-width-default {
						padding-inline-start: var(--header-box-padding-inline-start);
						padding-inline-end: var(--header-box-padding-inline-end);
					}
				}

				.ehp-header__contact-buttons.has-responsive-display-navbar {
					display: none;
				}

				& .ehp-header__contact-buttons {
					justify-content: var(--header-dropdown-text-align);
				}

				.ehp-header__menu-cart {
					display: none;
				}
			}

			&__button {
				justify-content: center;
			}

			&__side-toggle {
				display: flex;

				& .ehp-header__contact-buttons.has-responsive-display-dropdown {
					display: none;
				}
			}

			&__menu {
				align-items: var(--header-dropdown-text-align);
				display: flex;
				flex-direction: column;
				margin-bottom: 32px;
				padding-inline-start: var(--header-box-padding-inline-start);
				padding-inline-end: var(--header-box-padding-inline-end);

				&.has-responsive-divider {

					& > .menu-item {
						border-bottom: var(--header-dropdown-divider-width) solid var(--header-dropdown-divider-color);
						padding-block-end: var(--header-menu-item-spacing);
						width: 100%;

						&:last-child {
							border-bottom: none;
							padding-bottom: 0;
						}
					}
				}
			}

			&__menu-cart-container {
				display: flex;
			}
		}

		.menu-item {
			justify-content: var(--header-dropdown-text-align);
		}

		.menu-item.menu-item-has-children {
			align-items: var(--header-dropdown-text-align);
			display: flex;
			flex-direction: column;
			width: 100%;

			& .ehp-header__dropdown-toggle[aria-expanded="true"] {
				margin-bottom: var(--header-menu-item-spacing);
			}
		}

		.ehp-header__menu-cart-items {
			flex-direction: column;
			gap: 10px;
			max-height: calc(70vh - var(--header-box-padding-block-end));
			padding-block-start: var(--header-box-padding-block-start);
			padding-block-end: var(--header-box-padding-block-end);
			padding-inline-start: var(--header-box-padding-block-start);
			padding-inline-end: var(--header-box-padding-block-end);
			position: absolute;
			right: calc(-1 * var(--header-box-padding-inline-start));
			top: calc(100% + var(--header-box-padding-block-end));
			width: 100vw;
		}

		.ehp-header__menu-cart-list {
			list-style: none;
			padding: 0;
			margin: 0;
			overflow-y: auto;
			max-height: calc(60vh - var(--header-box-padding-block-end) - 60px);
		}
	}

	@mixin responsive_styles_desktop {

		&.has-align-link-start {

			.ehp-header__navigation {
				justify-content: center;
			}
		}

		&.has-align-link-center {

			.ehp-header__site-link-container {
				grid-area: center;
				justify-content: center;
			}
		}

		&.has-align-link-connect {

			& .ehp-header__elements-container {
				grid-template-columns: auto 1fr auto;
			}

			& .ehp-header__navigation {
				justify-content: var(--header-align-menu);
			}
		}

		.ehp-header {

			&__navigation {
				align-items: center;
				background: none !important; // Override the default background color
				display: flex;

				& > .ehp-header__ctas-container,
				& > .ehp-header__contact-buttons {
					display: none;
				}
			}

			&__dropdown {
				padding: 16px 32px;

				&.has-layout-horizontal {
					flex-direction: row;
				}

				&.has-layout-vertical {
					flex-direction: column;
				}
			}

			&__menu {

				&.has-pointer-hover {

					&-underline {

						.ehp-header__item:not(.ehp-header__dropdown-toggle):hover,
						.ehp-header__item:has(+ .ehp-header__dropdown-toggle:hover) {
							position: relative;

							&:after {
								background-color: var(--header-pointer-hover-underline-color);
								bottom: -5px;
								height: var(--header-pointer-hover-underline-width);
								content: "";
								left: 0;
								position: absolute;
								width: 100%;
							}
						}
					}

					&-highlight {

						.ehp-header__item {
							border-radius: 8px;
							padding-inline: var(--header-pointer-hover-highlight-padding-inline);
							padding-block: var(--header-pointer-hover-highlight-padding-block);

							&:hover {
								background-color: var(--header-pointer-hover-highlight-bg-color);
							}
						}
					}
				}
			}

			&__menu-cart-items {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-height: calc(80vh - var(--header-box-padding-block-end) - 60px);
				min-width: 260px;
				overflow-y: auto;
				padding: 10px;
				position: absolute;
				right: 0;
				top: calc(100% + var(--header-box-padding-block-end));
				z-index: variables.$ninth-layer;

				&[inert] {
					display: none;
				}

				&:not([inert]) {
					display: flex;
				}
			}

			&__menu-cart-list {
				list-style: none;
				padding: 0;
				margin: 0;
				overflow-y: auto;
				max-height: calc(65vh - var(--header-box-padding-block-end) - 60px);
			}

			&__menu-cart-container {
				display: none;
			}
		}
	}

	&[data-responsive-breakpoint="mobile-portrait"] {

		@media screen and (max-width: variables.$screen-mobile-max) {
			@include responsive_styles_mobile();
		}

		@media screen and (min-width: variables.$screen-tablet-min) {
			@include responsive_styles_desktop();
		}
	}

	&[data-responsive-breakpoint="tablet-portrait"] {

		@media screen and (max-width: variables.$screen-tablet-max) {
			@include responsive_styles_mobile();
		}

		@media screen and (min-width: variables.$screen-desktop-min) {
			@include responsive_styles_desktop();
		}
	}

	&[data-responsive-breakpoint="none"] {
		@include responsive_styles_desktop();
	}
}

.e-con.e-con--ehp-header,
.e-con:has(.ehp-header:is(.has-behavior-onscroll-none):not(.has-behavior-float)) {
	padding: 0;

	& > .e-con-inner.e-con-inner--ehp-header,
	& > .e-con-inner {
		max-width: unset;
		padding-block-end: 0;
		padding-block-start: 0;
	}
}