/**
 * Wandhaus — cart + checkout editorial overrides.
 *
 * Scoped under `.wh-checkout` / `.wh-cart` + Woo's own form/table classes.
 * Loaded only on the cart & checkout pages from functions.php.
 */

/* ---------- Shared: full-width container ------------------------- */
/*
 * Storefront's parent theme + our own `<main id="wh-main">` impose width
 * clamps (`.col-full` ~1110px, page padding) that crop our pages into a
 * narrow column. Across every Wandhaus-branded WC page (cart, checkout,
 * account, thank-you), neutralise those clamps so content spans the
 * viewport. Each page sets its own internal max-width / padding via its
 * `.wh-*` container CSS.
 *
 * Cart, account, thank-you keep the Wandhaus topnav for navigation;
 * checkout HIDES it because it renders its own slim editorial header.
 */
body.wh-checkout-page,
body.wh-cart-page,
body.wh-account-page,
body.wh-thankyou-page {
	background: var(--bg);
}
body.wh-checkout-page .wh-main,
body.wh-cart-page .wh-main,
body.wh-account-page .wh-main,
body.wh-thankyou-page .wh-main,
body.wh-checkout-page #content,
body.wh-cart-page #content,
body.wh-account-page #content,
body.wh-thankyou-page #content {
	/* Cap the transactional pages at the 1400 site canvas (centered) so cart /
	 * checkout / account / order-confirmed line up with the rest of the site
	 * instead of stretching full-bleed. Each page keeps its own inner gutter.
	 * Page Consistency Standard 2026-06-17 (was max-width:none). */
	max-width: 1400px !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 auto !important;
}
/* Storefront's parent .col-full wrapper — neutralise its max-width on these
 * pages so the page can use the full viewport. */
body.wh-checkout-page .col-full,
body.wh-cart-page .col-full,
body.wh-account-page .col-full,
body.wh-thankyou-page .col-full {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* `<article id="post-N" class="wh-page hentry">` — Storefront / Woo
 * cascade can leave inherited width / padding / margin on the article
 * wrapper (entry-content auto-margins, .hentry max-width, etc.). On Woo
 * pages we want the article to be a transparent flex container so the
 * editorial header (.wh-checkout__header / .wh-topnav) and body
 * (.wh-cart / .wh-checkout__grid / .wh-account / .wh-thankyou) can
 * span / cap themselves directly. */
body.wh-checkout-page article.wh-page,
body.wh-cart-page article.wh-page,
body.wh-account-page article.wh-page,
body.wh-thankyou-page article.wh-page,
body.wh-checkout-page .wh-page,
body.wh-cart-page .wh-page,
body.wh-account-page .wh-page,
body.wh-thankyou-page .wh-page {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Same nuke for any .entry-content / .page-content Storefront drops in. */
body.wh-checkout-page .entry-content,
body.wh-cart-page .entry-content,
body.wh-account-page .entry-content,
body.wh-thankyou-page .entry-content,
body.wh-checkout-page .page-content,
body.wh-cart-page .page-content,
body.wh-account-page .page-content,
body.wh-thankyou-page .page-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.wh-checkout-page .wh-topnav {
	display: none; /* checkout renders its own slim editorial header */
}
body.wh-checkout-page .wh-footer,
body.wh-cart-page .wh-footer,
body.wh-account-page .wh-footer,
body.wh-thankyou-page .wh-footer {
	margin-top: 0;
}

/* ---------- Editorial header ---------- */

/* Mini-header markup + styling moved to css/wh-mini-header.css and
   template-parts/site/mini-header.php — shared between /checkout/ and
   the auth screens. See [[Auth Screens V2 Scope]] §9.2. */

/* V2 display heading on the checkout form column. Uses the .display-xl token
   class from tokens.css; .wh-checkout__heading just adds spacing + the
   terminal-period accent color. */
.wh-checkout__heading {
	margin: 0 0 var(--s-5);
	color: var(--ink);
	font-weight: 400;
}
.wh-checkout__heading-period { color: var(--ink); }
.wh-checkout__step-label { margin-bottom: var(--s-3); }

/* Order-summary box title + icon row */
.wh-order-summary__box-title {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.wh-order-summary__box-title svg { color: var(--accent); flex-shrink: 0; }

/* ---------- Layout — single column ---------- */

.wh-checkout__grid {
	/* Reading-cap, not layout-cap. Form fields + radio cards + summary read
	 * best at <960px line length even in a 1920 viewport. Stays at the
	 * `--reading-max-wide` reading-column token (narrower than the
	 * `--page-max-content` 1440 transactional cap) — single-column form
	 * UX wants narrower than a multi-column cart. Page chrome around it
	 * uses --page-pad like every other page. */
	max-width: var(--reading-max-wide);
	width: 100%;
	margin: 0 auto;
	padding: clamp(var(--s-5), 3vw, var(--s-7)) var(--page-pad) clamp(var(--s-7), 7vw, var(--s-9));
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	align-items: stretch;
}
.wh-checkout__grid > * {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}
.wh-checkout__grid > .wh-order-summary {
	position: static; /* stack, no sticky in single-column flow */
}

@media (max-width: 1023px) {
	.wh-checkout__grid { padding: var(--s-4) var(--s-4) var(--s-7); gap: var(--s-5); }
}

/* ---------- Checkout form restyle (Woo classes) ---------- */

.wh-checkout .woocommerce-checkout h3,
.wh-checkout .woocommerce-checkout h4,
.wh-checkout .wh-checkout__section-heading {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: var(--s-40) 0 14px;
	padding: 0;
	border: 0;
	font-weight: 500;
	display: block;
}
.wh-checkout .wh-checkout__section-heading--payment {
	margin-top: var(--s-6);
}

/* The shipping section row sits INSIDE the order-review <table> so it
   can't use <h3>. Keep the same visual treatment via <td colspan="2"
   class="wh-checkout__section-heading">. */
.wh-checkout .wh-checkout__section-row > td {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.wh-checkout .wh-checkout__section-row--shipping .wh-checkout__section-heading--shipping {
	margin-top: var(--s-40);
}

/* Empty-state callout when no shipping rates resolve for the entered country. */
.wh-checkout .wh-checkout__shipping-empty {
	font-size: 13px;
	color: var(--ink-2);
	background: var(--bg-alt);
	border-left: 2px solid var(--warn);
	padding: 14px var(--s-4);
	margin: var(--s-2) 0 var(--s-5);
	line-height: 1.5;
}

/* Let Woo's form-row-first / form-row-last pairs render side-by-side.
 * Using CSS grid on the enclosing wrapper so we don't care about markup order. */
.wh-checkout .woocommerce-billing-fields__field-wrapper,
.wh-checkout .woocommerce-shipping-fields__field-wrapper,
.wh-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px var(--s-4);
}
.wh-checkout .form-row {
	margin-bottom: 0;
	grid-column: span 2;   /* default: full width (wide fields like address, email) */
}
.wh-checkout .form-row-first { grid-column: 1; }
.wh-checkout .form-row-last  { grid-column: 2; }
.wh-checkout .form-row-wide  { grid-column: 1 / -1; }

@media (max-width: 1023px) {
	.wh-checkout .woocommerce-billing-fields__field-wrapper,
	.wh-checkout .woocommerce-shipping-fields__field-wrapper,
	.wh-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.wh-checkout .form-row,
	.wh-checkout .form-row-first,
	.wh-checkout .form-row-last,
	.wh-checkout .form-row-wide {
		grid-column: 1;
	}
}

.wh-checkout .form-row label {
	font-size: 11px;
	font-family: var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	display: block;
	margin-bottom: 6px;
}
.wh-checkout .form-row input:not([type="checkbox"]):not([type="radio"]),
.wh-checkout .form-row textarea,
.wh-checkout .form-row select,
.wh-checkout .select2-selection--single {
	width: 100%;
	padding: var(--s-3) 14px !important;
	font-size: 14px !important;
	font-family: var(--font-body) !important;
	border: 1px solid var(--border-strong) !important;
	background: var(--surface) !important;
	outline: 0 !important;
	border-radius: 0 !important;
	height: auto !important;
	color: var(--ink) !important;
	line-height: 1.3 !important;
}
.wh-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 24px;
	padding: 0;
	color: var(--ink);
}
.wh-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

/* Select2 dropdown popup — match the input style so the open state stays
   editorial and consistent. Lives at body level (NOT inside .wh-checkout)
   so we scope to the dropdown class directly. */
.select2-container--open .select2-dropdown {
	border: 1px solid var(--ink, #1A1F22) !important;
	border-radius: 0 !important;
	background: var(--surface, #FFFFFF) !important;
	font-family: var(--font-body), system-ui, sans-serif !important;
}
.select2-container--default .select2-results__option {
	font-size: 14px;
	color: var(--ink, #1A1F22);
	padding: 10px 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--accent-soft, #E6EEEF);
	color: var(--ink, #1A1F22);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border-strong) !important;
	padding: 10px var(--s-3);
	font-size: 13px;
	font-family: var(--font-body) !important;
	border-radius: 0 !important;
}

/* Validation states — Woo applies these classes to the parent .form-row. */
.wh-checkout .form-row.woocommerce-invalid input:not([type="checkbox"]):not([type="radio"]),
.wh-checkout .form-row.woocommerce-invalid select,
.wh-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--err, #B23121) !important;
	background: var(--accent-soft-cool) !important;
}
.wh-checkout .form-row.woocommerce-validated input:not([type="checkbox"]):not([type="radio"]),
.wh-checkout .form-row.woocommerce-validated select,
.wh-checkout .form-row.woocommerce-validated .select2-selection {
	border-color: var(--ok, #2F6B43) !important;
}

/* Field-level error message under invalid input. */
.wh-checkout .form-row .woocommerce-error {
	background: transparent;
	border: 0;
	padding: var(--s-1) 0 0;
	margin: 0;
	color: var(--err, #B23121);
	font-size: 12px;
	font-family: var(--font-body);
	list-style: none;
	letter-spacing: 0;
	text-transform: none;
}
.wh-checkout .form-row .woocommerce-error li {
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

/* Checkboxes — "Ship to different address", "Create account", "Privacy".
   Woo wraps them as <p class="form-row form-row-wide create-account ...">
   with the input + label inline. We make the row a flex line so the box
   and label sit on the same baseline. */
.wh-checkout .form-row.woocommerce-form__input-checkbox-row,
.wh-checkout .form-row .woocommerce-form__label-for-checkbox,
.wh-checkout #ship-to-different-address label,
.wh-checkout p.form-row.create-account label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-family: var(--font-body);
	color: var(--ink-2, #2A2A28);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}
.wh-checkout input[type="checkbox"].woocommerce-form__input-checkbox,
.wh-checkout #ship-to-different-address input[type="checkbox"],
.wh-checkout .form-row input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	margin: 0;
	accent-color: var(--accent, #235C68);
	flex-shrink: 0;
	cursor: pointer;
}

/* "Ship to different address" header — Woo emits an <h3> with a checkbox
   inside. Strip the heading style so it reads as a normal toggle row. */
.wh-checkout #ship-to-different-address {
	margin: var(--s-5) 0 0;
}
.wh-checkout #ship-to-different-address h3 {
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 !important;
	color: var(--ink, #1A1F22) !important;
}

/* "Create account" — sits at the end of the billing block. Same toggle treatment. */
.wh-checkout p.form-row.create-account {
	margin: var(--s-4) 0 0;
}
.wh-checkout div.create-account {
	margin-top: var(--s-3);
	padding: var(--s-4);
	background: var(--bg-alt, #F7F7F5);
	border-left: 2px solid var(--accent, #235C68);
}
.wh-checkout div.create-account .form-row { margin-top: 0; }
.wh-checkout div.create-account p {
	font-size: 12px;
	color: var(--ink-muted, #6B6B68);
	margin: var(--s-1) 0 var(--s-3);
}

/* two-column row for first/last name etc. */
.wh-checkout .wh-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* ---------- Review order table — we render items + totals in the right rail, so
 * hide everything here EXCEPT the shipping row Woo uses for method selection.
 * (Can't skip woocommerce_order_review() entirely — it hosts the #order_review
 * div Woo's ajax update_checkout replaces in-place.) ---------- */

/* Break the table out of table-layout so intrinsic sizing doesn't squeeze the
 * visible shipping + payment sections. */
.wh-checkout .woocommerce-checkout-review-order-table,
.wh-checkout .woocommerce-checkout-review-order-table tbody,
.wh-checkout .woocommerce-checkout-review-order-table tfoot,
.wh-checkout .woocommerce-checkout-review-order-table tr,
.wh-checkout .woocommerce-checkout-review-order-table td,
.wh-checkout .woocommerce-checkout-review-order-table th {
	display: block;
	width: 100% !important;
	max-width: none;
}
.wh-checkout .woocommerce-checkout-review-order-table {
	border: 0;
	margin: var(--s-5) 0 0;
	background: transparent !important;
	border-collapse: collapse;
}
/* Hide the rows we don't need — everything except shipping selection. */
.wh-checkout .woocommerce-checkout-review-order-table thead,
.wh-checkout .woocommerce-checkout-review-order-table tbody,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.fee,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.tax-rate,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
	display: none !important;
}
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > th,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping > th {
	display: none !important;
}
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals > td,
.wh-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping > td {
	padding: 0;
	border: 0;
	background: transparent;
}

/* ---------- Shipping methods — radio-as-card ---------- */

.wh-checkout #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wh-checkout #shipping_method li {
	display: block;
	margin-bottom: var(--s-2);
}
.wh-checkout #shipping_method li label {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 18px 22px;
	background: var(--surface);
	border: 1px solid var(--border);
	cursor: pointer;
	font-size: 14px;
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	margin: 0;
}

.wh-checkout #shipping_method .wh-ship-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wh-checkout #shipping_method .wh-ship-name strong {
	font-weight: 500;
	color: var(--ink);
	font-size: 14px;
}
.wh-checkout #shipping_method .wh-ship-name small {
	font-size: 12px;
	color: var(--ink-muted);
	font-weight: 400;
}
.wh-checkout #shipping_method .wh-ship-cost {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wh-checkout #shipping_method li input[type="radio"] {
	appearance: none;
	width: 18px; height: 18px;
	border-radius: 99px;
	border: 1.5px solid var(--ink);
	padding: 3px;
	flex-shrink: 0;
	cursor: pointer;
	background: transparent;
	margin: 0;
	position: relative;
}
.wh-checkout #shipping_method li input[type="radio"]:checked {
	background: transparent;
}
.wh-checkout #shipping_method li input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 99px;
	background: var(--ink);
}
.wh-checkout #shipping_method li input[type="radio"]:checked ~ label,
.wh-checkout #shipping_method li:has(input:checked) label {
	background: var(--accent-soft);
	border-color: var(--accent);
}

/* ---------- Payment methods grid ---------- */

.wh-checkout #order_review,
.wh-checkout #payment {
	width: 100%;
	min-width: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: var(--s-6) 0 0;
}
/* The "Betalen met" heading sits ABOVE the payment list — give it
 * proper rhythm so the heading + list reads as a single grouped unit. */
.wh-checkout__section-heading--payment {
	font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
	font-size: 11px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}
/* Payment selectors — redesigned as full-width radio cards (vertical
 * stack), matching the shipping radio-card pattern. Each card shows
 * the gateway icon + label + sub-line + radio dot on the right. The
 * payment_box (Mollie issuer dropdown, etc.) drops in beneath the
 * active card. */
.wh-checkout #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: 0;
	margin: 0 0 var(--s-5);
	border: 0;
	list-style: none;
	background: transparent;
}
/*
 * V2 payment radio cards — Grid-based layout that places the native
 * `<input type="radio">` next to the `<label>` content (column 2),
 * with `.payment_box` spanning the full width on row 2.
 *
 * `<li>` is the bordered card. The native radio is visible and
 * custom-styled (mirrors the shipping radio pattern) — no JS-class
 * dependency, no doubled `::after` dot, the visual indicator just
 * tracks the input's `:checked` state natively.
 */
.wh-checkout #payment ul.payment_methods li {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label radio"
		"box   box";
	align-items: center;
	padding: 0;
	margin: 0;
	border: 1px solid var(--border, #ECECEA);
	border-radius: 0;
	background: var(--surface, #FFFFFF);
	cursor: pointer;
	list-style: none;
	transition: border-color .15s ease, background .15s ease;
	overflow: hidden;
}
.wh-checkout #payment ul.payment_methods li:hover {
	border-color: var(--ink-muted);
}
.wh-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked),
.wh-checkout #payment ul.payment_methods li.payment_method_selected {
	border-color: var(--accent);
	background: var(--accent-soft);
}

/* Label — column 1, flex row of icon + name + description. */
.wh-checkout #payment ul.payment_methods li > label {
	grid-area: label;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px var(--s-4);
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ink);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
	min-width: 0;
	box-shadow: none;
}
.wh-checkout #payment ul.payment_methods li > label:hover { background: transparent; }

/* Native `<input type="radio">` = the visible indicator (mirrors the
 * shipping-method radio pattern at line 545). Lives in grid column 2
 * via `grid-area: radio`. `appearance: none` strips OS chrome; we draw
 * a custom 18×18 circle, filled inner-disc via `box-shadow: inset` on
 * `:checked` (works in every browser; `::after` on `<input>` is iffy
 * on Safari).
 *
 * `clip: auto` + `clip-path: none` + `opacity: 1` + `pointer-events: auto`
 * are belt-and-suspenders against any prior hide-the-input rule that
 * may still be cached or active in another stylesheet. */
.wh-checkout #payment ul.payment_methods input[type="radio"] {
	grid-area: radio;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: inline-block !important;
	position: static !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	margin: 0 var(--s-4) 0 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--border-strong) !important;
	border-radius: 999px !important;
	background: var(--surface, #FFFFFF) !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease) !important;
	clip: auto !important;
	clip-path: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}
.wh-checkout #payment ul.payment_methods input[type="radio"]:checked {
	border-color: var(--accent) !important;
	background: var(--surface, #FFFFFF) !important;
	box-shadow: inset 0 0 0 4px var(--accent) !important;
}

/* Gateway icon — pinned to the LEFT regardless of source-order (some
 * gateways emit `<img>` before the label text, others after, others
 * wrap it in `<span class="payment-icons">`). `order: -1` covers all
 * three. Reserved icon slot is 56×26 with object-fit: contain so wide
 * brand marks (Bancontact, iDEAL, Mastercard) and narrow ones (PayPal)
 * both render at their natural aspect inside a uniform footprint —
 * keeps the row left edge aligned across all methods. */
.wh-checkout #payment ul.payment_methods li > label img,
.wh-checkout #payment ul.payment_methods li > label .payment-icons,
.wh-checkout #payment ul.payment_methods li > label .payment-icons img {
	order: -1;
	flex-shrink: 0;
	margin: 0;
}
.wh-checkout #payment ul.payment_methods li > label > img,
.wh-checkout #payment ul.payment_methods li > label > .payment-icons {
	width: 56px;
	height: 26px;
	object-fit: contain;
	object-position: left center;
	display: inline-flex;
	align-items: center;
}
.wh-checkout #payment ul.payment_methods li > label > .payment-icons img {
	max-width: 100%;
	max-height: 26px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* iDEAL / SEPA gateways often emit MULTIPLE icons inside .payment-icons —
 * fan them out horizontally with a small gap. */
.wh-checkout #payment ul.payment_methods li > label > .payment-icons {
	gap: 6px;
}

/* Selected state: full-color icon */
.wh-checkout #payment ul.payment_methods li > label img {
	filter: grayscale(20%);
	opacity: .92;
	transition: filter .15s ease, opacity .15s ease;
}
.wh-checkout #payment ul.payment_methods li.payment_method_selected > label img,
.wh-checkout #payment ul.payment_methods li > label:hover img {
	filter: none;
	opacity: 1;
}

/* Old `::after` radio dot on label — RETIRED. The native `<input>` is
 * now the visible (custom-styled) radio. See the input[type="radio"]
 * block above. */

/* WooCommerce ships its own `label::before` pseudo that paints a second
 * radio circle (16px wide, `box-shadow: 0 0 0 2px #000`) — this was the
 * "thick black ring" the user kept seeing alongside our custom-styled
 * native radio. Nuke it for both payment and shipping rows so only our
 * `<input>` renders. Multiple selector variants because Woo has shipped
 * this pseudo across several stylesheets / themes (gutenberg-derived
 * defaults, twentytwentyfour, storefront-woocommerce). */
body .wc_payment_method input.input-radio[name="payment_method"] + label::before,
body .wc_payment_method input[type="radio"] + label::before,
body .wc_payment_method .payment_box input[type="radio"] + label::before,
body .woocommerce-checkout-review-order-table input[type="radio"].shipping_method + label::before,
body #payment ul.payment_methods input[type="radio"] + label::before,
body #payment ul.payment_methods .payment_box input[type="radio"] + label::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
}

/* Method title + optional inline description from the gateway. The
 * raw text node ("Bancontact") + any sibling `<span>` (Mollie's
 * `Pay with iDEAL` description, fee notes, etc.) sit in a flex item
 * that takes the remaining space. */
.wh-checkout #payment ul.payment_methods li > label > * { min-width: 0; }
.wh-checkout #payment ul.payment_methods li > label small,
.wh-checkout #payment ul.payment_methods li > label .wc-payment-method-description {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-muted);
	margin-top: 2px;
	letter-spacing: 0;
}
/* Slideout — Mollie issuer dropdown (KBC, iDEAL, Bancontact issuer pick),
 * Stripe credit-card form, COD note, etc. The active method's payment_box
 * appears INSIDE its <li> below the radio card. We connect them visually:
 * card has a 10px-radius, the box drops in flush below with the top
 * corners squared, so it reads as an extension of the selected card.
 *
 * Animated reveal: max-height + opacity transition so the slide-in feels
 * intentional rather than a JS jump. WC toggles `display:none` via jQuery,
 * so we can't use pure CSS state — but when shown, the transition kicks in
 * smoothly. */
/* Slideout — pinned to grid row 2, spans both columns of the `<li>`.
 * Borderless child of the card; a single 1px accent top divider
 * separates it from the label/radio row above. The card's own border
 * + background frame both elements together. */
.wh-checkout #payment div.payment_box {
	grid-area: box;
	background: transparent;
	color: var(--ink-2);
	border-radius: 0;
	font-size: 13px;
	line-height: 1.55;
	padding: var(--s-4);
	margin: 0;
	border: 0;
	border-top: 1px solid var(--accent);
	box-shadow: none;
	box-sizing: border-box;
	width: 100%;
	animation: wh-payment-box-in .2s ease-out;
}
@keyframes wh-payment-box-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wh-checkout #payment div.payment_box::before { display: none !important; }
.wh-checkout #payment div.payment_box p { margin: 0 0 10px; color: var(--ink-2); }
.wh-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

/* Issuer dropdown / select / text input — same field treatment as the
 * checkout form, so the slideout reads as part of the page. */
.wh-checkout #payment div.payment_box select,
.wh-checkout #payment div.payment_box input[type="text"],
.wh-checkout #payment div.payment_box input[type="email"],
.wh-checkout #payment div.payment_box input[type="tel"] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border-strong, #D6D6D2);
	border-radius: 6px;
	background: var(--surface, #FFFFFF);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wh-checkout #payment div.payment_box select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 36px;
}
.wh-checkout #payment div.payment_box select:focus,
.wh-checkout #payment div.payment_box input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}

/* Issuer label "Selecteer je bank:" in Mollie KBC / iDEAL slideouts —
 * give it a mono caps treatment to match the rest of the checkout. */
.wh-checkout #payment div.payment_box label {
	display: block;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	margin: 0 0 var(--s-2);
}

/* When Mollie renders an issuer LIST (radio list of bank logos) inside
 * payment_box, lay them out as a 2-3 column grid of mini cards. */
.wh-checkout #payment div.payment_box ul.wc_payment_methods,
.wh-checkout #payment div.payment_box ul.payment_methods,
.wh-checkout #payment div.payment_box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 6px;
}
.wh-checkout #payment div.payment_box ul li {
	margin: 0;
	padding: 0;
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 6px;
	transition: border-color .15s ease;
}
.wh-checkout #payment div.payment_box ul li:hover {
	border-color: var(--ink);
}
.wh-checkout #payment div.payment_box ul li label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) 10px;
	margin: 0;
	font: 500 12px/1.2 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	cursor: pointer;
}
.wh-checkout #payment div.payment_box ul li img {
	max-width: 28px;
	max-height: 18px;
	flex-shrink: 0;
	object-fit: contain;
}
/* Terms checkbox row */
.wh-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: var(--s-4) 0 0;
	padding: 14px var(--s-4);
	background: var(--bg, #FFFFFF);
	border-radius: 8px;
	font-size: 13px;
	color: var(--ink-2);
}

/* Shipping row inside the checkout review-order table — drop the
 * default `<th>` label cell and let the radio cards span full
 * width via colspan=2 from cart-shipping.php. */
.wh-checkout .woocommerce-shipping-totals.shipping > th { display: none; }
.wh-checkout .wh-shipping-row .wh-shipping-cell {
	padding: var(--s-2) 0 !important;
	background: transparent !important;
	border: 0 !important;
}
/* On the cart page the same template renders inside our `<dl>` flex
 * layout — strip the table-row chrome that browsers apply to an
 * orphan <tr><td> inside a <div>. */
.wh-summary__row--shipping .wh-shipping-row,
.wh-summary__row--shipping .wh-shipping-cell {
	display: contents;
}

/* Place-order button + its wrapper.
 * Storefront's `.form-row.place-order` wrapper carries border, padding,
 * and the `.button.alt` class on the button itself paints inherited
 * Storefront colors. We nuke the wrapper chrome and force every button
 * property through with `!important` so the V2 accent pill wins the
 * cascade. */
.wh-checkout .form-row.place-order,
body.wh-checkout-page .form-row.place-order {
	margin: var(--s-6) 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.wh-checkout #place_order,
.wh-checkout .woocommerce-checkout #place_order,
.wh-checkout .form-row.place-order #place_order,
body.wh-checkout-page #place_order {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 28px !important;
	height: 56px !important;
	min-height: 56px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	line-height: 1 !important;
	background: var(--accent) !important;
	color: var(--on-ink) !important;
	border: 1px solid var(--accent) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: background .18s var(--ease), border-color .18s var(--ease) !important;
}
.wh-checkout #place_order:hover,
body.wh-checkout-page #place_order:hover {
	background: var(--accent-ink) !important;
	border-color: var(--accent-ink) !important;
	color: var(--on-ink) !important;
}
.wh-checkout #place_order:disabled,
.wh-checkout #place_order[aria-disabled="true"],
body.wh-checkout-page #place_order:disabled {
	opacity: .55;
	cursor: not-allowed !important;
}

/* Privacy-policy text — Woo emits this as `.woocommerce-privacy-policy-text`
 * directly above the place-order button. Default WC styling renders it as
 * stock dark sans-serif body copy — too loud and visually competes with
 * the place-order CTA. V2 register: small mono-flavored helper line,
 * ink-muted, link uses the editorial underline pattern (1px ink line,
 * accent on hover). */
.wh-checkout .woocommerce-privacy-policy-text,
body.wh-checkout-page .woocommerce-privacy-policy-text {
	margin: var(--s-4) 0 0 !important;
	padding: var(--s-3) 14px !important;
	background: var(--bg-alt) !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;
}
.wh-checkout .woocommerce-privacy-policy-text p,
body.wh-checkout-page .woocommerce-privacy-policy-text p {
	margin: 0 !important;
	color: var(--ink-muted) !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
}
.wh-checkout .woocommerce-privacy-policy-text a,
body.wh-checkout-page .woocommerce-privacy-policy-text a {
	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;
}
.wh-checkout .woocommerce-privacy-policy-text a:hover,
body.wh-checkout-page .woocommerce-privacy-policy-text a:hover {
	color: var(--accent) !important;
	text-decoration-color: var(--accent) !important;
}

/* ---------- Order summary (right rail) ---------- */

.wh-order-summary {
	position: sticky;
	top: 120px;
	align-self: start;
}
.wh-order-summary__card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: var(--s-5);
}
.wh-order-summary__title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-4);
}
.wh-order-summary__item {
	display: flex;
	gap: 14px;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--s-4);
}
.wh-order-summary__item:last-of-type { border-bottom: 0; margin-bottom: 0; }
.wh-order-summary__thumb {
	width: 80px;
	aspect-ratio: 4 / 5;
	background: var(--surface-product-fallback);
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}
.wh-order-summary__thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.wh-order-summary__name {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-2);
}
.wh-order-summary__name-city {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: -0.02em;
}
.wh-order-summary__price { font-size: 14px; }
.wh-order-summary__sub { font-style: italic; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.wh-order-summary__chips {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.wh-order-summary__chip {
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 2px 6px;
	border: 1px solid var(--border);
	color: var(--ink-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.wh-order-summary__actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	font-size: 11px;
	color: var(--ink-muted);
}
.wh-order-summary__actions a {
	color: var(--ink-muted);
	border-bottom: 1px solid var(--border-strong);
	text-decoration: none;
	padding-bottom: 1px;
}

.wh-order-summary__totals div {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 5px 0;
	color: var(--ink-2);
}
.wh-order-summary__totals .mono { font-family: var(--font-mono); }
.wh-order-summary__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.wh-order-summary__grand-label { font-weight: 500; }
.wh-order-summary__grand-amount { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; }
.wh-order-summary__grand-tax { font-size: 11px; color: var(--ink-muted); text-align: right; }

/* Relocated coupon form (was on `before_checkout_form`, now in the
   order-summary rail under the totals card). Spec:
   inc/checkout-layout.php + Inline Form Error Inventory §1. */
.wh-order-summary__voucher {
	margin-top: var(--s-3);
}
.wh-order-summary__voucher .woocommerce-form-coupon-toggle,
.wh-order-summary__voucher .woocommerce-info {
	background: transparent;
	border: 0;
	border-left: 0;
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-family: var(--font-body);
	color: var(--ink-muted);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
}
.wh-order-summary__voucher .woocommerce-info::before {
	display: none;
}
.wh-order-summary__voucher .showcoupon,
.wh-order-summary__voucher a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 500;
}
.wh-order-summary__voucher .showcoupon:hover,
.wh-order-summary__voucher a:hover {
	color: var(--accent);
}
.wh-order-summary__voucher .checkout_coupon {
	margin: var(--s-3) 0 0;
	padding: 14px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	display: grid;
	gap: 10px;
}
.wh-order-summary__voucher .checkout_coupon p {
	margin: 0;
}
.wh-order-summary__voucher .checkout_coupon p.form-row {
	width: 100%;
	float: none;
	padding: 0;
}
.wh-order-summary__voucher .checkout_coupon input[type="text"] {
	width: 100%;
	padding: 10px var(--s-3);
	font-size: 13px;
	font-family: var(--font-body);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--ink);
	outline: 0;
	border-radius: 0;
}
.wh-order-summary__voucher .checkout_coupon input[type="text"]:focus {
	border-color: var(--ink);
}
.wh-order-summary__voucher .checkout_coupon button[type="submit"] {
	width: 100%;
	padding: 11px var(--s-4);
	background: var(--ink);
	color: var(--surface);
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
}
.wh-order-summary__voucher .checkout_coupon button[type="submit"]:hover {
	background: var(--ink-2);
	border-color: var(--ink-2);
}
.wh-order-summary__voucher .checkout_coupon .clear {
	display: none;
}

.wh-order-summary__box {
	margin-top: var(--s-4);
	padding: var(--s-4);
	background: var(--bg-alt);
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.6;
}
.wh-order-summary__box-title {
	font-weight: 500;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wh-order-summary__box ul {
	margin: var(--s-2) 0 0;
	padding-left: 18px;
	color: var(--ink-muted);
}

/* Cart-page CSS removed — the custom cart.php template was reverted to
 * Storefront's default, so all `.wh-cart`-prefixed selectors no longer
 * match anything in the DOM. Storefront's own cart styling now drives
 * the cart page; brand accents (terracotta button hover, notices) come
 * from `tokens.css` and `shop.css` and apply automatically. */

/* Woo notice styling is owned globally by tokens.css — see the
 * `.woocommerce-notices-wrapper` block there for the canonical Wandhaus
 * notice card. The cart/checkout-specific overrides that used to live here
 * conflicted with that global treatment and have been removed. */

/* ─────────────────────────────────────────────────────────────────
 * Cart page (Wandhaus) — properly designed.
 *
 * Layout:
 *   • Header band (title · count · continue-shopping)
 *   • 2-column grid (>900px): items + coupon (left) · summary (right, sticky)
 *   • Mobile: single column, items as stacked cards
 *
 * The cart form uses Woo's stock <table> structure so plugin hooks keep
 * firing — we override the table's display to look like spaced cards
 * rather than a tabular layout. Every WC `do_action` and the canonical
 * cart_item meta classes are preserved.
 * ───────────────────────────────────────────────────────────────── */

.wh-cart {
	/* V2.3 transactional cap — capped at --page-max-content (1440px) so
	 * the cart row doesn't stretch past readable width on QHD / 4K
	 * monitors. Header + footer stay full-bleed; this cap only applies
	 * to the cart contents. Mr Porter / Aritzia / NAP transactional
	 * register. */
	max-width: var(--page-max-content);
	width: 100%;
	margin: clamp(var(--s-5), 3vw, var(--s-7)) auto clamp(var(--s-56), 8vw, var(--s-9));
	padding: 0 var(--page-pad);
	font-family: var(--font-body);
	color: var(--ink);
	display: flex;
	flex-direction: column;
	gap: 28px;
	box-sizing: border-box;
}
.wh-cart, .wh-cart *,
.wh-cart *::before, .wh-cart *::after {
	box-sizing: border-box;
}
.wh-cart > * { min-width: 0; max-width: 100%; width: 100%; }
@media (max-width: 1023px) {
	/* 20px gutter (not the 16px base --page-pad) so the cart content width
	   matches the account/checkout/homepage band (335px @375) now that
	   #wh-main no longer adds an outer gutter. */
	.wh-cart { margin: var(--s-4) 0 var(--s-6); gap: var(--s-20); padding-inline: var(--s-20); }
}

/* Single-column means the right rail isn't sticky / floating anymore —
 * it just stacks below the cart items, full-width. */
.wh-cart__summary { position: static !important; width: 100%; }

/* Belt-and-suspenders: hide the legacy plugin floating banner. The theme
 * also remove_action()s it, but CSS guards against an older cached
 * plugin or a re-introduced hook. The wall preview now lives inside
 * each `.wh-cart-group__header` via cart.php. */
.wccb-cart-banner { display: none !important; }

/* ── Header ─────────────────────────────────────────────────────── */
.wh-cart__head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title    continue"
		"count    continue";
	row-gap: var(--s-1);
	column-gap: var(--s-5);
	align-items: end;
	padding: 0 0 var(--s-5);
	border-bottom: 1px solid var(--border);
}
.wh-cart__title {
	grid-area: title;
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
	color: var(--ink);
	font-weight: 600;
}
.wh-cart__count {
	grid-area: count;
	margin: 0;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.wh-cart__continue {
	grid-area: continue;
	font-size: 13px;
	color: var(--ink-muted);
	text-decoration: none;
	transition: color .15s ease;
	white-space: nowrap;
}
.wh-cart__continue:hover { color: var(--ink); }
@media (max-width: 639px) {
	.wh-cart__head {
		grid-template-columns: 1fr;
		grid-template-areas: "title" "count" "continue";
		row-gap: var(--s-2);
	}
	.wh-cart__continue { justify-self: start; }
}

/* ── Section primitives (used by every cart section) ─────────────── */
.wh-cart__section {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: block;
}

.wh-cart__section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	margin: 0 0 var(--s-4);
}
.wh-cart__section-title {
	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;
}
.wh-cart__section-count {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	color: var(--ink-muted);
}

/* ── Items table styled as cards ─────────────────────────────────── */
.wh-cart__form {
	margin: 0;
	min-width: 0;
	max-width: 100%;
	overflow: hidden; /* contains the table even if a single cell tries to overflow */
}

/* ──────────────────────────────────────────────────────────────────
 * Cart items — V2.2 grid-based card layout
 *
 * Replaces the prior <table> approach. Each <article class="wh-cart-group">
 * holds an editorial header (wall thumb + meta + group total) followed
 * by a <ul class="wh-cart-group__items"> of <li class="wh-cart-item">
 * rows. Each row is a 6-column CSS grid: thumb · body · price · qty ·
 * subtotal · remove. Plugin-compat classes (.cart_item, .product-name,
 * etc.) stay on every node so Woo + WCCB hooks keep matching.
 * ────────────────────────────────────────────────────────────────── */
.wh-cart__items { width: 100%; }

/* Group card — collage parent ──────────────────────────────────── */
.wh-cart-group {
	background: var(--surface);
	border: 1px solid var(--border);
	margin: 0 0 var(--s-4);
}
.wh-cart-group--loose { /* no header — items only */
	background: transparent;
	border: 0;
	padding: 0;
}

.wh-cart-group__header {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: var(--s-5);
	align-items: center;
	padding: var(--s-5) 28px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-alt);
}
.wh-cart-group__thumb {
	width: 120px;
	height: 120px;
	background: var(--bg);
	border: 1px solid var(--border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wh-cart-group__thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.wh-cart-group__thumb-fallback { width: 100%; height: 100%; }

.wh-cart-group__meta { min-width: 0; }
.wh-cart-group__eyebrow { margin-bottom: 6px; }
.wh-cart-group__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 1.8vw, 28px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
	font-weight: 400;
	color: var(--ink);
}
.wh-cart-group__sub {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 6px 0 0;
}
.wh-cart-group__edit {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	text-decoration: none;
}
.wh-cart-group__edit:hover { color: var(--accent); border-bottom-color: var(--accent); }

.wh-cart-group__total { text-align: right; white-space: nowrap; }
.wh-cart-group__total-label {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: var(--s-1);
}
.wh-cart-group__total-amount {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.6vw, 26px);
	letter-spacing: -0.015em;
	color: var(--ink);
	line-height: 1;
}

/* Frame children list ──────────────────────────────────────────── */
.wh-cart-group__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wh-cart-item {
	display: grid;
	grid-template-columns: 96px 1fr 90px 110px 100px 32px;
	gap: var(--s-20);
	align-items: center;
	padding: var(--s-20) 28px;
	border-bottom: 1px solid var(--border);
}
.wh-cart-item:last-child { border-bottom: 0; }
.wh-cart-group--loose .wh-cart-item {
	background: var(--surface);
	border: 1px solid var(--border);
	margin-bottom: var(--s-3);
	padding: var(--s-20) var(--s-5);
}
.wh-cart-group--loose .wh-cart-item:last-child { margin-bottom: 0; }

/* Hide the per-cell mobile labels on desktop — they only show on stacked mobile. */
.wh-cart-item__cell-label { display: none; }

/* Thumb */
.wh-cart-item__thumb {
	width: 96px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wh-cart-item__thumb img,
.wh-cart-item__thumb .wh-cart-thumb {
	display: block;
	width: 96px;
	height: 96px;
	max-width: 96px;
	object-fit: cover;
	background: var(--bg-alt);
	border: 1px solid var(--border);
}
.wh-cart-item__thumb a { display: inline-block; line-height: 0; }

/* Body — name + meta */
.wh-cart-item__body { min-width: 0; }
.wh-cart-item__index {
	display: block;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-1);
}
.wh-cart-item__name a,
.wh-cart-item__name strong,
.wh-cart-item__name {
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: none;
	font-weight: 400;
	line-height: 1.25;
}
.wh-cart-item__name a { display: inline-block; }
.wh-cart-item__name a:hover { color: var(--accent); }

/* Per-item meta (Materiaal, Formaat, customer picks) */
.wh-cart-item__body dl.variation,
.wh-cart-item__body .wc-item-meta {
	margin: var(--s-2) 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--ink-muted);
	line-height: 1.55;
	list-style: none;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 3px;
}
.wh-cart-item__body dl.variation dt,
.wh-cart-item__body .wc-item-meta strong {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	white-space: nowrap;
}
.wh-cart-item__body dl.variation dd,
.wh-cart-item__body .wc-item-meta li,
.wh-cart-item__body .wc-item-meta p {
	margin: 0;
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 400;
	font-family: var(--font-body);
}
.wh-cart-item__body .wc-item-meta li { display: contents; }

/* Price + subtotal cells */
.wh-cart-item__price,
.wh-cart-item__subtotal {
	text-align: right;
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 14px;
}
.wh-cart-item__price { color: var(--ink-muted); }
.wh-cart-item__subtotal { color: var(--ink); font-weight: 500; }

/* Qty cell */
.wh-cart-item__qty { text-align: center; }
.wh-cart-item__qty .quantity { display: inline-flex; align-items: center; }
.wh-cart-item__qty .quantity input[type="number"],
.wh-cart-item__qty .qty {
	width: 64px;
	height: 38px;
	padding: var(--s-2) 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	font: 400 14px/1 var(--font-body);
	color: var(--ink);
	text-align: center;
	-moz-appearance: textfield;
}
.wh-cart-item__qty input[type="number"]::-webkit-outer-spin-button,
.wh-cart-item__qty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remove button */
/* Remove button — Lucide X SVG via the `woocommerce_cart_item_remove_link`
 * filter (see inc/woo-copy.php). Storefront's parent theme paints the
 * stock `&times;` glyph with high-specificity selectors + a coloured
 * dot; we beat the cascade with `body.wh-cart-page` prefix + `!important`
 * on every property. The wrapper is still `<a class="remove">` so Woo's
 * remove-from-cart URL handler keeps working. */
.wh-cart-item__remove { text-align: center; }
body.wh-cart-page .wh-cart-item__remove a.remove,
body.wh-checkout-page .wh-cart-item__remove a.remove,
.wh-cart-item__remove a.remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	color: var(--ink-muted) !important;
	background: var(--bg-alt) !important;
	border: 1px solid var(--border) !important;
	border-radius: 50% !important;
	font-size: 0 !important;          /* nukes Storefront's `×` glyph */
	line-height: 1 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease) !important;
}
body.wh-cart-page .wh-cart-item__remove a.remove::before,
body.wh-cart-page .wh-cart-item__remove a.remove::after,
.wh-cart-item__remove a.remove::before,
.wh-cart-item__remove a.remove::after {
	content: none !important;
	display: none !important;
}
.wh-cart-item__remove a.remove svg {
	display: block !important;
	color: currentColor;
}
body.wh-cart-page .wh-cart-item__remove a.remove:hover,
.wh-cart-item__remove a.remove:hover {
	background: var(--err-soft) !important;
	border-color: var(--err) !important;
	color: var(--err) !important;
}

/* Tablet — collapse price+qty+subtotal into a stacked right-side block */
@media (max-width: 1023px) {
	.wh-cart-group__header {
		grid-template-columns: 96px 1fr;
		gap: var(--s-4);
		padding: var(--s-20);
	}
	.wh-cart-group__thumb { width: 96px; height: 96px; }
	.wh-cart-group__total {
		grid-column: 1 / -1;
		text-align: left;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--s-3);
		padding-top: var(--s-3);
		border-top: 1px solid var(--border);
	}
	.wh-cart-group__total-label { margin-bottom: 0; }

	.wh-cart-item {
		grid-template-columns: 80px 1fr;
		gap: var(--s-4);
		padding: var(--s-4) var(--s-20);
	}
	.wh-cart-item__thumb { width: 80px; }
	.wh-cart-item__thumb img,
	.wh-cart-item__thumb .wh-cart-thumb { width: 80px; height: 80px; max-width: 80px; }
	.wh-cart-item__body { grid-column: 2; }
	.wh-cart-item__price,
	.wh-cart-item__qty,
	.wh-cart-item__subtotal {
		grid-column: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
	.wh-cart-item__cell-label {
		display: inline-block;
		font-size: 10px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--ink-muted);
	}
	.wh-cart-item__remove {
		grid-column: 2;
		justify-self: end;
		margin-top: -4px;
	}
}
@media (max-width: 639px) {
	.wh-cart-group__header { padding: var(--s-4); }
	.wh-cart-item { padding: 14px var(--s-4); gap: var(--s-3); grid-template-columns: 72px 1fr; }
	.wh-cart-item__thumb { width: 72px; }
	.wh-cart-item__thumb img,
	.wh-cart-item__thumb .wh-cart-thumb { width: 72px; height: 72px; max-width: 72px; }
}

/* ── Below-items actions row (coupon + update) ──────────────────── */
.wh-cart__actions {
	margin-top: var(--s-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: space-between;
	align-items: flex-start;
}

.wh-cart__coupon {
	flex: 1 1 280px;
	max-width: 360px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface, #FFFFFF);
}
.wh-cart__coupon[open] { border-color: var(--border-strong, #D6D6D2); }
.wh-cart__coupon summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.wh-cart__coupon summary::-webkit-details-marker { display: none; }
.wh-cart__coupon summary::after {
	content: "▾";
	margin-left: auto;
	color: var(--ink-muted);
	font-size: 10px;
	transition: transform .2s ease;
}
.wh-cart__coupon[open] summary::after { transform: rotate(180deg); }
.wh-cart__coupon summary svg { color: var(--ink-muted); flex-shrink: 0; }
.wh-cart__coupon summary:hover { color: var(--accent); }
.wh-cart__coupon summary:hover svg { color: var(--accent); }

.wh-cart__coupon-row {
	display: flex;
	gap: 6px;
	padding: 0 14px 14px;
}
.wh-cart__coupon-row input[type="text"] {
	flex: 1 1 0;
	min-width: 0;
	height: 38px;
	padding: 0 var(--s-3);
	border: 1px solid var(--border-strong, #D6D6D2);
	border-radius: 4px;
	font: 400 13px/1 var(--font-body);
	background: var(--surface, #FFFFFF);
}
.wh-cart__coupon-row button[name="apply_coupon"] {
	height: 38px;
	padding: 0 var(--s-4);
	border: 1px solid var(--ink);
	border-radius: 4px;
	background: var(--ink);
	color: var(--bg);
	font: 500 13px/1 var(--font-body);
	cursor: pointer;
	transition: background .15s ease;
}
.wh-cart__coupon-row button[name="apply_coupon"]:hover { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }

.wh-cart__update {
	height: 38px;
	padding: 0 18px;
	background: transparent;
	color: var(--ink-muted);
	border: 1px solid var(--border-strong, #D6D6D2);
	border-radius: 999px;
	font: 500 13px/1 var(--font-body);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.wh-cart__update:hover {
	color: var(--ink);
	border-color: var(--ink);
}

/* ── Right rail: order summary + trust signals ────────────────── */
.wh-cart__summary { display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 1024px) {
	.wh-cart__summary { position: sticky; top: 16px; align-self: start; }
}

.wh-cart__summary .cart-collaterals { display: contents; }
/* Hide cross-sells inside the summary rail — they steal focus from the
 * checkout CTA. Brought back as a full-width section below the grid via
 * a separate CSS rule (see end of this block). */
.wh-cart__summary .cross-sells { display: none; }

/* ── Order summary card ─────────────────────────────────────────── */
.wh-summary {
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--s-5) var(--s-5) var(--s-20);
	margin: 0;
	min-width: 0;
	max-width: 100%;
	width: 100%; /* match .wh-cart__section--items width — without this the card was sizing to its content */
	box-sizing: border-box;
	display: block;
	overflow: hidden; /* contain children that hit the edge */
}
.wh-summary, .wh-summary * { box-sizing: border-box; }
/* The cart-collaterals wrapper was sizing the summary differently from
 * the items section. `display: contents` makes it a visual no-op so
 * `.wh-summary` is sized by `.wh-cart__section--summary` directly. */
.wh-cart__section--summary > .cart-collaterals { display: contents; }
.wh-cart__section--summary > .cart-collaterals > .wh-summary { width: 100%; max-width: 100%; }

.wh-summary__title {
	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 var(--s-4);
}

/* Rows inside the dl. Each row is a flex with label left, value right. */
.wh-summary__rows {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.wh-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-3) 0;
	font-size: 14px;
	border-bottom: 1px dashed var(--border);
}
.wh-summary__row:last-child { border-bottom: 0; }
.wh-summary__row dt {
	margin: 0;
	color: var(--ink-2);
	font-weight: 400;
	min-width: 0;
	overflow-wrap: anywhere;
}
.wh-summary__row dd {
	margin: 0;
	color: var(--ink);
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Discount row — green text + remove × inline */
.wh-summary__row--discount dt,
.wh-summary__row--discount dd {
	color: var(--ok, #2F6B43);
}
.wh-summary__row--discount dt a {
	margin-left: 6px;
	color: var(--ink-muted);
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.wh-summary__row--discount dt a:hover { color: var(--err, #B23121); }

/* Tax row — muted, no emphasis */
.wh-summary__row--tax dt,
.wh-summary__row--tax dd { color: var(--ink-muted); font-size: 13px; }
.wh-summary__row--tax dt small { color: var(--ink-muted); font-weight: 400; }

/* Shipping row — value can be a method label, a price, or a multi-method
 * card list. Override flex baseline alignment so the radio cards inside
 * `dd` line up under the label not next to it. */
.wh-summary__row--shipping {
	flex-direction: column;
	align-items: stretch;
	gap: var(--s-2);
}
.wh-summary__row--shipping > dt {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
}
.wh-summary__row--shipping > dd { width: 100%; text-align: left; }
.wh-summary__shipping-pending {
	color: var(--ink-muted);
	font-style: italic;
	font-weight: 400;
	text-align: right;
}

/* Inner shipping container (override of cart-shipping.php) */
.wh-summary__shipping-inner { width: 100%; }
.wh-shipping__methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Single option = nothing to choose → render as a plain summary row (label
   left, price right), matching the Subtotaal/Totaal rows — NOT a selectable
   card. Two reasons this needs the `.is-active` selector + a grid override:
   (1) the sole method is auto-chosen, so `.is-active` (border+bg) would
       otherwise re-draw the card outline over this rule (equal specificity,
       later in the file → it won). The explicit `.is-active` variant here
       (higher specificity) neutralises it.
   (2) the single case uses `<input type="hidden">` (display:none), which drops
       out of the 3-column grid → without resetting to 2 columns the title sits
       in a narrow auto track and the price floats mid-row instead of flush
       right. */
.wh-shipping__methods--single .wh-shipping__method label,
.wh-shipping__methods--single .wh-shipping__method.is-active label {
	grid-template-columns: minmax(0, 1fr) auto;
	cursor: default;
	border-color: transparent;
	background: transparent;
	padding: 6px 0;
}
.wh-shipping__method { margin: 0; }
.wh-shipping__method label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-3);
	padding: 10px var(--s-3);
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	background: var(--bg, #FFFFFF);
	transition: border-color .15s ease, background .15s ease;
	min-width: 0;
	max-width: 100%;
}
.wh-shipping__method.is-active label {
	border-color: var(--ink);
	background: var(--surface, #FFFFFF);
}
.wh-shipping__method label:hover { border-color: var(--border-strong, #D6D6D2); }
.wh-shipping__method input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	cursor: pointer;
}
.wh-shipping__method-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
}
.wh-shipping__method-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	overflow-wrap: anywhere;
	min-width: 0;
}
.wh-shipping__method-sub {
	font-size: 11px;
	color: var(--ink-muted);
	overflow-wrap: anywhere;
	min-width: 0;
}
.wh-shipping__method-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wh-shipping__destination {
	margin: var(--s-2) 0 0;
	font-size: 11px;
	color: var(--ink-muted);
	line-height: 1.5;
}
.wh-shipping__destination strong { color: var(--ink-2); font-weight: 500; }
.wh-shipping__pending {
	margin: 0;
	font-size: 13px;
	color: var(--ink-muted);
	font-style: italic;
}

/* Shipping calculator (built-in WC widget) — when enabled */
.wh-summary .shipping-calculator-button {
	display: inline-block;
	margin-top: var(--s-2);
	font-size: 12px;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wh-summary .shipping-calculator-form {
	margin-top: var(--s-3);
	padding: var(--s-3);
	background: var(--bg, #FFFFFF);
	border-radius: 6px;
}
.wh-summary .shipping-calculator-form .button {
	background: var(--ink);
	color: var(--bg);
	border-radius: 4px;
	padding: var(--s-2) 14px;
	font-size: 12px;
	border: 0;
	cursor: pointer;
}

/* ── The Total — display font, big, with VAT subline ──────────────── */
.wh-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s-4);
	margin: var(--s-4) 0 0;
	padding: var(--s-4) 0 0;
	border-top: 2px solid var(--ink);
}
.wh-summary__total-label {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.wh-summary__total-value {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-width: 0;
	overflow-wrap: anywhere;
}
.wh-summary__total-value .woocommerce-Price-amount,
.wh-summary__total-value bdi { font: inherit; }
.wh-summary__total-value .includes_tax,
.wh-summary__total-value small.tax_label,
.wh-summary__total-value small.includes_tax {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 400;
	color: var(--ink-muted);
	margin-top: 2px;
	letter-spacing: 0;
	text-align: right;
}

/* Estimated delivery (Wandhaus-injected line) */
/* Delivery ETA — neutral info pill (brand guide §16, V2.3).
 * Reads as "fyi shipping window", not as an error alert. Warm-neutral
 * --info-soft surface + 2px --ink-muted left-bar + muted icon/eyebrow.
 * The accent (terracotta) was too red in this context — read as
 * error/warning. Mr Porter / Aritzia shipping-pill register: quiet
 * supplemental info, date in --ink stays the only emphasized element. */
.wh-delivery-eta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 14px 0;
	padding: var(--s-3) 14px;
	background: var(--info-soft);
	border: 1px solid var(--border);
	border-left: 2px solid var(--ink-muted);
	border-radius: 0;
}
.wh-delivery-eta__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-muted);
}
.wh-delivery-eta__icon svg { display: block; width: 16px; height: 16px; }
.wh-delivery-eta__body {
	flex: 1 1 auto;
	min-width: 0;
}
.wh-delivery-eta__eyebrow {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 2px;
	font-weight: 500;
	display: inline;
}
/* Date sits inline next to the eyebrow on one row; sub-line wraps below. */
.wh-delivery-eta__date {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--ink);
	font-weight: 600;
	margin: 0 0 0 6px;
	display: inline;
}
.wh-delivery-eta__sub {
	display: block;
	font-size: 11px;
	color: var(--ink-muted);
	line-height: 1.4;
	margin: 2px 0 0;
}

/* Proceed-to-checkout button */
.wh-summary .wc-proceed-to-checkout {
	display: block;
	margin: var(--s-4) 0 0;
	padding: 0;
}
.wh-summary .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 var(--s-5);
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-ink) !important;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid var(--accent);
	transition: background .15s ease, border-color .15s ease;
}
.wh-summary .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-ink) !important;
}
.wh-summary .wc-proceed-to-checkout a.checkout-button::after {
	content: "→";
	margin-left: 10px;
	font-size: 16px;
	transition: transform .15s ease;
}
.wh-summary .wc-proceed-to-checkout a.checkout-button:hover::after { transform: translateX(3px); }

/* ── Payment-methods strip — dynamic gateway icons ─────────────────
 *
 * `cart-totals.php` calls `wh_payment_gateway_icons()` which returns one
 * entry per WC gateway that is (a) enabled in Settings → Payments and
 * (b) available for the current cart. Each `<li>` holds the gateway's
 * own `get_icon()` HTML — for Mollie that's their official brand SVG /
 * PNG. We render in white pills (border + radius) at 22px height so the
 * Mollie brand artwork stays sharp + on-brand. Empty list → block hidden.
 * ────────────────────────────────────────────────────────────────── */
.wh-summary__payments {
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed var(--border);
}
.wh-summary__payments-label {
	display: block;
	font-size: 11px;
	color: var(--ink-muted);
	margin: 0 0 var(--s-2);
	letter-spacing: .04em;
}
.wh-summary__payment-icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}
.wh-summary__payment-icons li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
}
/* Gateway-supplied <img> — heights set so iDEAL / Bancontact / Visa /
 * Mastercard / PayPal / Klarna / Apple Pay all sit visually balanced
 * at the same baseline. `width: auto` preserves each gateway's
 * aspect-ratio. The `!important` defeats parent-theme `.wc img` rules
 * that otherwise force max-width: 100% width fills. */
.wh-summary__payment-icons li img {
	display: block !important;
	height: 18px !important;
	width: auto !important;
	max-width: 60px !important;
	margin: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}
/* Some gateways (iDEAL banks, SEPA) emit multiple imgs in one
 * <span class="payment-icons">. Only the first is shown to keep the
 * strip visually clean — the issuer slideout at checkout shows the
 * rest. */
.wh-summary__payment-icons li .payment-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
}
.wh-summary__payment-icons li .payment-icons img:nth-child(n+2) { display: none !important; }

/* Legacy text-pill fallback for text content (no gateway icons configured) */
.wh-summary__payment-icons li > span {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-2);
	font-weight: 500;
	white-space: nowrap;
}

/* ── Trust card — 4-up grid with icon + strong title + sub-line ─── */
.wh-cart__section--trust {
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--s-20);
}
.wh-cart__section--trust .wh-cart__trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wh-cart__section--trust .wh-cart__trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
}
.wh-cart__section--trust .wh-cart__trust li > svg {
	flex-shrink: 0;
	color: var(--accent);
	margin-top: 2px;
}
.wh-cart__section--trust .wh-cart__trust li > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.wh-cart__section--trust .wh-cart__trust li strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.2;
}
.wh-cart__section--trust .wh-cart__trust li span,
.wh-cart__section--trust .wh-cart__trust li a {
	font-size: 12px;
	color: var(--ink-muted);
	line-height: 1.4;
	text-decoration: none;
}
.wh-cart__section--trust .wh-cart__trust li a {
	border-bottom: 1px solid currentColor;
	transition: color .15s ease;
}
.wh-cart__section--trust .wh-cart__trust li a:hover {
	color: var(--accent);
}

/* Legacy single-column trust signal list (kept for non-cart pages) */
.wh-cart__trust:not(.wh-cart__section--trust .wh-cart__trust) {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 6px var(--s-1) 0;
	list-style: none;
}
.wh-cart__trust li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 12px;
	color: var(--ink-muted);
	margin: 0;
}
.wh-cart__trust li svg { flex-shrink: 0; color: var(--ink-muted); }

/* ── Cross-sells (full width below the grid) ───────────────────── */
.wh-cart .cross-sells {
	grid-column: 1 / -1;
	margin-top: var(--s-7);
	padding-top: var(--s-6);
	border-top: 1px solid var(--border);
}
.wh-cart .cross-sells h2 {
	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 18px;
}
.wh-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wh-cart .cross-sells ul.products li.product { padding: 0; margin: 0; }

/* ── Empty cart — design system §10 "Empty state · cart" ───────────
 * Spec: 48px 20px padding, 48×48 ink-muted icon, Fraunces 22px title
 * (weight 400 + −0.01em ls + 6px 0 4px margin), 13px ink-muted lede
 * with 280px max-width, 8px gap, btn-sm action sizing. The button
 * variants (btn-ghost, btn-accent, btn-sm) are owned by tokens.css —
 * we only handle the layout/empty-state-specific overrides here. */
.wh-cart--empty {
	max-width: none;
	margin: 0 auto;
	padding: var(--s-7) var(--s-20);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wh-cart-empty__icon {
	width: 48px;
	height: 48px;
	margin: 0;
	color: var(--ink-muted);
	display: block;
}
.wh-cart-empty__title {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 6px 0 var(--s-1);
	color: var(--ink);
	font-weight: 400;
}
.wh-cart-empty__lede {
	font-size: 13px;
	color: var(--ink-muted);
	line-height: 1.55;
	margin: 0 auto var(--s-4);
	max-width: 280px;
}
.wh-cart-empty__actions {
	display: inline-flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
}

/* Mobile-only fixes for cart actions (coupon row + update button).
 * Item-row mobile layout is handled inside the .wh-cart-item ruleset above. */
@media (max-width: 1023px) {
	.wh-cart__actions { flex-direction: column; align-items: stretch; }
	/* `flex: 0 0 auto` resets the base `flex: 1 1 280px`: in this column flex
	   the 280px flex-basis was being read as the cross-... no, as the MAIN-axis
	   (height) size, so the collapsed <details> rendered as a ~280px-tall empty
	   box. Content-height instead → collapsed = just the summary, expanded =
	   summary + input row. `align-items:stretch` still gives it full width. */
	.wh-cart__coupon { max-width: none; flex: 0 0 auto; }
	.wh-cart__update { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
 * Order received / thank-you page (`/checkout/order-received/{id}/`)
 *
 * Layout:
 *   • Centered hero (terracotta check icon · eyebrow · display title · lede)
 *   • Order overview card — meta, status pill, status tracker
 *   • "Wat er nu gebeurt" sidecar — numbered steps + CTA buttons + support link
 *
 * Single-column responsive — meta + tracker grid above 700px, two-card grid
 * above 900px. Self-contained: doesn't depend on `wh-account__*` styling
 * (which lives elsewhere) so the page renders correctly even when the
 * account stylesheet isn't loaded.
 * ───────────────────────────────────────────────────────────────── */

.wh-thankyou {
	max-width: var(--page-max-content);
	margin: clamp(var(--s-6), 5vw, 80px) auto clamp(var(--s-8), 9vw, 128px);
	padding: 0 var(--page-pad);
	font-family: var(--font-body);
	color: var(--ink);
	box-sizing: border-box;
}
.wh-thankyou, .wh-thankyou * { box-sizing: border-box; }
@media (max-width: 1023px) {
	/* 20px gutter to match account/checkout/cart/homepage (335px @375) now
	   that #wh-main no longer adds an outer gutter. */
	.wh-thankyou { padding-inline: var(--s-20); }
}
@media (max-width: 639px) {
	.wh-thankyou { margin: var(--s-5) auto var(--s-7); }
}

/* Hero band — centered icon + eyebrow + title + lede. */
.wh-thankyou__head {
	text-align: center;
	margin: 0 0 var(--s-40);
	padding: var(--s-6) 0 0;
}
.wh-thankyou__hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--bg, #FFFFFF);
	color: var(--accent, #235C68);
	margin: 0 auto var(--s-5);
	box-shadow: 0 6px 24px rgba(194, 74, 42, .12), 0 1px 2px rgba(14, 14, 12, .04);
}
.wh-thankyou__hero-icon svg {
	width: 56px;
	height: 56px;
	animation: wh-thankyou-pop .35s cubic-bezier(.4, 0, .2, 1) .1s both;
}
@keyframes wh-thankyou-pop {
	from { transform: scale(.6); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}
.wh-thankyou__eyebrow {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-3);
	font-weight: 500;
}
.wh-thankyou__title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 80px);
	letter-spacing: -0.025em;
	line-height: 1;
	margin: 0 0 var(--s-20);
	font-weight: 400;
	color: var(--ink);
}
.wh-thankyou__title em { font-style: italic; font-weight: 400; }
.wh-thankyou__lede {
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 540px;
	margin: 0 auto;
}

/* Failed-payment block — ink-on-cream with a clear retry CTA */
.wh-thankyou__failed {
	margin: var(--s-5) auto 0;
	max-width: 540px;
	padding: var(--s-5);
	background: var(--err-soft);
	border: 1px solid var(--err-soft-border);
	border-radius: 12px;
	color: var(--err-soft-ink);
	text-align: center;
}
.wh-thankyou__failed p { margin: 0 0 var(--s-4); font-size: 14px; line-height: 1.55; }
.wh-thankyou__failed-actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* Two-card grid: overview (left) + next-steps (right). Stacks on narrow */
.wh-thankyou__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4);
}
@media (min-width: 1024px) {
	.wh-thankyou__grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--s-5);
		align-items: stretch;
	}
}
@media (min-width: 1680px) {
	.wh-thankyou__grid { gap: var(--s-6); }
}

.wh-thankyou__overview,
.wh-thankyou__next {
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-radius: 0;
	padding: 28px;
	min-width: 0;
}

/* Overview head: eyebrow + status pill */
.wh-thankyou__overview .wh-account__card-head,
.wh-thankyou__overview-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	margin: 0 0 18px;
	padding: 0 0 var(--s-4);
	border-bottom: 1px dashed var(--border);
}
.wh-thankyou__overview .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;
}
.wh-thankyou__overview .wh-account__card-status,
.wh-thankyou__overview .wh-thankyou__status {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--bg, #FFFFFF);
	border: 1px solid var(--border);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-2);
	font-weight: 500;
}

/* Order meta dl */
.wh-thankyou__meta {
	margin: 0 0 var(--s-5);
	padding: 0;
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	column-gap: var(--s-5);
	row-gap: var(--s-3);
	align-items: baseline;
}
.wh-thankyou__meta dt {
	margin: 0;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	white-space: nowrap;
}
.wh-thankyou__meta dd {
	margin: 0;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	min-width: 0;
	overflow-wrap: anywhere;
}
.wh-thankyou__meta dd.mono {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 13px;
	font-weight: 600;
}
.wh-thankyou__total {
	font-family: var(--font-display) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
}

/* Payment-gateway confirmation (e.g. Mollie "Betaling afgerond met Bancontact").
   Buffered out of the unstyled page-bottom and rendered as a calm success note
   inside the overview card. */
.wh-thankyou__payment-note {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	margin: var(--s-4) 0 0;
	padding: var(--s-3) 14px;
	border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border));
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--ok) 7%, var(--surface));
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
}
.wh-thankyou__payment-note > svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--ok);
}
.wh-thankyou__payment-note-body :where(p, ul, li) { margin: 0; padding: 0; list-style: none; }
.wh-thankyou__payment-note-body :where(p) + :where(p, ul) { margin-top: var(--s-1); }

/* Status tracker — 4 segments with progressive fill */
/* Section title above the order-status bars. */
.wh-thankyou__tracker-head {
	margin: var(--s-20) 0 var(--s-3);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}
.wh-tracker.wh-thankyou__tracker {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-2);
	margin: 0;
	padding: 0;
}
.wh-tracker__step {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
}
.wh-tracker__step .bar {
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	transition: background .2s ease;
}
.wh-tracker__step.is-done .bar { background: var(--accent); }
.wh-tracker__step .label {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wh-tracker__step.is-done .label { color: var(--ink); }

/* Next-steps card */
.wh-thankyou__next-title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	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 18px;
	padding: 0 0 var(--s-4);
	border-bottom: 1px dashed var(--border);
}
.wh-thankyou__next-title svg { color: var(--accent); flex-shrink: 0; }

.wh-thankyou__steps {
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
	counter-reset: wh-thankyou-step;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.wh-thankyou__steps li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--s-3);
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
	counter-increment: wh-thankyou-step;
}
.wh-thankyou__steps li::before {
	content: counter(wh-thankyou-step, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 var(--s-2);
	border-radius: 999px;
	background: var(--bg, #FFFFFF);
	border: 1px solid var(--border);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--ink-2);
	font-weight: 600;
}

/* Action buttons */
.wh-thankyou__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0 0 var(--s-4);
}
.wh-thankyou__actions .btn,
.wh-thankyou__failed-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	cursor: pointer;
}
.wh-thankyou__actions .btn-primary,
.wh-thankyou__failed-actions .btn-primary {
	background: var(--accent);
	color: var(--on-ink) !important;
	border-color: var(--accent);
}
.wh-thankyou__actions .btn-primary:hover,
.wh-thankyou__failed-actions .btn-primary:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-ink) !important;
}
.wh-thankyou__actions .btn-ghost,
.wh-thankyou__failed-actions .btn-ghost {
	background: transparent;
	color: var(--ink) !important;
	border-color: var(--border-strong, #D6D6D2);
}
.wh-thankyou__actions .btn-ghost:hover,
.wh-thankyou__failed-actions .btn-ghost:hover {
	background: var(--ink);
	color: var(--bg) !important;
	border-color: var(--ink);
}

.wh-thankyou__support {
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px dashed var(--border);
	font-size: 12px;
	color: var(--ink-muted);
	text-align: center;
}
.wh-thankyou__support a {
	color: var(--ink);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	transition: color .15s ease;
}
.wh-thankyou__support a:hover { color: var(--accent); }

/* ── Order-received: order-details + customer-details (matches design
 *    system §17 "Data display · Tabel · sortable + zebra") ───────────
 *
 * Storefront's order-details template ships heavy black borders, grey
 * cell fills, and bold uppercase headers. Override with high
 * specificity + `!important` because Storefront's own rules are
 * scoped under `.woocommerce` and use !important too. We mirror the
 * §17 Tabel spec: bg-alt thead row, mono 10px caps headers, hairline
 * tbody rows, mono cells for IDs/prices, accent-coloured mono status
 * spans, ink underline action links — exactly the same pattern used
 * on the My Account → View Order page (which gets it from
 * `wandhaus-account.css`). */
/* Order-details section — keeps the V2 card chrome (it wraps the items
 * table). */
body .wh-thankyou + .woocommerce-order-details,
body .wh-thankyou ~ .woocommerce-order-details {
	max-width: var(--reading-max-wide) !important;
	margin: var(--s-6) auto !important;
	padding: 28px !important;
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
}
/* Customer-details section — outer wrapper is now PLAIN (no border, no
 * padding, no background). The inner `.col-1 / .col-2` columns
 * (Factuuradres / Bezorgadres) carry the card chrome individually so
 * each address reads as its own card. */
body .wh-thankyou + .woocommerce-customer-details,
body .wh-thankyou ~ .woocommerce-customer-details {
	max-width: var(--reading-max-wide) !important;
	margin: var(--s-6) auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}
/* Inner address cards — V2 chrome on each column. Works on both the
 * thank-you (wh-thankyou-page) AND view-order (wh-account-page) pages
 * via broad selector. `.woocommerce` ancestor escalates specificity
 * to beat WC plugin defaults. */
body .woocommerce-customer-details .col2-set,
body .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--s-4) !important;
	margin: 0 !important;
	width: 100% !important;
}
body .woocommerce-customer-details .col2-set::before,
body .woocommerce-customer-details .col2-set::after,
body .woocommerce-customer-details .woocommerce-columns--addresses::before,
body .woocommerce-customer-details .woocommerce-columns--addresses::after {
	display: none !important;
}
body .woocommerce-customer-details .col-1,
body .woocommerce-customer-details .col-2,
body .woocommerce-customer-details .woocommerce-column--billing-address,
body .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;
}
@media (max-width: 1023px) {
	body .woocommerce-customer-details .col2-set,
	body .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr !important;
		gap: var(--s-3) !important;
	}
}

/* Section titles ("Bestelgegevens" + "Klantgegevens") on the thank-you
 * page — display-Fraunces, NOT the mono eyebrow that lived here before
 * (the inner column h2's get the mono eyebrow treatment via the per-
 * column rule below). */
body .wh-thankyou + .woocommerce-order-details > h2,
body .wh-thankyou ~ .woocommerce-order-details > h2,
body .wh-thankyou + .woocommerce-customer-details > h2,
body .wh-thankyou ~ .woocommerce-customer-details > h2,
body .wh-thankyou ~ .woocommerce-order-details .woocommerce-order-details__title {
	font-family: var(--font-display) !important;
	font-size: clamp(22px, 2.4vw, 32px) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	text-transform: none !important;
	color: var(--ink) !important;
	font-weight: 400 !important;
	margin: 0 0 18px !important;
}
/* Inner column h2's (Factuuradres, Bezorgadres) — mono eyebrow. */
body .woocommerce-customer-details .col-1 h2,
body .woocommerce-customer-details .col-2 h2,
body .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;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	line-height: 1 !important;
}
/* address element + email/phone styling — same V2 register on both pages. */
body .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;
}
body .woocommerce-customer-details address::first-line {
	font-weight: 500;
}
body .woocommerce-customer-details .woocommerce-customer-details--email,
body .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 .woocommerce-customer-details .woocommerce-customer-details--email::before,
body .woocommerce-customer-details .woocommerce-customer-details--phone::before {
	content: none !important;
	display: none !important;
}

/* Table base — borderless; the OUTER `.woocommerce-order-details`
 * section already supplies the card border. Inner cells keep their
 * own `border-bottom` row dividers (rules below). */
body .wh-thankyou ~ .woocommerce-order-details .shop_table,
body .wh-thankyou ~ .woocommerce-order-details .woocommerce-table--order-details,
body .wh-thankyou + .woocommerce-order-details .shop_table,
body .wh-thankyou + .woocommerce-order-details .woocommerce-table--order-details {
	width: 100% !important;
	border: 0 !important;
	border-collapse: collapse !important;
	background: transparent !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	margin: 0 !important;
}
/* thead row gets bg-alt fill (§17 spec) */
body .wh-thankyou ~ .woocommerce-order-details .shop_table thead,
body .wh-thankyou + .woocommerce-order-details .shop_table thead {
	background: var(--bg-alt) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table thead th,
body .wh-thankyou + .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;
	background: transparent !important;
	text-align: left !important;
	padding: var(--s-3) 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table thead th.product-total,
body .wh-thankyou + .woocommerce-order-details .shop_table thead th.product-total {
	text-align: right !important;
}

/* tbody rows — hairline only, no zebra by default */
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody td,
body .wh-thankyou + .woocommerce-order-details .shop_table tbody td {
	background: transparent !important;
	padding: 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border) !important;
	vertical-align: top !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--ink) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody tr:last-child td,
body .wh-thankyou + .woocommerce-order-details .shop_table tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* Product name */
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody td.product-name a,
body .wh-thankyou + .woocommerce-order-details .shop_table tbody td.product-name a {
	color: var(--ink) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody td.product-name a:hover,
body .wh-thankyou + .woocommerce-order-details .shop_table tbody td.product-name a:hover {
	color: var(--accent) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody td.product-name .product-quantity,
body .wh-thankyou + .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;
}

/* Mono cells for IDs and totals — §17 spec */
body .wh-thankyou ~ .woocommerce-order-details .shop_table tbody td.product-total,
body .wh-thankyou + .woocommerce-order-details .shop_table tbody td.product-total {
	text-align: right !important;
	white-space: nowrap !important;
	font-family: var(--font-mono) !important;
	font-variant-numeric: tabular-nums !important;
}

/* Item meta on the thank-you order table — handled by the canonical
 * `body .wc-item-meta` rules in `style.css` (late-cascade winner).
 * The thank-you page now also strips the order-details + customer-
 * details sections via `is_order_received_page()` remove_action (see
 * inc/account-orders-status.php) so this surface no longer renders
 * here in the first place — but leaving the doc-comment so we don't
 * re-add the broken display:contents pattern. */

/* tfoot — labels left muted, values right ink, mono numbers */
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot th,
body .wh-thankyou + .woocommerce-order-details .shop_table tfoot th {
	background: transparent !important;
	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: 0 !important;
	border-bottom: 1px dashed var(--border) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot td,
body .wh-thankyou + .woocommerce-order-details .shop_table tfoot td {
	background: transparent !important;
	text-align: right !important;
	font-family: var(--font-mono) !important;
	font-variant-numeric: tabular-nums !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--ink) !important;
	padding: 10px 18px !important;
	border: 0 !important;
	border-bottom: 1px dashed var(--border) !important;
}
/* Grand total row — emphasis */
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot tr:last-child th,
body .wh-thankyou + .woocommerce-order-details .shop_table tfoot tr:last-child th,
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot tr.order_total th,
body .wh-thankyou + .woocommerce-order-details .shop_table tfoot tr.order_total th,
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot tr:last-child td,
body .wh-thankyou + .woocommerce-order-details .shop_table tfoot tr:last-child td,
body .wh-thankyou ~ .woocommerce-order-details .shop_table tfoot tr.order_total td,
body .wh-thankyou + .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;
}

/* "Bestel opnieuw" button row — §17 action-link style (ink underline,
 * not a pill button) */
body .wh-thankyou ~ .woocommerce-order-details .order-again,
body .wh-thankyou + .woocommerce-order-details .order-again {
	margin: var(--s-20) 0 0 !important;
}
body .wh-thankyou ~ .woocommerce-order-details .order-again .button,
body .wh-thankyou + .woocommerce-order-details .order-again .button {
	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-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color .15s var(--ease), border-color .15s var(--ease) !important;
}
body .wh-thankyou ~ .woocommerce-order-details .order-again .button:hover,
body .wh-thankyou + .woocommerce-order-details .order-again .button:hover {
	color: var(--accent) !important;
	border-bottom-color: var(--accent) !important;
}

/* Customer details — billing & shipping address blocks */
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-columns,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-columns,
body .wh-thankyou ~ .woocommerce-customer-details .col2-set,
body .wh-thankyou + .woocommerce-customer-details .col2-set {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: var(--s-5) !important;
	margin: 0 !important;
	padding: 0 !important;
}
body .wh-thankyou ~ .woocommerce-customer-details .col2-set::before,
body .wh-thankyou + .woocommerce-customer-details .col2-set::before,
body .wh-thankyou ~ .woocommerce-customer-details .col2-set::after,
body .wh-thankyou + .woocommerce-customer-details .col2-set::after {
	display: none !important;
}
@media (min-width: 640px) {
	body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-columns,
	body .wh-thankyou + .woocommerce-customer-details .woocommerce-columns,
	body .wh-thankyou ~ .woocommerce-customer-details .col2-set,
	body .wh-thankyou + .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr 1fr !important;
		gap: var(--s-6) !important;
	}
	body .wh-thankyou ~ .woocommerce-customer-details .col-2,
	body .wh-thankyou + .woocommerce-customer-details .col-2 {
		border-left: 1px solid var(--border) !important;
		padding-left: var(--s-6) !important;
	}
}
body .wh-thankyou ~ .woocommerce-customer-details .col-1,
body .wh-thankyou + .woocommerce-customer-details .col-1,
body .wh-thankyou ~ .woocommerce-customer-details .col-2,
body .wh-thankyou + .woocommerce-customer-details .col-2,
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-column,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-column {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-column__title,
body .wh-thankyou + .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 var(--s-3) !important;
}
body .wh-thankyou ~ .woocommerce-customer-details address,
body .wh-thankyou + .woocommerce-customer-details address {
	font-style: normal !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: var(--ink) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	font-family: var(--font-body) !important;
}
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--phone,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--phone,
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--email,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 10px 0 0 !important;
	padding: 10px 0 0 !important;
	border-top: 1px solid var(--border) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 10px !important;
}
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--phone::before,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--phone::before,
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--email::before,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--email::before {
	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;
	min-width: 36px !important;
}
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--phone::before,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--phone::before { content: 'TEL' !important; }
body .wh-thankyou ~ .woocommerce-customer-details .woocommerce-customer-details--email::before,
body .wh-thankyou + .woocommerce-customer-details .woocommerce-customer-details--email::before { content: 'MAIL' !important; }

/* ── Order-pay page (/checkout/order-pay/ — WooCommerce "pay for order") ──
   When the order requires login, WC renders a BARE login form here; it never
   goes through our checkout/auth templates, so it was unstyled. Style it as a
   centered card matching the auth screens. Scoped to the order-pay body class
   so it can't touch the normal checkout/cart. The actual pay form (logged-in)
   is left to WooCommerce defaults — not restyled blind, to avoid any risk to
   the payment flow. */
body.woocommerce-order-pay .woocommerce-notices-wrapper { max-width: 460px; margin-inline: auto; }
body.woocommerce-order-pay .woocommerce-info {
	list-style: none;
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	padding: 14px var(--s-4);
	margin: 0 auto var(--s-20);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
}
body.woocommerce-order-pay .woocommerce-info::before { display: none; }
body.woocommerce-order-pay form.woocommerce-form-login {
	max-width: 460px;
	margin-inline: auto;
	display: grid;
	gap: var(--s-4);
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface, #FFFFFF);
	padding: 28px;
}
body.woocommerce-order-pay form.woocommerce-form-login .form-row { width: 100% !important; float: none !important; margin: 0; padding: 0; }
body.woocommerce-order-pay form.woocommerce-form-login label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
body.woocommerce-order-pay form.woocommerce-form-login input[type="text"],
body.woocommerce-order-pay form.woocommerce-form-login input[type="password"] {
	width: 100%; height: 44px; padding: 0 var(--s-3);
	border: 1px solid var(--border-strong, #D6D6D2); border-radius: 6px;
	font: 400 14px/1 var(--font-body); background: var(--bg, #FFFFFF); box-sizing: border-box;
}
body.woocommerce-order-pay form.woocommerce-form-login button[type="submit"],
body.woocommerce-order-pay form.woocommerce-form-login .button {
	height: 44px; padding: 0 var(--s-5); background: var(--ink); color: var(--on-ink); border: 0;
	border-radius: 999px; font: 500 14px/1 var(--font-body); cursor: pointer; justify-self: start;
}
body.woocommerce-order-pay form.woocommerce-form-login button[type="submit"]:hover { background: var(--accent); }
body.woocommerce-order-pay form.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--ink-2); }
body.woocommerce-order-pay .lost_password { margin: 0; font-size: 13px; }
body.woocommerce-order-pay .lost_password a { color: var(--accent); }