.site-header {
	position: relative;
	z-index: 1000;
	background: #ffffff;
}

.site-header__topbar {
	height: 41px;
	color: #ffffff;
	background: var(--toy-teal-dark);
}

.site-header__topbar-inner,
.site-header__topbar-group,
.site-header__main-inner,
.topbar-item,
.header-actions {
	display: flex;
	align-items: center;
}

.site-header__topbar-inner {
	justify-content: space-between;
	height: 41px;
	font-size: 14px;
	font-weight: 500;
}

.site-header__topbar-group {
	gap: 30px;
}

.topbar-item {
	gap: 7px;
	color: inherit;
	white-space: nowrap;
}

.topbar-item:hover,
.topbar-item:focus-visible {
	color: #ffffff;
	opacity: 0.8;
}

.topbar-item .icon {
	width: 15px;
	height: 15px;
}

.site-header__main {
	height: 110px;
	background: #ffffff;
	box-shadow: 0 6px 20px rgb(var(--tilenjoy-black-rgb) / 0.035);
}

.site-header__main-inner {
	justify-content: space-between;
	gap: 28px;
	height: 100%;
}

.site-header.is-sticky .site-header__placeholder {
	height: 110px;
}

.site-header.is-sticky .site-header__main {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1001;
	animation: header-drop 220ms ease-out;
	box-shadow: 0 10px 30px rgb(var(--tilenjoy-black-rgb) / 0.1);
}

.admin-bar .site-header.is-sticky .site-header__main {
	top: 32px;
}

@keyframes header-drop {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.site-branding {
	display: flex;
	flex: 0 0 132px;
	align-items: center;
}

.site-branding__link,
.custom-logo-link {
	display: flex;
	align-items: center;
}

.site-branding img,
.custom-logo {
	width: auto;
	max-width: 132px;
	max-height: 76px;
	height: auto;
	object-fit: contain;
}

.primary-navigation {
	margin-left: 2px;
}

.primary-navigation .menu {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.primary-navigation .menu-item {
	position: relative;
}

.primary-navigation .menu-item > a {
	display: block;
	padding-block: 13px;
	color: var(--toy-navy);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.primary-navigation .menu-item > a:hover,
.primary-navigation .menu-item > a:focus-visible,
.primary-navigation .current-menu-item > a {
	color: var(--toy-teal);
}

.primary-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 10;
	display: grid;
	min-width: 220px;
	padding: 14px 0;
	margin: 0;
	visibility: hidden;
	list-style: none;
	background: #ffffff;
	box-shadow: var(--toy-shadow);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.primary-navigation .menu-item:hover > .sub-menu,
.primary-navigation .menu-item:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.primary-navigation .sub-menu a {
	display: block;
	padding: 8px 20px;
}

.product-search {
	position: relative;
	flex: 1 1 328px;
	max-width: 328px;
}

.product-search input[type="search"] {
	width: 100%;
	height: 42px;
	padding: 0 52px 0 20px;
	border: 1px solid var(--toy-border);
	border-radius: 999px;
	outline: none;
	color: var(--toy-text);
	background: #ffffff;
}

.product-search input[type="search"]:focus {
	border-color: var(--toy-teal);
	box-shadow: 0 0 0 3px rgb(var(--tilenjoy-blue-strong-rgb) / 0.12);
}

.product-search input::placeholder {
	color: #abb2bd;
}

.product-search button {
	position: absolute;
	top: 5px;
	right: 5px;
	display: grid;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	place-items: center;
	color: #ffffff;
	background: var(--toy-teal);
}

.header-actions {
	flex: 0 0 auto;
	gap: 10px;
}

.header-action {
	position: relative;
	display: grid;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #edf0f3;
	border-radius: 50%;
	place-items: center;
	color: var(--toy-navy);
	background: #ffffff;
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.header-action:hover,
.header-action:focus-visible {
	color: #ffffff;
	border-color: var(--toy-teal);
	background: var(--toy-teal);
}

.header-action .icon {
	width: 18px;
	height: 18px;
}

.header-action__count {
	position: absolute;
	top: -7px;
	right: -5px;
	display: grid;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border: 2px solid #ffffff;
	border-radius: 999px;
	place-items: center;
	color: var(--tilenjoy-black);
	background: var(--toy-orange);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.header-action--account {
	display: none;
}

.menu-icon--close {
	display: none;
}

.navigation-backdrop {
	position: fixed;
	inset: 0;
	z-index: 998;
	display: block;
	visibility: hidden;
	padding: 0;
	border: 0;
	background: rgb(var(--tilenjoy-black-rgb) / 0.55);
	opacity: 0;
	transition: opacity 200ms ease, visibility 200ms ease;
}

@media (max-width: 1399px) {
	.site-header__main-inner {
		gap: 18px;
	}

	.primary-navigation .menu {
		gap: 18px;
	}

	.primary-navigation .menu-item > a {
		font-size: 15px;
	}

	.product-search {
		max-width: 260px;
	}
}

@media (max-width: 1199px) {
	.site-header__topbar {
		display: none;
	}

	.site-header__main,
	.site-header.is-sticky .site-header__placeholder {
		height: 70px;
	}

	.site-header__main-inner {
		gap: 12px;
	}

	.site-branding {
		flex: 0 0 88px;
	}

	.site-branding img,
	.custom-logo {
		max-width: 88px;
		max-height: 48px;
	}

	.product-search {
		display: none;
	}

	.primary-navigation {
		position: fixed;
		top: 70px;
		bottom: 0;
		left: 0;
		z-index: 1002;
		width: min(450px, 100%);
		padding: 26px;
		margin: 0;
		overflow-y: auto;
		background: #ffffff;
		box-shadow: 15px 0 40px rgb(var(--tilenjoy-black-rgb) / 0.15);
		transform: translateX(-105%);
		transition: transform 220ms ease;
	}

	.site-header.is-sticky .primary-navigation {
		top: 70px;
	}

	.admin-bar .primary-navigation,
	.admin-bar .site-header.is-sticky .primary-navigation {
		top: 102px;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	.primary-navigation .menu {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.primary-navigation .menu-item {
		border-bottom: 1px solid #edf0f3;
	}

	.primary-navigation .menu-item > a {
		padding: 12px 0;
		font-size: 17px;
	}

	.primary-navigation .sub-menu {
		position: static;
		display: grid;
		visibility: visible;
		min-width: 0;
		padding: 0 0 8px 14px;
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.primary-navigation .sub-menu a {
		padding: 6px 0;
	}

	.header-actions {
		margin-left: auto;
	}

	.header-action,
	.header-action--account {
		display: grid;
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}

	.header-action--menu {
		border-color: transparent;
		background: transparent;
	}

	.header-action--menu:hover,
	.header-action--menu:focus-visible {
		color: var(--toy-navy);
		background: #eef8fc;
	}

	.header-action--menu[aria-expanded="true"] .menu-icon--open {
		display: none;
	}

	.header-action--menu[aria-expanded="true"] .menu-icon--close {
		display: block;
	}

	.site-header.menu-is-open .navigation-backdrop {
		visibility: visible;
		opacity: 1;
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar .site-header.is-sticky .site-header__main {
		top: 46px;
	}

	.admin-bar .primary-navigation,
	.admin-bar .site-header.is-sticky .primary-navigation {
		top: 116px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header.is-sticky .site-header__main {
		top: 0;
	}

	.admin-bar .primary-navigation {
		top: 116px;
	}

	.admin-bar .site-header.is-sticky .primary-navigation {
		top: 70px;
	}
}

@media (max-width: 479px) {
	.site-header__main,
	.site-header.is-sticky .site-header__placeholder {
		height: 58px;
	}

	.site-header.is-sticky .primary-navigation,
	.primary-navigation {
		top: 58px;
	}

	.admin-bar .primary-navigation {
		top: 104px;
	}

	.admin-bar .site-header.is-sticky .primary-navigation {
		top: 58px;
	}

	.site-branding {
		flex-basis: 76px;
	}

	.site-branding img,
	.custom-logo {
		max-width: 76px;
		max-height: 42px;
	}

	.header-actions {
		gap: 5px;
	}

	.header-action,
	.header-action--account {
		flex-basis: 31px;
		width: 31px;
		height: 31px;
	}

	.header-action .icon {
		width: 16px;
		height: 16px;
	}

	.header-action__count {
		top: -6px;
		right: -4px;
	}
}