.wl-header {
	--wl-header-height: 88px;
	background: color-mix(in srgb, var(--wl-bg) 94%, transparent);
	color: var(--wl-text);
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.admin-bar .wl-header {
	top: 32px;
}

.admin-bar .wl-mobile-menu {
	top: 32px;
}

.wl-header__bar {
	backdrop-filter: blur(18px);
	border-bottom: 1px solid color-mix(in srgb, var(--wl-border) 76%, transparent);
	-webkit-backdrop-filter: blur(18px);
}

.wl-header__inner {
	align-items: center;
	display: grid;
	grid-template-columns: minmax(160px, 1fr) minmax(0, 2.2fr) minmax(220px, 1fr);
	height: var(--wl-header-height);
	margin-inline: auto;
	max-width: var(--wl-container);
	padding-inline: var(--wl-page-gutter);
	width: 100%;
}

.wl-header__brand {
	align-items: center;
	display: flex;
	justify-self: start;
	min-width: 0;
}

.wl-header__brand .custom-logo-link {
	display: inline-flex;
}

.wl-header__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 38px;
	max-width: min(190px, 100%);
	width: auto;
}

.wl-wordmark {
	color: var(--wl-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-decoration: none;
}

.wl-wordmark:hover {
	color: var(--wl-text);
}

.wl-header__desktop-nav {
	justify-self: center;
}

.wl-nav__list,
.wl-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wl-header__desktop-nav > .wl-nav__list {
	align-items: stretch;
	display: flex;
	gap: clamp(18px, 2.2vw, 38px);
	height: var(--wl-header-height);
}

.wl-header__desktop-nav .menu-item {
	margin: 0;
	position: relative;
}

.wl-header__desktop-nav > .wl-nav__list > .menu-item {
	align-items: center;
	display: flex;
}

.wl-header__desktop-nav a {
	color: var(--wl-text);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.095em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.wl-header__desktop-nav > .wl-nav__list > .menu-item > a {
	align-items: center;
	display: flex;
	min-height: 44px;
}

.wl-header__desktop-nav a:hover,
.wl-header__desktop-nav .current-menu-item > a,
.wl-header__desktop-nav .current-menu-ancestor > a {
	color: var(--wl-red);
}

.wl-submenu-toggle,
.wl-utility__link,
.wl-mobile-trigger,
.wl-mobile-close,
.wl-mobile-utility {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: var(--wl-radius-sm);
	box-shadow: none;
	color: inherit;
	min-height: 44px;
	padding: 0;
	transform: none;
}

.wl-submenu-toggle:hover,
.wl-utility__link:hover,
.wl-mobile-trigger:hover,
.wl-mobile-close:hover,
.wl-mobile-utility:hover {
	background: transparent;
	border-color: transparent;
	color: var(--wl-red);
	transform: none;
}

.wl-header__desktop-nav .wl-submenu-toggle {
	margin-left: 4px;
	min-height: 32px;
	min-width: 24px;
}

.wl-submenu-toggle svg {
	height: 14px;
	transition: transform var(--wl-transition);
	width: 14px;
}

.menu-item.is-open > .wl-submenu-toggle svg {
	transform: rotate(180deg);
}

.wl-header__desktop-nav .sub-menu {
	background: var(--wl-surface);
	border: 1px solid var(--wl-border);
	border-radius: var(--wl-radius-md);
	box-shadow: var(--wl-shadow-soft);
	left: 50%;
	min-width: 260px;
	opacity: 0;
	padding: 12px;
	pointer-events: none;
	position: absolute;
	top: calc(100% - 10px);
	transform: translate(-50%, 8px);
	transition: opacity var(--wl-transition), transform var(--wl-transition), visibility var(--wl-transition);
	visibility: hidden;
	z-index: 10;
}

.wl-header__desktop-nav .sub-menu::before {
	content: "";
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	top: -16px;
}

.wl-header__desktop-nav .sub-menu a {
	border-radius: var(--wl-radius-sm);
	display: block;
	font-size: 0.8125rem;
	font-weight: 550;
	letter-spacing: 0.02em;
	padding: 13px 14px;
	text-transform: none;
}

.wl-header__desktop-nav .sub-menu a:hover,
.wl-header__desktop-nav .sub-menu a:focus-visible {
	background: var(--wl-bg);
	color: var(--wl-text);
}

.wl-header__desktop-nav .menu-item-has-children:hover > .sub-menu,
.wl-header__desktop-nav .menu-item-has-children:focus-within > .sub-menu,
.wl-header__desktop-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
	visibility: visible;
}

.wl-header__utilities {
	align-items: center;
	display: flex;
	gap: clamp(10px, 1.4vw, 22px);
	justify-self: end;
}

.wl-utility__link {
	align-items: center;
	color: var(--wl-text);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 600;
	gap: 7px;
	letter-spacing: 0.035em;
	padding-inline: 3px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}

.wl-header__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.wl-header__icon svg {
	fill: none;
	height: 21px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.55;
	width: 21px;
}

.wl-cart-count {
	align-items: center;
	background: var(--wl-text);
	border: 2px solid var(--wl-bg);
	border-radius: 999px;
	color: var(--wl-surface);
	display: inline-flex;
	font-size: 0.625rem;
	font-weight: 700;
	height: 19px;
	justify-content: center;
	line-height: 1;
	min-width: 19px;
	padding-inline: 4px;
}

.wl-search-panel {
	background: var(--wl-surface);
	border-bottom: 1px solid var(--wl-border);
	box-shadow: 0 18px 36px rgb(24 24 24 / 5%);
	left: 0;
	padding: 24px var(--wl-page-gutter);
	position: absolute;
	right: 0;
	top: 100%;
}

.wl-search-panel[hidden],
.wl-mobile-menu[hidden] {
	display: none;
}

.wl-search-form {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-inline: auto;
	max-width: 760px;
}

.wl-search-form input {
	margin: 0;
}

.wl-search-form button {
	min-width: 116px;
}

.wl-header__mobile-controls,
.wl-mobile-menu {
	display: none;
}

body.wl-menu-open {
	overflow: hidden;
}

@media (max-width: 1120px) and (min-width: 1024px) {
	.wl-header__inner {
		grid-template-columns: minmax(125px, 0.8fr) minmax(0, 2.3fr) minmax(185px, 0.9fr);
	}

	.wl-header__desktop-nav > .wl-nav__list {
		gap: 16px;
	}

	.wl-utility__text {
	display: none;
	}
}

@media (max-width: 1023px) {
	.wl-header {
		--wl-header-height: 72px;
	}

	.wl-header__inner {
		grid-template-columns: 1fr auto 1fr;
	}

	.wl-header__brand {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.wl-header__desktop {
		display: none;
	}

	.wl-header__mobile-controls {
		align-items: center;
		display: flex;
		grid-column: 1 / -1;
		grid-row: 1;
		justify-content: space-between;
		pointer-events: none;
	}

	.wl-header__mobile-controls > * {
		pointer-events: auto;
	}

	.wl-mobile-trigger,
	.wl-mobile-close,
	.wl-header__mobile-controls .wl-cart-link {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 48px;
		min-width: 48px;
	}

	.wl-header__mobile-controls .wl-utility__text {
		display: none;
	}

	.wl-header__mobile-controls .wl-cart-count {
		position: absolute;
		right: -1px;
		top: 4px;
	}

	.wl-mobile-menu {
		background: var(--wl-bg);
		display: flex;
		flex-direction: column;
		inset: 0;
		overscroll-behavior: contain;
		overflow: hidden auto;
		position: fixed;
		z-index: 1100;
	}

	.wl-mobile-menu__header {
		align-items: center;
		border-bottom: 1px solid var(--wl-border);
		display: grid;
		flex: 0 0 auto;
		grid-template-columns: 1fr auto 1fr;
		height: var(--wl-header-height);
		padding-inline: var(--wl-page-gutter);
	}

	.wl-mobile-menu__header .wl-header__brand {
		grid-column: 2;
	}

	.wl-mobile-close {
		grid-column: 3;
		justify-self: end;
	}

	.wl-mobile-menu__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-inline: auto;
		max-width: 760px;
		padding: clamp(34px, 8vh, 72px) var(--wl-page-gutter) 28px;
		width: 100%;
	}

	.wl-mobile-nav .wl-nav__list,
	.wl-mobile-nav .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.wl-mobile-nav .menu-item {
		margin: 0;
		position: relative;
	}

	.wl-mobile-nav > .wl-nav__list > .menu-item {
		border-bottom: 1px solid var(--wl-border);
		display: grid;
		grid-template-columns: minmax(0, 1fr) 52px;
	}

	.wl-mobile-nav > .wl-nav__list > .menu-item > a {
		align-items: center;
		color: var(--wl-text);
		display: flex;
		font-size: clamp(1.35rem, 6vw, 2rem);
		font-weight: 600;
		letter-spacing: -0.025em;
		min-height: 72px;
		text-decoration: none;
	}

	.wl-mobile-nav .wl-submenu-toggle {
		align-self: start;
		justify-self: stretch;
		margin-top: 10px;
		min-height: 52px;
		min-width: 52px;
	}

	.wl-mobile-nav .sub-menu {
		display: none;
		grid-column: 1 / -1;
		padding: 0 0 20px 18px;
	}

	.wl-mobile-nav .menu-item.is-open > .sub-menu {
		display: block;
	}

	.wl-mobile-nav .sub-menu a {
		color: var(--wl-text-muted);
		display: flex;
		font-size: 1rem;
		min-height: 48px;
		padding: 12px 0;
		text-decoration: none;
	}

	.wl-mobile-utilities {
		display: grid;
		gap: 8px;
		grid-template-columns: 1fr 1fr;
		margin-top: auto;
		padding-top: 48px;
	}

	.wl-mobile-utility {
		border: 1px solid var(--wl-border);
		color: var(--wl-text);
		display: inline-flex;
		font-size: 0.875rem;
		font-weight: 600;
		justify-content: center;
		min-height: 52px;
		padding: 12px 18px;
		text-decoration: none;
	}

	.wl-mobile-utility:hover {
		background: var(--wl-surface);
		border-color: var(--wl-text);
		color: var(--wl-text);
	}
}

@media (max-width: 782px) {
	.admin-bar .wl-header {
		top: 46px;
	}

	.admin-bar .wl-mobile-menu {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wl-header {
		top: 0;
	}

	.wl-search-panel {
		padding-block: 18px;
	}

	.wl-search-form {
		grid-template-columns: 1fr;
	}

	.wl-search-form button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wl-header__desktop-nav .sub-menu {
		transform: translate(-50%, 0);
	}
}
