/* =========================================================
   Brini — Afrekenen / Checkout
   ontwerp-node 482:9555 — 2 koloms: klantgegevens links, besteloverzicht rechts.
   CSS-only: stijlt de standaard WooCommerce-checkout-markup.
   Markup zit al in <main.sellabees-shop><div.sellabees-container> (parent-thema).
   ========================================================= */

/* Lokale tokens uit de ontwerp-design */
.woocommerce-checkout {
	--co-field-border:   #d9d9d9;   /* veld- en boxranden */
	--co-field-radius:   2px;
	--co-field-height:   53px;
	--co-label:          #000;
	--co-help:           #000;
	--co-gap:            19px;       /* horizontale tussenruimte 2 velden (362 -> 743) */
}

/* Paginatitel "AFREKENEN" (Impact 40px) — WC-shop-titel hergebruiken */
.woocommerce-checkout-page .sellabees-shop__title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .sellabees-entry__title,
body.woocommerce-checkout .sellabees-page-title {
	font-family: var(--sellabees-font-heading);
	font-size: 40px;
	text-transform: uppercase;
	color: var(--sellabees-ink);
	margin: 0 0 28px;
}

/* ---------------------------------------------------------
   Hoofd-grid: gegevens (links) + besteloverzicht (rechts)
   ontwerp: links 362–1105 (≈743px), rechts 1152–1564 (412px), tussenruimte ≈47px
   --------------------------------------------------------- */
/* Checkout-content gebruikt de smalle 1200-container (ontwerp: x362–1564 = 1202px),
   niet de globale 1458px. Alleen de content in <main> — footer blijft 1458. */
.woocommerce-checkout #site-main .sellabees-container {
	max-width: 1202px;
}

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 743fr) 412fr;
	column-gap: 47px;
	align-items: start;
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-ink);
}

/* Linkerkolom: contact/adres + Verzendopties + Betalingsopties + knop. */
.woocommerce-checkout .sellabees-co__main {
	grid-column: 1;
	min-width: 0;
}
/* Rechterkolom: alleen de compacte besteloverzicht-kaart (sticky). */
.woocommerce-checkout #order_review {
	grid-column: 2;
	align-self: start;
	position: sticky;
	top: 24px;
}

/* Verzendopties / Betalingsopties-secties krijgen lucht boven de kop. */
.woocommerce-checkout .sellabees-co-shipping-section,
.woocommerce-checkout .sellabees-co-payment-section {
	margin-top: 45px;
}

/* col2-set: billing + shipping onder elkaar in de linkerkolom */
.woocommerce-checkout #customer_details.col2-set {
	display: block;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	padding: 0;
}

/* ---------------------------------------------------------
   Sectiekoppen (Impact 20px uppercase)
   --------------------------------------------------------- */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	font-family: var(--sellabees-font-heading);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sellabees-ink);
	margin: 0 0 8px;
}
.woocommerce-checkout #order_review_heading {
	display: none; /* "Je bestelling" — komt al in de besteloverzicht-kaart */
}
.woocommerce-checkout .sellabees-checkout__heading {
	margin: 0 0 4px;
}

/* Tweede sectie (Verzendadres) krijgt ruimte boven de kop. */
.woocommerce-checkout .sellabees-checkout-section--address {
	margin-top: 45px;
}

/* Begeleidende hulptekst onder een sectiekop (Avenir Book 14px, lh 29). */
.woocommerce-checkout .sellabees-checkout__help {
	margin: 0 0 18px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: var(--co-help);
}
.woocommerce-checkout .sellabees-checkout__guest {
	margin: -6px 0 14px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 13px;
	color: var(--sellabees-ink);
}

/* ---------------------------------------------------------
   Formuliervelden
   --------------------------------------------------------- */
.woocommerce-checkout .form-row {
	margin: 0;
	padding: 0;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 21px var(--co-gap);
}

/* Volledige breedte vs halve breedte (voor-/achternaam, postcode/plaats) */
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row.create-account {
	flex: 0 0 100%;
	width: 100%;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	flex: 1 1 calc(50% - (var(--co-gap) / 2));
	width: calc(50% - (var(--co-gap) / 2));
	min-width: 0;
}

/* Land/regio bovenaan het verzendadres (ontwerp-volgorde) — afgedwongen via order,
   omdat WooCommerce de DOM-volgorde van de adresvelden zelf bepaalt. */
.woocommerce-checkout #billing_country_field {
	order: -1;
}

/* Labels (Avenir Book 14px, zwart) */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .woocommerce-form__label {
	display: block;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--co-label);
	margin: 0 0 6px;
	line-height: 1.3;
}
/* Geen verplicht-/optioneel-markeringen (design toont die niet). */
.woocommerce-checkout .required,
.woocommerce-checkout .optional {
	display: none;
}

/* ---------------------------------------------------------
   Floating labels — het label zit ín het veld en zweeft
   omhoog bij focus of wanneer het veld gevuld is.
   .sellabees-float wordt door theme.js op de tekst/select-rijen
   gezet (niet op checkbox-rijen). .is-filled idem.
   --------------------------------------------------------- */
.woocommerce-checkout .form-row.sellabees-float {
	position: relative;
}
.woocommerce-checkout .form-row.sellabees-float > label {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	background: #fff;
	font-size: 14px;
	color: #000;
	line-height: 1;
	pointer-events: none;
	transition: top .12s ease, font-size .12s ease;
	z-index: 2;
}
.woocommerce-checkout .form-row.sellabees-float.is-filled > label,
.woocommerce-checkout .form-row.sellabees-float:focus-within > label {
	top: 0;
	font-size: 11px;
}

/* Inputs / selects / textarea */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	height: var(--co-field-height);
	border: 1px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	background: #fff;
	padding: 0 16px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
	line-height: var(--co-field-height);
	box-shadow: none;
	outline: none;
}
.woocommerce-checkout .form-row textarea {
	height: 109px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
	color: var(--sellabees-muted);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--sellabees-red);
}

/* Select2 (land-keuze) uitlijnen met de overige velden */
.woocommerce-checkout .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 12px;
}

/* ---------------------------------------------------------
   Checkboxen ("Account aanmaken", "Gebruik hetzelfde adres",
   "Voeg een notitie toe") — 23px vierkant, grijze fill (#d9d9d9)
   --------------------------------------------------------- */
.woocommerce-checkout .woocommerce-form__input-checkbox,
.woocommerce-checkout input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	margin: 0 19px 0 0;       /* ontwerp-data: label-x − box-rechterrand ≈ 19px */
	border: 1px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	background: #d9d9d9;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}
.woocommerce-checkout input[type="checkbox"]:checked {
	background: #d9d9d9;
	border-color: #d9d9d9;
}
.woocommerce-checkout input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--sellabees-black, #231f20);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 300;
	cursor: pointer;
}
.woocommerce-checkout .woocommerce-account-fields .create-account {
	margin-top: 4px;
}

/* Login-prompt ("Je rekent momenteel af als gast." + Inloggen-link) */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-form-login-toggle .woocommerce-info {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--sellabees-ink);
}
.woocommerce-form-login-toggle .woocommerce-info::before { content: none; }
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .showlogin {
	color: var(--sellabees-red);
	font-weight: 400;
}

/* Optionele velden als "+ label"-toggle (appartement, bestelnotitie). */
.woocommerce-checkout .form-row.sellabees-optional.is-collapsed > label,
.woocommerce-checkout .form-row.sellabees-optional.is-collapsed > .woocommerce-input-wrapper {
	display: none;
}
.woocommerce-checkout .sellabees-field-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .sellabees-field-toggle:hover {
	color: var(--sellabees-red);
}

/* WooCommerce "Verzenden naar een ander adres?" verbergen — we gebruiken het
   verzendadres ook als factuuradres (zie statische checkbox hieronder). */
.woocommerce-checkout #ship-to-different-address {
	display: none;
}

/* Statische "Gebruik hetzelfde adres voor facturering"-checkbox (ontwerp, aangevinkt). */
.woocommerce-checkout .sellabees-co-samecheck {
	display: flex;
	align-items: center;
	gap: 19px;
	margin: 4px 0 0;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .sellabees-co-samecheck__box {
	flex: 0 0 23px;
	width: 23px;
	height: 23px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	background: #d9d9d9;
	position: relative;
}
.woocommerce-checkout .sellabees-co-samecheck__box::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--sellabees-black, #231f20);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------------------------------------------------------
   BESTELOVERZICHT (rechterkaart)
   Witte box, rand #d9d9d9, kop Impact 16px uppercase
   --------------------------------------------------------- */
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--co-field-border);
	border-radius: 0;                 /* ontwerp: scherpe hoeken */
	padding: 23px 0 21px;             /* horizontale padding op cellen → dividers full-bleed */
}
/* Kaarttitel "BESTELOVERZICHT" (Impact 16px uppercase). */
.woocommerce-checkout #order_review::before {
	content: "Besteloverzicht";
	display: block;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--sellabees-ink);
	margin: 0 0 24px;
	padding: 0 20px;
}

/* Productthumbnail (75×75) vóór de naam — toegevoegd via filter
   woocommerce_cart_item_name op de checkout. Float zodat naam + meta
   er netjes naast vloeien. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name {
	overflow: hidden;
}
.woocommerce-checkout .sellabees-co-thumb {
	float: left;
	width: 75px;
	height: 75px;
	margin-right: 15px;       /* ontwerp-data: naam op x1263, thumb-rechterrand x1248 */
	object-fit: contain;
}
.woocommerce-checkout .sellabees-co-name {
	font-weight: 300;
}

/* Tabel met regels + totalen */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
	display: none; /* "Product / Subtotaal"-kop staat niet in de design */
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 0;
	border: 0;
	text-align: left;
	vertical-align: top;
}

/* Productregels */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td {
	padding: 14px 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name {
	font-weight: 300;
	font-size: 14px;
	line-height: 1.4;
	padding: 14px 12px 14px 20px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-quantity {
	font-weight: 300;
	color: var(--sellabees-muted);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .variation,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .wc-item-meta {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	font-style: italic;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .variation p,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .wc-item-meta p {
	margin: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-total {
	text-align: right;
	white-space: nowrap;
	font-weight: 300;
	padding: 14px 15px 14px 0;
}

/* Scheidingslijn tussen regels en totalen */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item {
	border-bottom: 1px solid var(--co-field-border);
}

/* Totalen (Subtotaal / Totaal): labels Avenir Heavy 800, bedragen Book 300. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	padding: 11px 0 11px 20px;
	font-size: 14px;
	font-family: var(--sellabees-font-body);
	font-weight: 800 !important;     /* Avenir Heavy 85 — wint van globale th{bold} */
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	padding: 11px 15px 11px 0;
	font-size: 14px;
	text-align: right;
	font-weight: 300;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-amount {
	font-weight: 300;                /* bedrag = Book, niet vet */
}
/* Alleen een scheidingslijn bóven het eindtotaal (subtotaal grenst aan de
   laatste regel-divider). */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-top: 1px solid var(--co-field-border);
}

/* ---------------------------------------------------------
   BETALINGSOPTIES — visuele weergave (ontwerp) + verborgen echte
   WooCommerce-methodes (blijven functioneel in de DOM).
   --------------------------------------------------------- */
.woocommerce-checkout .sellabees-pay-visual {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-checkout .sellabees-pay-visual__item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 53px;
	border-top: 1px solid #d9d9d9;
}
.woocommerce-checkout .sellabees-pay-visual__item:last-child {
	border-bottom: 1px solid #d9d9d9;
}
.woocommerce-checkout .sellabees-pay-visual__radio {
	width: 18px;
	height: 17px;
	flex: 0 0 18px;
	background: #d9d9d9;       /* ontwerp 482:9611 e.v.: neutrale grijze schijf, geen selectie */
	border-radius: 50%;
	position: relative;
}
.woocommerce-checkout .sellabees-pay-visual__label {
	flex: 1 1 auto;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .sellabees-pay-visual__logo {
	height: 27px;             /* ontwerp-data: logo-assets ~71×27 / 54×27 / 25×25 */
	width: auto;
	margin-left: auto;
}

/* Echte WC-betaalmethodes + instructiebox verbergen (alleen visuele lijst tonen);
   #payment blijft bestaan voor de place-order-knop + nonce. */
.woocommerce-checkout #payment .wc_payment_methods,
.woocommerce-checkout #payment .payment_box {
	display: none !important;
}

.woocommerce-checkout #payment {
	background: none;
	border: 0;
	border-radius: 0;
	margin-top: 0;
}
.woocommerce-checkout #payment .payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-checkout #payment .payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 11px;
	border-top: 1px solid #d9d9d9;
	padding: 0;
	margin: 0;
	min-height: 53px;
}
.woocommerce-checkout #payment .payment_methods li.wc_payment_method:last-of-type {
	border-bottom: 1px solid #d9d9d9;
}
.woocommerce-checkout #payment .payment_methods label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
	cursor: pointer;
	margin: 0;
}
/* Het uitleg-/instructieblok onder een betaalmethode op volle breedte. */
.woocommerce-checkout #payment .payment_box {
	flex: 0 0 100%;
}
/* Radio-knoppen (open cirkel, rood bij selectie) */
.woocommerce-checkout #payment input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	border: 1px solid var(--sellabees-muted);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.woocommerce-checkout #payment input[type="radio"]:checked {
	border-color: var(--sellabees-red);
}
.woocommerce-checkout #payment input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sellabees-red);
}
.woocommerce-checkout #payment .payment_methods label img {
	display: inline-block;
	height: 24px;
	width: auto;
	margin: 0 0 0 auto;
}
.woocommerce-checkout #payment .payment_box {
	background: var(--sellabees-search-bg);
	border-radius: var(--co-field-radius);
	margin: 8px 0 0;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--sellabees-muted);
}
.woocommerce-checkout #payment .payment_box::before { content: none; }

/* Voorwaarden-tekst onder de betaalopties */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .sellabees-checkout__terms {
	margin: 16px 0;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--sellabees-ink);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .sellabees-checkout__terms a {
	color: var(--sellabees-red);
}

/* "Terug naar winkelwagen"-link (Impact 16px, #242424, pijl ervoor). */
.woocommerce-checkout .sellabees-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	color: #242424;
	text-decoration: none;
}
.woocommerce-checkout .sellabees-checkout__back:hover {
	color: var(--sellabees-red);
}

/* ---------------------------------------------------------
   VERZENDOPTIES (links) — radio's met dunne scheidingslijnen
   --------------------------------------------------------- */
.woocommerce-checkout .sellabees-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-checkout .sellabees-shipping-methods__item {
	border-top: 1px solid #d9d9d9;
	padding: 0;
	margin: 0;
}
.woocommerce-checkout .sellabees-shipping-methods__item:last-child {
	border-bottom: 1px solid #d9d9d9;
}
.woocommerce-checkout .sellabees-shipping-methods__item label {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 53px;
	margin: 0;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-ink);
	cursor: pointer;
}
.woocommerce-checkout .sellabees-shipping-methods input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 17px;
	flex: 0 0 18px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;       /* ontwerp 482:9610 e.v.: gevulde grijze schijf in rust */
	cursor: pointer;
	position: relative;
}
.woocommerce-checkout .sellabees-shipping-methods input[type="radio"]:checked {
	background: #fff;
	border: 1px solid var(--sellabees-red);
}
.woocommerce-checkout .sellabees-shipping-methods input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sellabees-red);
}
.woocommerce-checkout .sellabees-shipping-methods__label .amount {
	font-weight: 300;
}

/* ---------------------------------------------------------
   Knoprij: voorwaarden (vol), dan "terug" links + knop rechts
   --------------------------------------------------------- */
.woocommerce-checkout #payment .place-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	padding: 8px 0 0;
	margin: 0;
}
.woocommerce-checkout #payment .place-order .sellabees-checkout__terms {
	flex: 0 0 100%;
}
.woocommerce-checkout #payment .place-order .sellabees-checkout__back {
	margin-right: auto;
}
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 231px;
	height: 40px;
	padding: 0 28px;
	background: var(--sellabees-red);
	color: #fff;
	border: 0;
	border-radius: var(--co-field-radius);
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .place-order button:hover {
	background: var(--sellabees-red-dark);
}

/* Coupon-/info-meldingen netjes binnen de huisstijl */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
	font-family: var(--sellabees-font-body);
	font-size: 14px;
}

/* ---------------------------------------------------------
   Besteloverzicht-balk-header: op DESKTOP altijd verborgen
   (de kaart staat dan gewoon open in de rechterkolom).
   --------------------------------------------------------- */
.woocommerce-checkout .sellabees-co-summary__toggle {
	display: none;
}

/* ---------------------------------------------------------
   RESPONSIVE — onder 1000px één kolom (overzicht onder gegevens)
   --------------------------------------------------------- */
@media (max-width: 1000px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.woocommerce-checkout .sellabees-co__main,
	.woocommerce-checkout #order_review {
		grid-column: 1;
	}
	.woocommerce-checkout #order_review {
		position: static;
		margin-top: 28px;
	}
}

/* =========================================================
   MOBIEL (≤900px) — ontwerp 487:33648. 393px, content-marge 49px.
   Eén kolom; alle adresvelden volle breedte gestapeld (ontwerp stapelt
   ook Voornaam/Achternaam en Postcode/Plaats). Besteloverzicht-kaart
   onder de gegevens (mobiele accordeon-bovenbalk = JS, zie rapport).
   ========================================================= */
@media (max-width: 900px) {
	/* Paginakop "AFREKENEN" — Impact ±35px (ontwerp 487:33841). */
	.woocommerce-checkout-page .sellabees-shop__title,
	body.woocommerce-checkout .entry-title,
	body.woocommerce-checkout .sellabees-entry__title,
	body.woocommerce-checkout .sellabees-page-title {
		font-size: 35px;
		margin: 4px 0 22px;
	}

	/* Primaire afrekenknop ("Bestel en betaal") als comfortabel tikdoel op touch (≥48px). */
	.woocommerce-checkout #place_order,
	.woocommerce-checkout .place-order button {
		min-height: 48px;
	}

	/* Sectiekoppen iets compacter (Impact 20px blijft, ontwerp 487:33991 e.a.). */
	.woocommerce-checkout .sellabees-checkout-section--address,
	.woocommerce-checkout .sellabees-co-shipping-section,
	.woocommerce-checkout .sellabees-co-payment-section {
		margin-top: 38px;
	}

	/* Velden volle breedte: ook voor-/achternaam en postcode/plaats gestapeld
	   (ontwerp toont op mobiel geen 50/50-rijen). */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		flex: 0 0 100%;
		width: 100%;
	}

	/* Besteloverzicht = inklapbare bovenbalk BOVENAAN (ontwerp 487:33648):
	   via order:-1 staat de kaart als eerste in de (1-koloms) grid, boven
	   de contactgegevens. JS (initCheckoutSummary) zet de open/dicht-state. */
	.woocommerce-checkout #order_review {
		order: -1;
		margin: 0 0 36px;
		border: 0;          /* rand zit nu op de balk-header */
		padding: 0;
	}
	.woocommerce-checkout #order_review::before {
		display: none;      /* desktop-titel "BESTELOVERZICHT" via ::before uit */
	}

	/* Klikbare balk-header: titel + totaal + chevron (ontwerp 487:34161-34165). */
	.woocommerce-checkout .sellabees-co-summary__toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 16px 0;
		border: 0;
		border-top: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		background: none;
		cursor: pointer;
		text-align: left;
		font-family: var(--sellabees-font-body);
		-webkit-appearance: none;
		appearance: none;
	}
	.woocommerce-checkout .sellabees-co-summary__title {
		font-family: var(--sellabees-font-heading);
		font-size: 20px;
		font-weight: 400;
		text-transform: uppercase;
		color: var(--sellabees-ink);
		line-height: 1;
	}
	.woocommerce-checkout .sellabees-co-summary__total {
		margin-left: auto;
		font-size: 16px;
		font-weight: 800;
		color: var(--sellabees-ink);
	}
	.woocommerce-checkout .sellabees-co-summary__chevron {
		flex: 0 0 auto;
		color: var(--sellabees-ink);
		transition: transform .2s ease;
	}
	.woocommerce-checkout #order_review.is-open .sellabees-co-summary__chevron {
		transform: rotate(180deg);
	}

	/* Inhoud (de tabel) standaard ingeklapt; alleen tonen bij .is-open. */
	.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
		display: none;
	}
	.woocommerce-checkout #order_review.is-open .woocommerce-checkout-review-order-table {
		display: table;
		margin-top: 16px;
	}
}

/* =========================================================
   WC-CSS-conflicten neutraliseren (sweep 2026-06-15)
   ========================================================= */
/* WC kleurt gevalideerde velden GROEN (--wc-green) en ongeldige ROOD met
   hogere specificiteit (0,4,2/0,5,2) → thema-rand #d9d9d9 behouden, en voor
   échte fouten de merk-rode rand. */
.woocommerce-checkout form .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout form .form-row.woocommerce-validated select,
.woocommerce-checkout form .form-row.woocommerce-validated .select2-container .select2-selection {
	border-color: var(--co-field-border, #d9d9d9);
}
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select,
.woocommerce-checkout form .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--sellabees-red);
}
/* WC zet div.form-row binnen #payment op padding:1em → gelijktrekken. */
.woocommerce-checkout #payment div.form-row { padding: 0; }