/* Chocolaterie Fleur — transactionele pagina's (winkelwagen, afrekenen,
   bedankt, mijn-account/login). 1:1 uit Figma:
     Winkelwagen      520:5142
     Afrekenen        520:5311
     Bedankt          520:5773
     Login            520:5444
     Login-dashboard  520:5513 / -bestellingen 520:5570 / -adressen 520:5636 /
     Login-accountgegevens 520:5699
   Strikt gescoped onder body.woocommerce-cart / .woocommerce-checkout /
   .woocommerce-account en .fleur-wc — geen globale selectors die elders lekken.
   Tokens (--fleur-*) komen uit fonts.css; alleen nieuwe waarden hieronder. */

:root {
	--fleur-pink-soft:  #f6bddd;   /* lichtroze band/knoppen (Figma #f6bddd)   */
	--fleur-wc-line:    #d9d9d9;   /* veld-/celranden (Figma #d9d9d9)          */
	--fleur-wc-line2:   #ece7e9;   /* subtiele scheidingslijnen                */
	--fleur-wc-field:   #ffffff;   /* invoervelden                            */
	--fleur-wc-muted:   #6f6470;   /* gedempte tekst (meta/help)              */
}

/* =========================================================
   0. Gedeelde wrapper + koppen (.fleur-wc)
   ========================================================= */
body.woocommerce-cart,
body.woocommerce-checkout {
	background: var(--fleur-cream);
}

/* De generieke .fleur-page__content (page.php) is max 820px breed en center; de
   transactionele pagina's gebruiken echter de volle containerbreedte (Figma
   ±1150px). Scoped op de WC-body's zodat het nergens anders lekt. */
body.woocommerce-cart .fleur-page__content,
body.woocommerce-checkout .fleur-page__content,
body.woocommerce-account .fleur-page__content {
	max-width: none;
	margin-inline: 0;
	font-size: inherit;
	line-height: inherit;
}
/* Reset de generieke link-onderstreping/kleur binnen de WC-content. */
body.woocommerce-cart .fleur-page__content a,
body.woocommerce-checkout .fleur-page__content a,
body.woocommerce-account .fleur-page__content a { text-decoration: none; }

.fleur-wc { color: var(--fleur-aubergine); }

.fleur-wc__head { margin: 8px 0 32px; }
.fleur-wc__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 50px);
	line-height: 1.05;
	color: #000; /* Figma 520:5145: zwart, niet aubergine */
	margin: 0 0 .25em;
}
.fleur-wc__subtitle {
	font-family: var(--fleur-font-serif);
	font-size: clamp(18px, 2vw, 20px);
	color: var(--fleur-pink);
	margin: 0;
}

/* Gedeelde knop-varianten binnen de transactionele pagina's. */
.fleur-wc .button,
.fleur-wc .wp-element-button,
.fleur-wc button.button,
.fleur-wc input.button {
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	border-radius: 100px;
}

/* Donkere "aubergine" knop (ga verder met bestellen / bestel en betaal). */
.fleur-wc__btn-dark,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1;
	border: 0;
	border-radius: 100px;
	padding: 18px 28px;
	cursor: pointer;
	/* Zelfde vloeiende lift-hover als site-breed (main.css .button): transform +
	   box-shadow MOETEN in de transitie staan, anders springt de lift schokkerig.
	   De vorige `transition: filter .15s` overschreef de transform-transitie uit
	   main.css volledig, waardoor de translateY(-3px) direct sprong. */
	transition: background-color .25s ease, color .25s ease,
		box-shadow .25s ease, transform .25s ease;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus-visible,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(76, 61, 69, .22);
}

/* =========================================================
   1. WINKELWAGEN (cart.php + cart-totals.php) — 520:5142
   ========================================================= */
body.woocommerce-cart .fleur-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: 56px;
	row-gap: 0; /* geen extra rij-gat tussen "Winkelwagen"-kop en de inhoud */
	align-items: start;
	margin-bottom: 64px;
}
/* Koptekst over de volledige breedte. */
body.woocommerce-cart .fleur-cart > .fleur-wc__head { grid-column: 1 / -1; }
/* Form + collaterals onder elkaar in de linkerkolom… maar de totalen rechts. */
body.woocommerce-cart .fleur-cart > .woocommerce-cart-form { grid-column: 1; }
body.woocommerce-cart .fleur-cart > .cart-collaterals      { grid-column: 2; grid-row: 2; }

/* --- Itemtabel: kale, lichte rijen i.p.v. WC-standaardtabel --- */
body.woocommerce-cart .woocommerce-cart-form { margin: 0; }
body.woocommerce-cart table.cart {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	margin: 0;
}
body.woocommerce-cart table.cart thead { display: none; } /* design toont geen kolomkoppen */
body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart tbody,
body.woocommerce-cart table.cart tr,
body.woocommerce-cart table.cart td { background: transparent; }

body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 131px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name remove"
		"thumb qty  price";
	grid-template-rows: auto auto; /* contenthoogte: resthoogte t.o.v. de 131px-thumb wordt gelijk over beide rijen verdeeld → naam+aantal-groep exact verticaal gecentreerd op de afbeelding, ook mét meta */
	align-items: start;
	column-gap: 24px;
	row-gap: 0;
	min-height: 131px;
	padding: 22px 0;
	border-bottom: 1px solid var(--fleur-wc-line2);
}
body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td {
	border: 0;
	padding: 0;
}
body.woocommerce-cart table.cart td.product-thumbnail { width: 131px; grid-area: thumb; align-self: center; }
body.woocommerce-cart table.cart td.product-thumbnail img {
	width: 131px;
	height: 131px;
	object-fit: cover;
	border-radius: 5px;
	margin: 0;
}
body.woocommerce-cart table.cart td.product-name {
	grid-area: name;
	align-self: end; /* onderkant van de bovenste helft → naam net boven het midden */
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	color: #000;
}
body.woocommerce-cart table.cart td.product-name a {
	color: #000;
	font-weight: 400;
}
body.woocommerce-cart table.cart td.product-name a:hover { color: var(--fleur-pink); }
/* Cart-item-meta (gekozen bonbons / verpakking) — cursief, gedempt. */
body.woocommerce-cart table.cart td.product-name .variation,
body.woocommerce-cart table.cart td.product-name dl.variation {
	margin: 6px 0 0;
	font-size: 14px;
	font-style: italic;
	color: #000; /* Figma 520:5269/5270: zwart */
	line-height: 1.5;
}
body.woocommerce-cart table.cart td.product-name dl.variation dt,
body.woocommerce-cart table.cart td.product-name dl.variation dd {
	display: inline;
	/* WooCommerce-core zet `dl.variation dt { float:left; clear:both }` (0,3,3) op
	   de meta in td.product-name. Onze `display:inline` alleen heft die float niet
	   op, dus label en waarde stapelden op ELK formaat (niet alleen desktop). We
	   heffen float + clear hier expliciet op zodat label en waarde op één regel
	   staan: "Chocolade: Melk". */
	float: none;
	clear: none;
	margin: 0;
	font-weight: 400;
}
body.woocommerce-cart table.cart td.product-name dl.variation dt { font-weight: 700; }
/* Spatie na de dubbelepunt tussen label en waarde (dt eindigt op ":"). */
body.woocommerce-cart table.cart td.product-name dl.variation dd { margin-left: 4px; }
/* wpautop wikkelt de waarde in een block-<p>; die brak de regel af (waarde viel
   onder het label). Inline maken → waarde blijft naast het label. */
body.woocommerce-cart table.cart td.product-name dl.variation dd p { display: inline; margin: 0; }
/* dt/dd zijn nu inline (geen float meer die de regel brak): elk key/waarde-paar
   zelf op een eigen regel zetten met een block-break ná de waarde. */
body.woocommerce-cart table.cart td.product-name dl.variation dd::after { content: ""; display: block; }

/* Regelprijs — rechts, op de hoogte van het aantal (Figma 520:5240/5241). */
body.woocommerce-cart table.cart td.product-price {
	grid-area: price;
	align-self: start; /* onderste helft, op de hoogte van het aantal */
	justify-self: end;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: #000;
	white-space: nowrap;
	text-align: right;
}

/* Quantity-stepper: bordered box met − aantal + (Figma 81x35, radius 2). Onder
   de productnaam, links uitgelijnd (Figma 520:5142). */
body.woocommerce-cart table.cart td.product-quantity { grid-area: qty; align-self: start; justify-self: start; }
body.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 35px;
	border: 1px solid var(--fleur-wc-line);
	border-radius: 2px;
	overflow: hidden;
	background: transparent; /* Figma: transparant, niet wit */
}
body.woocommerce-cart .quantity input.qty {
	width: 36px;
	border: 0;
	border-left: 1px solid var(--fleur-wc-line);
	border-right: 1px solid var(--fleur-wc-line);
	text-align: center;
	font-family: var(--fleur-font-sans);
	font-size: 12px;
	color: #000;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* −/+ stepper-knoppen (door theme.js op de cart geïnjecteerd, Figma 520:5142). */
body.woocommerce-cart .quantity .fleur-qty-btn,
body.woocommerce-cart .quantity .qty-btn,
body.woocommerce-cart .quantity button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent; /* Figma: transparant, niet wit */
	color: #000;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease;
}
body.woocommerce-cart .quantity .fleur-qty-btn:hover { color: var(--fleur-pink); }

/* Verwijder-× rechtsboven de regel, rood (Figma 520:5254 = #ff3a3a). */
body.woocommerce-cart table.cart td.product-remove { grid-area: remove; align-self: start; justify-self: end; }
body.woocommerce-cart table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 1;
	/* !important nodig: WooCommerce forceert a.remove op donkerrood (#a00). */
	color: #ff3a3a !important;
	background: transparent !important;
	text-decoration: none;
}
/* Dik, iets groter rood kruisje (SVG i.p.v. dunne &times;-glyph) — Figma 520:5254. */
body.woocommerce-cart table.cart td.product-remove a.remove svg {
	display: block;
	width: 20px;
	height: 20px;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover {
	color: #ff3a3a !important;
	background: transparent !important;
	opacity: .75;
}

/* Acties-rij (kortingsbon + "winkelwagen bijwerken") niet tonen: het Figma-
   design heeft geen bon-veld op de winkelwagen (een bon kan wél bij het
   afrekenen) en aantalswijzigingen gaan al via AJAX, dus "bijwerken" is
   overbodig. Verbergen i.p.v. verwijderen zodat de form-nonce + hooks in de
   DOM blijven. */
body.woocommerce-cart table.cart td.actions { display: none; }

/* --- Totalenbox rechts --- */
body.woocommerce-cart .cart-collaterals { width: 100%; float: none; }
body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
body.woocommerce-cart .cart_totals > h2 { display: none; }
body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border: 0;
	margin: 0 0 18px;
	background: transparent;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	border: 0;
	padding: 6px 0;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: #000;
}
body.woocommerce-cart .cart_totals table.shop_table th { font-weight: 400; text-align: left; }
body.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }

/* Figma toont in de winkelwagen alléén "Totaalbedraag" — subtotaal en verzending
   (incl. de verzendcalculator "Bereken verzendkosten") verschijnen pas op de
   afreken-pagina. */
body.woocommerce-cart .cart_totals tr.cart-subtotal,
body.woocommerce-cart .cart_totals tr.shipping,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
	display: none;
}
body.woocommerce-cart .cart_totals tr.order-total th {
	font-weight: 700;
	font-size: 16px;
}
body.woocommerce-cart .cart_totals tr.order-total td {
	font-size: 16px;
}
body.woocommerce-cart .cart_totals tr.order-total td .amount,
body.woocommerce-cart .cart_totals tr.order-total td bdi { font-weight: 400; }

/* USP-badges bóven de totalen (Figma-volgorde: USP's → Totaalbedraag → knop). */
.fleur-cart__usps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.fleur-cart__usps li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	color: #000;
}
.fleur-cart__usp-ico {
	display: inline-flex;
	color: var(--fleur-aubergine);
	flex: 0 0 auto;
}
.fleur-cart__usp-ico svg { display: block; }

body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin: 0; min-height: 53px; }

/* iDEAL-logo gecentreerd onder de knop (Figma 520:5266). */
.fleur-cart__ideal {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}
.fleur-cart__ideal svg {
	display: block;
	width: 32px;
	height: auto;
}

/* Geen horizontale scroll: de full-bleed roze cross-sell band gebruikt
   margin-inline:calc(50% - 50vw) (= 100vw incl. scrollbar-breedte) en steekt
   daardoor iets buiten de pagina. overflow-x:clip op .site-main knipt dat weg
   zónder een scroll-context te maken (position:sticky header + z-index blijven
   werken) — zelfde patroon als op single-product/bonbons. */
body.woocommerce-cart .site-main { overflow-x: clip; }

/* =========================================================
   2. AFREKENEN (form-checkout.php + form-billing/-shipping + review-order) — 520:5311
   Zelfde opzet als Brock: LINKS Contactgegevens → Verzendadres → Verzendopties →
   Betalingsopties → voorwaarden/knop; RECHTS de compacte Besteloverzicht-kaart.
   Figma-velden: rechthoekig (radius 2px), labels bóven; checkbox 23px grijs met
   donkere tick; radio grijze schijf → roze bij selectie.
   ========================================================= */
body.woocommerce-checkout {
	--fleur-co-radius:     2px;       /* Figma: velden/checkboxes radius 2px      */
	--fleur-co-height:     53px;      /* veldhoogte                              */
	--fleur-co-gap:        19px;      /* horizontale tussenruimte 2 velden       */
	--fleur-co-terms-link: #c9b8a7;   /* Figma 520:5368: voorwaarden-links (taupe)*/
}

body.woocommerce-checkout .fleur-checkout .fleur-wc__head { margin-bottom: 28px; }

/* Hoofd-grid: linkerkolom (gegevens/opties) + rechterkolom (besteloverzicht).
   fr-ratio 743:412 = Figma-verhouding, zelf-schalend binnen de container. */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 743fr) 412fr;
	column-gap: 47px;
	align-items: start;
	font-family: var(--fleur-font-sans);
	color: var(--fleur-aubergine);
}
body.woocommerce-checkout .sellabees-co__main { grid-column: 1; min-width: 0; }
body.woocommerce-checkout #order_review {
	grid-column: 2;
	align-self: start;
	/* Besteloverzicht scrollt mee: blijft in beeld terwijl je door het (langere)
	   linkerformulier scrolt. Sticky net onder de meescrollende header
	   (--fleur-header-h wordt door theme.js op de exacte headerhoogte gezet;
	   fallback 126px) + 24px lucht. Alleen in de 2-koloms layout: in de gestapelde
	   ≤1024-weergave (order:-1, bovenaan) wordt dit teruggezet op `static`. */
	position: sticky;
	top: calc(var(--fleur-header-h, 126px) + 24px);
	background: var(--fleur-cream);   /* Figma 520:5314: zelfde grijs als de pagina */
	border: 1px solid var(--fleur-wc-line);
	border-radius: 0;                 /* Figma: scherpe hoeken */
	padding: 24px 24px 22px;
}

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

/* Sectiekoppen (Contactgegevens / Verzendadres / Verzendopties / Betalingsopties). */
body.woocommerce-checkout .sellabees-checkout__heading {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 20px;
	color: var(--fleur-aubergine);
	margin: 0 0 6px;
	line-height: 1.15;
}
body.woocommerce-checkout .sellabees-checkout-section--address,
body.woocommerce-checkout .sellabees-co-shipping-section,
body.woocommerce-checkout .sellabees-co-payment-section { margin-top: 36px; }

/* Contactgegevens: relatief zodat de "Inloggen"-link rechtsboven kan zweven. */
body.woocommerce-checkout .sellabees-checkout-section--contact { position: relative; }

/* Hulptekst onder een sectiekop. */
body.woocommerce-checkout .sellabees-checkout__help {
	margin: 0 0 16px;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--fleur-aubergine);
}
body.woocommerce-checkout .sellabees-checkout__guest {
	margin: 10px 0 12px;
	font-family: var(--fleur-font-sans);
	font-size: 13px;
	color: var(--fleur-aubergine);
}

/* --- Velden --- */
body.woocommerce-checkout .form-row { margin: 0; padding: 0; }
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 16px var(--fleur-co-gap);
}
body.woocommerce-checkout .form-row-wide,
body.woocommerce-checkout .form-row.create-account,
body.woocommerce-checkout .form-row.notes { flex: 0 0 100%; width: 100%; }
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
	flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2));
	width: calc(50% - (var(--fleur-co-gap) / 2));
	min-width: 0;
}
/* NL-checkout adreslayout. WooCommerce' address-i18n.js herordent/herclasset het
   custom huisnummerveld soms grillig (springt naar boven, wordt full-width). We
   pinnen daarom volgorde + breedtes HARD per veld-id met !important — immuun voor
   die client-side wijzigingen. Volgorde:
     Land · Voornaam|Achternaam · Postcode|Huisnr.|Toevoeging · Straatnaam|Plaats · Telefoon
   (1/3 = 33% min de 2 kolom-gaps; 1/2 = 50% min 1 gap). */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field { order: 1 !important; flex: 0 0 100% !important; width: 100% !important; }
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field { order: 2 !important; flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2)) !important; width: calc(50% - (var(--fleur-co-gap) / 2)) !important; }
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field { order: 3 !important; flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2)) !important; width: calc(50% - (var(--fleur-co-gap) / 2)) !important; }
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field { order: 4 !important; flex: 1 1 calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; width: calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; }
body.woocommerce-checkout #billing_house_number_field,
body.woocommerce-checkout #shipping_house_number_field { order: 5 !important; flex: 1 1 calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; width: calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; }
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #shipping_address_2_field { order: 6 !important; flex: 1 1 calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; width: calc(33.333% - (var(--fleur-co-gap) * 2 / 3)) !important; }
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #shipping_address_1_field { order: 7 !important; flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2)) !important; width: calc(50% - (var(--fleur-co-gap) / 2)) !important; }
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field { order: 8 !important; flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2)) !important; width: calc(50% - (var(--fleur-co-gap) / 2)) !important; }
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_phone_field { order: 9 !important; flex: 0 0 100% !important; width: 100% !important; }

body.woocommerce-checkout .form-row label {
	display: block;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: var(--fleur-aubergine);
	margin: 0 0 6px;
	line-height: 1.3;
}
/* Geen verplicht-/optioneel-markeringen (design toont die niet). */
body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout .form-row .optional { display: none; }

/* Labels bóven de tekstvelden verbergen — de veldnaam staat als placeholder ÍN
   het veld (Figma). Alleen binnen de adres-/contactvelden-wrappers, zodat de
   checkbox-labels (Account aanmaken / notitie / ander adres) zichtbaar blijven. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row > label,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row > label { display: none; }

/* Uitzondering: de select 'Land/regio' kan geen placeholder tonen → het label
   blijft als klein "floating"-label linksboven ín het veld (Figma 520:5324). */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field { position: relative; }
body.woocommerce-checkout #billing_country_field > label,
body.woocommerce-checkout #shipping_country_field > label {
	display: block;
	position: absolute;
	top: 8px;
	left: 17px;
	margin: 0;
	padding: 0;
	font-size: 11px;
	line-height: 1;
	color: var(--fleur-aubergine);
	pointer-events: none;
	z-index: 5;   /* bóven de select2-selectbox (z-index 1) */
}
/* De landwaarde ("Nederland") onder het mini-label plaatsen (select2 + native). */
body.woocommerce-checkout #billing_country_field .select2-container .select2-selection--single,
body.woocommerce-checkout #shipping_country_field .select2-container .select2-selection--single {
	align-items: flex-end;
	padding-bottom: 7px;
}
body.woocommerce-checkout #billing_country_field select.country_select,
body.woocommerce-checkout #shipping_country_field select.country_select {
	padding-top: 14px;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	height: var(--fleur-co-height);
	border: 1px solid var(--fleur-wc-line);
	border-radius: var(--fleur-co-radius);
	padding: 0 16px;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	color: var(--fleur-aubergine);
	background: var(--fleur-cream);   /* Figma: velden zelfde grijs als de pagina */
	line-height: var(--fleur-co-height);
	box-shadow: none;
}
body.woocommerce-checkout .form-row textarea {
	height: auto;
	min-height: 99px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}
/* Placeholders = de veldnamen (labels staan niet meer bóven). Donker, conform
   Figma (E-mailadres/Voornaam/… in zwart binnen het veld). */
body.woocommerce-checkout .form-row input.input-text::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder { color: var(--fleur-aubergine); opacity: 1; }
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--fleur-pink); }

/* Select2 (land-keuze) uitlijnen met de overige velden. */
body.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: var(--fleur-aubergine);
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 12px; }
/* De select2 mag NIET boven de sticky header (z-index 1000) uitkomen bij scrollen
   (stond op 9999). Alleen de dichte selectbox laag houden; de open dropdown
   (los element op body) blijft eigen z-index houden. */
body.woocommerce-checkout .select2-container { z-index: 1; }
/* selectWoo/select2 zet op de country-container een INLINE z-index van max-int
   (2147483647). Die inline waarde verslaat de regel hierboven, waardoor het
   gesloten landveld een eigen stacking-context bóven de sticky header (z1000) én
   het mobiele menu (overlay) krijgt en er op mobiel dwars doorheen steekt. Forceer
   'm terug onder de header — `!important` verslaat de inline non-important waarde.
   Scoped op de country-VELDEN, zodat de open dropdown (los op <body>, buiten
   #…_country_field) zijn eigen z-index houdt. */
body.woocommerce-checkout #billing_country_field .select2-container,
body.woocommerce-checkout #shipping_country_field .select2-container { z-index: 1 !important; }

/* --- Mobiel: land-dropdown niet laten inzoomen. iOS Safari zoomt in op een
   gefocust invoerveld met font-size < 16px. Bij het openen van de select2
   (selectWoo) land-dropdown krijgt het interne zoekveld focus → de pagina zoomde
   in. 16px voorkomt de zoom (en daarmee ook de zoom-scroll die de dropdown
   direct weer sloot → "pas bij de 2e klik"). Zie ook de select2:open-marge in
   theme.js. Alleen ≤981px; desktop blijft ongemoeid. */
@media (max-width: 981px) {
	.select2-search--dropdown .select2-search__field { font-size: 16px; }
}

/* Veld-volgorde afdwingen via flex-`order` (Figma): Land/regio · Voornaam |
   Achternaam · Adres · [+ appartement] · Postcode | Plaats · Telefoon. Nodig
   omdat WooCommerce' address-i18n de DOM-volgorde per land zelf herschikt (en
   daarbij de "+ appartement"-toggle naar voren schoof). */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field    { order: 1; }
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field { order: 2; }
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field  { order: 3; }
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #shipping_address_1_field  { order: 4; }
body.woocommerce-checkout .sellabees-field-toggle,
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #shipping_address_2_field  { order: 5; }
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field   { order: 6; }
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field       { order: 7; }
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_phone_field      { order: 8; }

/* "+ appartement, suite enz. (optioneel)"-toggle (checkout.js klapt het veld uit). */
body.woocommerce-checkout .form-row.sellabees-optional.is-collapsed > label,
body.woocommerce-checkout .form-row.sellabees-optional.is-collapsed > .woocommerce-input-wrapper { display: none; }
body.woocommerce-checkout .sellabees-field-toggle {
	flex: 0 0 100%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	margin: -2px 0 0;
	cursor: pointer;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: var(--fleur-aubergine);
	text-align: left;
}
body.woocommerce-checkout .sellabees-field-toggle:hover { color: var(--fleur-pink); }
body.woocommerce-checkout .sellabees-field-toggle__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 18px;
	line-height: 1;
}

/* --- Checkboxen (Account aanmaken / bestelnotitie): 23px, grijs, donkere tick --- */
/* Hoge specificiteit (form + .form-row + label.checkbox) om WC' eigen
   `.woocommerce form .form-row label.checkbox { display:inline }` te verslaan —
   anders is het label geen flex-container en klapt het vakje in tot ~2px. */
body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout form .form-row label.checkbox,
body.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .create-account label,
body.woocommerce-checkout .fleur-note__toggle label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: var(--fleur-aubergine);
	cursor: pointer;
	margin: 0;
	line-height: 1.3;
}
/* Hoge specificiteit (form + class) om WC' eigen checkbox-CSS (width:auto +
   margin) te overschrijven; anders klapt het vakje in. */
body.woocommerce-checkout .woocommerce-form__input-checkbox,
body.woocommerce-checkout form .form-row input[type="checkbox"],
body.woocommerce-checkout form .form-row input.input-checkbox,
body.woocommerce-checkout input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	/* !important: WC forceert input.input-checkbox op width:auto met gelijke
	   specificiteit → anders klapt het vakje in tot ~2px. */
	width: 23px !important;
	height: 23px !important;
	min-width: 23px !important;
	flex: 0 0 23px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fleur-wc-line);
	border-radius: var(--fleur-co-radius);
	background: #d9d9d9;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;
}
body.woocommerce-checkout form .form-row input[type="checkbox"]:checked,
body.woocommerce-checkout input[type="checkbox"]:checked {
	background: #d9d9d9;
	border-color: #d9d9d9;
}
body.woocommerce-checkout input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--fleur-aubergine);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
body.woocommerce-checkout .create-account { margin-top: 12px; }
body.woocommerce-checkout .woocommerce-account-fields .create-account { margin-top: 6px; }

/* --- "Inloggen"-link rechtsboven Contactgegevens (Figma 520:5328) --- */
body.woocommerce-checkout .woocommerce-form-login-toggle {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	z-index: 2;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;   /* verberg de "Terugkerende klant?"-tekstnode */
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { content: none; }
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin {
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--fleur-pink-soft);   /* Figma 520:5328: lichtroze #f6bddd */
	cursor: pointer;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin:hover { text-decoration: underline; }
/* Het uitklapbare login-formulier zelf (na klik op de link). */
body.woocommerce-checkout form.woocommerce-form-login {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--fleur-wc-line);
	border-radius: var(--fleur-co-radius);
}
body.woocommerce-checkout form.woocommerce-form-login .button {
	width: auto;
	min-width: 0;
	background: var(--fleur-pink);
	color: #fff;
	border-radius: 100px;
	padding: 12px 26px;
	text-transform: none;
	font-weight: 700;
	font-size: 14px;
}

/* --- "Verzenden naar een ander adres?"-toggle + bezorgadres --- */
body.woocommerce-checkout .woocommerce-shipping-fields { margin-top: 16px; }
body.woocommerce-checkout #ship-to-different-address {
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fleur-aubergine);
	margin: 0;
}
body.woocommerce-checkout #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	margin: 0;
	line-height: 1.3;
}
body.woocommerce-checkout .shipping_address { margin-top: 32px; }
body.woocommerce-checkout .shipping_address .sellabees-co-ship-heading { margin: 0 0 24px; }

/* --- Verzendopties (radio-rijen met dunne scheidingslijnen) --- */
body.woocommerce-checkout .sellabees-shipping-methods { list-style: none; margin: 0; padding: 0; }
body.woocommerce-checkout .sellabees-shipping-methods__item {
	border-top: 1px solid var(--fleur-wc-line);
	margin: 0;
	padding: 0;
}
body.woocommerce-checkout .sellabees-shipping-methods__item:last-child { border-bottom: 1px solid var(--fleur-wc-line); }
body.woocommerce-checkout .sellabees-shipping-methods__item label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 53px;
	margin: 0;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	color: var(--fleur-aubergine);
	cursor: pointer;
}
body.woocommerce-checkout .sellabees-shipping-methods__empty { margin: 0; font-size: 14px; color: var(--fleur-wc-muted); }

/* Radio's (verzend + betaal): grijze schijf in rust, roze bij selectie. */
body.woocommerce-checkout .sellabees-shipping-methods input[type="radio"],
body.woocommerce-checkout #payment input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
	cursor: pointer;
	position: relative;
}
body.woocommerce-checkout .sellabees-shipping-methods input[type="radio"]:checked,
body.woocommerce-checkout #payment input[type="radio"]:checked {
	background: #fff;
	border: 1px solid var(--fleur-pink);
}
body.woocommerce-checkout .sellabees-shipping-methods input[type="radio"]:checked::after,
body.woocommerce-checkout #payment input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--fleur-pink);
}

/* --- Betalingsopties --- */
body.woocommerce-checkout #payment { background: none; border: 0; border-radius: 0; margin-top: 0; }
body.woocommerce-checkout #payment .payment_methods { list-style: none; margin: 0; padding: 0; }
body.woocommerce-checkout #payment .payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	border-top: 1px solid var(--fleur-wc-line);
	padding: 0;
	margin: 0;
	min-height: 53px;
}
body.woocommerce-checkout #payment .payment_methods li.wc_payment_method:last-of-type { border-bottom: 1px solid var(--fleur-wc-line); }
body.woocommerce-checkout #payment .payment_methods label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	color: var(--fleur-aubergine);
	cursor: pointer;
	margin: 0;
}
body.woocommerce-checkout #payment .payment_methods label img { display: inline-block; height: 24px; width: auto; margin: 0 0 0 auto; }
body.woocommerce-checkout #payment .payment_box { flex: 0 0 100%; }
/* Hogere specificiteit (div.payment_box) — WC kleurt dit blok standaard lavendel. */
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment div.payment_box {
	background: var(--fleur-cream);
	border-radius: var(--fleur-co-radius);
	margin: 8px 0 0;
	padding: 12px 14px;
	font-family: var(--fleur-font-sans);
	font-size: 13px;
	color: var(--fleur-aubergine);
	line-height: 1.5;
}
body.woocommerce-checkout #payment div.payment_box p { margin: 0; }
body.woocommerce-checkout #payment .payment_box::before,
body.woocommerce-checkout #payment div.payment_box::before { content: none; display: none; border: 0; }
body.woocommerce-checkout #payment div.form-row { padding: 0; }

/* --- Bestelnotitie-toggle (checkbox onthult het tekstveld) --- */
body.woocommerce-checkout .fleur-note { flex: 0 0 100%; width: 100%; margin-top: 18px; }
body.woocommerce-checkout .fleur-note__toggle { margin: 0; }
body.woocommerce-checkout .fleur-note .fleur-note__fields { display: none; margin-top: 12px; }
body.woocommerce-checkout .fleur-note.is-open .fleur-note__fields { display: block; }
body.woocommerce-checkout .fleur-note .fleur-note__fields .form-row { margin: 0; }

/* --- Voorwaarden-tekst --- */
body.woocommerce-checkout .sellabees-checkout__terms {
	flex: 0 0 100%;
	width: 100%;
	margin: 18px 0 16px;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fleur-aubergine);
}
body.woocommerce-checkout .sellabees-checkout__terms a { color: var(--fleur-co-terms-link); }
body.woocommerce-checkout .sellabees-checkout__terms a:hover { text-decoration: underline; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { flex: 0 0 100%; margin: 8px 0 0; font-size: 14px; }

/* --- Knoprij: "terug" links, "Bestel en betaal" rechts (Figma) --- */
body.woocommerce-checkout #payment .place-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	padding: 4px 0 0;
	margin: 0;
}
body.woocommerce-checkout .sellabees-checkout__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
	font-family: var(--fleur-font-sans);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fleur-aubergine);
	text-decoration: none;
}
body.woocommerce-checkout .sellabees-checkout__back:hover { color: var(--fleur-pink); }
/* De bestelknop op eigen breedte (Figma 306×53), niet vol-breedte. */
body.woocommerce-checkout #place_order {
	width: auto;
	min-width: 306px;
	height: 53px;
	padding: 0 28px;
}

/* --- Besteloverzicht-kaart (rechts) --- */
body.woocommerce-checkout #order_review_heading {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 16px;
	color: var(--fleur-aubergine);
	margin: 0 0 12px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	border-collapse: collapse;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead { display: none; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
	border: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: #000;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td { padding: 14px 0; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td.product-total { text-align: right; white-space: nowrap; }
/* Regel-divider op de td's (tr-borders renderen niet bij border-collapse). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart_item td { border-bottom: 1px solid var(--fleur-wc-line); }

/* Productregel: thumbnail (75×81) + naam (met aantal-prefix) + meta. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	padding-right: 10px;
}
.fleur-review__thumb { flex: 0 0 75px; }
.fleur-review__thumb img {
	width: 75px;
	height: 81px;
	object-fit: cover;
	border-radius: 5px;
	margin: 0;
	display: block;
}
.fleur-review__info { flex: 1 1 auto; min-width: 0; }
.fleur-review__name { font-weight: 400; line-height: 1.35; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity { font-weight: 400; }
/* Meta (gekozen bonbons / verpakking) — cursief. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .fleur-review__info dl.variation,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .fleur-review__info .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-style: italic;
	color: #000;
	line-height: 1.5;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dt { font-weight: 700; display: inline; margin: 0; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation dd { display: inline; margin: 0 0 0 4px; font-weight: 400; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table dl.variation p { margin: 0; }

/* Totalen: labels SemiBold, bedragen regular. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	padding: 12px 0;
	font-size: 16px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th { font-weight: 600; text-align: left; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 400; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td .woocommerce-Price-amount { font-weight: 400; }
/* Scheidingslijn onder subtotaal/verzendkosten (boven het totaal). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-shipping-cost th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-shipping-cost td {
	border-bottom: 1px solid var(--fleur-wc-line);
}

/* WC tekent op .shop_table een eigen rand + margin → resetten (de gewenste
   dividers zitten hierboven op .cart_item + de tfoot-regels). */
body.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table { border: 0; margin: 0; }

/* WC kleurt gevalideerde velden GROEN (--wc-green) en ongeldige rood met hogere
   specificiteit → merk-rand #d9d9d9 behouden, en voor échte fouten de merk-roze rand. */
body.woocommerce-checkout form .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout form .form-row.woocommerce-validated select,
body.woocommerce-checkout form .form-row.woocommerce-validated .select2-container .select2-selection {
	border-color: var(--fleur-wc-line);
}
body.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout form .form-row.woocommerce-invalid select,
body.woocommerce-checkout form .form-row.woocommerce-invalid .select2-container .select2-selection {
	border-color: var(--fleur-pink);
}

/* =========================================================
   3. BEDANKT — 520:5773
   Zowel de losse pagina /bedankt-aankoop/ (page-bedankt-aankoop.php) als de
   WooCommerce order-received-endpoint (thankyou.php) delen deze .fleur-thankyou-
   opmaak. Body is site-breed al --fleur-cream (main.css), dus enkel de
   order-received-body krijgt hier nog een expliciete achtergrond als vangnet.
   ========================================================= */
body.woocommerce-order-received { background: var(--fleur-cream); }
.fleur-thankyou {
	position: relative;
	padding: clamp(28px, 3.5vw, 56px) 0 clamp(84px, 8vw, 132px);
}
/* Op de losse pagina staat .fleur-thankyou BUITEN .sellabees-container (volle
   schermbreedte) en levert zelf de verticale ruimte. De roze band loopt door tot
   ONDER de footer: daarom vervalt hier de footer-marge én de #site-main-min-height,
   zodat er geen grijze kier onder het roze blok ontstaat. */
.fleur-page--bedankt + .fleur-footer { margin-top: 0; }
#site-main.fleur-page--bedankt { min-height: 0; }
.fleur-thankyou--page > .sellabees-container { position: relative; z-index: 1; }

/* Schermbrede roze band achter de onderste helft van de content (Figma #f6bddd).
   Start net onder de eerste alinea en loopt door tot de footer. */
.fleur-thankyou__band {
	position: absolute;
	/* .fleur-thankyou beslaat op de pagina de volle schermbreedte, dus left/right:0
	   = schermbreed ZONDER 100vw/negatieve marges (die tellen de scrollbar mee en
	   veroorzaken een horizontale scrollbar). */
	left: 0;
	right: 0;
	/* Vaste offset: ≥1280px is de container gefixeerd (1232px), dus de eerste
	   alinea is altijd 3 regels en eindigt op ~dezelfde hoogte. De band start net
	   daaronder zodat "…afgesproken moment" comfortabel op grijs blijft en de
	   🍫-lijst op roze. */
	top: 318px;
	bottom: 0;
	background: var(--fleur-pink-soft);
	z-index: 0;
	pointer-events: none;
}
/* Fallback: op de WC order-received-endpoint zit .fleur-thankyou BINNEN
   .sellabees-container, dus daar moet de band alsnog uit de container breken. */
body.woocommerce-order-received .fleur-thankyou__band {
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
}
/* Contactbedankt (520:4706): de kop is hier één regel i.p.v. twee, maar de intro
   heeft één tekstregel méér vóór de band (P1 + tweeregelige P2), zodat er — net
   als op /bedankt-aankoop/ — 3 regels boven de band staan. De band start daardoor
   op dezelfde hoogte: de eerste twee alinea's blijven op grijs en de laatste
   alinea ("Heb je een dringende vraag?…") + de knop komen op de roze band. */
.fleur-thankyou--contact .fleur-thankyou__band { top: 318px; }

.fleur-thankyou__grid {
	position: relative;
	z-index: 1;
	display: grid;
	/* Figma-verhouding: tekstkolom 670 / foto 698 (foto iets breder); gap ~49px. */
	grid-template-columns: minmax(0, 670fr) minmax(0, 698fr);
	gap: clamp(28px, 3.4vw, 49px);
	align-items: center;
}
/* min-width:0 voorkomt dat de intrinsieke breedte van de foto (698px) de track
   opblaast en de tekst buiten de viewport duwt (m.n. gestapeld op mobiel). */
.fleur-thankyou__intro,
.fleur-thankyou__figure { min-width: 0; }

.fleur-thankyou__eyebrow {
	font-family: var(--fleur-font-sans);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--fleur-pink-soft);
	margin: 0 0 14px;
}
.fleur-thankyou__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(32px, 4.2vw, 55px); /* 55px = Figma-desktop; min lager zodat de kop op mobiel netjes breekt */
	line-height: 1.06;
	color: #000; /* Figma 520:5776: zwart, niet aubergine */
	margin: 0 0 22px;
	max-width: 620px;
}
.fleur-thankyou__text {
	font-size: 14px;
	line-height: 26px;
	color: #000; /* Figma 520:5777: zwart */
	max-width: none; /* vult de tekstkolom (Figma 670px) → alinea breekt zoals in het ontwerp */
	margin: 0 0 34px;
}
/* Iets krappere witruimte onder de eerste alinea ("…afgesproken moment") vóór de
   🍫-lijst — op verzoek strakker dan de blanco regel (26px) uit Figma. */
.fleur-thankyou__text p { margin: 0 0 12px; }
.fleur-thankyou__text p:last-child { margin: 0; }

/* .fleur-wc-prefix nodig om qua specificiteit .fleur-wc .button (font-weight:700)
   te verslaan, anders rendert de knoptekst niet als DM Sans Black (900). */
.fleur-wc .fleur-thankyou__home {
	min-width: 270px; /* Figma 520:5779 knopbreedte; tekst gecentreerd i.p.v. krap */
	height: 53px;
	padding: 0 34px;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	border-radius: 100px;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
}
/* Lift + zachte schaduw komen van .button:hover (main.css) — geen brightness. */
.fleur-wc .fleur-thankyou__home:hover { color: var(--fleur-cream); }

/* Sfeerfoto rechts (Figma 698×519, radius 5px). */
.fleur-thankyou__figure {
	margin: 0;
	position: relative;
	z-index: 1;
}
.fleur-thankyou__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 698 / 519;
	object-fit: cover;
	border-radius: 5px;
}

/* =========================================================
   4. MIJN ACCOUNT / LOGIN (myaccount/*) — 520:5444 e.v.
   ========================================================= */
body.woocommerce-account .fleur-account { color: var(--fleur-aubergine); }

/* Donkere hero-band "Mijn account" (full-bleed binnen .sellabees-container). */
.fleur-account__hero {
	background: var(--fleur-aubergine);
	margin: -24px calc(50% - 50vw) 40px;
	padding: 56px max(24px, calc(50vw - 640px + 24px));
}
.fleur-account__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 50px);
	color: var(--fleur-cream);
	margin: 0;
	max-width: 1280px;
}

/* Layout: nav links, content rechts (alleen ingelogd). */
.fleur-account--in .fleur-account__layout {
	display: grid;
	/* Nav-kolom 282px + smalle tussenruimte; content begint ~306px vanaf de nav
	   (design 520:5565/5566: nav x=359, content x=665). */
	grid-template-columns: 282px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-bottom: 64px;
}
.fleur-account--out .fleur-account__layout { margin-bottom: 64px; }

/* Account-navigatie — alle items zacht-roze (#f6bddd), DM Sans Bold 16px,
   regelhoogte 49px, GEEN scheidingslijnen. Actief item = onderstreept, zelfde
   kleur (design 520:5565: alle items #f6bddd, actieve regel underlined). */
.fleur-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
.fleur-account__nav li { margin: 0; }
.fleur-account__nav li a {
	display: block;
	padding: 0;
	line-height: 49px;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 16px;
	color: #f6bddd;
	border: 0;
	text-decoration: none;
}
.fleur-account__nav li a:hover,
.fleur-account__nav li.is-active a,
.fleur-account__nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	color: #f6bddd;
	text-decoration: underline;
}

/* Content. WooCommerce zet nav op ~30% en content op ~68% breedte (+float);
   in ons grid moeten beide hun kolom vólledig vullen (anders is de content maar
   ~630px i.p.v. de volle track → adressen te smal, tekst breekt af). */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
body.woocommerce-account .woocommerce-MyAccount-content { font-size: 16px; }
/* Adres-bewerken: de titel (H2 "Factuuradres") lijnt bovenaan uit met de nav —
   geen top-marge (pages.css geeft h2 standaard margin-top 1.4em). */
body.woocommerce-account .woocommerce-MyAccount-content h2 { margin-top: 0; }
body.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 1em; line-height: 1.6; }
.fleur-account__greeting { font-size: 16px; }
/* Dashboard-begroeting + uitleg = zwarte tekst; de inline links zijn in het
   design NIET gekleurd/onderstreept (520:5566 is volledig text-black). */
body.woocommerce-account .fleur-account__greeting,
body.woocommerce-account .fleur-account__greeting a,
body.woocommerce-account .woocommerce-MyAccount-content > p,
body.woocommerce-account .woocommerce-MyAccount-content > p a { color: #000; }
body.woocommerce-account .fleur-account__greeting a,
body.woocommerce-account .woocommerce-MyAccount-content > p a { text-decoration: none; }

/* Bestellingen-tabel — 520:5570. */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.account-orders-table {
	width: 100%;
	border: 1px solid var(--fleur-wc-line2);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}
body.woocommerce-account table.woocommerce-orders-table th {
	background: #fff;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 14px;
	color: var(--fleur-aubergine);
	text-align: left;
	padding: 16px 18px;
	border-bottom: 1px solid var(--fleur-wc-line2);
}
body.woocommerce-account table.woocommerce-orders-table td {
	padding: 16px 18px;
	font-size: 14px;
	color: var(--fleur-aubergine);
	border: 0;
}
body.woocommerce-account table.woocommerce-orders-table .woocommerce-button {
	background: transparent;
	color: var(--fleur-aubergine);
	border: 1.5px solid var(--fleur-aubergine);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
}
body.woocommerce-account table.woocommerce-orders-table .woocommerce-button:hover { background: var(--fleur-aubergine); color: #fff; }
/* Ordernummer-link zwart, niet onderstreept (design 520:5570 toont zwarte tekst). */
body.woocommerce-account table.woocommerce-orders-table a { color: #000; text-decoration: none; }
body.woocommerce-account table.woocommerce-orders-table a:hover { color: var(--fleur-pink); }
/* Alleen de kopregel is vet; de ordernummer-cel (een row-<th>) normaal gewicht. */
body.woocommerce-account table.woocommerce-orders-table th.woocommerce-orders-table__cell { font-weight: 400; }

/* Adressen — 520:5636. Twee kolommen; per adres: titel (serif 20px zwart),
   adres (zwart 16px) en DAARONDER pas de bewerk-link (aubergine, DM Sans
   regular). my-address.php plaatst de link ná het adres i.p.v. erboven. */
/* Intro-zin boven de adressen is cursief (design 520:5697). */
body.woocommerce-account .fleur-addr-intro { font-style: italic; color: #000; margin: 0 0 8px; }
body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 24px;
}
/* WooCommerce's .col2-set clearfix voegt ::before/::after toe; in een grid worden
   dat losse grid-cellen die de kolommen verschuiven → uitschakelen. */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after { content: none; display: none; }
/* .woocommerce-Addresses ervoor zodat dit wint van WooCommerce's
   .woocommerce .col2-set .col-1 { width:47% } (anders zijn de adreskolommen
   maar ~47% breed en breekt de straatnaam af). */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address { width: 100%; float: none; margin: 0; }
body.woocommerce-account .woocommerce-Address .woocommerce-Address-title,
body.woocommerce-account .woocommerce-Address h2,
body.woocommerce-account .woocommerce-Address h3 {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 20px;
	color: #000;
	margin: 0 0 14px;
}
body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 16px;
	line-height: 29px;
	color: #000;
	margin: 0 0 14px;
}
body.woocommerce-account .woocommerce-Address a.edit {
	display: inline-block;
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: 16px;
	color: var(--fleur-aubergine);
	text-transform: none;
	text-decoration: none;
}
body.woocommerce-account .woocommerce-Address a.edit:hover { text-decoration: underline; }

/* Accountgegevens + adres-bewerken formulieren — 520:5699. */
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-account form.edit-account,
body.woocommerce-account form.woocommerce-form {
	max-width: 920px;
}
body.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 0; margin: 18px 0 0; padding: 0; }
body.woocommerce-account .woocommerce-EditAccountForm legend {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	color: var(--fleur-aubergine);
	padding: 0;
	margin: 0 0 14px;
}
body.woocommerce-account .form-row {
	margin: 0 0 14px;
}
body.woocommerce-account .form-row label {
	display: block;
	font-family: var(--fleur-font-sans);
	font-size: 14px;
	color: var(--fleur-aubergine);
	margin: 0 0 6px;
}
/* Accountgegevens (520:5699): de veldnaam staat als placeholder IN het veld, dus
   het label visueel verbergen (blijft voor screenreaders). Het adres-bewerk-
   formulier (.woocommerce-address-fields) en de login houden hun zichtbare labels. */
body.woocommerce-account .woocommerce-EditAccountForm .form-row > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm input::placeholder { color: #8a8a8a; opacity: 1; }
/* Wachtwoord-onthulknop is niet in het design → verbergen; veld blijft vol breed. */
body.woocommerce-account .woocommerce-EditAccountForm .show-password-input { display: none; }
body.woocommerce-account .woocommerce-EditAccountForm .password-input { display: block; }
body.woocommerce-account .woocommerce-EditAccountForm .password-input input { width: 100%; }
body.woocommerce-account .form-row .required { color: var(--fleur-pink); border: 0; }
body.woocommerce-account .form-row input.input-text,
body.woocommerce-account .form-row input[type="text"],
body.woocommerce-account .form-row input[type="email"],
body.woocommerce-account .form-row input[type="password"],
body.woocommerce-account .form-row input[type="tel"],
body.woocommerce-account .form-row select,
body.woocommerce-account .select2-container .select2-selection--single {
	width: 100%;
	height: 53px;
	/* Design 520:5444/5699: velden zijn nagenoeg vierkant (radius 2px), rand #d9d9d9,
	   GEEN witte vulling — de grijze paginakleur schijnt erdoor. */
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	padding: 0 18px;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	color: var(--fleur-aubergine);
	background: var(--fleur-cream);
}
body.woocommerce-account .form-row input:focus,
body.woocommerce-account .form-row select:focus { outline: none; border-color: var(--fleur-pink); }
/* Land/regio (select2): tekst verticaal centreren in het 53px-veld (select2 houdt
   anders zijn eigen 28px regelhoogte → tekst te hoog) en de pijl netjes rechts. */
body.woocommerce-account .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 24px 0 0;
	line-height: normal;
	color: var(--fleur-aubergine);
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 12px;
	height: 100%;
}
/* select2-veld + dropdown ONDER de sticky header (z-index 1000) houden, anders
   komt het Land/regio-veld door de header heen bij scrollen. LET OP: de
   container krijgt óók in gesloten toestand z-index 9999 (niet alleen --open),
   dus we targeten de algemene .select2-container (dekt open én dicht). */
body .select2-container { z-index: 990; }
body .select2-dropdown { z-index: 990; }
body.woocommerce-account .form-row-first,
body.woocommerce-account .form-row-last {
	display: inline-block;
	width: calc(50% - 8px);
	vertical-align: top;
}
body.woocommerce-account .form-row-first { margin-right: 14px; }
body.woocommerce-account .form-row span em {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-style: italic;
	color: var(--fleur-wc-muted);
}
body.woocommerce-account .woocommerce-EditAccountForm button,
body.woocommerce-account .woocommerce-address-fields button,
body.woocommerce-account form.edit-account button[name="save_account_details"] {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	border: 0;
	border-radius: 100px;
	padding: 0 44px;
	height: 53px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
/* Knop "Wijzigingen opslaan" rechts uitgelijnd (design 520:5699); hover = lift
   via .button:hover in main.css. */
body.woocommerce-account .woocommerce-EditAccountForm .fleur-account__save { text-align: right; margin-top: 8px; }

/* --- LOGIN / REGISTREREN (uitgelogd) — 520:5444 ---
   Twee kolommen met velden van 557px breed en 55px tussenruimte, links
   uitgelijnd (design: Login-kolom x=359, Registreren-kolom x=971). */
.fleur-login {
	display: grid;
	/* max-width 1169 = 557 + 55 + 557, dus elke 1fr-kolom = exact 557px met de
	   velden die de kolom vullen; links uitgelijnd (block, margin 0). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 55px;
	row-gap: 40px;
	max-width: 1169px;
	margin: 40px 0 80px;
	align-items: start;
}
.fleur-login.fleur-login--single { grid-template-columns: minmax(0, 557px); max-width: 557px; }
/* WooCommerce zet .col2-set .col-1/.col-2 op width:47% + float; in het grid moeten
   de kolommen hun track (557px) vullen zodat de velden 557px breed worden. */
body.woocommerce-account .fleur-login .u-column1,
body.woocommerce-account .fleur-login .u-column2 { width: 100%; float: none; margin: 0; padding: 0; }
/* WooCommerce's .col2-set clearfix voegt ::before/::after toe; in dit grid zijn
   dat losse cellen die de kolommen (Login | Registreren) verschuiven. De WC-regel
   (.woocommerce .col2-set::before) is specifieker, dus met !important uitschakelen. */
.fleur-login::before,
.fleur-login::after { content: none !important; display: none !important; }
/* WooCommerce omkadert login/registratie standaard met border+padding; het design
   heeft geen kader — de velden staan los op het grijs. */
body.woocommerce-account .fleur-login form.login,
body.woocommerce-account .fleur-login form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}
/* Wachtwoord-onthulknop staat niet in het design → verbergen; veld vol breed. */
.fleur-login .show-password-input { display: none; }
.fleur-login .password-input { display: block; }
.fleur-login .password-input input { width: 100%; }
/* Privacy-tekst staat niet in het Figma-design → verbergen (WC-standaard). */
.fleur-login .woocommerce-privacy-policy-text { display: none; }
/* body.woocommerce-account voor genoeg specificiteit t.o.v. pages.css
   .fleur-page__content h2 (28px), anders wint die (gelijke specificiteit). */
body.woocommerce-account .fleur-login h2 {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 40px);   /* design 520:5496 = 40px */
	color: var(--fleur-aubergine);
	margin: 0 0 36px;
}
.fleur-login .form-row { margin: 0 0 22px; }
/* Labels zwart 16px (design 520:5498-5500); specifieker dan de gedeelde
   account-labelregel zodat die niet wint (14px aubergine). */
body.woocommerce-account .fleur-login .form-row > label,
.fleur-login .form-row > label {
	display: block;
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	line-height: 1.2;   /* niet de 35px van .fleur-page__content erven */
	color: #000;
	margin: 0 0 8px;
}
.fleur-login .required { color: var(--fleur-pink); border: 0; }
.fleur-login input.input-text,
.fleur-login input[type="text"],
.fleur-login input[type="email"],
.fleur-login input[type="password"] {
	width: 100%;
	height: 53px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	padding: 0 18px;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	color: var(--fleur-aubergine);
	background: var(--fleur-cream);
}
.fleur-login input:focus { outline: none; border-color: var(--fleur-pink); }
.fleur-login__actions {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding-left: 0;
}
/* .form-row clearfix ::before wordt in deze flexrij een 0-brede flex-item; de
   gap (30px) duwt daardoor de knop naar rechts, uit lijn met de velden. Uit. */
.fleur-login__actions::before,
.fleur-login__actions::after { content: none !important; display: none !important; }
/* body.woocommerce-account voor genoeg specificiteit t.o.v. WooCommerce's
   .woocommerce button.button (anders blijft de knop grijs i.p.v. aubergine). */
body.woocommerce-account .fleur-login__actions button {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	border: 0;
	border-radius: 100px;
	width: 220px;          /* design 520:5504 = 220×53, tekst gecentreerd */
	height: 53px;
	padding: 0;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}
/* label.…rememberme met body-prefix zodat inline-flex wint van de generieke
   account-labelregel (die display:block forceert en de centrering brak). */
body.woocommerce-account .fleur-login__actions label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1;
	color: #212121;
	margin: 0;
	cursor: pointer;
}
/* Tekstregel = 16px (gelijk aan de checkbox) zodat "Onthouden" exact op het
   midden van de checkbox uitlijnt (erft anders de 35px regelhoogte). */
body.woocommerce-account .fleur-login__actions label.woocommerce-form-login__rememberme span { line-height: 16px; }
/* "Onthouden"-checkbox 1:1 op het design (520:5510): grijze (#d9d9d9) vierkant,
   16px, hoeken 3px. appearance:none + margin:0 zodat hij netjes verticaal
   centreert met de tekst (de native checkbox had een UA-marge die dat scheeftrok). */
.fleur-login__actions input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: #d9d9d9;
	cursor: pointer;
	position: relative;
}
.fleur-login__actions input[type="checkbox"]:checked { background: var(--fleur-aubergine); }
.fleur-login__actions input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.fleur-login .lost_password { margin: 18px 0 0; }
/* "Je wachtwoord vergeten?" = zacht-roze #f6bddd (design 520:5444). */
.fleur-login .lost_password a { color: #f6bddd; text-decoration: none; }
.fleur-login .lost_password a:hover { color: #f6bddd; text-decoration: underline; }
.fleur-login__reg-note { font-size: 16px; color: var(--fleur-wc-muted); line-height: 1.5; margin: 0 0 22px; }
body.woocommerce-account .fleur-login .woocommerce-form-register__submit {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	border: 0;
	border-radius: 100px;
	width: 220px;          /* design 520:5505 = 220×53, tekst gecentreerd */
	height: 53px;
	padding: 0;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

/* Aubergine account/login-knoppen behouden hun kleur op hover (WooCommerce's
   grijze .button:hover overschrijven); de lift-hover komt uit main.css. */
body.woocommerce-account .fleur-login__actions button:hover,
body.woocommerce-account .fleur-login .woocommerce-form-register__submit:hover,
body.woocommerce-account .woocommerce-EditAccountForm button:hover,
body.woocommerce-account .woocommerce-address-fields button:hover,
body.woocommerce-account form.edit-account button[name="save_account_details"]:hover {
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
}

/* --- ALLEEN-REGISTREREN (bereikt via "Account aanmaken" in de inlog-popup) ---
   Inloggen verloopt bewust via de popup; deze pagina toont alleen het
   registratieformulier + een terugval-link die de popup opent. Layout erft de
   enkele-kolom (557px) van .fleur-login--single. */
.fleur-login__have-account {
	margin: 22px 0 0;
	font-size: 16px;
	color: var(--fleur-wc-muted);
	line-height: 1.5;
}
/* Terugval-link naar de popup in het zacht-roze van de pagina (zoals
   "Je wachtwoord vergeten?"). */
.fleur-login__have-account a {
	color: #f6bddd;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.fleur-login__have-account a:hover { color: #f6bddd; text-decoration: underline; }

/* =========================================================
   5. WooCommerce notices (gedeeld op alle transactionele pagina's)
   ========================================================= */
.fleur-wc .woocommerce-message,
.fleur-wc .woocommerce-info,
.fleur-wc .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	border-radius: 10px;
	border-top: 0;
	font-family: var(--fleur-font-sans);
	font-size: 15px;
	padding: 14px 18px 14px 44px;
}
.fleur-wc .woocommerce-message::before,
.fleur-wc .woocommerce-info::before { color: var(--fleur-pink); }

/* =========================================================
   6. Responsive
   ========================================================= */
@media (max-width: 1024px) {
	body.woocommerce-cart .fleur-cart {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	body.woocommerce-cart .fleur-cart > .woocommerce-cart-form,
	body.woocommerce-cart .fleur-cart > .cart-collaterals { grid-column: 1; }
	body.woocommerce-cart .fleur-cart > .cart-collaterals { grid-row: auto; }

	/* Afrekenen: één kolom, besteloverzicht bóven de gegevens. */
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 28px;
	}
	body.woocommerce-checkout .sellabees-co__main,
	body.woocommerce-checkout #order_review { grid-column: 1; }
	/* Gestapeld staat het overzicht bovenaan (order:-1) — niet meescrollen. */
	body.woocommerce-checkout #order_review { order: -1; position: static; }

	.fleur-thankyou__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	/* Gestapeld: band start onder de introtekst zodat de knop + foto op roze staan. */
	.fleur-thankyou--page .fleur-thankyou__band { top: 380px; }
	/* Contactbedankt heeft een kortere intro (kop één regel), dus gestapeld iets hoger. */
	.fleur-thankyou--contact .fleur-thankyou__band { top: 340px; }
	.fleur-account--in .fleur-account__layout { grid-template-columns: 1fr; gap: 32px; }
	.fleur-login { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Mobiel (staand tablet + telefoon, ≤981px) ───────────────────────────────
   De grote kolom-stapelingen (cart/checkout/account/login → 1 kolom, bedankt-
   grid → 1 kolom) staan al in het 1024-blok hierboven en gelden dus óók ≤981px.
   Dit blok voegt de mobiel-specifieke verfijningen toe: kleinere koppen, minder
   sectie-lucht, compactere hero/kaarten en het voorkomen van horizontaal
   overlopende inhoud. Staat bewust vóór het 640-blok zodat de telefoon-tweaks
   daar (bij gelijke specificiteit, latere bron) blijven winnen. Uitsluitend
   binnen dit @media-blok — desktop (≥982px) blijft ongewijzigd. */
@media (max-width: 981px) {

	/* --- Gedeelde koppen: iets kleiner + minder ondermarge op mobiel. --- */
	.fleur-wc__head { margin: 4px 0 24px; }

	/* --- WINKELWAGEN --- */
	body.woocommerce-cart .fleur-cart { margin-bottom: 48px; }
	/* Totalenbox niet onnodig breed uitrekken op de volle 1-koloms track. */
	body.woocommerce-cart .cart-collaterals { max-width: none; }

	/* Minder witruimte ONDER de kop "Winkelwagen". De mobiele cart-grid (≤1024)
	   heeft gap:32px → die rij-gap stapelt bovenop de kop-marge tot een groot gat
	   onder de titel. Rij-gap op 0 + een kleine kop-marge; de totalen-box (rij 3)
	   houdt z'n scheiding via een eigen margin-top. */
	body.woocommerce-cart .fleur-cart { row-gap: 0; }
	body.woocommerce-cart .fleur-cart > .fleur-wc__head { margin-bottom: 14px; }
	body.woocommerce-cart .fleur-cart > .cart-collaterals { margin-top: 32px; }

	/* ── Mobiele redesign van de productregel ─────────────────────────────────
	   Op een telefoon staat de desktop-grid (thumb | naam/aantal | prijs/×) te
	   krap. We herbouwen elke regel als een nette kaart: thumbnail links, daarnaast
	   een kolom met de naam op een eigen regel, de meta eronder, en onderaan een
	   rij met de − n + stepper links en de regelprijs rechts. De × staat rechtsboven.
	   Alle classes/structuur (.quantity, .product-subtotal, remove-link) blijven
	   intact — dit is puur presentatie. Uitsluitend ≤981px.

	   KRITISCH: de tabel heeft class `shop_table_responsive`; WooCommerce' core-CSS
	   voegt op smalle schermen per cel een `::before { content: attr(data-title) }`-
	   label toe ("Product:", "Aantal:", "Prijs:"), zet de cellen op `display:block;
	   text-align:right` en verbergt de thumbnail-kolom. Dat verpestte de layout
	   (gecentreerde/rechts-gedrukte naam + labels + geen foto). Hieronder neutra-
	   liseren we die responsive-tabel-regels zodat onze grid-kaart wint. */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td::before {
		content: none !important;
		display: none !important;
	}
	/* Core zet `text-align:right!important` op de cellen → wij moeten óók !important
	   gebruiken om links uit te lijnen. Plaatsing verloopt via de grid-areas. */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td {
		text-align: left !important;
		width: auto;
	}
	/* Thumbnail-kolom weer tonen (core: `table.cart .product-thumbnail{display:none}`). */
	body.woocommerce-cart table.cart td.product-thumbnail { display: block !important; }
	/* Core zet een grijze zebra-achtergrond op elke even rij
	   (`shop_table_responsive tr:nth-child(2n) td`) → uitzetten, onze rijen zijn
	   transparant met een subtiele onderlijn. */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item:nth-child(2n) td {
		background-color: transparent;
	}

	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb meta"
			"thumb foot";
		grid-template-rows: auto auto auto;
		align-items: start;
		column-gap: 16px;
		row-gap: 6px;
		min-height: 0;
		padding: 18px 0;
	}
	body.woocommerce-cart table.cart td.product-thumbnail {
		width: 96px;
		grid-area: thumb;
		align-self: start;
	}
	body.woocommerce-cart table.cart td.product-thumbnail img { width: 96px; height: 96px; }

	/* Naam op een eigen regel, links uitgelijnd; laat rechts ruimte voor de ×. */
	body.woocommerce-cart table.cart td.product-name {
		grid-area: name;
		align-self: start;
		padding-right: 28px;
		font-size: 16px;
		line-height: 1.3;
	}
	/* Meta (gekozen bonbons / verpakking) direct onder de naam. */
	body.woocommerce-cart table.cart td.product-name .variation,
	body.woocommerce-cart table.cart td.product-name dl.variation { margin-top: 4px; }

	/* Voetrij: stepper links, regelprijs rechts, netjes op één lijn. */
	body.woocommerce-cart table.cart td.product-quantity {
		grid-area: foot;
		align-self: center;
		justify-self: start;
		margin-top: 4px;
	}
	body.woocommerce-cart table.cart td.product-price {
		grid-area: foot;
		align-self: center;
		justify-self: end;
		text-align: right;
		margin-top: 4px;
		font-size: 15px;
	}

	/* Verwijder-× rechtsboven de kaart, op de naamregel. */
	body.woocommerce-cart table.cart td.product-remove {
		grid-area: name;
		align-self: start;
		justify-self: end;
	}

	/* Iets rustiger scheidingslijn/afstand tussen regels. */
	body.woocommerce-cart .cart-collaterals { margin-top: 8px; }

	/* --- AFREKENEN --- */
	body.woocommerce-checkout .fleur-checkout .fleur-wc__head { margin-bottom: 20px; }
	/* Iets minder ruimte tussen de gestapelde secties. */
	body.woocommerce-checkout .sellabees-checkout-section--address,
	body.woocommerce-checkout .sellabees-co-shipping-section,
	body.woocommerce-checkout .sellabees-co-payment-section { margin-top: 28px; }
	/* Besteloverzicht-kaart (staat door het 1024-blok bovenaan) compacter. */
	body.woocommerce-checkout #order_review { padding: 20px 18px 18px; }

	/* Landveld: op desktop staat de waarde bewust onderin met een zwevend
	   "Land/regio"-minilabeltje erboven (Figma-floating-label). Op mobiel zijn de
	   velden vol-breed en leest die bottom-uitlijning als "scheef" — de waarde hangt
	   lager dan de placeholders van de buurvelden (Voornaam, Postcode…). Op mobiel
	   dus het minilabel verbergen en "Nederland" verticaal centreren, gelijk aan de
	   overige velden. Mobiel-only (≤981px); desktop houdt de floating-label. */
	body.woocommerce-checkout #billing_country_field > label,
	body.woocommerce-checkout #shipping_country_field > label { display: none; }
	body.woocommerce-checkout #billing_country_field .select2-container .select2-selection--single,
	body.woocommerce-checkout #shipping_country_field .select2-container .select2-selection--single {
		align-items: center;
		padding-bottom: 0;
	}
	body.woocommerce-checkout #billing_country_field select.country_select,
	body.woocommerce-checkout #shipping_country_field select.country_select { padding-top: 0; }

	/* Besteloverzicht-regel: thumbnail (75×81, hoger dan breed) en de naam/aantal-
	   regel lijnden op mobiel niet netjes uit. Centreer ze verticaal t.o.v. elkaar
	   zodat een korte naam mooi op het midden van de thumbnail valt en de regel
	   rustig oogt. Mobiel-only. */
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
		align-items: center;
	}
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
		vertical-align: middle;
	}

	/* --- BEDANKT --- */
	.fleur-thankyou { padding: clamp(20px, 5vw, 40px) 0 clamp(56px, 10vw, 96px); }
	/* Contactbedankt: op mobiel viel de "Terug naar home"-knop half op de roze band
	   (top:340px uit het 1024-blok). Duw de band lager zodat de knop volledig op het
	   grijze (crème) vlak staat; de knop krijgt wat ondermarge als schone tussenruimte
	   vóór de foto/band. De band dekt nog steeds de foto eronder. Mobiel-only. */
	.fleur-thankyou--contact .fleur-thankyou__band { top: 430px; }
	.fleur-thankyou--contact .fleur-thankyou__home { margin-bottom: 30px; }

	/* --- MIJN ACCOUNT --- */
	/* Hero-band: minder verticale ruimte (breedte/side-padding blijft 24px via
	   de max()-formule uit de desktopregel). */
	.fleur-account__hero { padding-top: 36px; padding-bottom: 36px; margin-bottom: 28px; }
	.fleur-account--in .fleur-account__layout,
	.fleur-account--out .fleur-account__layout { margin-bottom: 48px; }
	/* Bestellingen-tabel mag horizontaal scrollen i.p.v. de pagina te verbreden:
	   de tabel houdt een leesbare minimumbreedte en de losse content-kolom
	   krijgt een eigen scrollcontainer. */
	body.woocommerce-account .woocommerce-MyAccount-content { overflow-x: auto; }
	body.woocommerce-account table.woocommerce-orders-table,
	body.woocommerce-account table.account-orders-table { min-width: 460px; }

	/* --- LOGIN --- */
	body.woocommerce-account .fleur-login { margin: 28px 0 56px; }
}

@media (max-width: 640px) {
	/* Kleinere telefoon: iets compactere thumbnail; de kaart-structuur uit het
	   ≤981px-blok (thumb | naam / meta / stepper+prijs) blijft ongewijzigd. */
	body.woocommerce-cart table.cart td.product-thumbnail { width: 84px; }
	body.woocommerce-cart table.cart td.product-thumbnail img { width: 84px; height: 84px; }

	/* Afrekenen: adresvelden (flex) volle breedte gestapeld. */
	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last {
		flex: 0 0 100%;
		width: 100%;
	}
	body.woocommerce-account .form-row-first,
	body.woocommerce-account .form-row-last {
		display: block;
		width: 100%;
		margin-right: 0;
	}
	body.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }

	/* Bestelknop volle breedte op smal scherm. */
	body.woocommerce-checkout #place_order { width: 100%; min-width: 0; }
	body.woocommerce-checkout #payment .place-order .sellabees-checkout__back { margin: 0 0 14px; }
}

/* ── Kleine telefoon (≤600px) ────────────────────────────────────────────────
   Extra verfijningen voor smalle schermen: de drieledige postcode/huisnr/
   toevoeging-rij wordt te krap → hergroeperen; knoppen volle breedte; de
   bestellingen-tabel + hero iets compacter. Staat als laatste in het bestand
   zodat deze telefoon-tweaks winnen. Uitsluitend binnen dit @media-blok. */
@media (max-width: 600px) {

	/* --- AFREKENEN: postcode + huisnr naast elkaar, toevoeging vol breed ---
	   De veld-id's staan hierboven op flex/width 33.333% met !important (immuun
	   voor address-i18n.js), dus hier ook met !important overschrijven. */
	body.woocommerce-checkout #billing_postcode_field,
	body.woocommerce-checkout #shipping_postcode_field,
	body.woocommerce-checkout #billing_house_number_field,
	body.woocommerce-checkout #shipping_house_number_field {
		flex: 1 1 calc(50% - (var(--fleur-co-gap) / 2)) !important;
		width: calc(50% - (var(--fleur-co-gap) / 2)) !important;
	}
	body.woocommerce-checkout #billing_address_2_field,
	body.woocommerce-checkout #shipping_address_2_field {
		flex: 0 0 100% !important;
		width: 100% !important;
	}

	/* --- BEDANKT: knop volle breedte --- */
	.fleur-wc .fleur-thankyou__home {
		display: flex;
		width: 100%;
		min-width: 0;
		max-width: 360px;
	}

	/* --- MIJN ACCOUNT --- */
	/* Login/registratie- en formulierknoppen volle breedte (telefoon-patroon). */
	body.woocommerce-account .fleur-login__actions button,
	body.woocommerce-account .fleur-login .woocommerce-form-register__submit {
		width: 100%;
		max-width: 360px;
	}
	body.woocommerce-account .woocommerce-EditAccountForm button,
	body.woocommerce-account .woocommerce-address-fields button,
	body.woocommerce-account form.edit-account button[name="save_account_details"] {
		width: 100%;
		max-width: 360px;
		padding: 0;
		justify-content: center;
	}
	/* Save-knop links uitlijnen (i.p.v. de desktop-rechtse uitlijning) zodat de
	   volle-breedte-knop met de velden meeloopt op een telefoon. */
	body.woocommerce-account .woocommerce-EditAccountForm .fleur-account__save { text-align: left; }
	/* Bestellingen-tabel: krappere celruimte zodat de kolommen op een telefoon
	   passen (blijft indien nodig horizontaal scrollen via het 981-blok). */
	body.woocommerce-account table.woocommerce-orders-table th,
	body.woocommerce-account table.woocommerce-orders-table td {
		padding: 12px 12px;
		font-size: 13px;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
   7. LANDSCAPE TABLET (982–1219px)
   Spiegelt de goedgekeurde desktop-layout met iets krappere spacing. Het
   max-width:1024-blok (§6) stapelt cart/checkout/account/login/bedankt naar één
   kolom; dat is bedoeld voor telefoon/portret-tablet (≤981px) maar pakt óók
   982–1024px. Op landscape tablet passen alle 2-koloms-layouts nog ruim binnen de
   1280-container, dus herstellen we ze naar 2 koloms voor het HELE 982–1219-bereik
   (geen sprong bij 1024px). Dit blok staat als laatste in de bron en heeft daardoor
   — bij gelijke specificiteit — voorrang op het 1024-blok voor het overlappende
   982–1024-deel. Raakt uitsluitend widths ≥982px; desktop (≥1220) en mobiel
   (≤981) blijven ongewijzigd. Alle regels body-gescoped. */
@media (min-width: 982px) and (max-width: 1219px) {

	/* --- WINKELWAGEN: 2-koloms (itemtabel + totalen) behouden --- */
	body.woocommerce-cart .fleur-cart {
		grid-template-columns: minmax(0, 1fr) 320px;   /* totalen iets smaller dan desktop 360 */
		column-gap: 40px;                              /* krapper dan desktop 56 */
		margin-bottom: 48px;                           /* was 64 */
	}
	/* Plaatsing herstellen (1024-blok zet beide in kolom 1). */
	body.woocommerce-cart .fleur-cart > .woocommerce-cart-form { grid-column: 1; }
	body.woocommerce-cart .fleur-cart > .cart-collaterals      { grid-column: 2; grid-row: 2; }

	/* --- AFREKENEN: 2-koloms (formulier + besteloverzicht) behouden --- */
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 743fr) 412fr; /* zelfde verhouding als desktop */
		column-gap: 32px;                              /* krapper dan desktop 47 */
		row-gap: 0;
	}
	body.woocommerce-checkout .sellabees-co__main { grid-column: 1; }
	/* Kolom 2 + order-reset herstellen (1024-blok zet kolom 1 + order:-1). Ook hier
	   scrollt het overzicht mee (sticky-top erft van de desktop-basisregel). */
	body.woocommerce-checkout #order_review {
		grid-column: 2;
		order: 0;
		position: sticky;
		padding: 22px 18px 20px;                       /* iets compacter dan desktop 24 */
	}

	/* --- BEDANKT: 2-koloms (tekst + sfeerfoto) behouden --- */
	.fleur-thankyou__grid {
		grid-template-columns: minmax(0, 670fr) minmax(0, 698fr);
		gap: clamp(24px, 3vw, 40px);                   /* krapper dan desktop clamp(28,3.4vw,49) */
	}
	/* De roze band is een vaste px-offset; de smallere tekstkolom breekt de intro
	   in méér regels, dus de band start iets lager dan de desktop-318px. Eén vaste
	   waarde kan over 982–1219 nooit perfect zijn (fluïde container vs. vaste
	   offset) — 340 is een middenwaarde. NB: visueel te controleren.
	   Generiek = de WC order-received-pagina (thankyou.php heeft géén --page/
	   --contact-modifier); de specifieke regels verslaan het 1024-blok (0,2,0). */
	.fleur-thankyou__band { top: 340px; }
	.fleur-thankyou--page .fleur-thankyou__band { top: 340px; }
	.fleur-thankyou--contact .fleur-thankyou__band { top: 340px; }

	/* --- MIJN ACCOUNT: 2-koloms (nav + inhoud) behouden --- */
	.fleur-account--in .fleur-account__layout {
		grid-template-columns: 240px minmax(0, 1fr);   /* nav iets smaller dan desktop 282 */
		gap: 24px;
		margin-bottom: 48px;                           /* was 64 */
	}
	.fleur-account--out .fleur-account__layout { margin-bottom: 48px; }
	/* Hero-band: minder verticale lucht (breedte/side-padding blijft via de
	   max()-formule uit de desktopregel op 24px staan → gutter intact). */
	.fleur-account__hero {
		padding-top: 44px;
		padding-bottom: 44px;
		margin-bottom: 32px;
	}

	/* --- LOGIN / REGISTREREN: 2-koloms behouden (NIET de enkelvoudige variant) ---
	   :not(.fleur-login--single) zodat de losse variant (bv. wachtwoord-reset,
	   registratie uitgeschakeld) 1-koloms blijft; anders zou deze regel (0,3,1) de
	   single-regel (0,2,0) overrulen en een lege tweede kolom tonen. */
	body.woocommerce-account .fleur-login:not(.fleur-login--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;                              /* krapper dan desktop 55 */
		row-gap: 40px;
	}
	/* Minder onder-/bovenmarge dan desktop (40 0 80); raakt de grid niet, dus de
	   single-variant houdt zijn eigen kolom-opzet. */
	body.woocommerce-account .fleur-login { margin: 32px 0 64px; }
}