.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--ek-color-surface);
	border-bottom: 1px solid var(--ek-color-border);
	box-shadow: 0 2px 0 var(--ek-color-yellow);
	transition: box-shadow 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled { box-shadow: 0 2px 0 var(--ek-color-yellow), var(--ek-shadow-header); }

.site-header__inner {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	align-items: center;
	min-height: 4.25rem;
	max-width: var(--ek-content-width);
	padding: 0 var(--ek-space-2);
	margin: 0 auto;
}

.header-icon-button {
	display: inline-grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	padding: 0;
	color: var(--ek-color-text);
	background: transparent;
	border: 0;
	border-radius: 0.3rem;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
}

.header-icon-button svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.site-header__brand {
	grid-column: 2;
	justify-self: center;
	font-size: 1.1rem;
	text-align: center;
}

.site-logo {
	display: block;
	max-width: 10rem;
	max-height: 2.75rem;
	object-fit: contain;
}

.header-icon-button:hover,
.header-icon-button:focus-visible { background: var(--ek-color-accent-surface); }
.header-icon-button:active { transform: scale(0.94); }

.header-location-link { grid-column: 3; justify-self: end; }
.primary-navigation,
.header-order-link { display: none; }

.mobile-navigation {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 0;
	margin: 0;
	color: var(--ek-color-text);
	background: var(--ek-color-surface);
	border: 0;
}

.mobile-navigation::backdrop {
	background: var(--ek-color-overlay);
	opacity: 0;
}

.mobile-navigation[open]::backdrop {
	animation: header-menu-backdrop-enter 220ms ease-out both;
}

.mobile-navigation[open] {
	display: flex;
	flex-direction: column;
	animation: header-menu-surface-enter 220ms ease-out both;
}

.mobile-navigation.is-closing {
	animation: header-menu-surface-exit 200ms ease-in both;
}

.mobile-navigation.is-closing::backdrop {
	animation: header-menu-backdrop-exit 200ms ease-in both;
}

.mobile-navigation__topbar {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	align-items: center;
	min-height: 4.25rem;
	padding: 0 var(--ek-space-2);
	border-bottom: 1px solid var(--ek-color-border);
}

.mobile-navigation__brand {
	justify-self: center;
	font-size: 1.1rem;
	text-align: center;
}

.mobile-navigation__nav {
	padding: clamp(2.5rem, 10vh, 5rem) var(--ek-space-3) var(--ek-space-3);
	animation: header-menu-content-enter 260ms 60ms ease-out both;
}

.mobile-navigation.is-closing .mobile-navigation__nav {
	animation: header-menu-content-exit 180ms ease-in both;
}

.mobile-primary-menu {
	display: grid;
	gap: var(--ek-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-primary-menu a {
	display: block;
	padding: 0.4rem 0;
	color: var(--ek-color-black);
	font-size: clamp(2rem, 9vw, 3.25rem);
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
}

.mobile-primary-menu a:hover,
.mobile-primary-menu a:focus-visible { color: var(--ek-color-red); transform: translateX(0.2rem); }

.mobile-primary-menu li { animation: header-menu-item-enter 260ms ease-out both; }
.mobile-primary-menu li:nth-child(1) { animation-delay: 100ms; }
.mobile-primary-menu li:nth-child(2) { animation-delay: 135ms; }
.mobile-primary-menu li:nth-child(3) { animation-delay: 170ms; }
.mobile-primary-menu li:nth-child(4) { animation-delay: 205ms; }

.mobile-navigation.is-closing .mobile-primary-menu li {
	animation: header-menu-item-exit 160ms ease-in both;
}

.mobile-navigation__order {
	display: inline-block;
	width: calc(100% - (var(--ek-space-3) * 2));
	min-height: 2.8rem;
	padding: 0.75rem 1.15rem;
	box-sizing: border-box;
	color: var(--ek-color-action-text);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background: var(--ek-color-action);
	border: 1px solid var(--ek-color-action);
	border-radius: 0.35rem;
	box-shadow: var(--ek-shadow-action);
	margin: auto var(--ek-space-3) var(--ek-space-4);
	font-size: 1.1rem;
	transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	animation: header-menu-content-enter 280ms 220ms ease-out both;
}

.mobile-navigation__order:hover,
.mobile-navigation__order:focus-visible { background: var(--ek-color-action-hover); box-shadow: var(--ek-shadow-action-hover); transform: translateY(-1px); }
.mobile-navigation__order:active { box-shadow: var(--ek-shadow-action-active); transform: translateY(0); }

.mobile-navigation.is-closing .mobile-navigation__order {
	animation: header-menu-content-exit 180ms ease-in both;
}

@keyframes header-menu-surface-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-menu-content-enter { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes header-menu-item-enter { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes header-menu-surface-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes header-menu-content-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(0.5rem); } }
@keyframes header-menu-item-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(0.35rem); } }
@keyframes header-menu-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-menu-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }

@media (min-width: 48rem) {
	.site-header__inner {
		display: flex;
		gap: var(--ek-space-3);
		padding: 0 var(--ek-space-3);
	}

	.header-menu-toggle,
	.header-location-link { display: none; }
	.site-header__brand { margin-right: auto; }
	.primary-navigation { display: block; }
	.primary-menu {
		display: flex;
		gap: clamp(1rem, 2vw, 2rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.primary-menu a {
		position: relative;
		display: inline-block;
		padding: 0.3rem 0;
		color: var(--ek-color-black);
		font-size: 1rem;
		font-weight: 800;
		text-decoration: none;
		transition: color 180ms ease;
	}
	.primary-menu a::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 0.16rem;
		content: '';
		background: var(--ek-color-red);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 180ms ease;
	}
	.primary-menu a:hover,
	.primary-menu a:focus-visible { color: var(--ek-color-red); }
	.primary-menu a:hover::after,
	.primary-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
	.header-order-link {
		display: inline-block;
		padding: 0.75rem 1.1rem;
		color: var(--ek-color-action-text);
		font-weight: 800;
		text-decoration: none;
		background: var(--ek-color-action);
		border: 1px solid var(--ek-color-action);
		border-radius: 999px;
		box-shadow: var(--ek-shadow-action);
		transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	}
	.header-order-link:hover,
	.header-order-link:focus-visible { background: var(--ek-color-action-hover); box-shadow: var(--ek-shadow-action-hover); transform: translateY(-1px); }
	.header-order-link:active { box-shadow: var(--ek-shadow-action-active); transform: translateY(0); }
	.mobile-navigation { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.header-icon-button,
	.mobile-primary-menu a,
	.mobile-navigation__order,
	.primary-menu a,
	.primary-menu a::after,
	.header-order-link { transition: none; }
	.mobile-navigation[open],
	.mobile-navigation.is-closing,
	.mobile-navigation__nav,
	.mobile-primary-menu li,
	.mobile-navigation__order,
	.mobile-navigation.is-closing .mobile-navigation__nav,
	.mobile-navigation.is-closing .mobile-primary-menu li,
	.mobile-navigation.is-closing .mobile-navigation__order { animation: none; }
	.mobile-navigation[open]::backdrop { opacity: 1; animation: none; }
	.mobile-navigation.is-closing::backdrop { opacity: 0; animation: none; }
	.mobile-primary-menu a:hover,
	.mobile-primary-menu a:focus-visible,
	.mobile-navigation__order:hover,
	.mobile-navigation__order:focus-visible,
	.header-order-link:hover,
	.header-order-link:focus-visible { transform: none; }
}