/*
 * My account — layout + navigation styling for the WooCommerce account pages.
 * WC's default markup (.woocommerce-MyAccount-navigation + -content) is kept;
 * this only provides the two-column layout and the sidebar-nav appearance.
 */

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--wcp-gutter);
		align-items: start;
	}

	/* WooCommerce's clearfix. In een float-layout is dat onzichtbaar, maar in een grid worden
	   ::before en ::after twee volwaardige grid-items: twee lege rijen van 0px, elk met de
	   volle row-gap eromheen. Op de accountpagina schoof de inhoud daardoor 40px omlaag en
	   stond er nog eens 40px onder. */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after {
		content: none;
	}

	/* Notices and other stray children span the full width. */
	.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
		grid-column: 1 / -1;
	}

	/* width/float: undo WC's own woocommerce-layout.css (30% float layout). */
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		float: none;
		width: 100%;
	}
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
		float: none;
		width: 100%;
	}
}

/* ── Sidebar navigation (#246) ──
   Kaart zoals de shopkaarten; elk item met het icoon in een getint vakje (.wcp-account-icon, ook in het
   accountmenu-offcanvas), het actieve item licht getint met de primaire kleur, Uitloggen apart onderaan in rood. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: var(--wcp-color-surface);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--wcp-radius-sm, 0.5rem);
	color: var(--wcp-color-text);
	font-weight: var(--wcp-font-weight-semibold, 600);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wcp-color-surface-alt);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff);
	color: var(--wcp-color-primary);
}
.woocommerce-MyAccount-navigation li.is-active .wcp-account-icon {
	background: var(--wcp-color-primary);
	color: #fff;
}

/* Logout visually separated at the bottom (order enforced in PHP). */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wcp-color-danger); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout .wcp-account-icon {
	background: color-mix(in srgb, var(--wcp-color-danger) 9%, #fff);
	color: var(--wcp-color-danger);
}

/* WC marks the active item with .is-active on the li. */

/* Mobiel (#246): het menu als scrollbare balk boven de inhoud i.p.v. een lange lijst. */
@media (max-width: 47.98rem) {
	.woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; }
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 0.25rem;
		overflow-x: auto;
		padding: 0.375rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-MyAccount-navigation li { flex: none; }
	.woocommerce-MyAccount-navigation li a { gap: 0.5rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; white-space: nowrap; }
	.woocommerce-MyAccount-navigation .wcp-account-icon { width: 1.75rem; height: 1.75rem; font-size: 0.9375rem; }
	.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 0 0 0.25rem;
		padding: 0 0 0 0.25rem;
		border-top: 0;
		border-left: 1px solid var(--wcp-color-border);
	}
}

/* ── Dashboard (#246, templates/woocommerce/myaccount/dashboard.php) ──
   Begroeting, tegels naar de accountonderdelen en de laatste bestellingen, in de kaartstijl van de shop
   (productkaart: rand, shop-hoek, schaduw alleen bij hover). */
.wcp-dashboard { display: grid; gap: 1.75rem; }
.wcp-dashboard > * { margin: 0; }

.wcp-dashboard__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}
.wcp-dashboard__title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
.wcp-dashboard__logout { margin: 0; color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); }
.wcp-dashboard__logout a { color: var(--wcp-color-primary); }

.wcp-dashboard__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wcp-dashboard__tile { margin: 0; }
.wcp-dashboard__tile a {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	height: 100%;
	padding: 1.125rem 1.25rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
	color: var(--wcp-color-text);
	text-decoration: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wcp-dashboard__tile a:hover { box-shadow: 0 0.25rem 0.9rem rgb(0 0 0 / 7%); }
.wcp-dashboard__tile-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wcp-color-primary) 10%, #fff);
	color: var(--wcp-color-primary);
	font-size: 1.125rem;
}
.wcp-dashboard__tile-body { display: grid; gap: 0.15rem; min-width: 0; }
.wcp-dashboard__tile-title { font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-dashboard__tile-text { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); line-height: 1.45; }

.wcp-dashboard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}
.wcp-dashboard__subtitle { margin: 0; font-size: 1.125rem; }
.wcp-dashboard__more { color: var(--wcp-color-primary); font-size: var(--wcp-font-size-sm, 0.875rem); font-weight: var(--wcp-font-weight-bold, 700); text-decoration: none; }
.wcp-dashboard__more:hover { text-decoration: underline; }

.wcp-dashboard__order-list,
.wcp-dashboard__empty {
	margin: 0;
	padding: 0;
	list-style: none;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
.wcp-dashboard__order-list li { margin: 0; }
.wcp-dashboard__order-list li + li { border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border); }
.wcp-dashboard__order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.375rem 1rem;
	padding: 0.875rem 1.25rem;
	color: var(--wcp-color-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.wcp-dashboard__order:hover { background: var(--wcp-color-surface-alt, #f6f8fa); }
.wcp-dashboard__order-main { display: grid; gap: 0.1rem; min-width: 0; }
.wcp-dashboard__order-number { font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-dashboard__order-meta { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); }
.wcp-dashboard__order-total { font-weight: var(--wcp-font-weight-bold, 700); text-align: right; }
.wcp-order-status {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wcp-color-surface-alt, #f1f4f7);
	color: var(--wcp-color-text);
	font-size: 0.75rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.4;
	white-space: nowrap;
}
.wcp-order-status--completed { background: var(--wcp-color-success-soft, #e7f6ec); color: var(--wcp-color-success, #1a8a3e); }
.wcp-order-status--processing { background: color-mix(in srgb, var(--wcp-color-primary) 10%, #fff); color: var(--wcp-color-primary); }
.wcp-order-status--on-hold,
.wcp-order-status--pending { background: #fff4e5; color: #9a5b00; }
.wcp-order-status--cancelled,
.wcp-order-status--failed,
.wcp-order-status--refunded { background: color-mix(in srgb, var(--wcp-color-danger) 9%, #fff); color: var(--wcp-color-danger); }
.wcp-dashboard__order .wcp-order-status { justify-self: start; }
@media (min-width: 36rem) {
	.wcp-dashboard__order { grid-template-columns: minmax(0, 1fr) auto 7rem; }
	.wcp-dashboard__order .wcp-order-status { justify-self: end; }
}
@media (max-width: 35.98rem) {
	.wcp-dashboard__order .wcp-order-status { grid-row: 2; }
	.wcp-dashboard__order-total { grid-column: 2; grid-row: 1 / span 2; }
}

.wcp-dashboard__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding: 1.125rem 1.25rem;
}
.wcp-dashboard__empty p { margin: 0; color: var(--wcp-color-muted); }

/* ── Adressen (endpoint edit-address) ──
   WC levert hier twee losse kolommen met een <h2> en een cursief <address>.
   Zonder opmaak vallen die als losse koppen over de pagina; hier als kaarten. */
.woocommerce .woocommerce-Addresses.col2-set::before,
.woocommerce .woocommerce-Addresses.col2-set::after {
	content: none; /* WC-clearfix; wordt anders een lege rastercel (zelfde selector, later geladen) */
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--wcp-gutter);
	margin-top: 1.5rem;
}

@media (min-width: 48rem) {
	.woocommerce-Addresses.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* WooCommerce's layout-CSS zet .col-1/.col-2 op floats van 48%; in het raster
   bepaalt de cel de breedte. Specifieker dan .woocommerce .col2-set .col-1. */
.woocommerce .woocommerce-Addresses.col2-set .col-1,
.woocommerce .woocommerce-Addresses.col2-set .col-2,
.woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
}

/* Dezelfde WC-clearfix als hierboven, maar hier in een flexrij: twee onzichtbare items die
   de verdeling van space-between scheeftrekken. De kop kwam daardoor 51px naar binnen te staan
   en lijnde niet meer uit met het adres eronder. WC hangt hem hier aan
   .woocommerce-account .addresses .title, dus de klassenaam alleen is niet specifiek genoeg. */
.woocommerce-account .addresses .woocommerce-Address .title::before,
.woocommerce-account .addresses .woocommerce-Address .title::after,
.woocommerce-Address-title::before,
.woocommerce-Address-title::after {
	content: none;
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	float: none;
	margin: 0;
	font-size: 1.125rem;
	text-align: left;
}

.woocommerce-Address-title .edit {
	float: none;
	font-size: var(--wcp-font-size-sm);
	text-decoration: none;
}

.woocommerce-Address address {
	margin: 0;
	color: var(--wcp-color-muted);
	font-style: normal;
	line-height: 1.6;
}

/* ── Besteldetail (endpoint view-order, en het orderblok op de bedanktpagina) ──
   WC levert hier een tabel plus twee zwevende adreskolommen en verder niets. De koppen erfden
   daardoor de h2 van het thema — bij een shop met een grote h2 stonden er 42px sectielabels
   boven een tabel met tekst van 16px. En de adressen vielen als losse blokken over de pagina
   in plaats van als kaarten, zoals op de adressenpagina. */
.woocommerce-order-details__title,
.woocommerce-order-downloads__title,
.woocommerce-column__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

.woocommerce .woocommerce-columns--addresses.col2-set::before,
.woocommerce .woocommerce-columns--addresses.col2-set::after {
	content: none;
}

.woocommerce-columns--addresses {
	display: grid;
	gap: var(--wcp-gutter);
	margin-top: 1.5rem;
}

@media (min-width: 48rem) {
	.woocommerce-columns--addresses.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce .woocommerce-columns--addresses.col2-set .col-1,
.woocommerce .woocommerce-columns--addresses.col2-set .col-2 {
	float: none;
	width: auto;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
}

/* WC zet zelf een kader met padding om het adres (.woocommerce-customer-details address).
   Nu de kolom de kaart is, levert dat een kader in een kader op. Specifieker dan WC's eigen
   selector, want de laadvolgorde van woocommerce.css en onze CSS ligt niet vast. */
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--wcp-color-muted);
	font-style: normal;
	line-height: 1.6;
}

/* ── Besteldetail als één kaart (endpoint view-order), zoals v1 ──
   WC levert een tabel met buitenrand en celranden, een losse koprij Product/Totaal, grijze
   knoppen (WC's eigen a.button-opmaak) en adreskaarten. Hier: de sectie is de kaart met de kop
   erin, de tabel heeft alleen dunne lijnen tussen de regels, de productregel toont thumb met
   aantal-badge en bedrag rechts, de totalen zijn regels zonder celranden met het eindbedrag vet,
   de knoppen (opnieuw bestellen, factuur) staan in de primaire kleur, de betaalbevestiging van
   de betaalplugin is een rustig infokader en het factuuradres staat eronder zonder kader.
   Specificiteit: WC's .woocommerce table.shop_table td (0,2,1) en .woocommerce a.button (0,2,1)
   winnen anders; alles hier hangt daarom aan body.woocommerce-view-order + .woocommerce. */
.woocommerce-view-order .woocommerce-MyAccount-content > .woocommerce-order-details:not(.woocommerce-info) {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
}
@media (max-width: 47.99rem) {
	.woocommerce-view-order .woocommerce-MyAccount-content > .woocommerce-order-details:not(.woocommerce-info) {
		padding: 1rem;
	}
}
.woocommerce-view-order .woocommerce-order-details__title { margin-bottom: 0.5rem; }

/* Tabel op blokopbouw (zoals de checkout-review): elke rij is een flex-rij over de volle
   kaartbreedte. In de tabel-layout deelden de productregel en de totalen één labelkolom, die op
   390px 188px breed werd en de waarden ("Afhalen op afspraak (Milheeze)") over drie regels
   brak. De scheidingslijnen zitten op de rij, niet op de cellen. */
.woocommerce-view-order .woocommerce table.order_details,
.woocommerce-view-order .woocommerce table.order_details tbody,
.woocommerce-view-order .woocommerce table.order_details tfoot {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}
.woocommerce-view-order .woocommerce table.order_details thead { display: none; }
.woocommerce-view-order .woocommerce table.order_details tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0;
	border-top: 1px solid var(--wcp-color-border);
}
.woocommerce-view-order .woocommerce table.order_details tbody tr:first-child { border-top: 0; }
.woocommerce-view-order .woocommerce table.order_details th,
.woocommerce-view-order .woocommerce table.order_details td {
	padding: 0;
	border: 0;
	line-height: 1.5;
}
.woocommerce-view-order .woocommerce table.order_details td.product-name {
	flex: 1 1 auto;
	min-width: 0;
}
.woocommerce-view-order .woocommerce table.order_details td.product-total {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}
.woocommerce-view-order .woocommerce table.order_details tfoot tr { padding: 0.4rem 0; }
.woocommerce-view-order .woocommerce table.order_details tfoot tr:first-child {
	border-top: 2px solid var(--wcp-color-border);
	padding-top: 0.75rem;
}
.woocommerce-view-order .woocommerce table.order_details tfoot th {
	flex: 0 0 auto;
	text-align: left;
	font-weight: 400;
	color: var(--wcp-color-muted);
	white-space: nowrap;
}
.woocommerce-view-order .woocommerce table.order_details tfoot td {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}
/* Eindbedrag vet (span via woocommerce_get_order_item_totals), de btw-toelichting niet. */
.wcp-order-total .woocommerce-Price-amount {
	font-weight: var(--wcp-font-weight-bold);
	font-size: 1.0625rem;
}
.wcp-order-total .includes_tax {
	display: block;
	color: var(--wcp-color-muted);
	font-weight: 400;
}

/* Productregel: thumb met aantal-badge, naam ernaast (zelfde patroon als de checkout-review). */
.woocommerce-view-order .woocommerce table.order_details td.product-name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.woocommerce-view-order .woocommerce table.order_details .product-name .thumb {
	position: relative;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
}
.woocommerce-view-order .woocommerce table.order_details .product-name .thumb img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
}
.woocommerce-view-order .woocommerce table.order_details .product-name .title {
	min-width: 0;
	font-weight: var(--wcp-font-weight-semibold);
}
.woocommerce-view-order .woocommerce table.order_details .product-name .title a {
	color: inherit;
	text-decoration: none;
}
.woocommerce-view-order .woocommerce table.order_details .product-name .title a:hover { text-decoration: underline; }
.woocommerce-view-order .woocommerce table.order_details .product-name .wc-item-meta {
	margin: 0.125rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	font-weight: 400;
}

/* Knoppen in de primaire kleur: opnieuw bestellen (in de kaart) en factuur downloaden (losse
   alinea eronder). WC's a.button geeft anders grijs op grijs. */
.woocommerce-view-order .woocommerce .order-again {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wcp-color-border);
}
.woocommerce-view-order .woocommerce .order-again a.button,
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content > p > a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wcp-color-primary);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-primary);
	color: #fff;
	font-weight: var(--wcp-font-weight-semibold);
	line-height: 1.5;
	text-decoration: none;
}
.woocommerce-view-order .woocommerce .order-again a.button:hover,
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content > p > a.button:hover {
	background: var(--wcp-color-primary);
	color: #fff;
	filter: brightness(0.92);
}
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content > p > a.button { margin-top: 0.25rem; }

/* Betaalbevestiging (Mollie zet 'm als .woocommerce-info met een sectiekop-klasse): infokader. */
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details.woocommerce-info {
	margin: 1rem 0 0;
	padding: 0.875rem 1.25rem 0.875rem 3rem;
	border: 1px solid var(--wcp-color-border);
	border-top: 3px solid var(--wcp-color-primary);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface-alt);
}
.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-info p:last-child { margin-bottom: 0; }

/* Factuur-/verzendadres eronder als kaarten, zoals op de adressenpagina (#246; was zonder kader). */
.woocommerce-view-order .woocommerce-customer-details { margin-top: 1.5rem; }
.woocommerce-view-order .woocommerce .woocommerce-columns--addresses { margin-top: 0; }
.woocommerce-view-order .woocommerce .woocommerce-columns--addresses.col2-set .col-1,
.woocommerce-view-order .woocommerce .woocommerce-columns--addresses.col2-set .col-2 {
	padding: 1.25rem 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
.woocommerce-view-order .woocommerce .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--wcp-color-muted);
	font-style: normal;
	line-height: 1.6;
}


/* ── Inloggen / registreren (uitgelogd, #242/#243, templates/woocommerce/myaccount/form-login.php) ──
   Twee kaarten (mobiel onder elkaar): inloggen, en "Nieuw bij …?" met voordelen en het registratieformulier;
   eronder optioneel een getint vlak (bv. zakelijk bestellen). De formulieren zelf verliezen WooCommerce' kader. */
.woocommerce-account .login-wrapper { grid-column: 1 / -1; }

.wcp-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wcp-gutter, 1.5rem);
	align-items: stretch;
}
@media (min-width: 48rem) {
	.wcp-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcp-auth--single { grid-template-columns: minmax(0, 32rem); justify-content: center; }
}

.wcp-auth__card {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius, 0.75rem);
	background: var(--wcp-color-surface, #fff);
}
.wcp-auth__card--register { background: var(--wcp-color-surface-alt, #f6f8fa); }
.wcp-auth__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.2;
}
.wcp-auth .wcp-account-intro {
	margin: 0 0 1.25rem;
	color: var(--wcp-color-muted);
}
.wcp-auth .wcp-account-intro a { color: var(--wcp-color-primary); }

/* Voordelen met een vinkje, zoals bij de nieuwsbrief in de footer. */
.wcp-auth__usps {
	display: grid;
	gap: 0.5rem;
	margin: 0.25rem 0 1.5rem;
	padding: 0;
	list-style: none;
}
.wcp-auth__usps li { display: flex; align-items: flex-start; gap: 0.625rem; }
.wcp-auth__usps i {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: var(--wcp-color-success-soft, #e7f6ec);
	color: var(--wcp-color-success, #1a8a3e);
	font-size: 0.75rem;
}

.woocommerce .wcp-auth form.login,
.woocommerce .wcp-auth form.register {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}
.wcp-auth form > * { flex: 1 1 100%; min-width: 0; }
.wcp-auth form .form-row { margin: 0 0 1rem; padding: 0; }
.wcp-auth form .form-row-first,
.wcp-auth form .form-row-last { width: auto; float: none; }
@media (min-width: 36rem) {
	.wcp-auth form > .form-row-first,
	.wcp-auth form > .form-row-last { flex-basis: calc(50% - 0.5rem); }
}

/* Onthouden links, wachtwoord vergeten rechts; knop over de volle breedte onderaan de kaart. */
.wcp-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-auth .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: var(--wcp-font-weight-normal, 400);
	cursor: pointer;
}
.wcp-auth .woocommerce-form-login__rememberme input {
	position: static;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 !important; /* thema's zetten vaak een margin-top op checkboxen; hier staat hij op de tekstlijn */
	vertical-align: middle;
	accent-color: var(--wcp-color-primary);
}
.wcp-auth__lost { color: var(--wcp-color-primary); }
.wcp-auth__submit { margin-bottom: 0 !important; }
.woocommerce .wcp-auth .woocommerce-form-login__submit,
.woocommerce .wcp-auth .woocommerce-form-register__submit {
	float: none;
	width: 100%;
	margin: 0;
}
.wcp-auth .woocommerce-privacy-policy-text p {
	margin: 0 0 1rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	line-height: 1.5;
}

/* Getint vlak onder beide kaarten (bv. zakelijk bestellen): icoon, tekst, knop. */
.wcp-auth__callout {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem 1.25rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
	border-radius: var(--wcp-radius, 0.75rem);
	background: color-mix(in srgb, var(--wcp-color-primary) 9%, #fff);
}
.wcp-auth__callout > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wcp-color-primary);
	color: #fff;
	font-size: 1.25rem;
}
.wcp-auth__callout-body p { margin: 0; color: var(--wcp-color-text); }
.wcp-auth__callout-body .wcp-auth__callout-title {
	margin-bottom: 0.15rem;
	font-size: 1.0625rem;
	font-weight: var(--wcp-font-weight-bold, 700);
}
.wcp-auth__callout-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 48rem) {
	.wcp-auth__callout { grid-template-columns: auto minmax(0, 1fr) auto; }
	.wcp-auth__callout-btn { grid-column: auto; }
}

/* ── Focuspagina's: inloggen, registreren, wachtwoord vergeten (#244) ──
   Uitgelogd op Mijn account: kale header/footer (wcp_is_account_focus()), geen paginakop van het thema, één smalle
   kolom op een getinte achtergrond, zoals bij bol. De kop in de kaart is de <h1>. */
.wcp-account-focus #main,
.wcp-account-focus main {
	display: flow-root; /* de marge van de kolom hieronder valt anders door main heen (witte strook onder de header) */
	background: var(--wcp-color-surface-alt, #f6f8fa);
}
.wcp-account-focus .site-footer { margin-top: 0; } /* getinte vlak loopt door tot de footer */
.wcp-account-focus .woocommerce {
	max-width: 30rem;
	margin: clamp(1.5rem, 5vw, 3.5rem) auto clamp(2rem, 6vw, 4.5rem);
}

/* Eén kolom op mobiel (formulier eerst), vanaf 62rem formulier links en de zijkolom rechts. */
.wcp-account-focus .wcp-auth { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) {
	.wcp-account-focus--login .woocommerce,
	.wcp-account-focus--register .woocommerce { max-width: 58rem; }
	.wcp-account-focus .wcp-auth--login,
	.wcp-account-focus .wcp-auth--register { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}
/* Alle kaarten (formulier, zijkolom, zakelijk vlak, wachtwoord vergeten) zoals de kaarten in de rest van de shop
   (productkaart in loop.css): dunne rand in de randkleur, de shop-hoek, geen schaduw. Het zakelijke vlak houdt zijn tint. */
.wcp-account-focus .wcp-auth__card,
.wcp-account-focus .wcp-auth__new,
.wcp-account-focus .wcp-auth__callout,
.wcp-account-focus #password-reset > div {
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius, 0.75rem);
	box-shadow: none;
}
.wcp-account-focus .wcp-auth__card,
.wcp-account-focus .wcp-auth__new,
.wcp-account-focus #password-reset > div { background: var(--wcp-color-surface, #fff); }
.wcp-account-focus .wcp-auth__title { margin-bottom: 1.25rem; }
.wcp-account-focus .wcp-auth .wcp-account-intro { margin-top: -0.75rem; }

/* Zijkolom: "Nieuw bij …?" met de voordelen (bij inloggen een knop naar registreren) en het optionele vlak. */
.wcp-auth__aside {
	display: grid;
	gap: var(--wcp-gutter, 1.5rem);
	align-content: start;
}
.wcp-auth__new {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius, 0.75rem);
	background: var(--wcp-color-surface, #fff);
}
.wcp-auth__new-title {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	font-weight: var(--wcp-font-weight-bold, 700);
}
.wcp-auth__new .wcp-auth__usps { margin-bottom: 1.25rem; font-size: var(--wcp-font-size-sm, 0.875rem); }
.wcp-auth__new .wcp-auth__usps:last-child { margin-bottom: 0; }
.wcp-auth__switch-btn { font-weight: var(--wcp-font-weight-bold, 700); }

/* Registreren: link terug naar inloggen. */
.wcp-auth__switch {
	margin: 1.25rem 0 0;
	color: var(--wcp-color-muted);
	text-align: center;
}
.wcp-auth__switch a {
	color: var(--wcp-color-primary);
	font-weight: var(--wcp-font-weight-bold, 700);
}

/* Zakelijk (of ander) vlak in de smalle kolom: icoon, tekst en knop onder elkaar. */
.wcp-account-focus .wcp-auth__callout { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.wcp-account-focus .wcp-auth__callout > i { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
.wcp-account-focus .wcp-auth__callout-btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }

/* Wachtwoord vergeten in dezelfde kaart. */
.wcp-account-focus #password-reset { display: block; }
.wcp-account-focus #password-reset > div {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border-radius: var(--wcp-radius, 0.75rem);
}
.wcp-account-focus #password-reset form { margin: 0; padding: 0; border: 0; }
.wcp-account-focus #password-reset .form-row { float: none; width: 100%; margin: 0 0 1rem; padding: 0; }
.wcp-account-focus #password-reset .form-row input.input-text { width: 100%; }
.woocommerce .wcp-account-focus #password-reset button[type="submit"],
.wcp-account-focus #password-reset button[type="submit"] { width: 100%; margin: 0; }

/* Footer onderaan het scherm, ook bij een korte pagina (wachtwoord vergeten). */
body.wcp-account-focus { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.wcp-account-focus > main { flex: 1 0 auto; }

/* ── Accountpagina's als geheel (#246) ──
   Zelfde vormtaal als het dashboard en de inlogpagina's: kaarten zoals de productkaart (rand in de randkleur,
   shop-hoek, geen schaduw), rustige meldingen, statussen als gekleurde stip. Alles blijft WooCommerce-markup met
   de eigen hooks (o.a. extra kolommen via woocommerce_account_orders_columns); dit is alleen opmaak. */

/* Meldingen en lege staten in de accountinhoud ("Nog geen bestellingen", "E-mailadres bevestigen", lege
   verlanglijst/offertes van add-ons die woocommerce-info gebruiken): een zacht kader i.p.v. de gekleurde balk. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	padding: 1.125rem 1.25rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
	color: var(--wcp-color-text);
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before { content: none; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::after,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::after { content: none; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { border-color: color-mix(in srgb, var(--wcp-color-success, #1a8a3e) 35%, #fff); background: var(--wcp-color-success-soft, #e7f6ec); }
/* WC zet de knop in de melding vóór de tekst en laat hem rechts zweven; hier staat hij rechts in de rij. */
.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button {
	order: 2;
	float: none;
	margin: 0;
}

/* ── Bestellingen (endpoint orders, WC-tabel .woocommerce-orders-table) ── */
.woocommerce-account .woocommerce table.woocommerce-orders-table {
	width: 100%;
	margin: 0 0 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wcp-color-surface, #fff);
	overflow: hidden;
}
.woocommerce-account .woocommerce table.woocommerce-orders-table th,
.woocommerce-account .woocommerce table.woocommerce-orders-table td {
	padding: 0.875rem 1rem;
	border: 0;
	border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	vertical-align: middle;
	text-align: left;
}
.woocommerce-account .woocommerce table.woocommerce-orders-table thead th {
	border-top: 0;
	background: var(--wcp-color-surface-alt, #f6f8fa);
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:hover { background: var(--wcp-color-surface-alt, #f6f8fa); }
.woocommerce-orders-table__cell-order-number a {
	color: var(--wcp-color-text);
	font-weight: var(--wcp-font-weight-bold, 700);
	text-decoration: none;
}
.woocommerce-orders-table__cell-order-number a:hover { color: var(--wcp-color-primary); }
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-total { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); }
.woocommerce-orders-table__cell-order-total .amount { color: var(--wcp-color-text); font-weight: var(--wcp-font-weight-bold, 700); }

/* Status: label (.wcp-order-status) via de kolomhaak, zie includes/woocommerce/myaccount/myaccount.php. */

/* Acties: de eerste (Bekijken) als omlijnde knop, de rest als tekstlink; klein en naast elkaar. */
.woocommerce-orders-table__cell-order-actions { text-align: right !important; white-space: nowrap; }
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	margin: 0.125rem 0 0.125rem 0.375rem;
	padding: 0.375rem 0.75rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface, #fff);
	color: var(--wcp-color-text);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.3;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover { border-color: var(--wcp-color-dark); color: var(--wcp-color-dark); }
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button.view {
	border-color: var(--wcp-color-primary);
	background: var(--wcp-color-primary);
	color: #fff;
}
.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button.view:hover { background: var(--wcp-color-primary-hover, var(--wcp-color-primary)); color: #fff; }

/* Mobiel: per bestelling een compacte kaart zoals de lijst op het dashboard. Nummer en status bovenaan, datum en totaal
   daaronder, de knoppen onderaan naast elkaar; WC's labels ("Datum:", "Status:") vervallen voor deze vaste kolommen.
   Extra kolommen van add-ons houden hun label en komen als eigen regel onder de datum. */
@media (max-width: 47.98rem) {
	.woocommerce-account .woocommerce table.woocommerce-orders-table { border: 0; background: none; overflow: visible; }
	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.25rem 1rem;
		margin-bottom: 0.75rem;
		padding: 0.875rem 1rem;
		border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
		border-radius: var(--wcp-radius);
		background: var(--wcp-color-surface, #fff);
	}
	.woocommerce-account .woocommerce table.woocommerce-orders-table tbody tr:hover { background: var(--wcp-color-surface, #fff); }
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody :is(th, td) {
		display: block;
		grid-column: 1 / -1;
		padding: 0;
		border: 0;
		background: none !important;
		text-align: left !important;
	}
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody th::before { content: none; }
	.woocommerce-account .woocommerce table.woocommerce-orders-table td::before { float: none; margin-right: 0.35rem; color: var(--wcp-color-muted); font-weight: var(--wcp-font-weight-normal, 400); }

	/* Rij 1: nummer | status */
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-number { grid-column: 1; grid-row: 1; font-size: 1rem; }
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-status { grid-column: 2; grid-row: 1; justify-self: end; }
	/* Rij 2: datum | totaal */
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-date { grid-column: 1; grid-row: 2; }
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody .woocommerce-orders-table__cell-order-total { grid-column: 2; grid-row: 2; text-align: right !important; white-space: nowrap; }
	.woocommerce-account .woocommerce table.woocommerce-orders-table :is(.woocommerce-orders-table__cell-order-number, .woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__cell-order-date, .woocommerce-orders-table__cell-order-total, .woocommerce-orders-table__cell-order-actions)::before { content: none !important; }

	/* Knoppen onderaan, even breed naast elkaar. */
	.woocommerce-account .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.625rem;
		padding-top: 0.75rem;
		border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	}
	.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button {
		flex: 1 1 0;
		justify-content: center;
		margin: 0;
		padding: 0.5rem 0.75rem;
		white-space: nowrap;
	}
}

/* Paginering onder het overzicht. */
.woocommerce-account .woocommerce-pagination--without-numbers { display: flex; justify-content: space-between; gap: 1rem; }

/* ── Formulieren: accountdetails (edit-account) en adres bewerken (edit-address/{type}) ── */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content :is(form.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > * { flex: 1 1 100%; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields > * { flex: 1 1 100%; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content :is(form.woocommerce-EditAccountForm, .woocommerce-address-fields) .form-row {
	float: none;
	width: auto;
	margin: 0 0 1rem;
	padding: 0;
}
@media (min-width: 36rem) {
	.woocommerce-account .woocommerce-MyAccount-content :is(form.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) { flex-basis: calc(50% - 0.5rem); }
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .clear { display: none; }
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm em {
	display: block;
	margin-top: 0.35rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-style: normal;
}
/* Wachtwoord wijzigen als eigen blok onder een lijn. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset {
	margin: 0.5rem 0 1rem;
	padding: 1.25rem 0 0;
	border: 0;
	border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm legend {
	float: left;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: var(--wcp-font-weight-bold, 700);
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset > legend + * { clear: both; }
.woocommerce-account .woocommerce-MyAccount-content :is(form.woocommerce-EditAccountForm, .woocommerce-address-fields) p:last-of-type:has(> button[type="submit"]) { margin: 0.5rem 0 0; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields > h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields > h3 { margin: 0 0 1rem; font-size: 1.125rem; }

/* WooCommerce' eigen "vereist veld"-zin (<small class="error error-required">, sinds WC 9.x) hoort pas na een
   mislukte controle; zonder de checkout-CSS stond hij direct in elk label. */
.woocommerce-account .woocommerce-MyAccount-content .error-required { display: none; }
.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-invalid, .woocommerce-invalid-required-field) .error-required {
	display: block;
	margin-top: 0.25rem;
	color: var(--wcp-color-danger);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-normal, 400);
}
.woocommerce-account .woocommerce-MyAccount-content > form > h2,
.woocommerce-account .woocommerce-MyAccount-content > form > h3 { margin: 0 0 1rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
@media (min-width: 48rem) {
	.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) { flex-wrap: nowrap; }
	.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button { flex: none; }
}


/* ── Accountkop (#246, templates/account/header.php) ── over de volle breedte boven menu en inhoud. */
.wcp-account-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	/* De paginakop van het thema (met zijn ruimte) vervalt; de kop zorgt zelf voor lucht onder de menubalk. */
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.25rem;
}
/* In het accountgrid (vanaf 48rem) geeft de rij-afstand de ruimte tot menu en inhoud; de kolomafstand blijft. */
@media (min-width: 48rem) {
	.woocommerce-account .woocommerce:has(> .wcp-account-header) { row-gap: 1.5rem; }
	.woocommerce-account .woocommerce > .wcp-account-header { margin-bottom: 0; }
}
.wcp-account-header__text { flex: 1 1 16rem; min-width: 0; }
.wcp-account-header__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}
.wcp-account-header__meta { margin: 0.35rem 0 0; color: var(--wcp-color-muted); }
.wcp-account-header__back {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	text-decoration: none;
}
.wcp-account-header__back:hover { color: var(--wcp-color-primary); }
.wcp-account-header__logout { margin: 0; color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); }
.wcp-account-header__logout a { color: var(--wcp-color-primary); font-weight: var(--wcp-font-weight-semibold, 600); }

/* Tegels: verdeling naar aantal, zodat er geen losse tegel op een eigen rij overblijft (5 = 3 + 2). */
@media (min-width: 62rem) {
	.wcp-dashboard__tiles--3,
	.wcp-dashboard__tiles--5,
	.wcp-dashboard__tiles--6,
	.wcp-dashboard__tiles--9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wcp-dashboard__tiles--4,
	.wcp-dashboard__tiles--7,
	.wcp-dashboard__tiles--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wcp-dashboard__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Overzichten van add-ons in het account (.wcp-table, bv. offertes) — zelfde kaart als het bestellingenoverzicht ── */
.woocommerce-account .woocommerce-MyAccount-content .wcp-table-wrap {
	margin: 0 0 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
.woocommerce-account .woocommerce-MyAccount-content .wcp-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}
.woocommerce-account .woocommerce-MyAccount-content .wcp-table :is(th, td) {
	padding: 0.875rem 1rem;
	border: 0;
	border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	text-align: left;
	vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content .wcp-table thead th {
	border-top: 0;
	background: var(--wcp-color-surface-alt, #f6f8fa);
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.woocommerce-account .woocommerce-MyAccount-content .wcp-table tbody tr:nth-child(even) { background: none; }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table tbody tr:hover { background: var(--wcp-color-surface-alt, #f6f8fa); }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table tbody th { font-weight: var(--wcp-font-weight-bold, 700); }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table tbody th a { color: var(--wcp-color-text); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table tbody th a:hover { color: var(--wcp-color-primary); }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table td { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm, 0.875rem); }
.woocommerce-account .woocommerce-MyAccount-content .wcp-table .wcp-badge {
	padding: 0.2rem 0.55rem;
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface-alt, #f1f4f7);
	color: var(--wcp-color-text);
	font-size: 0.8125rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 35.98rem) {
	.wcp-account-header { flex-wrap: nowrap; align-items: center; }
	.wcp-account-header .wcp-account-header__avatar { width: 3rem; height: 3rem; font-size: 1.05rem; }
	.wcp-account-header__text { flex: 1 1 auto; }
	.wcp-account-header--dashboard { flex-wrap: wrap; }
	.wcp-account-header--dashboard .wcp-account-header__text { flex: 1 1 0; }
	.wcp-account-header__logout { flex-basis: 100%; }
	.wcp-account-header__meta { font-size: var(--wcp-font-size-sm, 0.875rem); }

	/* Tegels compact in twee kolommen: icoon boven de titel, zonder omschrijving. */
	.wcp-dashboard__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
	.wcp-dashboard__tile a { flex-direction: column; gap: 0.5rem; padding: 0.875rem; }
	.wcp-dashboard__tile-icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
	.wcp-dashboard__tile-text { display: none; }
}


/* ── Bestelpagina met accountkop (#246): datum en status staan in de kop, WooCommerce' zin
   "Bestelling #… is geplaatst op … en is op dit moment …" (view-order.php) vervalt dan. ── */
.wcp-account-has-header.woocommerce-view-order .woocommerce-MyAccount-content > p:has(> mark.order-number) { display: none; }
.wcp-account-header__meta .wcp-order-status { margin-left: 0.375rem; vertical-align: 0.1em; }

/* Koppen in de accountinhoud (ook van add-ons, bv. "Bestelling omzetten naar offerte") op de schaal van de
   sectiekoppen, niet op de grote h2 van het thema. */
.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3) {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1.3;
}
.woocommerce-account .woocommerce-MyAccount-content .wcp-card:not(:has(> .wcp-card__body)),
.woocommerce-account .woocommerce-MyAccount-content .wcp-card > .wcp-card__body { padding: 1.25rem 1.5rem; }
.woocommerce-account .woocommerce-MyAccount-content .wcp-card > :last-child { margin-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-content .wcp-card p { color: var(--wcp-color-muted); }
/* Alleen een factuuradres (geen verzendadres): WC zet kop en adres los in de sectie; dan is de sectie de kaart. */
.woocommerce-view-order .woocommerce-customer-details:not(:has(.woocommerce-columns--addresses)) {
	padding: 1.25rem 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
/* Adres bewerken met accountkop: "Factuuradres"/"Verzendadres" staat al als titel in de kop. */
.wcp-account-has-header.woocommerce-edit-address .woocommerce-MyAccount-content > form > h2:first-child { display: none; }

/* ── Getinte achtergrond op Mijn account (ingelogd, met accountkop), zoals de inlogpagina's (#246) ──
   De witte kaarten (menu, tegels, bestellingen, formulieren) komen daardoor los van de pagina. */
.wcp-account-has-header #main,
.wcp-account-has-header main {
	display: flow-root; /* de marge van de accountkop valt anders door main heen (witte strook onder de header) */
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	background: var(--wcp-color-surface-alt, #f6f8fa);
}
.wcp-account-has-header .site-footer { margin-top: 0; }

/* ── Bestelpagina (#248, templates/woocommerce/order/order-details-account.php) ──
   Acties in de accountkop; een overzichtskaart met voortgang, gegevens en totalen; de producten in een eigen kaart. */
.wcp-account-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-left: auto;
}
.wcp-account-header__action { gap: 0.4rem; padding: 0.5rem 0.95rem; font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-account-header__action.wcp-btn--outline { border-color: var(--wcp-color-border); background: var(--wcp-color-surface, #fff); }
.wcp-account-header__action.wcp-btn--outline:hover { border-color: var(--wcp-color-dark); background: var(--wcp-color-surface, #fff); color: var(--wcp-color-dark); }
@media (max-width: 35.98rem) {
	.wcp-account-header:has(.wcp-account-header__actions) { flex-wrap: wrap; }
	.wcp-account-header__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		margin-left: 0;
	}
	.wcp-account-header__action { justify-content: center; }
	.wcp-account-header__action:first-child:not(:last-child):nth-last-child(odd) { grid-column: 1 / -1; }
}

.woocommerce-view-order .woocommerce-MyAccount-content > .woocommerce-order-details.wcp-order-view:not(.woocommerce-info) {
	display: grid;
	gap: 1.25rem;
	padding: 0;
	border: 0;
	background: none;
}

.wcp-order-view__summary,
.wcp-order-view__items {
	padding: 1.25rem 1.5rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
}
@media (max-width: 47.98rem) {
	.wcp-order-view__summary,
	.wcp-order-view__items { padding: 1rem; }
}

/* Voortgang: een balkje per stap, gevuld tot en met de huidige stap. */
.wcp-order-progress {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.375rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.wcp-order-progress__step { display: grid; gap: 0.5rem; margin: 0; }
.wcp-order-progress__bar {
	height: 0.375rem;
	border-radius: 999px;
	background: var(--wcp-color-surface-alt, #eef2f6);
}
.wcp-order-progress__step:is(.is-done, .is-current) .wcp-order-progress__bar { background: var(--wcp-color-primary); }
.wcp-order-progress__label {
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.wcp-order-progress__step.is-done .wcp-order-progress__label { color: var(--wcp-color-text); }
.wcp-order-progress__step.is-current .wcp-order-progress__label { color: var(--wcp-color-primary); font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-order-progress__step:last-child { text-align: right; }

/* Gegevens links (adressen, methodes, opmerking), totalen rechts, samen in een getint vlak. */
.wcp-order-view__panel {
	display: grid;
	gap: 1.25rem 2rem;
	padding: 1.25rem;
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface-alt, #f6f8fa);
}
@media (min-width: 62rem) {
	.wcp-order-view__panel { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.wcp-order-view__facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1.125rem 1.5rem;
}
.wcp-order-view__fact--wide { grid-column: 1 / -1; }
/* Label klein en grijs, waarde in donkere tekst: zo zie je in één oogopslag wat wat is. */
.woocommerce-account .woocommerce-MyAccount-content .wcp-order-view__label {
	margin: 0 0 0.375rem;
	color: var(--wcp-color-muted);
	font-size: 0.75rem;
	font-weight: var(--wcp-font-weight-bold, 700);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.wcp-order-view__fact address,
.wcp-order-view__fact p {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wcp-color-text);
	font-size: var(--wcp-font-size-sm, 0.9375rem);
	font-style: normal;
	line-height: 1.55;
}

/* Totalen als eigen wit blok in het vlak. */
.wcp-order-view__totals {
	display: grid;
	align-content: start;
	margin: 0;
	padding: 0.75rem 1.125rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm, 0.5rem);
	background: var(--wcp-color-surface, #fff);
}
.wcp-order-view__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-order-view__total:first-child { padding-top: 0.25rem; }
.wcp-order-view__total dt { margin: 0; color: var(--wcp-color-muted); font-weight: var(--wcp-font-weight-normal, 400); }
.wcp-order-view__total dd { margin: 0; text-align: right; }
.wcp-order-view__total--order_total { padding: 0.75rem 0 0.25rem; border-bottom: 0; font-size: 1.125rem; }
.wcp-order-view__total--order_total dt { color: var(--wcp-color-text); font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-order-view__total--order_total dd { font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-order-view__total--order_total dd small { display: block; color: var(--wcp-color-muted); font-size: 0.75rem; font-weight: var(--wcp-font-weight-normal, 400); }

.wcp-order-view__items .woocommerce-order-details__title { margin-bottom: 0.25rem; }

/* Updates bij de bestelling (klantnotities) als rustige lijst in een kaart. */
.woocommerce-view-order .woocommerce-MyAccount-content > h2 + .woocommerce-OrderUpdates {
	margin: 0 0 1.25rem;
	padding: 0.5rem 1.25rem;
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface, #fff);
	list-style: none;
}
.woocommerce-view-order .woocommerce-OrderUpdates li { margin: 0; padding: 0.75rem 0; border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border); }
.woocommerce-view-order .woocommerce-OrderUpdates li:first-child { border-top: 0; }
.woocommerce-view-order .woocommerce-OrderUpdate-meta { margin: 0 0 0.25rem; color: var(--wcp-color-muted); font-size: 0.8125rem; }
.woocommerce-view-order .woocommerce-OrderUpdate-description p { margin: 0; }

/* Afdrukken: alleen de bestelling. */
@media print {
	.wcp-account-has-header :is(#wcp-header, .site-header, .site-footer, .woocommerce-MyAccount-navigation, .wcp-account-header__actions, .wcp-account-header__back, .wcp-whatsapp, #announcement) { display: none !important; }
	.wcp-account-has-header main { background: none; }
	.woocommerce-account .woocommerce:has(> .wcp-account-header) { display: block; }
	.wcp-order-view__summary, .wcp-order-view__items { break-inside: avoid; }
}