/**
 * Wandhaus — My Account editorial chrome.
 *
 * Applied only on `.wh-account-page` (body class). Wraps WooCommerce's
 * myaccount screens with a 260px nav + main content grid.
 */

body.wh-account-page {
	background: var(--bg);
}
body.wh-account-page .wh-main {
	/* Cap at the 1400 site canvas, centered — match cart/checkout. (Was `none`,
	 * which loaded after + overrode wandhaus-checkout.css's cap, leaving the
	 * account 40px wider at 1440.) Page Consistency Standard 2026-06-17. */
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

/* Storefront's WC stylesheet floats the navigation to 17.6% width and the
   content to 76.5% with `float: right`. That fights our CSS grid (the inner
   nav becomes a 17%-wide float INSIDE our 260px grid cell, squishing it to
   ~46px). Reset both elements to natural-flow inside our grid wrappers. */
body.wh-account-page .woocommerce-MyAccount-navigation,
body.wh-account-page .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.wh-account {
	/* V2.3 transactional cap. Single-column now (was 2-col grid) —
	 * tabs replaced the left sidebar. */
	max-width: var(--page-max-content);
	margin: 0 auto;
	padding: var(--s-56) var(--page-pad) var(--s-9);
}

/* ---- Tabs · matches design system §11 (Tabs · underline) ---- */

.wh-account__head {
	margin-bottom: var(--s-40);
}
.wh-account__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	border-bottom: 1px solid var(--border);
	width: 100%;
}
.wh-account__tab,
.wh-account__tabs a,
.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--s-2) 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--ink-muted);
	font: 400 13px/1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	margin-bottom: -1px;
	transition: color .15s var(--ease), border-color .15s var(--ease);
	white-space: nowrap;
}
/* Tab icon — matches the account drawer rows. Inherits the tab's currentColor
   so it follows the muted → ink active/hover state automatically. */
.wh-account__tab-icon {
	flex-shrink: 0;
}
.wh-account__tab:hover,
.wh-account__tabs a:hover,
.woocommerce-MyAccount-navigation a:hover {
	color: var(--ink);
}
.wh-account__tab.is-current,
.wh-account__tab.is-active,
.wh-account__tabs a.is-current,
.wh-account__tabs a.is-active,
.woocommerce-MyAccount-navigation a.is-active,
.woocommerce-MyAccount-navigation a.is-current {
	color: var(--ink);
	border-bottom-color: var(--ink);
	font-weight: 500;
}

/* Mobile: turn the tab strip into a horizontally-scrollable rail
 * so 7-9 endpoints fit without wrapping into a tall stack. */
@media (max-width: 1023px) {
	.wh-account__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--s-20);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wh-account__tabs::-webkit-scrollbar { display: none; }
	.wh-account__head { margin-bottom: 28px; }
}

/* ---- Main column ---- */

.wh-account__main { min-width: 0; }

.wh-account__welcome {
	font-family: var(--font-display);
	font-size: 56px;
	margin: var(--s-1) 0 0;
	letter-spacing: -0.025em;
	line-height: 1;
}
.wh-account__welcome em { font-style: italic; }
.wh-account__welcome-eyebrow { margin-bottom: var(--s-3); }

/* Section spacing on the dashboard between cards. */
.wh-account__section--history { margin-top: var(--s-40); }
.wh-account__section-eyebrow { margin-bottom: var(--s-4); }
.wh-account__card--empty { text-align: center; }

/* Active-order placeholder thumbnail (no product image) — the wrapper
   is already position: relative with overflow:hidden. */
.wh-active-order__thumb-ph { position: absolute; inset: 0; }

/* "Open de bouwer →" link in the saved-designs section header. */
.wh-saved-designs__more {
	font-size: 11px;
	color: var(--ink-muted);
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 2px;
	text-decoration: none;
	transition: color .15s var(--ease), border-color .15s var(--ease);
}
.wh-saved-designs__more:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* ---- Card with border + 24px padding (reused) ---- */

.wh-account__card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: var(--s-5);
	margin-top: var(--s-40);
}

.wh-account__card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--s-4);
	gap: var(--s-4);
}

/* Legacy status — kept for any component still using the old class.
 * New canonical status is `.wh-status-pill` below (matches design
 * system §19). */
.wh-account__card-status {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Status pill — design system §19. Rounded pill with a 6px dot and a
 * tinted soft-bg per state. Used on order header rows + history
 * badges. Default colour token `--accent` for "in productie" — the
 * other states swap their accent + soft-bg via state modifiers. */
.wh-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.wh-status-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: currentColor;
	flex-shrink: 0;
}
.wh-status-pill--bezorgd,
.wh-status-pill--geleverd,
.wh-status-pill--voltooid {
	color: var(--ok);
	background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.wh-status-pill--in-afwachting,
.wh-status-pill--niet-betaald {
	color: var(--warn);
	background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.wh-status-pill--geannuleerd,
.wh-status-pill--mislukt,
.wh-status-pill--terugbetaald {
	color: var(--err);
	background: color-mix(in srgb, var(--err) 14%, transparent);
}

/* WC-status-slug modifiers — used by `inc/account-orders-status.php`,
 * which wraps the orders-list status cell in a pill. Uses raw Woo
 * slugs (pending, on-hold, processing, completed, …) so the pill
 * colour stays correct regardless of locale. */
.wh-status-pill--pending {
	color: var(--warn);
	background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.wh-status-pill--on-hold {
	color: var(--warn);
	background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.wh-status-pill--processing {
	color: var(--accent);
	background: var(--accent-soft);
}
.wh-status-pill--completed,
.wh-status-pill--shipped {
	color: var(--ok);
	background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.wh-status-pill--cancelled,
.wh-status-pill--failed {
	color: var(--err);
	background: color-mix(in srgb, var(--err) 14%, transparent);
}
.wh-status-pill--refunded {
	color: var(--ink-muted);
	background: var(--bg-alt);
}

/* ---- Active order (2-col: thumb / meta) ---- */

.wh-active-order {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--s-5);
}

.wh-active-order__thumb {
	aspect-ratio: 4 / 5;
	background: var(--ink-overlay);
	position: relative;
	overflow: hidden;
	border-radius: 0;
}
.wh-active-order__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.wh-active-order__title {
	font-family: var(--font-display);
	font-size: 28px;
	letter-spacing: -0.02em;
	margin: 0;
}
.wh-active-order__meta {
	font-size: 13px;
	color: var(--ink-muted);
	margin-top: var(--s-1);
}

.wh-tracker {
	margin-top: var(--s-20);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-2);
}
.wh-tracker__step .bar {
	height: 3px;
	background: var(--border-strong);
}
.wh-tracker__step.is-done    .bar { background: var(--ink); }
/* Active step — the focal point: thicker + rounded so the in-progress step
 * stands out from the flat black "done" bars. Solid accent, no glow/halo
 * (the design system uses solid states, not glows). */
.wh-tracker__step.is-current .bar {
	background: var(--accent);
	height: 5px;
	margin-top: -1px;
	border-radius: 3px;
}
.wh-tracker__step .label {
	font-size: 13px;
	margin-top: var(--s-2);
	font-weight: 500;
	color: var(--ink-muted);
}
.wh-tracker__step.is-done    .label { color: var(--ink); }
.wh-tracker__step.is-current .label { color: var(--accent); font-weight: 600; }
.wh-tracker__step .date {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-faint);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.wh-active-order__actions {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-20);
	flex-wrap: wrap;
}

/* ---- Saved designs grid ---- */

.wh-saved-designs {
	margin-top: var(--s-40);
}
.wh-saved-designs__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: var(--s-4);
	gap: var(--s-4);
}
.wh-saved-designs__title {
	font-family: var(--font-display);
	font-size: 28px;
	margin: var(--s-1) 0 0;
	letter-spacing: -0.02em;
}
.wh-saved-designs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
}
@media (max-width: 1023px) {
	.wh-saved-designs__grid { grid-template-columns: 1fr 1fr; }
}
/* Card is now an `<article>` with two siblings: the main link
 * (`.wh-saved-design__link`) covering thumb + meta, and the
 * `.wh-saved-design__actions` row that surfaces on hover. */
.wh-saved-design {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 14px;
	display: block;
	transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.wh-saved-design:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
}
.wh-saved-design__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Hover-revealed action row — top-right of the card. Sticks above
 * the thumb so the icons read against the card surface, not the
 * photo. Pointer-events disabled at rest so a hover-and-drag
 * doesn't trigger them on touch-laptops. */
.wh-saved-design__actions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	gap: var(--s-1);
	padding: var(--s-1);
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 12px rgba(14, 14, 12, .08);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity .15s var(--ease), transform .15s var(--ease);
	z-index: 2;
}
.wh-saved-design:hover .wh-saved-design__actions,
.wh-saved-design:focus-within .wh-saved-design__actions {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.wh-saved-design__action-form {
	margin: 0;
	padding: 0;
	display: inline-flex;
}
.wh-saved-design__action {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ink-muted);
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition: background .15s var(--ease), color .15s var(--ease);
}
.wh-saved-design__action:hover,
.wh-saved-design__action:focus-visible {
	background: var(--bg-alt);
	color: var(--ink);
	outline: none;
}
.wh-saved-design__action--delete:hover,
.wh-saved-design__action--delete:focus-visible {
	background: color-mix(in srgb, var(--err) 14%, transparent);
	color: var(--err);
}

/* Touch / no-hover devices: keep the actions visible at all times so
 * they're discoverable without a hover gesture. */
@media (hover: none) {
	.wh-saved-design__actions {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}
.wh-saved-design__thumb {
	aspect-ratio: 4 / 3;
	position: relative;
	background: var(--surface-2);
	overflow: hidden;
}
.wh-saved-design__frame {
	position: absolute;
	background: var(--ink-warm);
	border: 1px solid rgba(14, 14, 12, .12);
}
.wh-saved-design__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 0;
}
.wh-saved-design__title {
	font-size: 14px;
	font-weight: 500;
	margin-top: 10px;
}
.wh-saved-design__sub {
	font-size: 12px;
	color: var(--ink-muted);
}
.wh-saved-design__bar {
	height: 2px;
	background: var(--border);
	margin-top: 10px;
	position: relative;
}
.wh-saved-design__bar > span {
	display: block;
	height: 100%;
	background: var(--accent);
}
.wh-saved-design__pct {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-muted);
	margin-top: var(--s-1);
	letter-spacing: .08em;
}

/* ---- Order history (3-col editorial list) ----
 * Design system §19 simplified: each row is a clickable anchor with
 * three columns — ref/date · item-summary/total · status-pill/details.
 * Hovering the row darkens the surface; whole row is the hit-target. */

.wh-order-history {
	background: var(--surface);
	border: 1px solid var(--border);
	margin-top: var(--s-4);
}
.wh-order-history__row {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	gap: var(--s-5);
	align-items: center;
	padding: var(--s-20) var(--s-5);
	border-bottom: 1px solid var(--border);
	color: var(--ink);
	text-decoration: none;
	transition: background .15s var(--ease);
}
.wh-order-history__row:last-child { border-bottom: 0; }
.wh-order-history__row:hover { background: var(--bg-alt); }
.wh-order-history__row:hover .wh-order-history__details { color: var(--accent); }

.wh-order-history__col-left,
.wh-order-history__col-mid {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}
.wh-order-history__col-right {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex-shrink: 0;
}

.wh-order-history__ref {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: .04em;
}
.wh-order-history__date {
	font-size: 10px;
	color: var(--ink-faint);
	letter-spacing: .14em;
}
.wh-order-history__item {
	font-size: 14px;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wh-order-history__total {
	font-size: 13px;
	color: var(--ink-muted);
}
.wh-order-history__details {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	transition: color .15s var(--ease);
}

@media (max-width: 640px) {
	.wh-order-history__row {
		grid-template-columns: 1fr;
		gap: var(--s-2);
		padding: var(--s-4) var(--s-20);
	}
	.wh-order-history__col-right {
		justify-content: space-between;
	}
}

/* ---- Woo Account overrides (order received, view order, etc.) ---- */

.wh-account .woocommerce-MyAccount-content h1,
.wh-account .woocommerce-MyAccount-content h2 {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}
/* Restyle bare anchors only — `:not(.btn)` keeps the design-system
 * `.btn-primary / .btn-ghost / .btn-accent` color tokens intact when
 * any of those buttons render inside the account content. Without
 * the exclusion, this rule's specificity (0,2,1) overrides
 * `.btn-primary { color: var(--bg) }` (0,1,0) and produces
 * black-on-black text at rest (btn-primary) and on hover (btn-ghost). */
.wh-account .woocommerce-MyAccount-content a:not(.btn) { color: var(--ink); }
.wh-account .woocommerce-MyAccount-content .button {
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	padding: var(--s-3) var(--s-20);
	font: 500 14px/1 var(--font-body);
	border: 1px solid var(--ink);
	text-transform: none;
	letter-spacing: .01em;
}
.wh-account .woocommerce-MyAccount-content .button:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-ink);
}
/* shop_table base — orders list (Bestellingen). Mirrors design system
 * §17 "Data display · Tabel · sortable + zebra". Storefront ships a
 * heavy table CSS scoped under `.woocommerce` with !important on most
 * properties — match it with body-level scoping + !important so V2
 * wins the cascade. */
body.wh-account-page .woocommerce-MyAccount-content table.shop_table,
body.wh-account-page .woocommerce-MyAccount-content table.account-orders-table,
body.wh-account-page .woocommerce-MyAccount-content table.my_account_orders {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-collapse: collapse !important;
	width: 100% !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	margin: 0 0 var(--s-6) !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table thead {
	background: var(--bg-alt) !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table th {
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	padding: var(--s-3) 18px !important;
	text-align: left !important;
	font-weight: 500 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	background: transparent !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__header-order-total,
body.wh-account-page .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__header-order-actions {
	text-align: right !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table tbody tr {
	transition: background .15s var(--ease) !important;
	background: transparent !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table tbody tr:hover {
	background: var(--bg-alt) !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	vertical-align: middle !important;
	background: transparent !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* Order number column — mono so #1234 reads as a code-like ref. The
 * mono font has a tighter x-height than Inter (the body font used for
 * the date column), so without an explicit line-height the order
 * number visually sits a hair lower than the date / total cells —
 * pin them all to 1.55 so the baselines align. */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	font-family: var(--font-mono) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	letter-spacing: .02em !important;
	vertical-align: middle !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
	display: inline-block !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--accent) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-date {
	color: var(--ink-muted) !important;
	font-size: 13px !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total {
	font-family: var(--font-mono) !important;
	font-variant-numeric: tabular-nums !important;
	font-weight: 500 !important;
	text-align: right !important;
	color: var(--ink) !important;
}

/* Status column — §17 spec: mono 10px caps span, color-coded per state.
 * No pill background — just colored mono caps text matching the design
 * preview (e.g. `<span class="mono" style="color: var(--ok); font-size:
 * 10px">VERZONDEN</span>`). */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
	color: var(--ink) !important;
	padding: 14px 18px !important;
}
/* `.wh-status-pill` is rendered by inc/account-orders-status.php — keep
 * the pill chrome from inheriting any orders-table cell typography
 * overrides Storefront might apply via specificity. */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status .wh-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 10px !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status .wh-status-pill__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: var(--radius-pill) !important;
	background: currentColor !important;
	flex-shrink: 0 !important;
}
/* (Pill colours come from `.wh-status-pill--{wc-slug}` modifiers
 * defined in §19 above. The orders-list cell only needs to clear
 * any inherited cell colours and let the pill render itself.) */
/* Action buttons — §17 spec: ink underline link, not a pill. The
 * design system shows `<a>Bekijk →</a>` with `color: var(--ink);
 * border-bottom: 1px solid var(--ink); font-size: 12px`. Multiple
 * actions sit inline separated by a small gap. */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap !important;
	text-align: right !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
	display: inline-block !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	margin: 0 0 0 var(--s-4) !important;
	transition: color .15s var(--ease), border-color .15s var(--ease) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a:first-child {
	margin-left: 0 !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:hover,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:hover,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a:hover {
	color: var(--accent) !important;
	border-bottom-color: var(--accent) !important;
}
/* Suppress Storefront's FontAwesome eye glyph injected after the
 * "Bekijken" link via `.view::after { content: "\f06e" }` (assets/css/
 * base/icons.css). We don't ship FontAwesome in V2 and the eye doesn't
 * read as an editorial element. */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view::after,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button.view::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .pay {
	color: var(--accent) !important;
	border-bottom-color: var(--accent) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .pay:hover {
	color: var(--accent-ink) !important;
	border-bottom-color: var(--accent-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────
 * View-order detail page (/my-account/view-order/{id}/).
 *
 * Selectors use `body.wh-account-page` (NOT `.wh-account`) because
 * Woo's view-order.php template renders without a `.wh-account`
 * wrapper — the prior rules weren't matching. Body class is the
 * reliable scoping ancestor.
 * ───────────────────────────────────────────────────────────────── */

/* Section titles ("Bestelgegevens", "Klantgegevens") — display-Fraunces. */
body.wh-account-page .woocommerce-order-details__title,
body.wh-account-page .woocommerce-customer-details h2,
body.wh-account-page .woocommerce-column__title {
	font-family: var(--font-display) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	letter-spacing: -0.025em !important;
	line-height: 1.05 !important;
	margin: var(--s-40) 0 var(--s-20) !important;
	font-weight: 400 !important;
	color: var(--ink) !important;
}

/* Order intro line: "Bestelling #64 is geplaatst op april 30, 2026 en is
 * op dit moment In de wacht." — V2 chrome editorial card. The dynamic
 * values arrive wrapped in `<mark>` tags by Woo. Selectors escalated
 * with `.woocommerce` ancestor so they beat the load-order conflict
 * with WC's own `<mark>` browser-default yellow background. */
body.wh-account-page .woocommerce p.order-info,
body.wh-account-page p.order-info {
	display: block !important;
	margin: 0 0 var(--s-6) !important;
	padding: var(--s-4) var(--s-20) !important;
	background: var(--bg-alt) !important;
	border: 0 !important;
	border-left: 2px solid var(--ink-muted) !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	color: var(--ink-2) !important;
	line-height: 1.6 !important;
	font-family: var(--font-body) !important;
}
body.wh-account-page .woocommerce p.order-info mark,
body.wh-account-page .woocommerce p.order-info strong,
body.wh-account-page p.order-info mark,
body.wh-account-page p.order-info strong {
	background: transparent !important;
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
body.wh-account-page .woocommerce p.order-info mark.order-status,
body.wh-account-page p.order-info mark.order-status {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	background: var(--accent-soft) !important;
	color: var(--accent-ink) !important;
	border-radius: var(--radius-pill) !important;
}

/* "Order again" link below order details. */
body.wh-account-page p.order-again {
	margin: var(--s-5) 0 0 !important;
}

/* WCCB collage wall-thumbnail above Bestelgegevens — V2 editorial card
 * (same pattern as the cart-banner / order-summary fix). The plugin's
 * markup is `<section class="wccb-order-thumbnail" style="..."> with a
 * centred <img>; we restyle into a 2-col card with thumb + label. */
body.wh-account-page .wccb-order-thumbnail {
	margin: 0 0 var(--s-6) !important;
	padding: var(--s-20) var(--s-5) !important;
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--s-5) !important;
	text-align: left !important;
	position: relative;
}
body.wh-account-page .wccb-order-thumbnail::before {
	content: "Jouw ontwerp · Wand-overzicht";
	order: 2;
	flex: 1;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	align-self: center;
	line-height: 1.55;
}
body.wh-account-page .wccb-order-thumbnail img {
	flex: 0 0 auto !important;
	width: 120px !important;
	max-width: 120px !important;
	height: auto !important;
	margin: 0 !important;
	border: 1px solid var(--border) !important;
	box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, .08)) !important;
}
@media (max-width: 639px) {
	body.wh-account-page .wccb-order-thumbnail {
		padding: var(--s-4) !important;
		gap: var(--s-4) !important;
	}
	body.wh-account-page .wccb-order-thumbnail img {
		width: 88px !important;
		max-width: 88px !important;
	}
}

/* ── Order-details table (Bestelgegevens · line items + tfoot totals)
 *    matches design system §17 "Tabel · sortable + zebra" — same spec
 *    as the orders-list table above. No outer border (thead bg-alt is
 *    enough visual delineation), 13px body type, mono 10px caps headers
 *    with .14em ls, 12px header padding, 14px tbody padding, mono cells
 *    for IDs and prices. ─────────────────────────────────────────── */
body.wh-account-page .woocommerce-order-details .shop_table.order_details,
body.wh-account-page .woocommerce-order-details .shop_table,
body.wh-account-page .woocommerce-order-details .woocommerce-table--order-details {
	background: var(--surface) !important;
	border: 0 !important;
	border-collapse: collapse !important;
	width: 100% !important;
	margin: 0 0 var(--s-6) !important;
	font-size: 13px !important;
	font-family: var(--font-body) !important;
}
body.wh-account-page .woocommerce-order-details .shop_table thead {
	background: var(--bg-alt) !important;
}
body.wh-account-page .woocommerce-order-details .shop_table thead th {
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	padding: var(--s-3) 18px !important;
	text-align: left !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	background: transparent !important;
}
body.wh-account-page .woocommerce-order-details .shop_table thead th.product-total,
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-total {
	text-align: right !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody td {
	padding: 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	background: transparent !important;
	vertical-align: top !important;
	line-height: 1.55 !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody tr:last-child td {
	border-bottom: 1px solid var(--border) !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-name {
	color: var(--ink) !important;
	font-weight: 500 !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-name a {
	color: var(--ink) !important;
	text-decoration: none !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-name a:hover {
	color: var(--accent) !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-name .product-quantity {
	color: var(--ink-muted) !important;
	font-weight: 400 !important;
	margin-left: var(--s-1) !important;
}
/* Per-line wc-item-meta + dl.variation styling moved to `style.css`
 * (late-cascade winner). The prior 5-class selector here used
 * `display: contents` on <li> which broke baseline alignment between
 * label and value. See style.css §"Per-line meta on order-details
 * tables" for the canonical rule set. */
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-total,
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-quantity,
body.wh-account-page .woocommerce-order-details .shop_table tbody td.product-subtotal {
	font-variant-numeric: tabular-nums !important;
	font-family: var(--font-mono) !important;
	font-size: 13px !important;
	white-space: nowrap !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tfoot th {
	text-align: right !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-weight: 400 !important;
	color: var(--ink-2) !important;
	padding: 10px 18px !important;
	border-bottom: 1px dashed var(--border) !important;
	background: transparent !important;
}
body.wh-account-page .woocommerce-order-details .shop_table tfoot td {
	text-align: right !important;
	font-variant-numeric: tabular-nums !important;
	font-family: var(--font-mono) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--ink) !important;
	padding: 10px 18px !important;
	border-bottom: 1px dashed var(--border) !important;
	background: transparent !important;
}
/* Grand-total row — emphasis. */
body.wh-account-page .woocommerce-order-details .shop_table tfoot tr:last-child th,
body.wh-account-page .woocommerce-order-details .shop_table tfoot tr.order_total th,
body.wh-account-page .woocommerce-order-details .shop_table tfoot tr:last-child td,
body.wh-account-page .woocommerce-order-details .shop_table tfoot tr.order_total td {
	border-bottom: 0 !important;
	border-top: 1px solid var(--border) !important;
	font-family: var(--font-display) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: var(--ink) !important;
	padding: var(--s-4) 18px !important;
	letter-spacing: -0.01em !important;
}

/* ── Customer details — Factuuradres / Bezorgadres cards ───────── */
body.wh-account-page .woocommerce-customer-details {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.6;
}
body.wh-account-page .woocommerce-customer-details .col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--s-4) !important;
	margin-top: var(--s-4) !important;
}
body.wh-account-page .woocommerce-customer-details .col2-set::before,
body.wh-account-page .woocommerce-customer-details .col2-set::after {
	display: none !important;
}
body.wh-account-page .woocommerce .woocommerce-customer-details .col-1,
body.wh-account-page .woocommerce .woocommerce-customer-details .col-2,
body.wh-account-page .woocommerce-customer-details .col-1,
body.wh-account-page .woocommerce-customer-details .col-2,
body.wh-account-page .woocommerce-customer-details .woocommerce-column--billing-address,
body.wh-account-page .woocommerce-customer-details .woocommerce-column--shipping-address {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	padding: var(--s-5) !important;
	width: auto !important;
	float: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.wh-account-page .woocommerce .woocommerce-customer-details .col-1 h2,
body.wh-account-page .woocommerce .woocommerce-customer-details .col-2 h2,
body.wh-account-page .woocommerce-customer-details .col-1 h2,
body.wh-account-page .woocommerce-customer-details .col-2 h2,
body.wh-account-page .woocommerce-customer-details .woocommerce-column__title {
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	margin: 0 0 14px !important;
	line-height: 1 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
/* `<address>` itself — nuke WC's default chrome (1-2px gray border with
 * border-radius 5px + 6px×12px padding) that was painting a SECOND box
 * inside our .col-1 card. Make it a transparent block with the V2
 * typography. Selector escalates with .woocommerce parent class so it
 * beats the WC plugin rule `.woocommerce .woocommerce-customer-details address`. */
body.wh-account-page .woocommerce .woocommerce-customer-details address,
body.wh-account-page .woocommerce-customer-details address {
	font-size: 14px !important;
	line-height: 1.65 !important;
	font-style: normal !important;
	color: var(--ink) !important;
	font-family: var(--font-body) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: left !important;
}
/* First visual line of the address (typically the customer name). */
body.wh-account-page .woocommerce-customer-details address::first-line {
	font-weight: 500;
	color: var(--ink);
}
/* Email + phone — separated by a top divider, smaller, muted. WC ships
 * them as `<p>` siblings inside the address; we also kill its
 * WooCommerce-icon-font ::before glyphs so the V2 typography reads
 * cleanly. */
body.wh-account-page .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email,
body.wh-account-page .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,
body.wh-account-page .woocommerce-customer-details .woocommerce-customer-details--email,
body.wh-account-page .woocommerce-customer-details .woocommerce-customer-details--phone {
	display: block !important;
	position: static !important;
	margin: 14px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid var(--border) !important;
	font-size: 13px !important;
	color: var(--ink-2) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	font-family: var(--font-body) !important;
	line-height: 1.4 !important;
}
body.wh-account-page .woocommerce-customer-details .woocommerce-customer-details--email::before,
body.wh-account-page .woocommerce-customer-details .woocommerce-customer-details--phone::before {
	content: none !important;
	display: none !important;
	font-family: inherit !important;
	margin: 0 !important;
}
body.wh-account-page .woocommerce-customer-details address a {
	color: var(--ink) !important;
	text-decoration: none !important;
}
body.wh-account-page .woocommerce-customer-details address a:hover {
	color: var(--accent) !important;
}

@media (max-width: 1023px) {
	body.wh-account-page .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr !important;
		gap: var(--s-3) !important;
	}
}

/* Order details meta table — order subtotal/shipping/total/etc. */
.wh-account .woocommerce-table--order-details tfoot th {
	text-align: right;
}

/* Order action row at the bottom (re-order, view invoice, etc). */
.wh-account .woocommerce-MyAccount-content > p.order-again {
	margin: var(--s-5) 0 0;
}
.wh-account .woocommerce-MyAccount-content > p.order-again .button { padding: 10px 18px; }

/* Pagination on /orders/ list (Vorige · Volgende) — matches design
 * system §13 "Pagination · numbered". 32×32 square buttons with a
 * lucide chevron, ink-bordered hover. WC outputs anchor tags with
 * the text "Vorige" / "Volgende" — we hide the text and reveal a
 * chevron via ::before/::after using SVG mask-image (currentColor
 * keeps the chevron in lockstep with the link colour). Storefront
 * ships these as full-width pill buttons; we override with body-
 * level scoping + !important. */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--s-1) !important;
	margin: var(--s-6) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination .button,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination .button,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination a,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	background: var(--surface) !important;
	color: var(--ink) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination a:hover,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination a:hover {
	border-color: var(--ink) !important;
	background: var(--ink) !important;
	color: var(--bg) !important;
}
/* Inject lucide chevron via SVG mask-image — uses currentColor so the
 * arrow inverts to bg on hover (filled-ink button state). */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination a::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination a::before {
	content: '' !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	background-color: currentColor !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 14px 14px !important;
	mask-size: 14px 14px !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--previous::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-Button--previous::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination .woocommerce-button--previous::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination .woocommerce-Button--previous::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--next::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-Button--next::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination .woocommerce-button--next::before,
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-Pagination .woocommerce-Button--next::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
}

/* Notice styling is owned globally by tokens.css — see the
 * `.woocommerce-notices-wrapper` block there. The account-only overrides
 * that used to live here have been removed in favour of the global treatment. */

/* Legacy form-row baseline kept ONLY for the lost-password / reset
 * forms (logged-out, no `.wh-form` wrapper). The edit-account /
 * edit-address forms now run on the §A `.wh-form` module below, which
 * owns their full-width layout, two-column grid, and field chrome.
 *
 * The old `max-width: 520px` cap that lived here was beating the V2
 * layout on specificity (`.wh-account form.woocommerce-EditAccountForm`
 * = 0,2,1) — removed so Voorkeuren / Adressen-bewerken span the full
 * `.wh-account` content width like every other tab. */
.wh-account form.lost_reset_password {
	max-width: 520px;
}
.wh-account form.lost_reset_password .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.wh-account form.lost_reset_password .form-row label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}
.wh-account form.lost_reset_password .form-row input:not([type="checkbox"]):not([type="radio"]),
.wh-account form.lost_reset_password .form-row textarea,
.wh-account form.lost_reset_password .form-row select {
	width: 100%;
	padding: var(--s-3) 14px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	font: 400 14px/1.3 var(--font-body);
	border-radius: 0;
	outline: 0;
}

/* ============================================================
   Auth screens (guest /my-account/, /registreren/, lost-pw, reset)
   ============================================================
   See [[Auth Screens V2 Scope]] §23 of the design preview.
   Centered single-column shell · solid --bg background · mini-header
   at top (variant=auth, shared with /checkout/). Form column max-
   width 440 px, vertically centered via place-content. Mobile reuses
   §21 mobile patterns (48 px touch, safe-area inset).
   ------------------------------------------------------------ */

/* Hide site chrome on auth pages — only the mini-header inside the
   auth shell is visible. Body class set in functions.php. */
body.wh-auth-page .wh-topbar,
body.wh-auth-page .wh-topnav,
body.wh-auth-page .wh-footer,
body.wh-auth-page .site-header,
body.wh-auth-page .site-footer,
body.wh-auth-page .wh-mobile-bar,
body.wh-auth-page .wh-bottom-nav { display: none !important; }
body.wh-auth-page { background: var(--bg); }
body.wh-auth-page .wh-main,
body.wh-auth-page main.site-main,
body.wh-auth-page #content { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* ---- Shell ---- */
.wh-auth {
	background: var(--bg);
	color: var(--ink);
}
.wh-auth__stage {
	/* Flex, not grid place-content: a grid's auto track sizes to the column's
	   max-content, which rendered the login column ~397px while register got
	   the full 440px. Flex resolves the column's width:100% against the full
	   stage width, so every auth screen gets the same 440px column. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 80px); /* viewport minus mini-header */
	padding: var(--s-56) var(--page-pad);
}
.wh-auth__col {
	width: 100%;
	max-width: 440px;
}

/* ---- Type ---- */
.wh-auth__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-20);
}
.wh-auth__h1 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.0;
	letter-spacing: -0.030em;
	font-weight: 400;
	margin: 0 0 var(--s-3);
}
.wh-auth__sub {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 42ch;
	margin: 0 0 28px;
}
/* Sub-copy inside the form (e.g. the generated-password note on
   /registreren/) sits tighter than the H1 sub-copy. */
.wh-auth__form .wh-auth__sub { margin: 0 0 var(--s-4); }

/* ---- Form ---- */
.wh-auth__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wh-auth__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wh-auth__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}
.wh-auth__req { color: var(--accent); }
/* Scoped under .wh-auth so we out-rank Storefront's parent input chrome
   (`input[type=…], .input-text { background:#f2f2f2; border:0; box-shadow:
   inset … }` at 0,1,1) — without the scope the design-system white +
   1px border never applied and the fields rendered Storefront-grey. */
.wh-auth .wh-auth__input {
	width: 100%;
	padding: var(--s-3) 14px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	font: 400 14px/1.3 var(--font-body);
	color: var(--ink);
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	transition: border-color .15s var(--ease);
}
/* Background re-stated on :focus — Storefront's typed `input[type=email]:focus
   { background:#ededed }` (0,2,1) would otherwise grey the focused field. */
.wh-auth .wh-auth__input:focus {
	border-color: var(--ink);
	background: var(--surface);
}

/* ---- Password field with eye toggle ---- */
.wh-auth__pw-wrap {
	position: relative;
}
.wh-auth__pw-wrap .wh-auth__input { padding-right: 44px; }
.wh-auth__pw-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	/* padding:0 is load-bearing: Storefront's generic `button` padding
	   (.618em 1.41575em ≈ 45px horizontal) otherwise floors the border-box
	   width and flex-shrinks the eye SVG to 0px — invisible toggle. */
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color .15s var(--ease);
}
.wh-auth__pw-toggle .wh-auth__pw-icon { flex: none; }
/* background re-stated: Storefront's `button:hover { background:#d5d5d5 }`
   (0,1,1) would otherwise paint a grey square behind the eye icon. */
.wh-auth__pw-toggle:hover,
.wh-auth__pw-toggle:active {
	color: var(--ink);
	background: none;
}
.wh-auth__pw-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---- Remember me ---- */
.wh-auth__remember {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--ink-2);
	cursor: pointer;
	margin: var(--s-1) 0 var(--s-2);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.wh-auth__remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--accent);
	flex-shrink: 0;
}

/* ---- Submit pill (always full-width within the 440 px column) ----
   Scoped at (0,3,0) so the pill survives WooCommerce core's
   `:where(body…) .woocommerce button.button { border-radius:3px; … }`
   (0,2,1) — that rule squared the corners on /my-account/ guest screens
   (body.woocommerce-page) while /registreren/ kept the pill. */
.wh-auth .wh-auth__form .wh-auth__submit {
	background: var(--accent);
	color: var(--on-ink);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 14px var(--s-5);
	font: 500 14px/1 var(--font-body);
	letter-spacing: 0.01em;
	cursor: pointer;
	margin-top: var(--s-1);
	width: 100%;
	transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wh-auth .wh-auth__form .wh-auth__submit:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-ink);
}
.wh-auth .wh-auth__form .wh-auth__submit:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* ---- Inline link (e.g. "Wachtwoord vergeten?") ---- */
.wh-auth__inline-link {
	font-size: 13px;
	margin: var(--s-3) 0 0;
	color: var(--ink-muted);
}
.wh-auth__inline-link a {
	color: var(--ink-muted);
	border-bottom: 1px solid var(--border-strong);
	text-decoration: none;
	padding-bottom: 1px;
	transition: color .15s var(--ease), border-color .15s var(--ease);
}
.wh-auth__inline-link a:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* ---- Footer link counterpart ---- */
.wh-auth__footer-link {
	margin: 28px 0 0;
	padding-top: var(--s-20);
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--ink-2);
}
.wh-auth__footer-link a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
	padding-bottom: 1px;
	font-weight: 500;
}

/* ---- Callout (reuse §05 ok variant) ---- */
.wh-auth__callout {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--ok-soft);
	border: 1px solid var(--ok);
	border-radius: 0;
	margin: 0 0 var(--s-5);
}
.wh-auth__callout.is-warn {
	background: var(--warn-soft);
	border-color: var(--warn);
}
.wh-auth__callout-icon {
	flex-shrink: 0;
	color: var(--ok);
	margin-top: 2px;
}
.wh-auth__callout.is-warn .wh-auth__callout-icon { color: var(--warn); }
.wh-auth__callout-body {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
}
.wh-auth__callout-body strong {
	display: block;
	margin-bottom: var(--s-1);
	font-weight: 500;
}

/* ---- Hide off-screen honeypot field ---- */
.wh-honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- WC privacy-policy notice (rendered above the submit on /registreren/)
       Mirrors the checkout-page treatment in wandhaus-checkout.css §948. Soft
       muted helper text with a thin 2px ink-edged left rule, link uses the
       editorial underline pattern (1px ink line, accent on hover). ---- */
body.wh-auth-page .woocommerce-privacy-policy-text {
	margin: var(--s-4) 0 0 !important;
	padding: var(--s-3) 14px !important;
	background: var(--surface-2) !important;
	border: 0 !important;
	border-left: 2px solid var(--border-strong) !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
	color: var(--ink-muted) !important;
}
body.wh-auth-page .woocommerce-privacy-policy-text p {
	margin: 0 !important;
	color: var(--ink-muted) !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
}
body.wh-auth-page .woocommerce-privacy-policy-text a,
body.wh-auth-page .woocommerce-privacy-policy-link {
	color: var(--ink) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--ink-muted) !important;
	text-underline-offset: 2px !important;
	transition: color .15s var(--ease), text-decoration-color .15s var(--ease) !important;
}
body.wh-auth-page .woocommerce-privacy-policy-text a:hover,
body.wh-auth-page .woocommerce-privacy-policy-link:hover {
	color: var(--accent) !important;
	text-decoration-color: var(--accent) !important;
}

/* ---- WC compatibility — neutralise legacy classes that may still
   appear inside our forms (auto-injected error notices etc.) so they
   inherit the auth typography. ---- */
.wh-auth .woocommerce-error,
.wh-auth .woocommerce-message,
.wh-auth .woocommerce-info {
	font-family: var(--font-body);
	font-size: 14px;
	border-radius: 0;
}

/* ---- Mobile (<640 px) — reuse §21 patterns ---- */
@media (max-width: 639px) {
	.wh-auth__stage {
		/* Top-anchor the form on phones. With `align-items: center` (the desktop
		   default) a form taller than the viewport — or once the keyboard opens
		   and shrinks the viewport — overflows ABOVE the top edge and can't be
		   scrolled back to. flex-start keeps the top reachable; `svh` tracks the
		   small viewport so the stage isn't forced taller than what's visible. */
		align-items: flex-start;
		min-height: calc(100svh - 64px);
		padding: var(--s-6) var(--page-pad) calc(var(--s-6) + env(safe-area-inset-bottom, 0));
	}
	.wh-auth__submit { min-height: 48px; }
	.wh-auth__pw-toggle { width: 44px; height: 44px; }
}

/* ---- Thank-you / Order-received page (Phase C) ---- */

body.wh-thankyou-page { background: var(--bg); }
body.wh-thankyou-page .wh-main {
	/* Cap at the 1400 site canvas, centered — match cart/checkout/account.
	 * (Was `none`, overriding wandhaus-checkout.css.) Page Consistency Standard. */
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.wh-thankyou {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--s-56) var(--page-pad) var(--s-9);
}

.wh-thankyou__head {
	max-width: 720px;
	margin-bottom: var(--s-7);
}
.wh-thankyou__title {
	font-family: var(--font-display);
	font-size: 64px;
	letter-spacing: -0.025em;
	line-height: 1;
	margin: var(--s-2) 0 var(--s-4);
}
.wh-thankyou__title em { font-style: italic; }
.wh-thankyou__lede {
	font-size: 16px;
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 540px;
	margin: 0;
}

.wh-thankyou__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--s-7);
}
@media (max-width: 1023px) {
	.wh-thankyou__grid { grid-template-columns: 1fr; gap: var(--s-5); }
	.wh-thankyou__title { font-size: 44px; }
	.wh-thankyou { padding: var(--s-6) var(--s-20) var(--s-8); }
}

.wh-thankyou__overview { margin-top: 0; }

.wh-thankyou__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--s-3) var(--s-20);
	margin: 0;
}
.wh-thankyou__meta dt {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}
.wh-thankyou__meta dd {
	margin: 0;
	font-size: 14px;
	color: var(--ink);
}
.wh-thankyou__meta dd.mono {
	font-family: var(--font-mono);
	letter-spacing: .04em;
}
.wh-thankyou__total {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.02em;
}
.wh-thankyou__tracker { margin-top: 28px; }

.wh-thankyou__next {
	background: var(--bg-alt);
	padding: 28px;
	border-left: 2px solid var(--accent);
	align-self: start;
}
.wh-thankyou__next-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: var(--s-4);
}
.wh-thankyou__steps {
	margin: 0 0 var(--s-5);
	padding-left: var(--s-20);
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.7;
}
.wh-thankyou__steps li { margin-bottom: 6px; }

.wh-thankyou__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.wh-thankyou__actions .btn { text-align: center; }

.wh-thankyou__support {
	margin: var(--s-4) 0 0;
	font-size: 12px;
	color: var(--ink-muted);
}
.wh-thankyou__support a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
}

/* Failed state — bordered callout above the standard CTAs. */
.wh-thankyou__failed {
	background: var(--accent-soft-cool);
	border-left: 2px solid var(--err, #B23121);
	padding: var(--s-5);
	margin-top: var(--s-5);
}
.wh-thankyou__failed p { margin: 0 0 var(--s-4); color: var(--ink-2); }
.wh-thankyou__failed-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Hide Storefront's default thankyou-overview list since we render our own. */
body.wh-thankyou-page .woocommerce-order-overview,
body.wh-thankyou-page .woocommerce-order > p.woocommerce-notice,
body.wh-thankyou-page .woocommerce-order > .woocommerce-thankyou-order-received {
	display: none !important;
}

/* ── Probo tracking block (Volg je bestelling) ────────────────────────
 * Rendered by the WC Collage Builder plugin's `render_tracking_block()`
 * on the My Account → View Order page (and on the order-received page
 * via the same hook). Lives in plugin code; styled here so it can use
 * the V2 design tokens loaded by the theme. */
.wccb-track-block {
	margin: var(--s-5) 0;
	padding: 28px;
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 12px;
}
.wccb-track-block__eyebrow {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin: 0 0 6px;
}
.wccb-track-block__title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ink);
	font-weight: 400;
	margin: 0 0 14px;
}
.wccb-track-block__meta {
	margin: 0 0 var(--s-20);
	color: var(--ink-muted);
	font-size: 13px;
	line-height: 1.55;
}
.wccb-track-block__meta .wccb-track-block__sep { color: var(--ink-faint, var(--ink-muted)); margin: 0 var(--s-1); }

/* Vertical timeline */
.wccb-track-timeline {
	list-style: none;
	margin: 0 0 var(--s-20);
	padding: var(--s-1) 0 var(--s-1) 0;
	border-left: 1px solid var(--border);
}
.wccb-track-timeline__item {
	position: relative;
	margin: 0 0 var(--s-4);
	padding: 0 0 0 var(--s-20);
}
.wccb-track-timeline__item:last-child { margin-bottom: 0; }
.wccb-track-timeline__dot {
	position: absolute;
	left: -7px;
	top: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--surface, #FFFFFF);
	border: 2px solid var(--border);
	box-sizing: border-box;
}
.wccb-track-timeline__item.is-current .wccb-track-timeline__dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(35, 92, 104, 0.12);
}
.wccb-track-timeline__label {
	font-size: 14px;
	color: var(--ink-muted);
	font-weight: 400;
	line-height: 1.4;
}
.wccb-track-timeline__item.is-current .wccb-track-timeline__label {
	color: var(--ink);
	font-weight: 500;
}
.wccb-track-timeline__time {
	font-size: 11px;
	color: var(--ink-faint, var(--ink-muted));
	margin-top: 3px;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	letter-spacing: .02em;
}

/* Action buttons row */
.wccb-track-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
}
.wccb-track-block__actions .btn,
.wccb-track-block__actions .button {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	box-shadow: none;
}
.wccb-track-block__actions .btn-primary {
	background: var(--ink);
	color: var(--surface, #FFFFFF);
	border: 1px solid var(--ink);
}
.wccb-track-block__actions .btn-primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface, #FFFFFF);
}
.wccb-track-block__actions .btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--border);
}
.wccb-track-block__actions .btn-ghost:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* Multi-parcel list */
.wccb-track-parcels {
	margin: var(--s-20) 0 0;
	padding: var(--s-4) 0 0;
	border-top: 1px solid var(--border);
}
.wccb-track-parcels__count {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin: 0 0 10px;
}
.wccb-track-parcels__row {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	margin: 0 0 var(--s-2);
	font-size: 14px;
}
.wccb-track-parcels__link {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
}
.wccb-track-parcels__link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.wccb-track-parcels__barcode {
	font-size: 12px;
	color: var(--ink-muted);
	letter-spacing: .04em;
}

/* ── View Order: lead paragraph "Bestelling #X is geplaatst op …" ──
 * Default WC markup wraps order number / date / status in `<mark>`
 * elements which the browser highlights in yellow. Replace with a
 * V2 card-style callout: eyebrow chips with mono labels and soft
 * surface, no yellow. */
/* Scoped to `<p>` elements that actually contain WC `<mark>` chips
 * (order-number / order-date / order-status). The earlier
 * `> p:first-of-type` selector was catching every leading paragraph
 * in the content area — including `.wh-account__intro-lede` on the
 * Voorkeuren / Adressen / Downloads tabs — and painting it as a
 * card. Now only the view-order WC default intro paragraph gets the
 * card treatment. */
.woocommerce-MyAccount-content > p:has(mark.order-number),
.woocommerce-MyAccount-content > p:has(mark.order-date),
.woocommerce-MyAccount-content > p:has(mark.order-status),
.woocommerce-MyAccount-content .woocommerce-order-details + p:has(mark) {
	margin: 0 0 var(--s-5);
	padding: 18px var(--s-20);
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-muted);
}
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date,
.woocommerce-MyAccount-content mark.order-status,
.woocommerce-MyAccount-content p mark {
	background: transparent;
	color: var(--ink);
	font-weight: 500;
	padding: 0;
	font-family: inherit;
}
.woocommerce-MyAccount-content mark.order-number {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 13px;
	letter-spacing: .02em;
}
.woocommerce-MyAccount-content mark.order-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--surface-2, #FAFAFA);
	border: 1px solid var(--border);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}

/* ── Force order-details thead bg-alt to win Storefront's hard
 *    `.woocommerce table.shop_table thead { background: ...; color: ...; }`
 *    rules. Storefront paints headers with a dark-ink fill + white text;
 *    we override with body- and `.woocommerce`-level scoping + !important
 *    on every property including the `tr` (Storefront sometimes paints
 *    the row, not just the cells). ──────────────────────────────────── */
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead,
body.wh-account-page .woocommerce .woocommerce-order-details .shop_table thead {
	background: var(--bg-alt) !important;
	color: var(--ink-muted) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead tr,
body.wh-account-page .woocommerce .woocommerce-order-details .shop_table thead tr {
	background: transparent !important;
	color: var(--ink-muted) !important;
}
body.wh-account-page .woocommerce-MyAccount-content .woocommerce-order-details .shop_table thead th,
body.wh-account-page .woocommerce .woocommerce-order-details .shop_table thead th {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ink-muted) !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	padding: var(--s-3) 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
}
/* Same defensive override for the orders-list table (Bestellingen). */
body.wh-account-page .woocommerce-MyAccount-content table.shop_table thead,
body.wh-account-page .woocommerce-MyAccount-content table.account-orders-table thead,
body.wh-account-page .woocommerce table.shop_table thead {
	background: var(--bg-alt) !important;
	color: var(--ink-muted) !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table thead tr,
body.wh-account-page .woocommerce-MyAccount-content table.account-orders-table thead tr,
body.wh-account-page .woocommerce table.shop_table thead tr {
	background: transparent !important;
	color: var(--ink-muted) !important;
}
body.wh-account-page .woocommerce-MyAccount-content table.shop_table thead th,
body.wh-account-page .woocommerce-MyAccount-content table.account-orders-table thead th,
body.wh-account-page .woocommerce table.shop_table thead th {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ink-muted) !important;
}

/* ── Photo gallery (wccb-photo-gallery) — V2 editorial card. Plugin
 *    renders this on the My Account → View Order page. Replaces the
 *    inline V1 colours that were stripped from the PHP. ───────────── */
.wccb-photo-gallery {
	margin: var(--s-5) 0 var(--s-6);
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0;
}
.wccb-photo-gallery__head {
	margin: 0 0 var(--s-20);
}
.wccb-photo-gallery__eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin: 0 0 var(--s-2);
}
.wccb-photo-gallery__intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-muted);
}
.wccb-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-3);
}
@media (max-width: 1023px) {
	.wccb-photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.wccb-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

.wccb-photo-card {
	display: block;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s var(--ease), transform .2s var(--ease);
}
.wccb-photo-card:hover {
	border-color: var(--ink);
}
.wccb-photo-card:hover .wccb-photo-card__media img {
	transform: scale(1.03);
}
.wccb-photo-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg-alt);
}
.wccb-photo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s var(--ease);
}
.wccb-photo-card__meta {
	padding: 10px var(--s-3) var(--s-3);
	background: var(--surface);
	border-top: 1px solid var(--border);
}
.wccb-photo-card__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
}
.wccb-photo-card__sub {
	margin-top: var(--s-1);
	font-size: 12px;
	color: var(--ink-muted);
	line-height: 1.4;
}


/* ==========================================================================
   §A — Adressen + Voorkeuren tabs (V2 chrome unification)
   --------------------------------------------------------------------------
   The two account-edit tabs were rendering with WC default chrome
   (rounded inputs, unstyled `<address>` cards, narrow 520px form cap)
   while the rest of the V2 account already runs on `.wh-account__card` +
   editorial layout. These rules align both surfaces with the dashboard
   / view-order / customer-details look without forking the whole
   stylesheet.
   ========================================================================== */

/* Page intro band (eyebrow + lede, plus optional back-link) — sits above
   the cards on all edit-account / addresses surfaces. */
.wh-account__intro {
	margin: 0 0 var(--s-5);
	max-width: 640px;
}
.wh-account__intro .eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin-bottom: var(--s-2);
}
.wh-account__lede {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.6;
	margin: 0;
}
.wh-account__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.wh-account__back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Address grid — two equal cards on desktop, stacked on mobile. */
.wh-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5);
}
@media (max-width: 1023px) {
	.wh-addresses { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Address card body — strip the WC default `<address>` chrome (italic
   font, gray border, padding) so it reads as plain text inside our card. */
.wh-addresses__card .wh-account__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.wh-addresses__body { display: flex; flex-direction: column; gap: var(--s-2); }
.wh-addresses__address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}
.wh-addresses__empty {
	font-size: 13px;
	color: var(--ink-muted);
	margin: 0;
}

/* Edit pill — matches the global `.btn .btn-sm .btn-ghost` treatment
   used on the dashboard active-order actions. The Lucide pencil icon
   inherits `currentColor`. */
.wh-addresses__edit {
	flex-shrink: 0;
	gap: 6px;
}
.wh-addresses__edit svg { display: block; }


/* ---- Edit-account / edit-address forms (.wh-form) ----------------------
   No max-width on the form itself — it inherits the `.wh-account`
   content cap (`--page-max-content`, 1440 px) like every other tab.
   Field readability is handled by the inner `.wh-form__grid` two-column
   layout, not by squeezing the whole form. */

.wh-form__card { margin-bottom: var(--s-5); }
.wh-form__card .wh-account__card-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-1);
	margin-bottom: var(--s-4);
}
.wh-form__title {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0;
	font-weight: 500;
}
.wh-form__body { display: flex; flex-direction: column; gap: var(--s-4); }

/* Two-column field grid — `.form-row-first` / `.form-row-last` map to
   columns 1 / 2; `.wh-form__field--full` and `.form-row-wide` span both. */
.wh-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px var(--s-20);
}
@media (max-width: 1023px) {
	.wh-form__grid { grid-template-columns: 1fr; }
}

/* Reset WC's float-based `.form-row-first / -last` so they cooperate
   with grid auto-placement. */
.wh-form .form-row,
.wh-form .woocommerce-form-row {
	float: none !important;
	width: auto !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wh-form .wh-form__field--full,
.wh-form .form-row-wide {
	grid-column: 1 / -1;
}

/* Field labels — uppercase mono, subdued. Match the design-system §6
   form-row label spec. */
.wh-form .form-row label,
.wh-form .woocommerce-form-row label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin: 0;
}
.wh-form .form-row label .required,
.wh-form .woocommerce-form-row label .required { color: var(--accent); }

/* Inputs / selects / textareas — square corners, solid 1 px border, no
   rounded WC defaults bleeding through. */
.wh-form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wh-form .form-row textarea,
.wh-form .form-row select,
.wh-form .woocommerce-form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wh-form .woocommerce-form-row textarea,
.wh-form .woocommerce-form-row select {
	width: 100%;
	padding: var(--s-3) 14px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--ink);
	font: 400 14px/1.3 var(--font-body);
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.wh-form .form-row input:focus,
.wh-form .form-row textarea:focus,
.wh-form .form-row select:focus,
.wh-form .woocommerce-form-row input:focus,
.wh-form .woocommerce-form-row textarea:focus,
.wh-form .woocommerce-form-row select:focus {
	border-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

/* Country / state Select2 dropdown — mimic the native `<select>` chrome
   so the field doesn't render as a pill in the middle of square inputs. */
.wh-form .select2-container .select2-selection--single {
	height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--border-strong) !important;
	background: var(--surface) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.wh-form .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important;
	padding: 0 14px !important;
	color: var(--ink) !important;
	font: 400 14px/1.3 var(--font-body) !important;
}
.wh-form .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
}

/* Inline help text under a field. */
.wh-form__hint {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--ink-muted);
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 2px;
}

/* Action row — primary button. `--page` modifier shifts it below the
   stack of cards on the edit-account page so it doesn't sit inside the
   last card's body. */
.wh-form__actions {
	display: flex;
	gap: var(--s-3);
	margin-top: var(--s-2);
}
.wh-form__actions--page { margin-top: 0; }
.wh-form .btn-primary {
	border-radius: 999px;
	padding: var(--s-3) var(--s-5);
	font: 500 14px/1 var(--font-body);
	letter-spacing: .01em;
}

/* ---- Tab title / subtitle (`.wh-account__page-head`) -------------------
   Voorkeuren / Adressen / Downloads share the same heading pattern as
   the dashboard's "Opgeslagen ontwerpen" section: small mono eyebrow
   on top, 28px display h2 below, optional lede paragraph beneath.
   Smaller and more measured than the personal `.wh-account__welcome`
   greeting on the Overzicht tab. */
.wh-account__page-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin: 0 0 var(--s-4);
}
.wh-account__page-title {
	font-family: var(--font-display);
	font-size: 28px;
	margin: var(--s-1) 0 0;
	letter-spacing: -0.02em;
	font-weight: 500;
	line-height: 1.1;
}
.wh-account__intro-lede {
	margin: 0 0 var(--s-6);
	padding: 0;
	border: 0;
	max-width: 640px;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.6;
}


/* ---- Password field — show/hide eye toggle (Lucide override) ----------
   WC's JS wraps `<input type="password">` in `<span class="password-input">`
   at runtime and appends `<button class="show-password-input">`. Storefront
   paints a Font Awesome eye glyph via `::after { content: "" }`. We can't
   stop the wrap (it's hard-coded in `assets/js/frontend/woocommerce.js`)
   so we restyle the wrapper + replace the icon with a Lucide eye / eye-off
   pair drawn via SVG mask + `currentColor` — same chrome as every other
   icon on the site.
   --------------------------------------------------------------------------
   Scoped to `.wh-form` so we don't accidentally restyle WC's checkout /
   guest-login password fields, which are owned elsewhere. */
.wh-form .password-input {
	position: relative;
	display: block;
	width: 100%;
}
.wh-form .password-input input[type="password"],
.wh-form .password-input input[type="text"] {
	padding-right: var(--s-7);
}
.wh-form .show-password-input {
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--ink-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .15s var(--ease);
}
.wh-form .show-password-input:hover { color: var(--ink); }
.wh-form .show-password-input:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }

/* Replace Storefront's Font Awesome glyph. `content: ''` blanks out the
   FA character; the icon comes from a CSS mask so it inherits
   `currentColor` and stays in design-system chrome. */
.wh-form .show-password-input::after {
	content: "" !important;
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	font-family: var(--font-body) !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
}
.wh-form .show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
	color: var(--ink);
}