.site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 900;
	height: var(--header-height);
	display: flex;
	align-items: center;
	/*
	 * Only the homepage ever renders a header without .no-transparent or
	 * .is-stuck at load (every other page gets .no-transparent immediately)
	 * — so this is effectively "homepage top navbar background" specifically.
	 */
	background: #fefefe1c;
	transition: background-color var(--transition-slow), box-shadow var(--transition-slow), height var(--transition-slow);
}
.site-header.no-transparent {
	position: relative;
	/*
	 * background-color underneath + background-image gradient on top (not a
	 * single "background" shorthand) — when the Customizer's gradient fades
	 * to transparent, the solid --color-header-bg shows through instead of
	 * whatever's behind the header, so it reads as "gradient fading into a
	 * solid color" rather than "gradient fading into page content".
	 * --header-bg-image is 'none' when the gradient toggle is off, in which
	 * case this is identical to a plain flat background-color.
	 */
	background-color: var(--color-header-bg);
	background-image: var(--header-bg-image, none);
	box-shadow: var(--shadow-sm);
}
.site-header.is-stuck {
	position: fixed;
	/*
	 * Split into background-color + background-image (not the "background"
	 * shorthand) for the same reason as .no-transparent above — a shorthand
	 * here would reset background-image back to 'none', silently dropping
	 * the gradient the instant the header becomes sticky on scroll.
	 */
	background-color: color-mix(in srgb, var(--color-header-bg) 92%, transparent);
	background-image: var(--header-bg-image, none);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--shadow-md);
	height: calc(var(--header-height) * 0.82);
}
.admin-bar .site-header.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header.is-stuck { top: 46px; } }

/*
 * At scroll position 0 the header sits transparent over the dark hero image,
 * so nav/logo/icon text needs to be white regardless of the configured
 * --color-header-text (which is tuned for the solid/blurred .is-stuck state
 * over --color-header-bg). Scope this to "transparent AND not yet stuck" —
 * once .is-stuck lands the header gets a light backdrop again and normal
 * dark text takes back over.
 */
.site-header:not(.no-transparent):not(.is-stuck) .site-branding .site-title,
.site-header:not(.no-transparent):not(.is-stuck) .site-branding .site-title a,
.site-header:not(.no-transparent):not(.is-stuck) .primary-navigation a,
.site-header:not(.no-transparent):not(.is-stuck) .header-icon-link,
.site-header:not(.no-transparent):not(.is-stuck) .menu-toggle,
/* .has-gradient-bg applies in BOTH the solid and scrolled/sticky states —
   the gradient background now shows through .is-stuck too (see the split
   background-color/background-image rule on .site-header.is-stuck above),
   so the white-text treatment has to follow it there as well. */
.site-header.has-gradient-bg .site-branding .site-title,
.site-header.has-gradient-bg .site-branding .site-title a,
.site-header.has-gradient-bg .primary-navigation a,
.site-header.has-gradient-bg .header-icon-link,
.site-header.has-gradient-bg .menu-toggle {
	color: var(--color-white);
}

.header-inner {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img { max-height: 44px; width: auto; }
.site-branding .site-title {
	/*
	 * Deliberately the body font, not --font-heading: display/grotesk-style
	 * webfonts (Space Grotesk etc.) commonly have different internal vertical
	 * metrics than the body font, so even at identical line-height:1 they
	 * don't optically center the same as the nav links next to them — using
	 * one shared font here is what actually guarantees the baselines match.
	 */
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--color-header-text);
	margin: 0;
}
.site-branding .site-title a { color: inherit; }

.primary-navigation { display: flex; align-items: center; gap: 32px; }
.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0; padding: 0; list-style: none;
}
.primary-navigation li { position: relative; }
.primary-navigation a {
	position: relative;
	display: inline-block;
	color: var(--color-header-text);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	padding: 8px 2px;
}
/*
 * position:absolute (not display:block) — a block-level pseudo-element
 * inside an inline <a> still gets allocated real vertical space in normal
 * flow on top of the text line, inflating the whole nav's rendered height
 * well beyond its actual text+padding. Taking it out of flow entirely is
 * what actually fixes that, regardless of the exact inline/block edge-case
 * behavior a given browser applies.
 */
.primary-navigation a::after {
	content: '';
	position: absolute;
	left: 2px; right: 2px; 
	bottom: -4px;
	height: 2px;
	width: auto;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--gradient-primary);
	transition: transform var(--transition-base);
	border-radius: 2px;
}
.primary-navigation a:hover::after,
.primary-navigation .current-menu-item > a::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-icon-link {
	/*
	 * The search toggle is a <button>, account/cart are <a> — reset native
	 * button chrome (border/background/padding/appearance) explicitly so
	 * both render identically instead of Chrome's default button box
	 * showing through only on the search icon.
	 */
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-header-text);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.header-icon-link:hover {
	background: rgba(48, 221, 138, 0.14);
	color: var(--color-header-text);
	transform: translateY(-1px);
}
.header-icon-link:active { transform: translateY(0); }
.header-icon-link svg { width: 22px; height: 22px; }
.cart-count {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--gradient-primary);
	color: var(--color-white);
	font-size: 0.65rem;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px;
}

.mobile-nav__header .site-branding__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--color-heading);
}

.menu-toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 0; background: none; cursor: pointer;
	color: var(--color-header-text);
}
.menu-toggle svg { width: 26px; height: 26px; }

/*
 * Off-canvas panel: always fixed + translated out of view, at every viewport
 * width. It must NOT depend on the max-width:1024px query below — that query
 * only decides whether the hamburger button is shown; on desktop the toggle
 * stays hidden so the panel is simply never opened, but the panel itself
 * still needs its own hidden-by-default positioning or it renders as a
 * plain in-flow bullet list underneath the header.
 */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	transform: translateY(-100%);
	transition: transform var(--transition-slow);
	overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: translateY(0); }
.mobile-nav__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px clamp(20px, 4vw, 40px);
	border-bottom: 1px solid var(--color-border);
}
.mobile-nav__close { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.mobile-nav__close svg { width: 26px; height: 26px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 12px clamp(20px, 4vw, 40px) 32px; }
.mobile-nav li { border-bottom: 1px solid var(--color-border); }
.mobile-nav a { display: block; padding: 18px 4px; font-size: 1.15rem; font-weight: 700; color: var(--color-heading); min-height: 48px; }
.mobile-nav .header-actions { padding: 0 clamp(20px, 4vw, 40px) 24px; flex-wrap: wrap; }
body.mobile-nav-open { overflow: hidden; }

@media (max-width: 1024px) {
	.primary-navigation { position: static; }
	.primary-navigation > ul { display: none; }
	.menu-toggle { display: flex; }
}