@charset "UTF-8";
/* WC Plus core — cart/checkout. Lean, tokens-gedreven, Bootstrap-vrij. */

/* Minimum-bestelbedrag notice + progress-bar (was Bootstrap .progress/.progress-bar). */
.wcp-min-order {
	margin: 0 0 1rem;
}
.wcp-min-order__text {
	margin: 0 0 0.5rem;
}
.wcp-progress {
	height: 0.5rem;
	background: var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	overflow: hidden;
}
.wcp-progress__bar {
	height: 100%;
	background: var(--wcp-color-primary, #873EFF);
	transition: width 0.3s ease;
}

/* Coupon-verwijderlink (was Bootstrap .badge). */
.wcp-coupon-remove {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: var(--wcp-radius-sm, 0.25rem);
	background: var(--wcp-color-light, #f5f4f0);
	color: var(--wcp-color-dark, #374151);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	text-decoration: none;
}
.wcp-coupon-remove:hover {
	background: var(--wcp-color-border, #e5e7eb);
}

/* ─────────────────────────────────────────────────────────────
   Checkout-wizard (was Bootstrap grid + .d-flex/.step/.collapse).
   ───────────────────────────────────────────────────────────── */
.wcp-checkout__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media ( min-width: 62rem ) {
	.wcp-checkout__columns {
		grid-template-columns: 1.4fr 1fr;
	}
}
.wcp-checkout__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.wcp-checkout__title {
	margin: 0;
}
/* Stap-indicator. */
.wcp-checkout__steps {
	list-style: none;
	counter-reset: wcp-step;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1rem 0 1.5rem;
	padding: 0;
}
.wcp-checkout__step {
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
/* Stap-koppen. */
.wcp-checkout__step-header {
	margin: 1.5rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
}
.wcp-checkout__step-header--first {
	margin-top: 0.5rem;
}
.wcp-checkout__step-header h3 {
	margin: 0;
}
.wcp-checkout__step-number {
	color: var(--wcp-color-primary, #873EFF);
}
/* Review/totalen-kolom: volledige gekleurde kolom (demo-pariteit), inhoud sticky. */
.wcp-checkout__totals {
	background: var(--wcp-checkout-aside-bg, var(--wcp-color-light, #f5f4f0));
	border-radius: var(--wcp-radius, 0.375rem);
	padding: 1.5rem;
	align-self: stretch;
}
.wcp-checkout__totals-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.wcp-checkout__totals-title {
	margin: 0;
	font-size: 1.125rem;
}
.wcp-checkout__edit-link {
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
/* Verzending staat in de aparte verzendstap → dubbele rij in de review-tabel verbergen. */
.wcp-checkout__totals .woocommerce-shipping-totals {
	display: none;
}
/* Opmerkingen-toggle. */
.wcp-checkout__notes-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
.wcp-checkout__notes {
	display: none;
	margin-top: 0.75rem;
}
.wcp-checkout__notes.is-open {
	display: block;
}
/* Info-box (bv. alleen digitale producten). */
.wcp-checkout__info {
	background: var(--wcp-color-light, #f5f4f0);
	border-radius: var(--wcp-radius, 0.375rem);
	padding: 0.75rem 1rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

/* Coupon-proxy (was Bootstrap .collapse / .input-group / .form-control / .btn). */
.wcp-coupon-toggle {
	display: inline-block;
	margin: 0.5rem 0;
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	cursor: pointer;
}
.wcp-coupon--collapsible {
	display: none;
}
.wcp-coupon--collapsible.is-open {
	display: block;
}
.wcp-coupon__group {
	display: flex;
	max-width: 22rem;
}
.wcp-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem) 0 0 var(--wcp-radius, 0.375rem);
}
.wcp-coupon__apply {
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	border: 0;
	background: var(--wcp-color-primary, #873EFF);
	color: #fff;
	border-radius: 0 var(--wcp-radius, 0.375rem) var(--wcp-radius, 0.375rem) 0;
	cursor: pointer;
}
.wcp-coupon__apply:hover {
	filter: brightness( 0.95 );
}

/* .wcp-payment-icons staat globaal in mini-cart.css (gedeeld door mini-cart/cart/footer). */

/* USP-lijst (was Bootstrap .list-unstyled). */
.wcp-usps__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	gap: 1rem;
}
.wcp-usps__list--vertical {
	flex-direction: column;
	gap: 0.5rem;
}
.wcp-usps__item {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
}
.wcp-usps__head {
	font-weight: var(--wcp-font-weight-medium, 500);
}
.wcp-usps__text {
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

/* ── Checkout: nette formulierrijen (WC form-row-classes, geen Bootstrap) ── */
.wcp-checkout__main .form-row {
	display: block;
	margin: 0 0 1rem;
}
.wcp-checkout__main .form-row label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-checkout__main .form-row .input-text,
.wcp-checkout__main .form-row select,
.wcp-checkout__main .form-row textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background-color: #fff;
}
.wcp-checkout__main .form-row .input-text:focus,
.wcp-checkout__main .form-row select:focus {
	outline: 0;
	border-color: var(--wcp-color-primary, #873EFF);
}
@media (min-width: 36rem) {
	.wcp-checkout__main .woocommerce-billing-fields__field-wrapper,
	.wcp-checkout__main .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}
	.wcp-checkout__main .form-row-wide { grid-column: 1 / -1; }
}
/* inline-errors: verborgen tot WC het veld invalid markeert */
.wcp-checkout__main .form-row .error { display: none; color: #9b1c1c; }
.wcp-checkout__main .form-row.woocommerce-invalid .error-required { display: block; }

/* zakelijk/privé-radio als knoppenrij */
/* Dubbele selector: de generieke wrapper-fix (.wcp-checkout__main .form-row .woocommerce-
   input-wrapper → display:block) is specifieker en zou de gap tussen de vakjes slopen. */
.wcp-radio-buttons .woocommerce-input-wrapper,
.wcp-checkout__main .form-row.wcp-radio-buttons .woocommerce-input-wrapper {
	display: inline-flex;
	gap: 0.5rem;
	position: relative;
}
/* WC rendert de radio-input als sibling VÓÓR het label (niet erin) — native bullet
   visueel verbergen en een custom bullet ín het vakje tekenen (legacy-pariteit). */
.wcp-radio-buttons .woocommerce-input-wrapper > input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.wcp-radio-buttons .woocommerce-input-wrapper .radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	cursor: pointer;
	margin: 0;
}
.wcp-radio-buttons .woocommerce-input-wrapper .radio::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	border: 1px solid var(--wcp-color-border, #c9cdd3);
	border-radius: 50%;
	background: #fff;
}
.wcp-radio-buttons .woocommerce-input-wrapper input:checked + .radio {
	border-color: var(--wcp-color-primary, #873EFF);
	background-color: color-mix(in srgb, var(--wcp-color-primary, #873EFF) 8%, #fff);
}
.wcp-radio-buttons .woocommerce-input-wrapper input:checked + .radio::before {
	border-color: var(--wcp-color-primary, #873EFF);
	background: var(--wcp-color-primary, #873EFF);
	box-shadow: inset 0 0 0 3px #fff;
}
.wcp-radio-buttons .woocommerce-input-wrapper input:focus-visible + .radio {
	outline: 2px solid var(--wcp-color-primary, #873EFF);
	outline-offset: 2px;
}
/* Het veld-label draagt de verplicht-ster al; niet herhalen in elk optievakje. */
.wcp-radio-buttons .woocommerce-input-wrapper .radio .required { display: none; }
.wcp-checkout__main .form-row.wcp-is-hidden { display: none; }

/* totals-kolom: sticky op desktop */
@media (min-width: 62rem) {
	.wcp-checkout__totals-inner { position: sticky; top: 1.5rem; }
}

/* bestellijst (review-order): compacte productregels */
.wcp-checkout__totals .shop_table img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-checkout__totals .shop_table td,
.wcp-checkout__totals .shop_table th {
	padding: 0.5rem 0;
	vertical-align: middle;
}
.wcp-checkout__totals .shop_table .product-name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
/* inputs altijd vol in hun grid-cel */
.wcp-checkout__main .form-row input.input-text,
.wcp-checkout__main .form-row input[type="text"],
.wcp-checkout__main .form-row input[type="email"],
.wcp-checkout__main .form-row input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* WC wikkelt inputs in een inline span → block, anders krimpt width:100% tot intrinsiek */
.wcp-checkout__main .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* WC-layout zet form-row-first/-last op 47% + float — in ons grid moet de rij de cel vullen */
.wcp-checkout__main .form-row-first,
.wcp-checkout__main .form-row-last {
	width: 100% !important;
	float: none !important;
}

/* ── Wizard-stappenbalk: pijlvormige segmenten (demo-pariteit) ── */
.wcp-checkout__steps {
	display: flex;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	overflow: hidden;
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-checkout__step {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem 0.75rem 1.75rem;
	background: var(--wcp-color-light, #f5f4f0);
	color: var(--wcp-color-dark, #374151);
	font-weight: 500;
	white-space: nowrap;
	clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%, 0.9rem 50%);
}
.wcp-checkout__step:first-child {
	clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
	padding-left: 1rem;
	border-radius: var(--wcp-radius, 0.375rem) 0 0 var(--wcp-radius, 0.375rem);
}
.wcp-checkout__step:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.9rem 50%);
	border-radius: 0 var(--wcp-radius, 0.375rem) var(--wcp-radius, 0.375rem) 0;
}
.wcp-checkout__step.is-active {
	background: var(--wcp-color-primary, #873EFF);
	color: #fff;
}
.wcp-checkout__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #fff;
	color: var(--wcp-color-dark, #374151);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-bold, 700);
	flex-shrink: 0;
}
.wcp-checkout__step.is-active .wcp-checkout__step-num { color: var(--wcp-color-primary, #873EFF); }
@media (max-width: 47.99rem) {
	.wcp-checkout__step-label { display: none; }
	.wcp-checkout__step { padding: 0.6rem 1rem 0.6rem 1.5rem; }
}

/* ── Stap 1: één kolom — checkboxes (opmerking/afwijkend adres) ónder de velden ── */
.wcp-checkout__main #customer_details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.wcp-checkout__main #customer_details .col-1,
.wcp-checkout__main #customer_details .col-2 {
	width: 100%;
	float: none;
}

/* ── Bestellijst: paars totaalblok + BTW-regel (demo-pariteit) ── */
.wcp-checkout__totals .shop_table tr.order-total th,
.wcp-checkout__totals .shop_table tr.order-total td {
	background: color-mix(in srgb, var(--wcp-color-primary, #873EFF) 8%, #fff) !important; /* wint van de transparant-reset hierboven */
	color: var(--wcp-color-primary, #873EFF);
	font-size: 1.15rem;
	padding: 0.75rem;
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-checkout__totals .shop_table tr.order-total .includes_tax {
	display: block;
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: 400;
}

/* minimale checkout-header (distraction-free) */
.site-header--minimal { border-bottom: 0; }
.site-header--minimal .site-header__inner { padding: 1.5rem 0 0.5rem; }

/* stappenbalk: altijd op één regel (segmenten krimpen mee, labels knippen af) */
.wcp-checkout__steps { flex-wrap: nowrap; }
.wcp-checkout__step {
	min-width: 0;
	padding: 0.6rem 0.75rem 0.6rem 1.4rem;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-checkout__step:first-child { padding-left: 0.75rem; }
.wcp-checkout__step-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Kop + wizard-balk staan nu vol-breed BOVEN de kolommen ── */
.wcp-checkout__header { margin-bottom: 1.25rem; }
.wcp-checkout__login { color: var(--wcp-color-muted, #6c757d); }
.wcp-checkout__login a { color: var(--wcp-color-primary, #873EFF); }
.wcp-checkout__steps { margin-bottom: 2rem; }

/* WC's eigen "Je bestelling"-kop: de review-tabel staat rechts onder "Bestellijst" —
   deze losse heading in de linkerkolom heeft daar geen inhoud meer bij. */
.wcp-checkout__main #order_review_heading { display: none; }

/* ── Review-tabel: thumb + naam naast elkaar, aantal-badge op de hoek van de thumb ── */
.wcp-checkout__totals .shop_table td.product-name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.wcp-checkout__totals .shop_table .product-name .thumb {
	position: relative;
	flex-shrink: 0;
}
.wcp-checkout__totals .shop_table .product-name .title { min-width: 0; }

/* Review-tabel op de gekleurde kolom: transparant, geen koprij, subtiele scheidingslijnen. */
.wcp-checkout__totals .shop_table thead { display: none; }
.wcp-checkout__totals .shop_table,
.wcp-checkout__totals .shop_table th,
.wcp-checkout__totals .shop_table td {
	/* !important: WC's `.woocommerce-page table.shop_table`-varianten winnen anders */
	background: transparent !important;
	border: 0 !important;
}
.wcp-checkout__totals .shop_table tbody tr,
.wcp-checkout__totals .shop_table tfoot tr {
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
}
.wcp-checkout__totals .shop_table tfoot tr:last-child,
.wcp-checkout__totals .shop_table tr.order-total { border-bottom: 0; }

/* ── "Afwijkend bezorgadres"-toggle: gewone checkboxregel i.p.v. WC's h3 (demo-pariteit) ── */
.wcp-checkout__main #ship-to-different-address {
	font-size: 1rem;
	font-weight: 400;
	margin: 0 0 0.25rem;
}
.wcp-checkout__main #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* ── Stap 2: verzendopties als nette lijst (geen tabel-kop) ── */
.wcp-checkout__main .shipping-step table,
.wcp-checkout__main .shipping-step tbody,
.wcp-checkout__main .shipping-step tr,
.wcp-checkout__main .shipping-step td { display: block; width: 100%; border: 0; padding: 0; background: transparent; }
.wcp-checkout__main .shipping-step th { display: none; }
.wcp-checkout__main .shipping-step ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.wcp-checkout__main .shipping-step ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-checkout__main .shipping-step ul#shipping_method li:has(input:checked) {
	border-color: var(--wcp-color-primary, #873EFF);
	background: color-mix(in srgb, var(--wcp-color-primary, #873EFF) 6%, #fff);
}
.wcp-checkout__main .shipping-step ul#shipping_method input[type="radio"] {
	accent-color: var(--wcp-color-primary, #873EFF);
	margin: 0;
}
.wcp-checkout__main .shipping-step ul#shipping_method label { margin: 0; cursor: pointer; flex: 1; }

/* ── Stap 3: betaalmethoden als kaart-rijen, geselecteerd = paars (demo-pariteit) ── */
.wcp-checkout__main #payment {
	background: transparent !important; /* WC-core zet #payment op grijs met gelijke specificiteit */
	border-radius: 0;
}
.wcp-checkout__main #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0 !important; /* WC zet hier 1em op met gelijke specificiteit */
	border: 0;
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
	border-color: var(--wcp-color-primary, #873EFF);
	background: color-mix(in srgb, var(--wcp-color-primary, #873EFF) 8%, #fff);
}
.wcp-checkout__main #payment ul.payment_methods input.input-radio {
	accent-color: var(--wcp-color-primary, #873EFF);
	margin: 0;
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label {
	margin: 0;
	cursor: pointer;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.5; /* WC zet line-height 2 op betaal-labels → rijen hoger dan de verzendrijen */
}
/* Gateway-icoon (Mollie e.d.) rechts uitlijnen in de rij. */
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label img,
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label i {
	margin-left: auto;
}
/* Omschrijving van de geselecteerde methode: blok onder de rij. */
.wcp-checkout__main #payment div.payment_box {
	flex: 1 1 100%;
	margin: 0.25rem 0 0 !important; /* WC-marge (≈1em boven én onder) wint anders de tie */
	padding: 0.75rem 1rem;
	background: var(--wcp-color-light, #f5f4f0);
	border-radius: var(--wcp-radius, 0.375rem);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-checkout__main #payment div.payment_box::before { display: none !important; }
.wcp-checkout__main #payment .woocommerce-privacy-policy-text {
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}