/**
 * Mini-header — shared between /checkout/ and the auth screens.
 *
 * Variant control via .is-checkout / .is-auth on the same shell:
 *   .wh-mini-header.is-checkout — wordmark · 3-step stepper · Veilig · Mollie pill
 *   .wh-mini-header.is-auth     — wordmark · Veilig inloggen pill (no stepper)
 *
 * The wordmark mirrors .wh-topnav__wordmark exactly: italic Fraunces 26 px /
 * letter-spacing -0.045em / line-height 1, terminal period preserved.
 *
 * Loaded on /checkout/ + every guest-facing /my-account/ endpoint + the
 * /registreren/ page template via functions.php.
 */

/* Outer band — full-bleed: background + border + sticky behavior span the
   entire viewport. Inner content caps at the body content tier so wordmark /
   stepper / pill align with the form column below. */
.wh-mini-header {
	padding: 0;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 20;
}
.wh-mini-header__inner {
	max-width: var(--page-max-content);
	margin-inline: auto;
	padding: var(--s-5) var(--page-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-5);
}
.wh-mini-header__brand {
	display: inline-flex;
	align-items: baseline;
	color: var(--ink);
	text-decoration: none;
}
/* Mirror .wh-topnav__wordmark exactly — italic display Fraunces with the
 * terminal period (the brand mark used in the main header + footer). */
.wh-mini-header__wordmark {
	font-size: 26px;
	letter-spacing: -0.045em;
	line-height: 1;
	font-style: italic;
	color: var(--ink);
}

/* Center slot — checkout fills with the 3-step stepper; auth leaves it empty. */
.wh-mini-header__stepper {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-muted);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.wh-mini-header__stepper a,
.wh-mini-header__stepper span       { color: var(--ink-muted); text-decoration: none; }
.wh-mini-header__stepper .is-done,
.wh-mini-header__stepper a.is-done  { color: var(--ink); }
.wh-mini-header__stepper .is-active { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.wh-mini-header__stepper a.is-done:hover { color: var(--accent); }

/* Right-side trust pill — identical type spec across both variants; only the
   label text + leading icon differ ("Veilig · Mollie" / "Veilig inloggen"). */
.wh-mini-header__secure {
	font-size: 11px;
	color: var(--ink-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
}
.wh-mini-header__secure-icon { color: var(--ok); flex-shrink: 0; }

/* Mobile — collapse to two-up on <640 px. Stepper hides; the brand + pill
   remain. (Auth variant doesn't render the stepper anyway.) */
@media (max-width: 639px) {
	.wh-mini-header__inner {
		padding: var(--s-4) var(--page-pad);
		gap: var(--s-3);
	}
	.wh-mini-header__stepper { display: none; }
}