.header {
	background-color: var(--color-header-bg);
	color: var(--color-header);
	min-height: var(--header-height);
	padding: var(--spacing-2) 0;
	z-index: 2000;
	width: 100%;
	transition: all .3s ease;
	font-weight: 500;
}

.header-logo-transparent{
	display: none;
}
.header.header-transparent .header-logo-transparent{
	display: block;
}
.header.header-transparent .header-logo{
	display: none;
}
.header.header-transparent {
	background-color: transparent;
	color: var(--color-transparent-header);
}

.logo-wrapper {
	max-width: var(--logo-width);
}
@media (max-width: 991px){
	.fix-logo-mobile{
		position: absolute;
		left: 0;
		right: 0;
	}
}
.header-icon .icon {
	font-size: 2rem;
}
.header-icon .icon-cart{
	font-size: 2.4rem;
}
.header:hover{
	background-color: var(--color-header-bg);
	color: var(--color-header);
}
.header:hover .header-logo{
	display: block
}
.header:hover .header-logo-transparent{
	display: none;
}
.cart-count {
	color: var(--color-cart-bubble);
	background-color: var(--color-cart-bubble-bg);
	width: 1.4rem;
	height: 1.4rem;
	font-size: 0.8rem;
	right: 4px;
	top: 2px;
}

.search-bar form {
	--search-button-size: 3.6rem;
	/* --search-button-width: 6.4rem; */
	/* --search-button-height: 100%; */
	/* padding-right: calc(var(--search-button-size) + 0.8rem) */
}
.header-search {
	max-width: 100%;
	width: 100%;
}
@media (min-width: 1024px) {
	.header-search {
		max-width: calc(100% - 3.6rem);
		width: 100%;
	}
}

header .search-bar .form-select {
	max-width: clamp(16rem, 12.5vw, 17.5rem);
	margin-right: 1.2rem;
	padding: 0;
	padding-right: 1.2rem;
	border-radius: 0;
	border-right: 1px solid var(--color-neutral-100) !important;
	--tw-ring-color: transparent;
	border: none;
}

.search-bar .search-button {
	width: var(--search-button-width, var(--search-button-size));
	height: var(--search-button-height, var(--search-button-size));
	font-size: 2rem;
}

header .search-dropdown {
	box-shadow: 0px 2.8rem 6.4rem 0px rgba(0, 0, 0, 0.2);
	display: none;
}

header .search-bar:has(input:focus) .search-dropdown {
	display: table;
}

.sub-header {
	background-color: var(--color-sub-header-bg);
	color: var(--color-sub-header);
}

header .search-bar .form-select {
	padding-left: 4px;
	padding-right: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.header.active:not(.header-transparent){
	box-shadow: 0px -11px 20px 3px rgba(0, 0, 0, 0.2);
}
.header.active {

	position: sticky;
	position: -webkit-sticky;
	-webkit-animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.header.header-has-transparent + *{
	margin-top: calc(var(--header-height) * -1);
}

@media (min-width: 1271px) {
	.header .logo-wrapper {
		transition: all 0.3s 0.1s ease;
		/* transform: translateX(-4.4rem); */
	}
	.header .menu-opener {
		/* transform: scale(0); */
		transition: transform 0.3s ease-out;
		/* display: block; */
	}
	.header.active .logo-wrapper {
		transform: translateX(0);
	}
	.header.active .menu-opener {
		transform: scale(1);
	}
}
@media (max-width: 767px) {
	.header {
		padding: var(--spacing-2) 0;
	}
}

.navigation-wrapper {
	height: 4.8rem;
}

.navigation-header .navigation-vertical {
	width: 100%;
	color: var(--color-foreground);
	z-index: 2;
	top: 100%;
}

.submenu {
	position: absolute;
	top: 0;
	right: calc(-1 * var(--navigation-width));
	width: 100%;
	height: 100%;
	background-color: var(--color-background);
	z-index: 1;
	box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
	display: none;
}

.navigation-horizontal-wrapper {
	max-height: 4.8rem;
	margin-inline:auto;
}

.navigation-horizontal {
	overflow-x: auto;
	display: flex;
	flex-direction: row;
	width: 100%;
}


.navigation-arrows {
	display: none;
}

.navigation-horizontal .submenu {
	width: auto;
	top: initial;
	right: initial;
	bottom: initial;
	left: inherit;
	height: auto;
	width: 240px;
	color: var(--color-foreground);
}

.navigation-horizontal .submenu__list {
	background: var(--color-background);
	overflow: auto;
}

.navigation--horizontal .menu-item .submenu:hover,
.navigation--horizontal .menu-item:hover .submenu {
	/* display: block; */
	z-index: 900;
}

.navigation-horizontal .default .submenu__item--main{
	padding: var(--spacing-2) var(--spacing-4);
	font-weight: 500;
}
.navigation-horizontal .submenu-col .submenu__item--main{
	padding: 0;
}
.navigation-horizontal .submenu__item--main a {
	/* display: block; */
}
.navigation-horizontal .submenu.mega-menu {
	width: 100%;
	left: 0;
	padding: 0 var(--container-padding);
}

.navigation-horizontal .mega-menu .submenu__list {
	display: grid;
	grid-template-columns: repeat(var(--megamenu-column, 4), 1fr);
	padding: var(--spacing-5) 0;
	grid-gap: 24px;
	max-height: 40rem;
	overflow: auto;
}

.mega-menu .submenu__item--main a {
	padding: 0;
}

.submenu__col ul {
	/* padding-left: var(--spacing-5); */
	margin-top: var(--spacing-4);
}
.submenu__item--main{
	/* font-size: 1.6rem; */
	font-weight: 500;
}
.navigation-horizontal .submenu__col .submenu__item--main{
	padding: 0;
	/* font-size: 1.6rem; */
}
.submenu__list .submenu__item:not(.submenu__item--main) + .submenu__item{
	margin-top: var(--spacing-3);
}
.navigation-vertical ul + ul {
	border-top: 2px solid var(--color-neutral-50);
	margin-top: 2rem;
	padding-top: 2rem;
}
.submenu {
	overflow-y: auto;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}
.submenu.default .submenu__list{
	padding-block: var(--spacing-2);
}
#menu-drawer .submenu[class*="mega-menu--"] {
	grid-template-columns: 100%;
}
@media (min-width: 1023px) {
	.navigation-vertical .submenu {
		right: auto;
		border-radius: 0 4px 4px 0;
		left: calc(var(--navigation-width) - 2px);
	}
	.index-container .navigation-vertical .submenu[class*="mega-menu--"] {
		width: calc(
			var(--container-width) - var(--navigation-width) -
			var(--container-padding) * 2
			);
		min-height: 450px;
		min-width: 100%;
	}
}

.navigation-vertical .section-card {
	padding: 0;
}
.navigation-vertical .container {
	padding: 0;
}
#menu-drawer .brand-list {
	--grid-col: repeat(2, 1fr) !important;
}

.navigation-vertical .mega-menu__inner {
	display: flex;
	gap: 1.2rem;
}
.mega-menu .heading {
	font-size: var(--font-size-h5);
}
#menu-drawer .mega-menu__inner {
	flex-direction: column;
}

.navigation-vertical .submenu__list .submenu__col {
	margin: 0;
}
.navigation-vertical .card-product__cta {
	display: block;
}

.submenu .product-promo-tag,
.submenu .card-product__cta,
.submenu .card-product__option-wrapper {
	display: none;
}

@media (max-width: 1023px) {
	.submenu {
		right: 0;
	}
	.navigation-vertical .menu-item.group > a {
		padding-right: 4.4rem;
		position: relative;
	}
	.navigation-vertical .menu-item.group > a > [data-toggle-submenu] {
		position: absolute;
		right: 0;
		width: 4.4rem;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.menu-active .submenu {
		display: block;
	}
}

.navigation-horizontal .submenu {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s 0.1s ease-out;
	display: block;
	top: 100% !important;
}
.navigation-horizontal .menu-item:hover .submenu {
	opacity: 1;
	visibility: visible;
}
.navigation-horizontal-wrapper.overflow + .navigation-arrows {
	display: flex;
}

.quick-search .search-loading,
.quick-search.loading .search-history-list,
.quick-search.loading .search-keywords,
.quick-search.loading .search-result,
.quick-search.loaded .search-keywords,
.quick-search.loaded .search-history-list {
	display: none;
}
.quick-search.loaded .search-result {
	display: block;
}
.search-loading .loading-icon,
.quick-search.loading .search-loading {
	display: flex;
	color: var(--color-neutral-100);
}
.loading > .loading-icon {
	display: flex;
}
.search-bar form {
	/* padding-right: 0; */
	overflow: hidden;
}
.search-dropdown {
	max-height: 100%;
	width: 100%;
	word-break: break-word;
	overflow: auto;
}

header .search-bar:has(input:focus) .search-dropdown,
header .search-dropdown:hover {
	display: block;
	max-height: 24rem;
	height: fit-content;
}
.search-input-group {
	padding-right: 4px;
}
.search-bar input {
	padding-right: 1.2rem;
}
.search-bar .search-button {
	right: 0;
	/* height: calc(100% + var(--spacing-3) * 2); */
	top: calc(-1 * var(--spacing-3));
	--search-button-width: 4rem;
	--search-bar-height: 4rem;
}
#search-drawer .search-bar .search-button {
	right: 0;
	height: 100%;
	top: 0;
}
#search-drawer .search-input-group {
	height: 4.4rem;
	border-radius: var(--rounded);
	border: 1px solid var(--color-neutral-50);
	display: flex;
	align-items: center;
	padding: 2px;
	padding-left: var(--spacing-2-5);
}
#search-drawer form {
	flex-direction: column;
	border: none;
	border-radius: 0px;
	padding: 0;
	gap: var(--spacing-3);
}
#search-drawer [name="query"] {
	display: block;
	width: 100%;
	background-color: var(--color-background);
	font-size: var(--font-size-body);
	line-height: 1;
}
#search-drawer .search-dropdown {
	position: relative;
}
#search-drawer .form-select {
	border: 1px solid var(--color-neutral-50);
	/* --rounded-input: var(--rounded-full); */
}
@media (max-width: 991px) {
	.submenu .submenu__list {
		max-height: calc(100% - 45px);
	}
}


.navigation-horizontal-wrapper.overflow-menu {
	max-width: calc(100% - 70px)
}


.navigation-horizontal-wrapper {
	max-height: 4.8rem
}


.navigation-horizontal>.menu-item {
	flex: 0 0 auto
}

.header-nav {
	overflow-x: clip;
	width: 100%
}

.navigation-horizontal>.menu-item {
	padding: 1.4rem
}

.navigation-arrows {
	display: none;
	line-height: 1
}


.navigation--horizontal {
	justify-content: space-between
}

.sapo-launcher-button{
	left: auto !important;
	right: 30px !important;
}

@media (min-width: 768px){
	.sapo-rewards-base{
		left: auto !important;
		right: 55px !important;
	}
}