/* =========================================================================
   Mimoda — WooCommerce: winkelwagen, afrekenen, account, bedankt.
   Stylet de standaard WC- + core-markup naar de Mimoda-huisstijl.
   ========================================================================= */

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content { }

/* Gedeelde WC-container */
.woocommerce-page .mimoda-content > .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce .mimoda-wc {
	max-width: calc(1540px + 48px);
	margin-inline: auto;
	padding: 48px 24px 64px;
}
.woocommerce-page h1.entry-title,
.woocommerce .mimoda-wc__title {
	font-family: var(--mimoda-display);
	font-weight: 400;
	font-size: 44px;
	margin: 0 0 28px;
}

/* --- Knoppen --------------------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button,
.wc-block-components-button, .woocommerce-cart .checkout-button {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mimoda-accent); color: #fff;
	border: none; border-radius: 6px; padding: 0 24px; min-height: 48px;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 14px;
	text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: var(--mimoda-btn-transition);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { filter: brightness(.96); color: #fff; }
/* Site-brede knop-animatie (hover-lift + klik-indruk) ook op alle WC-knoppen,
   inclusief de blok-knoppen die geen .button-class dragen. */
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce .button:hover,
.wc-block-components-button:hover, .woocommerce-cart .checkout-button:hover {
	transform: translateY(var(--mimoda-btn-lift)); box-shadow: var(--mimoda-btn-shadow); filter: brightness(.96);
}
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active,
.woocommerce #respond input#submit:active, .woocommerce .button:active,
.wc-block-components-button:active, .woocommerce-cart .checkout-button:active {
	transform: translateY(var(--mimoda-btn-press)); box-shadow: var(--mimoda-btn-shadow-active); filter: brightness(.94);
}
.woocommerce .button.alt, .woocommerce #place_order, .woocommerce-cart .checkout-button { background: var(--mimoda-accent); }
.woocommerce .button--secondary, .woocommerce a.button.wc-backward {
	background: #fff; color: var(--mimoda-ink); border: 1px solid #e0cfcf;
}

/* --- Velden ---------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-account input[type="text"], .woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
	border: 1px solid #e0cfcf; border-radius: 6px; padding: 12px 14px;
	font-family: var(--mimoda-font); font-size: 14px; background: #fff; min-height: 46px;
}
.woocommerce form .form-row label { font-size: 13px; margin-bottom: 6px; }

/* --- Meldingen ------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	border-top-color: var(--mimoda-accent); background: var(--mimoda-pink-soft);
	font-size: 14px; border-radius: 4px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--mimoda-accent); }

/* =========================================================================
   Winkelwagen — 1:1 op Figma (171:2504 / 208:3702).
   Klassieke [woocommerce_cart]: items links (kaartrijen), Samenvatting rechts,
   "Finish the look" full-width eronder. Draait via page.php (.mimoda-info--text);
   die kolom is voor tekstpagina's max 920px + gecentreerde titel — voor de
   winkelwagen zetten we 'm terug op de volle container met links-uitgelijnde titel.
   ========================================================================= */
.woocommerce-cart .mimoda-info__head { text-align: left; padding: 72px 24px 0; }
.woocommerce-cart .mimoda-info__title { font-size: 40px; }
/* Contentkolom volle breedte (i.p.v. de 920px tekstkolom) + geen inline padding,
   zodat de "Finish the look"-band edge-to-edge kan lopen. De winkelwagen zelf
   staat in de 1320-container (hieronder), uitgelijnd met de titel. */
.woocommerce-cart .mimoda-info--text .mimoda-page__content {
	max-width: none; margin-inline: auto; padding: 26px 0 0;
}
/* Winkelwagen op de DESIGN-container (1320px, 1:1 met de titel) i.p.v. de gedeelde
   1540px-WC-container bovenaan dit bestand. */
.woocommerce-cart .woocommerce {
	display: block; max-width: calc(1320px + 48px); margin-inline: auto; padding: 0 24px;
}
.woocommerce-cart .woocommerce-notices-wrapper { margin-bottom: 20px; }

/* --- Lege winkelwagen (1:1 Figma 371:2924) --------------------------
   Geen "Winkelwagen"-titel (die hoort bij de gevulde winkelwagen); i.p.v. de
   WC-standaardmelding een gecentreerd leeg-blok (titel → tekst → SHOP NOW),
   met daaronder de "Finish the look"-band (woocommerce_after_cart). Het label
   "Ga door naar afrekenen" uit het design is hier weggelaten — zie cart-empty.php. */
.mimoda-cart-empty-page .mimoda-info__head { display: none; }
.mimoda-cart-empty {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	padding: 72px 0 140px;
}
/* Kind-selectors expliciet onder .woocommerce-cart .mimoda-cart-empty zodat ze de
   proza-regels van .mimoda-page__content (page.css: h2 28px/34px-marge, p 15px/16px-marge)
   overrulen — anders krimpt de titel naar 28px en breekt de tekst af. */
.woocommerce-cart .mimoda-cart-empty .mimoda-cart-empty__title {
	font-family: var(--mimoda-display); font-weight: 400; font-size: 40px; line-height: 1.15;
	color: var(--mimoda-ink); margin: 0 0 20px;
}
.woocommerce-cart .mimoda-cart-empty .mimoda-cart-empty__text {
	font-family: var(--mimoda-font); font-size: 14px; line-height: 1.6;
	color: var(--mimoda-ink); max-width: none; margin: 0 0 32px;
}
.woocommerce-cart .mimoda-cart-empty a.mimoda-cart-empty__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 426px; max-width: 100%; min-height: 53px;
	background: var(--mimoda-accent); color: #fff; border-radius: 5px;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 16px;
	text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
	transition: var(--mimoda-btn-transition);
}
.woocommerce-cart .mimoda-cart-empty a.mimoda-cart-empty__btn:hover {
	background: var(--mimoda-accent-strong); color: #fff;
	transform: translateY(var(--mimoda-btn-lift)); box-shadow: var(--mimoda-btn-shadow);
}
.woocommerce-cart .mimoda-cart-empty a.mimoda-cart-empty__btn:active {
	transform: translateY(var(--mimoda-btn-press)); box-shadow: var(--mimoda-btn-shadow-active);
}

/* --- Kaartrijen (items) --------------------------------------------- */
.woocommerce-cart table.shop_table { margin: 0; width: 100%; }
/* WC' eigen shop_table-randen (table + cel border-top) hoger specifiek wegnemen;
   de rij-scheiding leveren we zelf met border-bottom op .cart_item. */
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-cart .woocommerce table.shop_table th { border: 0; }
.woocommerce-cart table.shop_table thead { display: none; }
.woocommerce-cart table.shop_table tbody { display: block; }
.woocommerce-cart td::before { display: none !important; } /* WC responsive data-title labels uit */

.woocommerce-cart table.shop_table tr.cart_item {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name  remove"
		"thumb qty   price";
	column-gap: 22px;
	row-gap: 12px;
	align-items: start;
	align-content: start; /* naam/maat/aantal strak bovenaan; beeld staat los (absoluut) */
	/* 32 padding + 200 beeld + 32 tussenruimte tot de scheidingslijn = 264. */
	min-height: 264px;
	padding: 32px 0;
	border-bottom: 1px solid #e9dede;
}

.woocommerce-cart td { display: block; border: none; padding: 0; vertical-align: top; }
/* WC' responsive-tabel zet zebra-striping op even rijen
   (table.shop_table_responsive tr:nth-child(2n) td { background: rgba(0,0,0,.025) }),
   waardoor een grijs blok over de info van het 2e (even) item valt. Alle
   item-cellen expliciet transparant — voor alle rijen, alle breedtes. */
.woocommerce-cart table.shop_table tr.cart_item td,
.woocommerce-cart table.shop_table tr.cart_item:nth-child(2n) td { background: transparent; }
/* Beeld absoluut in de (130px gereserveerde) linkerkolom: blijft 130×200 zonder de
   tekstregels naar beneden te duwen — die stapelen strak bovenaan (align-content).
   top = padding-top zodat beeld en tekst op dezelfde hoogte beginnen. */
.woocommerce-cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart td.product-thumbnail img {
	position: absolute; top: 32px; left: 0;
	width: 130px !important; height: 200px; object-fit: cover; border-radius: 5px; max-width: none;
}
.woocommerce-cart td.product-name { grid-area: name; }
.woocommerce-cart td.product-price { display: none; }
.woocommerce-cart td.product-quantity { grid-area: qty; align-self: start; line-height: 0; }
/* Prijs verticaal op het midden van de aantal-stepper: de rij-track is zo hoog als
   de stepper (35px), de prijs is één tekstregel (~21px) — met align-self:start
   plakte hij tegen de bovenkant en oogde hij te hoog (klantmelding 12-08). center
   i.p.v. stretch, want de cel houdt zo zijn inhoudsbreedte: een uitgerekte cel zou
   ≤440px (waar prijs en stepper dezelfde grid-area delen) over de −/+-knoppen
   liggen en die kliks opvangen. */
.woocommerce-cart td.product-subtotal { grid-area: price; justify-self: end; align-self: center; }
.woocommerce-cart td.product-remove { grid-area: remove; justify-self: end; }

.woocommerce-cart .product-name > a {
	font-family: var(--mimoda-font); font-weight: 700; font-size: 16px;
	color: var(--mimoda-ink); line-height: 1.3;
}
.woocommerce-cart .product-name .variation { margin: 8px 0 0; font-size: 14px; color: var(--mimoda-ink); }
.woocommerce-cart .product-name .variation dt { display: inline; font-weight: 400; margin: 0; }
.woocommerce-cart .product-name .variation dd { display: inline; margin: 0 0 0 4px; }
.woocommerce-cart .product-name .variation dd p { display: inline; margin: 0; }
/* Elke "Label: waarde" op een eigen regel. Een echte newline via CSS-content
   (white-space:pre) i.p.v. een display:block-pseudo BINNEN een inline dt — dat
   laatste rendert "block-in-inline" en liet de maat visueel naar de kleurregel
   springen ("Kleur: Wit S / Maat:"). */
.woocommerce-cart .product-name .variation dd::after { content: "\A"; white-space: pre; }

.woocommerce-cart .product-subtotal { font-size: 14px; color: var(--mimoda-ink); white-space: nowrap; }
.woocommerce-cart .product-subtotal .amount { font-weight: 400; }

/* Verlanglijst-hartje + trash (rechtsboven de regel) */
.woocommerce-cart .mimoda-cart-actions { display: inline-flex; align-items: center; gap: 8px; height: 21px; }
/* Force 21px: de core-verlanglijstknop heeft in andere contexten padding/min-height
   die anders de rij zou oprekken (gemeten 45px → naam en aantal te ver uit elkaar). */
.woocommerce-cart .mimoda-cart-actions .sellabees-wish-btn {
	padding: 0; margin: 0; background: none; border: none; box-shadow: none;
	width: 21px; height: 21px; min-height: 0; min-width: 0;
	cursor: pointer; color: var(--mimoda-ink); line-height: 0;
}
.woocommerce-cart .mimoda-cart-actions .sellabees-wish-btn__icon { width: 21px; height: 21px; }
.woocommerce-cart .mimoda-cart-actions .sellabees-wish-btn.is-active { color: var(--mimoda-coral-ink); }
.woocommerce-cart .mimoda-cart-actions .sellabees-wish-btn.is-active .sellabees-wish-btn__icon { fill: currentColor; }
.woocommerce-cart a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 21px; height: 21px; font-size: 0; color: var(--mimoda-ink) !important;
	border-radius: 0; background: none;
}
.woocommerce-cart a.remove:hover { color: var(--mimoda-coral-ink) !important; background: none; }
/* Prullenbak iets groter dan de Figma-19px (klantwens); het ontwerp-icoon is niet
   vierkant (15.44×19) dus alleen de hoogte staat vast, breedte volgt de viewBox. */
.woocommerce-cart .mimoda-cart-trash { width: auto; height: 22px; display: block; }

/* --- Aantal-stepper (− N +) : Figma 81×35, radius 2 ----------------- */
/* display:flex (blok, niet inline-flex) zodat de cel geen extra line-box-hoogte
   krijgt (gemeten 53px → rij te hoog). */
.woocommerce-cart .mimoda-qty {
	display: flex; align-items: stretch;
	width: 81px; height: 35px; border: 1px solid #d9d9d9; border-radius: 2px; overflow: hidden;
}
.woocommerce-cart .mimoda-qty .quantity { margin: 0; flex: 1 1 auto; display: flex; }
.woocommerce-cart .mimoda-qty input.qty {
	width: 100%; height: 100%; border: none; background: transparent;
	text-align: center; font-family: var(--mimoda-font); font-size: 12px; padding: 0;
	-moz-appearance: textfield; appearance: textfield; color: var(--mimoda-ink);
}
.woocommerce-cart .mimoda-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .mimoda-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce-cart .mimoda-qty__btn {
	flex: 0 0 26px; width: 26px; padding: 0; border: none; background: transparent;
	cursor: pointer; font-size: 15px; line-height: 1; color: var(--mimoda-ink);
	display: flex; align-items: center; justify-content: center;
}
.woocommerce-cart .mimoda-qty__btn[data-dir="down"] { border-right: 1px solid #d9d9d9; }
.woocommerce-cart .mimoda-qty__btn[data-dir="up"] { border-left: 1px solid #d9d9d9; }

/* --- Samenvatting (rechterkolom, cart-totals.php) ------------------- */
/* WC floatt .cart_totals standaard rechts op 48% breedte — resetten zodat het de
   volle rechterkolom (426px) vult (hogere specificiteit dan WC' eigen regel). */
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; margin: 0; }
.woocommerce-cart .cart_totals { background: none; padding: 0; border-radius: 0; }
.woocommerce-cart .mimoda-summary__title {
	font-family: var(--mimoda-display); font-weight: 400; font-size: 25px; margin: 0 0 20px;
}
/* "Bestel nog € X meer …" in ontwerp-rood (klant 07-08: #D2544F); bij behaalde
   drempel (.is-done) blijft de regel groen. Vet (klant 13-08) zodat de regel
   opvalt — het bedrag erft dat gewicht mee, anders zou juist dát dun blijven. */
.woocommerce-cart .mimoda-summary__ship-status { font-size: 14px; font-weight: 700; margin: 0 0 16px; color: #d2544f; }
.woocommerce-cart .mimoda-summary__ship-status.is-done { color: var(--mimoda-swatch-green); }
.woocommerce-cart .mimoda-summary__ship-status .amount { font-weight: inherit; white-space: nowrap; }
.woocommerce-cart .mimoda-summary__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.woocommerce-cart .mimoda-summary__usps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mimoda-ink); }
.woocommerce-cart .mimoda-summary__usp-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--mimoda-ink); }
/* Subtotaal- + verzendregel boven de streep (klantwens 12-08), zodat het
   Totaalbedrag optelt en gelijk is aan de afrekenpagina. Zelfde 14px-ritme als
   de USP-regels; de scheidingsstreep blijft op de totaalregel staan. */
.woocommerce-cart .mimoda-summary__lines { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.woocommerce-cart .mimoda-summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--mimoda-ink); }
.woocommerce-cart .mimoda-summary__line-value { white-space: nowrap; }
.woocommerce-cart .mimoda-summary__line-note { white-space: normal; text-align: right; color: #6f6f6f; }

.woocommerce-cart .mimoda-summary__total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #e0d3d3;
}
.woocommerce-cart .mimoda-summary__total-label { font-size: 14px; font-weight: 700; }
.woocommerce-cart .mimoda-summary__total-value { font-size: 14px; white-space: nowrap; }
.woocommerce-cart .mimoda-summary__total-value strong { font-weight: 400; }
.woocommerce-cart .mimoda-summary .wc-proceed-to-checkout { margin: 22px 0 0; padding: 0; }
.woocommerce-cart .mimoda-summary__checkout {
	display: flex; width: 100%; height: 53px; min-height: 53px; margin: 0;
	border-radius: 5px; font-size: 14px;
}
/* WC' eigen a.button.alt (#a46497 paars) is specifieker dan de gedeelde knopregel;
   met deze hogere specificiteit wint de Mimoda-accent (orchidee-roze) weer. */
.woocommerce-cart .cart_totals .mimoda-summary a.checkout-button {
	background: var(--mimoda-accent); color: #fff;
}
.woocommerce-cart .cart_totals .mimoda-summary a.checkout-button:hover {
	background: var(--mimoda-accent); color: #fff; filter: brightness(.96);
}
.woocommerce-cart .mimoda-summary__payments {
	list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin: 20px 0 0; padding: 0;
}
.woocommerce-cart .mimoda-summary__payments li { margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.woocommerce-cart .mimoda-summary__payments img,
.woocommerce-cart .mimoda-summary__payments svg { height: 30px; width: auto; display: block; border-radius: 5px; }
/* Terugval als een gateway geen logo levert: nette, gedempte tekstlabel. */
.woocommerce-cart .mimoda-summary__payments .sellabees-payment__label { font-size: 12px; color: #8a8a8a; }

/* --- Twee kolommen op desktop: items links, samenvatting rechts -----
   982px zodat de 900–981px-range (mobiel-tier) stapelt (zie mobiel-blok onderaan). */
@media (min-width: 982px) {
	.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 426px;
		column-gap: 96px;
		align-items: start;
	}
	.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .cart-collaterals { grid-column: 2; }
	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart .mimoda-cart-cross { grid-column: 1 / -1; }

	/* Middenbreedtes (982–±1358px): de proportionele goot (68,75vw) knijpt de
	   pagina zó smal dat de vaste samenvattingskolom (426px + 96px goot) de
	   artikelregels raakt/overlapt (klantmelding 06-08, zichtbaar vanaf ±1275px).
	   Ondergrens van 934px (= 982px-viewport − 2×24px goot): op de smalste
	   twee-koloms breedtes een gap-brede marge (zoals de shop-raster-breakout op
	   mobiel); zodra 68,75vw daar bovenuit groeit neemt de ontwerp-verhouding het
	   vanzelf weer over — continu, zonder sprong. Op ≥1920px exact 1320px (1:1).
	   Titelcontainer (mimoda-info__head) doet mee zodat titel en cart uitlijnen. */
	.woocommerce-cart .mimoda-info__head,
	.woocommerce-cart .mimoda-info--text .mimoda-page__content {
		width: min(max(68.75vw, 934px), 1320px);
	}
}

/* "Finish the look" onder de winkelwagen (woocommerce_after_cart, full-width).
   Design 193:808: lichtgrijze band (#f5f5f5), niet de koraal/roze "Shop the look". */
.woocommerce-cart .mimoda-cart-cross { margin-top: 56px; }
.woocommerce-cart .mimoda-related { background: var(--mimoda-gray); }

/* =========================================================================
   Afrekenen — 1:1 op Figma (172:2883). BLOK-checkout (Store API / Gutenberg),
   dus stylen we de .wc-block-*-markup (de klassieke #order_review/#payment
   bestaan hier niet). Draait via page.php (.mimoda-info--text); die kolom is
   voor tekstpagina's smal + gecentreerd — voor de checkout terug naar de volle
   container met links-uitgelijnde titel (zoals de winkelwagen).
   Design: linkerkolom 743px (contact → adres → verzend → betaling → notitie →
   voorwaarden → acties), rechterkolom 448px besteloverzicht-kaart.
   ========================================================================= */
/* Accent-kleur op de checkout = de DESIGN-kleur #e598e5 (banner, "Afrekenen"-knop,
   voorwaarden-links gebruiken var(--mimoda-accent)). Het globale token staat elders
   op #dfbbda; hier scopen we de design-kleur op de checkout-pagina. */
body.woocommerce-checkout { --mimoda-accent: #e598e5; }
/* CO1: het besteloverzicht van de blok-checkout toont de variatie twee keer — onze
   nette "Kleur: … / Maat: …"-regel (item_data) én de native Store-API-variatie
   ("Maat: … / Kleur: …"). Beide zijn div-siblings in .wc-block-components-product-metadata,
   met onze (juiste) regel eerst. Verberg elke dubbele regel ná de eerste. */
.wc-block-components-product-metadata .wc-block-components-product-details ~ .wc-block-components-product-details { display: none; }
.woocommerce-checkout .mimoda-info__head { text-align: left; padding: 44px 24px 0; }
.woocommerce-checkout .mimoda-info__title { font-size: 40px; }
/* Content in de DESIGN-container (1320px, gecentreerd) — NIET full-width. Zo lijnt de
   titel uit met de velden en staan formulier (743) + besteloverzicht (448) samen
   gecentreerd (marges gelijk), i.p.v. edge-to-edge uit elkaar getrokken.
   Kleine padding-top: strak onder de titel (Figma), geen groot wit gat. */
.woocommerce-checkout .mimoda-info--text .mimoda-page__content {
	max-width: calc(1320px + 48px); margin-inline: auto; padding: 0 24px;
}
/* Middenbreedtes: zelfde ondergrens als de winkelwagen — de proportionele
   68,75vw-goot (.mimoda-container) kneep de checkout op tablet/laptop zó smal
   (bv. 704px op 1024) dat formulier + besteloverzicht er niet fatsoenlijk naast
   elkaar in pasten én WooCommerce' containerklasse naar is-medium wisselde
   (accordeon-overzicht) (klant 06-08: tablet/liggende tablet). Vloer = 934px
   (982-viewport − 2×24); daarboven neemt de ontwerp-verhouding het vanzelf
   over, op ≥1920px exact 1320px (1:1). Titelcontainer doet mee → titel en
   formulier blijven uitlijnen. */
@media (min-width: 982px) {
	.woocommerce-checkout .mimoda-info__head,
	.woocommerce-checkout .mimoda-info--text .mimoda-page__content {
		width: min(max(68.75vw, 934px), 1320px);
		/* geen extra binnenpadding: de proportionele breedte ís de goot (zoals
		   .mimoda-container ≥982) — anders is de content 48px smaller dan het
		   ontwerp en klopt het 129px-gat naar de kaart op 1920 niet. */
		padding-inline: 0;
	}
}
/* Titel strak boven de content (Figma: klein gat). */
.woocommerce-checkout .mimoda-info__head { padding-bottom: 0; }
.woocommerce-checkout .mimoda-info__title { line-height: 1; margin-bottom: 4px; }
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout { margin-top: 0; }

/* Afgeslankte checkout-header op mobiel (klantwens 07-08): hamburger, zoeken, hart
   en tas verdwijnen op de afrekenpagina — alleen het gecentreerde logo blijft (dat
   staat op mobiel absoluut gecentreerd, dus het verschuift niet). Zo leidt niets
   meer uit de afreken-trechter. De bedankt-pagina deelt body.woocommerce-checkout
   maar is géén trechter-stap → uitgesloten via :not(.woocommerce-order-received). */
@media (max-width: 981px) {
	body.woocommerce-checkout:not(.woocommerce-order-received) .mimoda-header__toggles,
	body.woocommerce-checkout:not(.woocommerce-order-received) .mimoda-header__actions {
		display: none;
	}
}

/* --- Twee kolommen (WC sidebar-layout) — Figma: formulier 743, kaart 448,
   samen in de 1320-container, gat 129px ertussen. -------------------- */
.woocommerce-checkout .wc-block-checkout__main { max-width: 743px; }
@media (min-width: 1000px) {
	.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex !important; align-items: flex-start; gap: 0 !important;
	}
	/* Flexibel binnen de container i.p.v. vast 743+448 (=1191): dat liep op
	   1220–±1400 (proportionele goot < 1191) buiten beeld. Formulier krimpt mee
	   (min-width 0, ontwerp-cap 743), kaart schaalt 320→448 (36% ≈ 448/1248);
	   op ≥1920 exact het ontwerp: 743 + 129 gat + 448. */
	.woocommerce-checkout .wc-block-checkout__main {
		flex: 1 1 0 !important; width: auto !important; max-width: 743px !important;
		min-width: 0 !important; margin-right: auto !important; padding: 0 !important;
	}
	.woocommerce-checkout .wc-block-checkout__sidebar {
		flex: 0 0 clamp(320px, 36%, 448px) !important; width: auto !important;
		max-width: 448px !important; margin-left: 32px !important;
	}
}

/* --- Sectiekoppen (Contactgegevens / Verzendadres / …) --------------- */
.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--mimoda-font); font-weight: 800; font-size: 20px;
	text-transform: uppercase; letter-spacing: .01em; color: var(--mimoda-ink); margin: 0;
}
.woocommerce-checkout .wc-block-components-checkout-step { padding-bottom: 8px; }
.woocommerce-checkout .wc-block-components-checkout-step__heading { margin: 0 0 6px; }
/* Intro-teksten onder de sectiekoppen (Figma). Via ::before i.p.v. een JS-node, zodat
   React (blok-checkout) niets aan zijn DOM-boom hoeft te merken — een geïnjecteerd
   element brak eerder de reconciliation. */
.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content::before,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step__content::before {
	display: block;
	font-family: var(--mimoda-font); font-size: 14px; line-height: 1.5; color: var(--mimoda-ink); margin: 0 0 18px;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content::before {
	content: "We gebruiken dit e-mailadres om je informatie en updates over je bestelling te sturen.";
}
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step__content::before {
	content: "Voer het adres in waar je wil dat je bestelling wordt geleverd.";
}
/* Alleen het buitenste stap-blok krijgt de intro. Het nieuwsbrief-vinkje van de
   Mailchimp-plugin zit ín het contactblok en gebruikt dezelfde klasse
   (wc-block-components-checkout-step__content); zonder deze regel stond de zin
   daar nog een keer. */
.woocommerce-checkout .wc-block-components-checkout-step__content .wc-block-components-checkout-step__content::before {
	content: none;
}
/* WC tekent standaard een genummerde stap-rand/telling; die hoort niet in het design. */
.woocommerce-checkout .wc-block-components-checkout-step { border: 0; }
.woocommerce-checkout .wc-block-components-checkout-step__content { margin-top: 14px; }

/* --- "Heb je al een account? Klik hier" — roze banner boven Contact --- */
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading {
	display: flex !important; flex-direction: column; align-items: stretch; gap: 20px; width: 100%;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading-content {
	order: -1; margin: 0; width: 100% !important; display: block !important; flex: none !important;
}
.woocommerce-checkout a.wc-block-checkout__login-prompt {
	display: block !important; width: 100%; box-sizing: border-box;
	background: var(--mimoda-accent); color: #fff;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 16px;
	text-transform: none; letter-spacing: .01em; text-align: center;
	padding: 13px 18px; border-radius: 5px; text-decoration: none; margin: 0;
}
.woocommerce-checkout a.wc-block-checkout__login-prompt:hover { filter: brightness(.96); color: #fff; }
/* Geen login-prompt (INGELOGD, of reminder uit) → geen lege banner-ruimte / gat
   onder de titel: verberg de lege slot en laat de flex-gap vervallen. */
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading:not(:has(a.wc-block-checkout__login-prompt)) { gap: 0; }
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading-content:not(:has(a.wc-block-checkout__login-prompt)) { display: none !important; }

/* --- Invoervelden (rand #d9d9d9, radius 2, h 53) ---
   !important omdat WC' blok-CSS (wc-blocks-style) ná deze stylesheet laadt en
   op gelijke specificiteit anders wint (BOUWPLAN §8: gerichte !important bij WC).
   Achtergrond standaard TRANSPARANT (wit). Uitzondering hieronder: Straatnaam +
   Plaatsnaam blijven grijs — dat zijn de PDOK-autofill-velden. */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input textarea,
.woocommerce-checkout .wc-block-components-textarea,
.woocommerce-checkout .wc-block-components-combobox input.components-combobox-control__input,
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container {
	background: transparent !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important;
	min-height: 53px; font-family: var(--mimoda-font); font-size: 14px; color: var(--mimoda-ink);
}
/* --- Focus in de huisstijl (klant 12-08) ---
   WooCommerce styleert de focus niet, dus tekende de browser zijn eigen ring:
   `outline: auto`, in Chrome/Safari blauw. Let op: bij outline-style `auto`
   NEGEERT Chrome een losse `outline-color` — vandaar hier een expliciete ring.
   Aanpak = zelfde als de andere Mimoda-formulieren: rand + 1px inzet-ring in
   orchidee, dus 2px orchidee-rand zonder layout-sprong. */
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input textarea:focus,
.woocommerce-checkout .wc-block-components-textarea:focus,
.woocommerce-checkout .wc-block-components-combobox input.components-combobox-control__input:focus,
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container:focus-within {
	border-color: var(--mimoda-accent) !important;
	box-shadow: inset 0 0 0 1px var(--mimoda-accent) !important;
	outline: none !important;
}
/* Keuzevakjes/-rondjes hebben geen zichtbare rand om te kleuren → wél een echte
   (solid, dus kleurbare) ring eromheen. Vervangt de oude regel die alleen
   outline-color zette en daardoor blauw bleef. */
.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus,
.woocommerce-checkout .wc-block-components-radio-control__input:focus,
.woocommerce-checkout .wc-block-components-radio-control__option input:focus {
	outline: 2px solid var(--mimoda-accent) !important;
	outline-offset: 1px !important;
}

/* Alleen Straatnaam (address_1) + Plaatsnaam (city) grijs (autofill uit postcodecheck). */
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-address_1"]) input,
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-city"]) input {
	background: #f5f5f5 !important;
}
/* Zweeflabel = WC-standaard (Figma: leeg ~14px gecentreerd als placeholder, krimpt
   naar boven bij focus/invullen). Alleen font/kleur/positie-links aanpassen; NIET
   forceren naar boven. */
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-combobox label {
	font-family: var(--mimoda-font); font-size: 14px; color: #555; left: 16px;
}
/* Actieve/ingevulde velden (zweeflabel boven): WC' eigen padding vervangen door
   24px boven / 16px zijkanten / 8px onder (klantkeuze 27-07) — waarde netjes
   ónder het gekrompen label. Zelfde selectorset als WC (incl. autofill),
   !important om dezelfde laadvolgorde-reden als hierboven. */
.woocommerce-checkout .wc-block-components-text-input input:-webkit-autofill,
.woocommerce-checkout .wc-block-components-text-input.is-active input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]) {
	padding: 24px 16px 8px !important;
}
/* Ook WC' :focus-variant vastpinnen (die zet zijn eigen padding-left/top). */
.woocommerce-checkout .wc-block-components-text-input input:-webkit-autofill:focus,
.woocommerce-checkout .wc-block-components-text-input.is-active input:is([type=email], [type=number], [type=password], [type=tel], [type=text], [type=url]):focus {
	padding-left: 16px !important;
	padding-top: 24px !important;
}
/* Asterisk op de verplichte velden (Figma: "Voornaam*"). Alle adresvelden zijn
   verplicht (telefoon staat nu ook op verplicht) → asterisk overal, BEHALVE de
   optionele Toevoeging (WC toont daar zelf al "(optioneel)" — een * is tegenstrijdig). */
.woocommerce-checkout .wc-block-components-address-form .wc-block-components-text-input > label::after,
.woocommerce-checkout .wc-block-components-address-form__country label::after,
.woocommerce-checkout .wc-block-components-combobox label::after,
.woocommerce-checkout .wc-block-components-address-form__country .wc-blocks-components-select__label::after { content: "*"; }
.woocommerce-checkout .wc-block-components-address-form__sellabees-house_number_addition > label::after { content: none; }
.woocommerce-checkout .wc-block-components-text-input { margin-top: 0; }

/* --- Adresveld-VOLGORDE + breedtes 1:1 op Figma ----------------------
   De blok-checkout rendert de kernadresvelden in een vaste DOM-volgorde die
   afwijkt van het design. De adres-form is een flex-container, dus herordenen
   we met `order` en zetten we de breedtes (halve/volle rij). `:has([id$=…])`
   pakt zowel verzend- (shipping-) als factuur- (billing-) velden.
   Design-volgorde: Land · Voornaam|Achternaam · Postcode|Huisnummer|Toevoeging ·
   Straatnaam · Plaatsnaam · Telefoon.
   Tab volgt de HTML, niet `order`: inc/checkout.php zet de HTML-volgorde gelijk
   (locale-priority). Wijzig je hier de volgorde, pas die nummers dan mee aan. */
.woocommerce-checkout .wc-block-components-address-form {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
}
.woocommerce-checkout .wc-block-components-address-form > * { flex: 1 1 100%; order: 20; margin: 0; }
.woocommerce-checkout .wc-block-components-address-form > *:has(select[id$="-country"]),
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-country"]) { order: 1; flex-basis: 100%; }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-first_name"]) { order: 2; flex-basis: calc(50% - 7px); }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-last_name"])  { order: 3; flex-basis: calc(50% - 7px); }
/* NL-adresrij: Postcode (½) · Huisnummer (¼) · Toevoeging (¼) — samen één regel
   (2 × ¼ + ½ + 2 goten van 14px = 100%). Toevoeging was eerder verborgen ("niet in
   het design"), maar hoort erbij (klantmelding 27-07) — het veld bestaat al in de
   core (sellabees/house_number_addition) en de order-merge plakt het achter address_1.
   LET OP de selector: WC bouwt het input-id mét slash (`shipping-sellabees/house_number`
   — daar matcht [id$="-house_number"] dus NIET op), maar de wrapper-class mét dash
   (`…address-form__sellabees-house_number`, via replaceAll('/','-') in de bundel).
   Daarom selecteren we de sellabees-velden op die wrapper-class; het id-vangnet
   [id$=…] blijft staan voor het geval WC ooit naar dash-ids gaat. */
/* Verdeling 40/30/30 (minus 2 × 14px goot): bij 25% werd het WC-label
   "Toevoeging (optioneel)" afgekapt; op 30% past het ruim. */
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-postcode"])   { order: 4; flex-basis: calc(40% - 11.2px); }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-house_number"]),
.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-address-form__sellabees-house_number { order: 5; flex-basis: calc(30% - 8.4px); }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="_addition"]),
.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-address-form__sellabees-house_number_addition { order: 6; flex-basis: calc(30% - 8.4px); }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-address_1"])  { order: 7; flex-basis: 100%; }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-city"])       { order: 8; flex-basis: 100%; }
.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-phone"])      { order: 9; flex-basis: 100%; }
/* WC' eigen "+ toevoeging toevoegen"-toggle (address_2) blijft verborgen: ons losse
   Toevoeging-veld vervangt hem. */
.woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
.woocommerce-checkout .wc-block-components-address-form__address_2-hidden-input { display: none !important; }
/* Smal scherm: postcode vol-breed, huisnummer + toevoeging samen op één regel. */
@media (max-width: 600px) {
	.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-postcode"])     { flex-basis: 100%; }
	.woocommerce-checkout .wc-block-components-address-form > *:has([id$="-house_number"]),
	.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-address-form__sellabees-house_number { flex-basis: calc(50% - 7px); }
	.woocommerce-checkout .wc-block-components-address-form > *:has([id$="_addition"]),
	.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-address-form__sellabees-house_number_addition { flex-basis: calc(50% - 7px); }
}

/* Selectievakjes/keuzerondjes in de merkkleur. */
.woocommerce-checkout .wc-block-components-checkbox__input,
.woocommerce-checkout .wc-block-components-radio-control__input { accent-color: var(--mimoda-accent); }
.woocommerce-checkout .wc-block-components-checkbox__label,
.woocommerce-checkout .wc-block-components-radio-control__label { font-size: 14px; color: var(--mimoda-ink); }

/* --- Verzendopties + Betalingsopties (bordered keuzelijst) ----------- */
.woocommerce-checkout .wc-block-components-radio-control {
	border: 1px solid #d9d9d9; border-radius: 2px; overflow: hidden;
}
.woocommerce-checkout .wc-block-components-radio-control__option {
	margin: 0; padding: 16px 20px 16px 44px; border-top: 1px solid #d9d9d9; min-height: 53px;
}
.woocommerce-checkout .wc-block-components-radio-control__option:first-child { border-top: 0; }
.woocommerce-checkout .wc-block-components-radio-control__input { left: 16px; }
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted::after { border-color: var(--mimoda-accent); }
.woocommerce-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__label { font-size: 14px; }
.woocommerce-checkout .wc-block-components-radio-control__secondary-label { font-size: 14px; }
/* Naam + prijs van een verzendoptie altijd NAAST elkaar (klant 07-08: WC's
   small-container-regels stapelden "Gratis verzending" boven "Gratis"). */
.woocommerce-checkout .wc-block-components-radio-control__label-group {
	display: flex !important; flex-direction: row !important;
	justify-content: space-between; align-items: baseline; gap: 12px;
}
.woocommerce-checkout .wc-block-components-radio-control__secondary-label { margin: 0 !important; text-align: right; }
/* Gratis verzending-optie: beide "gratis"-woorden (naam + prijs) in het groen
   (klant 07-08), zelfde groen als het besteloverzicht/de winkelwagen-melding.
   Herkenning via de radio-waarde — tekstinhoud kan CSS niet zien. */
.woocommerce-checkout .wc-block-components-radio-control__option:has(input[value^="free_shipping"]) .wc-block-components-radio-control__label,
.woocommerce-checkout .wc-block-components-radio-control__option:has(input[value^="free_shipping"]) .wc-block-components-radio-control__secondary-label {
	color: var(--mimoda-swatch-green);
}

/* --- Notitie + voorwaarden ------------------------------------------- */
.woocommerce-checkout .wc-block-checkout__order-notes { border: 0; }
.woocommerce-checkout .wc-block-checkout__terms {
	font-size: 14px; color: var(--mimoda-ink); border-top: 1px solid #d9d9d9; padding-top: 22px; margin-top: 6px;
}
.woocommerce-checkout .wc-block-checkout__terms a { color: var(--mimoda-accent); text-decoration: none; }
.woocommerce-checkout .wc-block-checkout__terms a:hover { text-decoration: underline; }

/* --- Acties: "terug naar winkelwagen" (links) + "Afrekenen" (rechts) ---
   WC zet de rij op justify-flex-end + een full-width knop; met !important
   forceren we links/rechts (BOUWPLAN §8). */
.woocommerce-checkout .wc-block-checkout__actions { border: 0; padding-top: 4px; }
.woocommerce-checkout .wc-block-checkout__actions_row {
	display: flex !important; flex-direction: row !important; align-items: center;
	justify-content: space-between !important; gap: 20px; flex-wrap: wrap;
}
/* WooCommerce' eigen return-to-cart-knop (links in de actie-rij) opgemaakt als Mimoda-
   tekstlink. We gebruiken de NATIVE knop i.p.v. een geïnjecteerde <a>, zodat React niets
   aan zijn DOM-boom hoeft te merken. Native SVG-pijl verbergen; eigen ←-pijl ervoor. */
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex; align-items: center; gap: 10px; order: -1; flex: 0 0 auto;
	padding: 0; background: none; border: 0; box-shadow: none; min-height: 0;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 16px;
	text-transform: uppercase; letter-spacing: .01em; color: #242424; text-decoration: none;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover { color: var(--mimoda-accent); }
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button svg { display: none; }
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button::before { content: "\2190"; font-size: 18px; font-weight: 400; line-height: 1; }
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	width: auto !important; max-width: none; min-width: 295px; flex: 0 0 auto;
	height: 53px; min-height: 53px; margin: 0;
	border-radius: 5px; background: var(--mimoda-accent); color: #fff;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .02em;
}

/* --- Besteloverzicht (rechterkaart) — 1:1 Figma (172:3084) ----------
   Kaart: rand + VERTICALE padding, GEEN horizontale padding → scheidingslijnen lopen
   edge-to-edge (helemaal links→rechts); de horizontale ruimte (24px) zet ik op de
   inhoud-rijen zelf. Hoge specificiteit + !important want WC' blok-CSS wint anders
   (o.a. font-weight kop = 500, Totaal = 20px). */
body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	background: #fff; border: 1px solid #d9d9d9; border-radius: 2px;
	padding: 26px 0 14px !important; position: sticky; top: 140px;
}
/* Structurele wrappers volledig transparant/full-width (geen eigen marge/padding/rand),
   zodat de rijen zelf edge-to-edge zijn. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-cart-items-block,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary__content,
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
	margin: 0 !important; padding: 0 !important; border: 0 !important;
}
/* Titel — Kumbh ExtraBold 16px (WC forceert anders 500). Marge onder de kop
   verkleind van 18 naar 10px (klant 12-08, 2e ronde: nog te veel wit boven het
   eerste product). */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { margin: 0 0 10px !important; padding: 0 24px !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--mimoda-font); font-weight: 800 !important; font-size: 16px !important; text-transform: uppercase; letter-spacing: .01em; color: var(--mimoda-ink); margin: 0 !important;
}
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon { display: none !important; }
/* --- Kortingscode (welkomstcode uit de nieuwsbrief) ------------------
   Stond verborgen omdat het ontwerp geen codeveld toont; daardoor kon een
   klant zijn welkomstcode nergens invullen (klant 07-08). Nu zichtbaar in de
   besteloverzicht-kaart, in huisstijl: uitklapbare regel "Kortingscode
   toevoegen" + veld met de formulier-rand (#e0cfcf) en accent-knop. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	border-top: 1px solid #e5e5e5 !important; padding: 4px 24px 10px !important;
}
/* WooCommerce zet via `.wc-block-components-sidebar .wc-block-components-totals-coupon`
   16px zijpadding op het paneel. De totalenrijen (Subtotaal/Verzending/Totaal) hebben
   we hierboven al op de 24px-kaartgoot gezet, dus die 16px duwde "Kortingscode
   toevoegen" 16px naar rechts: niet in lijn met de rijen erboven en eronder
   (klant 21-08). Nul zetten — de blok-wrapper regelt de goot al, aan beide kanten,
   zodat ook de chevron rechts op één lijn met de bedragen komt. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-coupon {
	padding-left: 0; padding-right: 0;
}
/* Uitklapregel: geen WC-blokkop, maar onze eigen tekstregel met chevron rechts. */
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: var(--mimoda-font); font-weight: 700; font-size: 14px;
	color: var(--mimoda-ink); padding: 12px 0; margin: 0; width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button svg { fill: currentColor; width: 20px; height: 20px; }
.woocommerce-checkout .wc-block-components-totals-coupon__content { padding: 0 0 8px; }
/* Veld + knop gestapeld: de kaartkolom is ~274–400px, naast elkaar past het niet
   zonder een knijpveld. Het invoerveld erft de checkout-veldstijl (53px, #d9d9d9,
   radius 2 — zie §velden hierboven), dus die niet opnieuw zetten. */
.woocommerce-checkout .wc-block-components-totals-coupon__form {
	display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0;
}
/* WC geeft de veldcontainer flex-grow (bedoeld voor een RIJ-indeling, waar hij de
   restbreedte pakt). In onze kolom-indeling groeide hij daardoor in de HOOGTE mee tot
   120px bij een veld van 53px → een gat van ~67px tussen veld en knop. Niet met een
   hoogte te repareren: flex-grow wint van height. Vandaar flex: 0 0 auto. */
.woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input {
	margin: 0; flex: 0 0 auto;
}
.woocommerce-checkout .wc-block-components-totals-coupon__button {
	width: 100%; height: 46px; min-height: 46px; margin: 0;
	padding: 0 22px; border: 0; border-radius: var(--mimoda-radius);
	background: var(--mimoda-accent) !important; color: #fff !important;
	font-family: var(--mimoda-font); font-weight: 700; font-size: 14px; text-transform: none;
}
.woocommerce-checkout .wc-block-components-totals-coupon__button:hover { filter: brightness(.96); }
/* Toegepaste code: de kortingsregel + de code eronder in huisstijl (klant 21-08).
   Twee dingen: (1) roze i.p.v. het WooCommerce-groen, (2) de code recht ONDER het
   woord "Korting". Die scheve uitlijning zat in WC' chip zelf: de chip-DOOS lijnt
   wel uit (marge 0), maar de chip heeft 1px rand + .5em padding, dus de TEKST
   begon ~7px naar rechts. Met een gevulde pil is dat niet te repareren zonder de
   pil buiten de kaart-goot te laten hangen (negatieve marge), dus geen pil meer:
   losse roze code-tekst op x=0 + een rond kruisje ernaast. Dat kruisje volgt de
   selectietaal van de maat-chips (zacht roze, gevuld roze + wit bij hover). */
.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--mimoda-pink); }
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list { margin: 6px 0 0; padding: 0; }
/* Chip ontdaan van doos-eigenschappen (rand/vulling/padding/marge) zodat de tekst
   op de linkerrand van de rij begint — gelijk met de "K" van Korting. */
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip,
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip:hover,
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip:focus {
	margin: 0; padding: 0; border: 0; background: none; gap: 8px; max-width: 100%;
	font-family: var(--mimoda-font); font-weight: 700; letter-spacing: .04em;
	color: var(--mimoda-pink); text-transform: uppercase;
}
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__text {
	font-size: 12px; line-height: 1.2; padding-right: 0; flex: 0 1 auto; min-width: 0;
}
/* Kruisje: rond, zacht roze; hover/focus = gevuld roze met wit kruis. WC' eigen
   hover-regel (#949494) heeft 2 klassen — hier 4, dus die wint niet. */
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove {
	flex: 0 0 auto; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--mimoda-pink-soft); transition: background-color .15s ease;
}
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove:hover,
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove:focus {
	background: var(--mimoda-pink);
}
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove-icon {
	width: 10px; height: 10px; fill: var(--mimoda-pink);
}
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove:hover .wc-block-components-chip__remove-icon,
.woocommerce-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove:focus .wc-block-components-chip__remove-icon {
	fill: #fff;
}
/* Productregel: full-width rij, inhoud 24px ingesprongen, volle-breedte onderrand
   (divider tussen én onder producten). */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item {
	margin: 0 !important; padding: 14px 24px !important; border: 0 !important; border-bottom: 1px solid #e5e5e5 !important;
}
/* Beeld: staand 82×122 (≈2:3, de kaartverhouding — klantwens 06-08: hoger zodat het
   product zichtbaar is, niet enkel het gezicht), radius 5px, BOVENKANT tonen; geen
   aantal-badge. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image img {
	width: 82px !important; height: 122px !important; min-width: 82px !important; max-width: none !important;
	border-radius: 5px !important; object-fit: cover !important; object-position: center top !important;
}
/* WooCommerce zet 8px marge bóven het beeld; samen met de rij-padding gaf dat een
   extra gat boven het eerste product (klant 12-08). De rij-padding regelt de
   ruimte al, dus die marge weg. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image { margin-top: 0 !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__quantity { display: none !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--mimoda-font); font-weight: 700; font-size: 14px; color: var(--mimoda-ink);
}
/* Naam + "Kleur: …" strak gestapeld (klant 06-08: variatie hing onderaan de rij,
   niet onder de titel): WC laat de naam met flex-grow de hele beschrijvingskolom
   vullen — die kolom is zo hoog als het 122px-beeld — waardoor de metadata naar
   de onderkant werd gedrukt. Zelfde recept als het mobiele blok, nu overal. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description {
	display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
	/* Kolom moet de vrije breedte pakken. Deed hij niet (flex-grow 0), dan werd hij
	   op smalle telefoons tot ~64px platgedrukt: de productnaam brak in losse woorden,
	   de kolom werd 170px hoog — hóger dan het 122px-beeld — en `align-items: center`
	   zette het beeld midden in die te hoge rij, met een gat erboven. Dat was de
	   "te veel wit boven het product" die op 320px overbleef (klant 12-08, 3e ronde).
	   min-width:0 zodat lange woorden de kolom niet alsnog oprekken. */
	flex: 1 1 auto; min-width: 0;
}
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description .wc-block-components-product-name { flex: 0 0 auto !important; }
/* Beeld en prijs houden hun maat; alleen de tekstkolom rekt/krimpt. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price { flex: 0 0 auto; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-cart-item__prices { display: none !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-components-product-metadata { margin: 0; }
.woocommerce-checkout .wc-block-components-order-summary-item__total-price { font-size: 14px; font-weight: 400; }
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-price { display: none !important; }
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata,
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata * { font-size: 12px; color: var(--mimoda-ink) !important; }
/* Variatie-attributen (Kleur/Maat) ONDER elkaar i.p.v. op één regel met " / "
   ertussen (klantwens 06-08). Markup (WC blocks ProductDetails): per attribuut
   een wrapper-span met dynamische class (__kleur/__maat...), de scheider is een
   klasseloze span[aria-hidden] met " / " — geen filter/optie voor, dus via CSS. */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }

/* Blok-checkout checkboxes ("Account aanmaken", afwijkend bezorgadres, e.d.):
   aangevinkt = gevuld roze vakje met wit vinkje (klantwens 07-08 "vinkje roze") —
   zelfde selectietaal als de shop-filters (geselecteerd = gevuld #ff8cbe + wit).
   Default: wit vakje + zwart vinkje (WC blocks). Focus-ring in dezelfde kleur. */
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--mimoda-pink);
	border-color: var(--mimoda-pink);
}
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #fff; }
/* De focus-ring van dit vakje staat bij de veld-focusregels hierboven (één plek
   voor alle checkout-focus, in orchidee — outline-color alleen werkte niet). */
/* Totalen: full-width rijen, inhoud 24px ingesprongen. LET OP: het cart-items-blok
   heeft óók class .wc-block-components-totals-wrapper — dat NIET padden (anders schuift
   het hele productblok 24px in), vandaar de :not(). */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block) {
	margin: 0 !important; padding: 0 24px !important; border: 0 !important;
}
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item { font-size: 14px !important; padding: 6px 0 !important; }
/* "GRATIS" bij gratis verzending in groen (klant 07-08, zelfde groen als de
   is-done-melding in de winkelwagen). Alleen de gratis-variant: WC wikkelt die
   in <strong>; een betaald tarief (€ 4,95) is kale tekst en blijft ink. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong {
	color: var(--mimoda-swatch-green);
}
/* --- Verzendregel: één regel, geen dubbele tekst (klant 21-08) --------
   WooCommerce zet onder de verzendkop nóg een subregel met de naam van het
   gekozen tarief. Bij gratis verzending stond er daardoor drie keer hetzelfde:
   kop "Levering", subregel "Gratis verzending", waarde "GRATIS". De kop heet nu
   "Verzending" (checkout-i18n.js) en de subregel gaat eruit, zodat de regel
   "Verzending — GRATIS" is. Ook bij een betaald tarief blijft het zo één regel
   ("Verzending — € 4,95" i.p.v. + subregel "Vast tarief").
   LET OP: die subregel is de enige plek waar WC losse tarieven van MEERDERE
   pakketten opsomt. Mimoda verzendt altijd in één pakket (één tarief), dus hier
   valt niets te verbergen wat de klant nodig heeft. */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-shipping__via { display: none; }
/* Sectie-ruimte boven Subtotaal + onder Vast tarief (gelijk aan elkaar); rijen zelf
   strak (6px → 12px tussen Subtotaal/Vast tarief). */
body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block { padding: 14px 0 !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__label { font-weight: 700; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item .wc-block-components-formatted-money-amount { font-weight: 400; }
/* Divider boven Totaal (volle breedte) + Totaal ZELFDE grootte als Subtotaal/Vast tarief (14px). */
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) { border-top: 1px solid #e5e5e5 !important; padding-top: 14px !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount { font-size: 14px !important; }
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700 !important; }

/* =========================================================================
   Account (Mijn account) — 1:1 Figma "Login - Verlanglijstje" (172:5471).
   Hero-band → "Mijn account"-titel → zij-navigatie + content (verlanglijstje) →
   verzend-USP-band. Presentatie in het child; mechaniek/endpoint in de core.
   ========================================================================= */

/* Hero-band: uitgelichte afbeelding van de "Mijn account"-pagina (vol-breed, 400px). */
.mimoda-account__hero { width: 100%; height: 400px; overflow: hidden; background: var(--mimoda-coral); }
.mimoda-account__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Inhoud-container + "Mijn account"-titel. */
.mimoda-account__wrap { padding-top: 50px; padding-bottom: 72px; }
.mimoda-account__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 40px; line-height: 1.1; color: #000; margin: 0 0 36px; }

/* Inloggen/registreren (uitgelogd) — links uitgelijnd (klantkeuze), niet gecentreerd. */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 520px; margin-inline: 0; padding: 0; }
.woocommerce-account .u-columns.col2-set, .woocommerce-account #customer_login { display: grid; grid-template-columns: 1fr; gap: 30px; }
.woocommerce-account form.login, .woocommerce-account form.register {
	border: 1px solid #f0e6e6; border-radius: 10px; padding: 30px; margin: 0;
}

/* Inlog-pop-up (menubalk) — orchid-accent #e598e5 (klantkeuze) + knop in de
   body-font i.p.v. de serif heading-font. Laadt site-breed (CSS glob-enqueued). */
.sellabees-login__btn { background: #e598e5; font-family: var(--mimoda-font); font-weight: 800; }
.sellabees-login__btn:hover { filter: brightness(.95); }
.sellabees-popup__close { border-color: #e598e5; color: #e598e5; }
.sellabees-popup__close:hover { background: #e598e5; color: #fff; }
.sellabees-login__lost { color: #e598e5; }
.sellabees-login__register a { color: #e598e5; }
/* "Registreren"-knop op de registratiepagina — orchid (#e598e5, klantkeuze). */
.woocommerce-account:not(.logged-in) .woocommerce button.button { background: #e598e5; }

/* De WC-wrapper binnen de account-container: geen eigen max-width/padding; grid-layout.
   Let op: WooCommerce zet een clearfix ::before/::after op .woocommerce — die worden in
   een grid ONGEWENSTE grid-items (duwen de nav naar kolom 2 en de content een rij omlaag).
   Daarom neutraliseren we ze én de WC-float/width op nav + content. */
.woocommerce-account.logged-in .mimoda-account .woocommerce { max-width: none; margin: 0; padding: 0; }
.woocommerce-account.logged-in .mimoda-account .woocommerce::before,
.woocommerce-account.logged-in .mimoda-account .woocommerce::after { content: none; display: none; }
.woocommerce-account.logged-in .mimoda-account .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .mimoda-account .woocommerce-MyAccount-content {
	float: none; width: auto; margin: 0;
}
/* 982px zodat de 900–981px-range (mobiel-tier) de nav bóven de content stapelt. */
@media (min-width: 982px) {
	.woocommerce-account.logged-in .mimoda-account .woocommerce {
		display: grid; grid-template-columns: 280px 1fr; column-gap: 55px; align-items: start;
	}
}

/* Zij-navigatie: tekstlijst, actief onderstreept (geen randen/bullets). */
.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation li { border: 0; margin: 0; }
.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation li a {
	display: inline-block; padding: 0; color: var(--mimoda-ink);
	font-weight: 400; font-size: 16px; line-height: 49px;
}
.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: underline; text-underline-offset: 3px;
}

/* --- Verlanglijstje --------------------------------------------------- */
.mimoda-wishlist__items { list-style: none; margin: 0; padding: 0; }
.mimoda-wishlist__item {
	display: grid; grid-template-columns: 130px 1fr auto; column-gap: 21px; align-items: center;
	padding: 30px 0; border-bottom: 1px solid rgba(17, 17, 17, .12);
}
.mimoda-wishlist__item:first-child { padding-top: 0; }
.mimoda-wishlist__thumb { display: block; }
/* Portret-crop op alle breedtes (Figma 418:7982): bijna-vierkant 130×131 sneed
   producten lelijk af; 130×176 + object-position top toont het product netjes.
   Mobiel gebruikte al 176px (zie ≤981-blok) — desktop lijnen we hierop uit. */
.mimoda-wishlist__thumb img { width: 130px; height: 176px; object-fit: cover; object-position: center top; border-radius: 5px; display: block; }
.mimoda-wishlist__info { min-width: 0; }
.mimoda-wishlist__name { display: block; font-weight: 700; font-size: 14px; color: var(--mimoda-ink); margin: 0 0 8px; }
.mimoda-wishlist__name:hover { text-decoration: underline; }
.mimoda-wishlist__meta { font-size: 12px; line-height: 1.6; color: var(--mimoda-ink); margin: 0; }
.mimoda-wishlist__meta span { display: block; }
.mimoda-wishlist__meta--choose a { color: #e598e5; text-decoration: underline; }
.mimoda-wishlist__end { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.mimoda-wishlist__remove {
	appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
	cursor: pointer; color: var(--mimoda-ink); line-height: 0; transition: color .15s ease;
}
.mimoda-wishlist__remove:hover { color: var(--mimoda-coral-ink); }
.mimoda-wishlist__remove svg { width: 22px; height: 22px; } /* prullenbak iets groter (klantwens) */
.mimoda-wishlist__price { font-size: 14px; color: var(--mimoda-ink); white-space: nowrap; }

/* Actieknoppen (legen / alles toevoegen). */
.mimoda-wishlist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.mimoda-wishlist__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 53px; padding: 0 26px; border: 0; border-radius: 5px;
	font-family: var(--mimoda-font); font-weight: 800; font-size: 14px; letter-spacing: .02em;
	text-transform: uppercase; color: #fff; cursor: pointer; text-decoration: none;
	transition: filter .15s ease, transform .15s ease;
}
.mimoda-wishlist__btn:hover { filter: brightness(.96); color: #fff; }
.mimoda-wishlist__btn svg { flex: none; }
.mimoda-wishlist__btn--clear  { background: #aaaaaa; }
.mimoda-wishlist__btn--addall { background: #e598e5; font-size: 16px; margin-left: auto; }

/* Lege lijst. */
.mimoda-wishlist__empty { padding: 10px 0 20px; }
.mimoda-wishlist__empty p { font-size: 16px; margin: 0 0 20px; }

/* Verzend-USP-band (#f5f5f5) — alléén op de verlanglijstje-subpagina (Figma 172:5471),
   conditioneel gerenderd in page.php. */
.mimoda-account-usps { background: var(--mimoda-gray); }
.mimoda-account-usps__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 90px; padding: 14px 24px; }
.mimoda-account-usps__item { display: inline-flex; align-items: center; gap: 16px; font-size: 19px; color: var(--mimoda-ink); }
.mimoda-account-usps__icon { width: auto; height: 38px; flex: none; }

/* "Stay up to date"-blok — alléén op de verlanglijstje-subpagina (body-class via
   inc/account.php): witte achtergrond + orchid titel (social-icons zijn al #e598e5). */
.mimoda-endpoint-verlanglijstje .mimoda-stay { background: #fff; }
.mimoda-endpoint-verlanglijstje .mimoda-stay__title { color: #fec2dc; }

/* --- Dashboard (welkomsttekst) + gedeelde inhoud-typografie ---------- */
.woocommerce-account .woocommerce-MyAccount-content > p { font-size: 15px; line-height: 26px; margin: 0 0 16px; max-width: 720px; }
.woocommerce-account .woocommerce-MyAccount-content > p a { color: #e598e5; }
.woocommerce-account .woocommerce-MyAccount-content > p a:hover { text-decoration: underline; }

/* --- Bestellingen-tabel (Ordernummer · Datum · Totaal · Status) ------ */
.woocommerce-account table.account-orders-table {
	width: 100%; border: 1px solid #e6e6e6; border-radius: 8px; border-collapse: separate;
	border-spacing: 0; overflow: hidden; font-size: 14px; margin: 0;
}
.woocommerce-account table.account-orders-table th,
.woocommerce-account table.account-orders-table td {
	text-align: left; padding: 15px 20px; border: 0; border-bottom: 1px solid #eee; vertical-align: middle;
}
.woocommerce-account table.account-orders-table thead th { background: #f7f5f5; font-weight: 700; }
.woocommerce-account table.account-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-account table.account-orders-table td::before { display: none; } /* WC responsive-labels uit */
.woocommerce-account table.account-orders-table td a { color: var(--mimoda-ink); }
.woocommerce-account table.account-orders-table td a:hover { color: #e598e5; }

/* Bestellingen — lege staat (verzorgd blok i.p.v. de kale WC-melding). */
.mimoda-orders-empty {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
	max-width: 560px; padding: 56px 32px; border: 1px solid #eee; border-radius: 12px; background: #fafafa;
}
.mimoda-orders-empty__icon {
	width: 66px; height: 66px; border-radius: 50%; background: var(--mimoda-pink-soft);
	display: flex; align-items: center; justify-content: center; color: #e598e5;
}
.mimoda-orders-empty__icon svg { width: 30px; height: 30px; }
.mimoda-orders-empty__title { font-size: 16px; color: var(--mimoda-ink); margin: 0; }
.woocommerce-account .mimoda-orders-empty a.button { background: #e598e5; }

/* --- Adressen (2 kolommen; "Bewerken …"-link ONDER het adres) -------- */
.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid; grid-template-columns: 1fr 1fr; gap: 26px 60px; max-width: 620px; margin: 0;
}
/* WC zet een clearfix ::before/::after op .col2-set → in een grid worden dat
   ongewenste grid-items die de adresblokken naar verkeerde cellen duwen. Uit. */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after { content: none; display: none; }
/* WC' eigen float + width:48% op .col-1/.col-2 overrulen (hogere specificiteit). */
.woocommerce-account .woocommerce-Addresses.col2-set .woocommerce-Address { float: none; width: auto; }
.woocommerce-account .woocommerce-Address { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.woocommerce-account .woocommerce-Address .woocommerce-Address-title { display: contents; }
.woocommerce-account .woocommerce-Address-title h2 {
	order: 1; font-family: var(--mimoda-font); font-weight: 700; font-size: 15px;
	text-transform: uppercase; letter-spacing: .02em; margin: 0 0 12px;
}
.woocommerce-account .woocommerce-Address address { order: 2; font-style: normal; font-size: 15px; line-height: 26px; border: 0; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-Address-title .edit {
	order: 3; margin-top: 14px; color: #e598e5; font-size: 15px;
}
.woocommerce-account .woocommerce-Address-title .edit:hover { text-decoration: underline; }

/* --- Accountgegevens (form-edit-account.php override) ---------------- */
.woocommerce-EditAccountForm { max-width: 900px; }
@media (min-width: 620px) {
	.woocommerce-EditAccountForm {
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; align-items: start;
	}
	.woocommerce-EditAccountForm .form-row-first { grid-column: 1; }
	.woocommerce-EditAccountForm .form-row-last { grid-column: 2; }
	.woocommerce-EditAccountForm .form-row-wide,
	.woocommerce-EditAccountForm .mimoda-account-pw,
	.woocommerce-EditAccountForm .mimoda-account-pw__submit { grid-column: 1 / -1; }
}
/* WC zet float + width:47% op .form-row-first/.form-row-last → binnen ons grid
   maakt dat de velden smal (halve cel) i.p.v. de volle kolom. Overrulen. */
.woocommerce-account .woocommerce-EditAccountForm .form-row { margin: 0 0 16px; width: auto; float: none; }
.woocommerce-EditAccountForm .clear { display: none; }
.woocommerce-EditAccountForm .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.woocommerce-account .woocommerce-EditAccountForm input.input-text {
	width: 100%; border: 1px solid #d9d9d9; border-radius: 6px; padding: 13px 16px;
	min-height: 50px; background: #fff; font-size: 14px;
}
/* "Wijzigingen opslaan" — orchid (#e598e5, klantkeuze). */
.woocommerce-account .woocommerce-EditAccountForm button.button { background: #e598e5; }
.woocommerce-EditAccountForm .mimoda-account-pw { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.woocommerce-EditAccountForm .mimoda-account-pw legend {
	float: none; width: auto; padding: 0; margin: 0 0 12px; font-size: 15px;
	font-family: var(--mimoda-font); color: var(--mimoda-ink);
}
.woocommerce-EditAccountForm .mimoda-account-pw .form-row { margin: 0 0 16px; }
.woocommerce-EditAccountForm .mimoda-account-pw__submit { text-align: right; margin: 12px 0 0; }

/* Responsief. */
@media (max-width: 1100px) { .mimoda-account__hero { height: 280px; } }
@media (max-width: 899px) {
	.mimoda-account__title { font-size: 32px; margin-bottom: 24px; }
	.woocommerce-account.logged-in .mimoda-account .woocommerce-MyAccount-navigation { margin-bottom: 28px; }
	.mimoda-wishlist__btn--addall { margin-left: 0; }
}
@media (max-width: 640px) {
	.mimoda-account__hero { height: 180px; }
	/* (Verlanglijst-item/beeld + knop-breedte + USP-tekst: zie mobiel-blok ≤981 onderaan,
	   dat het ontwerp-formaat (beeld 130×176) volgt.) */
}

/* =========================================================================
   Bedankpagina
   ========================================================================= */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--mimoda-display); font-size: 34px; text-align: center; margin-bottom: 26px;
}
.woocommerce-order ul.order_details {
	display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
	background: var(--mimoda-pink-soft); border-radius: 10px; padding: 24px; list-style: none;
}

/* (De gratis-verzending-status staat nu ín de Samenvatting; geen losse balk meer.) */

/* =========================================================================
   Winkelwagen-melding (toast) — 1:1 Figma "toevoegen winkelwagen" (208:3467).
   Rechtsboven, wit kader met zachte schaduw, coral cirkel + tas-icoon,
   titel + detailregel. Markup komt uit het child-JS (window.sellabeesToast).
   ========================================================================= */
.mimoda-toast {
	position: fixed; top: 24px; right: 24px; z-index: 100000;
	width: min(387px, calc(100vw - 32px));
	background: #fff; box-shadow: 1px 1px 13px 1px rgba(0, 0, 0, .25);
	padding: 26px 30px 30px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	opacity: 0; transform: translateX(24px);
	transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
/* Zichtbaar = ook aanklikbaar (klik/tik sluit de melding direct, zie theme.js);
   in de basisregel staat pointer-events:none zodat een wegfadende melding niets blokkeert. */
.mimoda-toast.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; cursor: pointer; }
.mimoda-toast__icon {
	width: 59px; height: 59px; border-radius: 50%; margin-bottom: 4px;
	background: #fec2dc; color: #fff; /* design 318:5649 — roze cirkel, wit tas-icoon */
	display: inline-flex; align-items: center; justify-content: center;
}
.mimoda-toast__icon svg { width: 27px; height: 26px; }
.mimoda-toast__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--mimoda-ink); }
.mimoda-toast__detail { font-size: 16px; color: var(--mimoda-ink); }
@media (prefers-reduced-motion: reduce) {
	.mimoda-toast { transition: opacity .2s ease; transform: none; }
}

/* Aandacht-melding (notice) — zelfde kader/positie/animatie als de toast, maar een
   warm koraal attentie-icoon (i.p.v. het roze tas-icoon) met een "!"-glyph. Bewust in
   de huisstijl, niet fel/rood. Verschijnt bij toevoegen zonder verplichte kleur/maat.
   Markup uit het child-JS (window.sellabeesNotice → mimodaNotice). */
.mimoda-toast--notice .mimoda-toast__icon { background: var(--mimoda-coral-ink); }
.mimoda-toast--notice .mimoda-toast__icon svg { width: 24px; height: 24px; }

/* =========================================================================
   Winkelwagen — revisie n.a.v. feedback (links, knop, beeld, betaal, finish-the-look, stay).
   ========================================================================= */
/* De winkelwagen zit in .mimoda-page__content, dat proza-links koraal + onderstreept
   maakt (page.css). Voor de winkelwagen uitzetten: productnaam en "Finish the look"-
   kaartnamen zwart en zonder onderstreping. */
.woocommerce-cart .mimoda-page__content a { color: var(--mimoda-ink); text-decoration: none; }
.woocommerce-cart .product-name > a,
.woocommerce-cart .product-name > a:hover { text-decoration: none; }

/* Afrekenknop: design-roze (#e598e5) i.p.v. het huidige coral-accent, tekst op 14px
   én verticaal gecentreerd (WC maakt de knop display:block → tekst plakt anders bovenaan). */
.woocommerce-cart .cart_totals .mimoda-summary a.checkout-button {
	display: flex; align-items: center; justify-content: center;
	background: #e598e5; color: #fff;
	font-size: 14px; letter-spacing: .01em; line-height: 1;
}
.woocommerce-cart .cart_totals .mimoda-summary a.checkout-button:hover { background: #db85db; color: #fff; }

/* Productbeeld netjes bijsnijden — bovenkant behouden i.p.v. hard midden-croppen. */
.woocommerce-cart td.product-thumbnail img { object-position: center top; }

/* Samenvatting-USP-iconen op design-formaat (truck iets groter dan de doos). */
.woocommerce-cart .mimoda-summary__usp-icon { width: 20px; height: 20px; }
.woocommerce-cart .mimoda-summary__usp-icon--truck { width: 23px; height: 23px; }

/* Betaallogo's: nette rij, gelijke hoogte, verticaal gecentreerd (1:1 design). */
.woocommerce-cart .mimoda-summary__payments { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; padding: 0; }
.woocommerce-cart .mimoda-summary__payments li { margin: 0; padding: 0; display: flex; align-items: center; }
.woocommerce-cart .mimoda-summary__payments img { height: 26px; width: auto; display: block; border-radius: 0; }

/* "Finish the look": simpele kaart zoals het design — geen verlanglijst-hartje en
   geen maat-chips; alleen beeld, naam, prijs en kleurstalen. Titel zwart (niet accent). */
.woocommerce-cart .mimoda-cart-cross .sellabees-wish-btn,
.woocommerce-cart .mimoda-cart-cross .mimoda-product__sizes { display: none; }
.woocommerce-cart .mimoda-cart-cross .mimoda-section-title { color: var(--mimoda-ink); }

/* "Stay up to date"-band wit op de winkelwagen (design). */
.woocommerce-cart .mimoda-stay { background: var(--mimoda-white); }

/* =========================================================================
   Winkelwagen — revisie 3: betaal-logo's (1:1 Figma 252) + finish-the-look.
   ========================================================================= */
/* Betaal-logo's: gecentreerd onder de knop, per merk op design-hoogte, verticaal
   gecentreerd (Figma: iDEAL 21 / billink 24 / Klarna 29 / Bancontact 35 px).
   Sinds 13-08 toont de winkelwagen alléén iDEAL/WERO; de overige hoogtes blijven
   staan voor het geval een merk terugkomt. */
.woocommerce-cart .mimoda-summary__payments {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 14px; margin: 24px 0 0; padding: 0;
}
.woocommerce-cart .mimoda-summary__payments li { margin: 0; padding: 0; display: flex; align-items: center; }
.woocommerce-cart .mimoda-summary__payments img.pay-logo { width: auto; display: block; border-radius: 0; }
.woocommerce-cart .mimoda-summary__payments img.pay-ideal { height: 21px; }
.woocommerce-cart .mimoda-summary__payments img.pay-billink { height: 24px; }
.woocommerce-cart .mimoda-summary__payments img.pay-klarna { height: 29px; }
.woocommerce-cart .mimoda-summary__payments img.pay-bancontact { height: 35px; }

/* "Finish the look": pijltjes roze (design) i.p.v. zwart, en de hele band grijs. */
.woocommerce-cart .mimoda-cart-cross .mimoda-slider__arrow { color: #e598e5; }
.woocommerce-cart .mimoda-cart-cross .mimoda-slider__arrow:hover { color: #db85db; }
.woocommerce-cart .mimoda-cart-cross.mimoda-related,
.woocommerce-cart .mimoda-band.mimoda-cart-cross { background: var(--mimoda-gray); }

/* "Finish the look"-band edge-to-edge grijs (design: volle breedte, niet container-breed). */
.woocommerce-cart .mimoda-cart-cross { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* =========================================================================
   MOBIEL (≤ 981px) — winkelwagen · afrekenen · account · verlanglijst · toast.
   1:1 op het responsive ontwerp (canvas 374:2992; frames 402px breed, 46px inset).
   Komt als laatste in bronvolgorde → wint op gelijke specificiteit (BOUWPLAN §2).
   WC/core-containers gebruiken geen .mimoda-container, dus zetten we hun mobiele
   zijmarge zelf op 12.5% (§3), gelijk aan de globale gutter (header/footer).
   Desktop (≥1220px) blijft volledig ongewijzigd.
   ========================================================================= */
@media (max-width: 981px) {

	/* ------------------------------------------------------------------ WINKELWAGEN */
	/* Titel + winkelwagen op de mobiele gutter; content-wrapper 0 (band full-bleed). */
	.woocommerce-cart .mimoda-info__head { padding: 28px 12.5% 0; }
	.woocommerce-cart .mimoda-info__title { font-size: 40px; line-height: 1.1; }
	.woocommerce-cart .mimoda-info--text .mimoda-page__content { padding: 16px 0 0; }
	.woocommerce-cart .woocommerce { padding: 0 12.5%; }
	/* 1 kolom: items → samenvatting eronder (2-koloms-grid geldt nu ≥982). */
	.woocommerce-cart .cart-collaterals { margin-top: 30px; }
	/* Lege winkelwagen: minder wit onder de SHOP NOW-knop (Figma 409:6011 — de
	   "Finish the look"-band begint ~110px onder de knop; met de 56px margin-top
	   van .mimoda-cart-cross erbij ≈ 54px bodempadding). Bovenmarge blijft (titel
	   staat in het ontwerp ~110px onder de header). */
	.woocommerce-cart .mimoda-cart-empty { padding-bottom: 54px; }

	/* WC' small-screen-tabel (≤768px) verbergt het beeld, toont de prijs-cel en zet
	   de cellen rechts uitgelijnd → dat breekt ons custom grid. Terugdraaien: */
	.woocommerce-cart td.product-thumbnail { display: block !important; }
	.woocommerce-cart td.product-price { display: none !important; }
	.woocommerce-cart table.shop_table tr.cart_item td { text-align: left !important; }
	/* Compacter beeld (ontwerp 130×176) + krappere kolom-gap zodat naam + prijs passen. */
	.woocommerce-cart table.shop_table tr.cart_item {
		column-gap: 16px; min-height: 224px; padding: 22px 0;
	}
	.woocommerce-cart td.product-thumbnail img { top: 22px; height: 176px; }
	.woocommerce-cart .product-name > a { font-size: 15px; }
	.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal { justify-self: end; text-align: right !important; }
	/* Afreken-knop vult de volle breedte (was al 100%, hier expliciet op mobiel). */
	.woocommerce-cart .mimoda-summary__checkout { width: 100%; }

	/* ------------------------------------------------------------------- AFREKENEN */
	.woocommerce-checkout .mimoda-info__head { padding: 28px 12.5% 0; }
	.woocommerce-checkout .mimoda-info__title { font-size: 40px; }
	.woocommerce-checkout .mimoda-info--text .mimoda-page__content { padding: 0 12.5%; }
	/* Formulier vol-breed; besteloverzicht vol-breed als kaart BOVENAAN, niet
	   sticky. NB: WooCommerce hangt containerklassen aan de checkout (is-medium
	   bij content < 700px, is-large erboven) met eigen layout: is-large zet de
	   sidebar op 35% náást/onder het formulier (zichtbaar op vensters 933–981:
	   overzicht viel als smal blokje onderaan), is-medium zet hem juist bovenaan.
	   Daarom hier hard afgedwongen, klasse-onafhankelijk: kolom-flex, overzicht
	   eerst (order), beide vol-breed met !important tegen WC' 35%-regels. */
	body.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex !important; flex-direction: column !important;
	}
	.woocommerce-checkout .wc-block-checkout__main {
		max-width: none !important; width: 100% !important; padding: 0; order: 1 !important;
	}
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		position: static; top: auto; width: 100% !important; max-width: none !important;
		margin: 0 0 26px; order: 0 !important;
		/* stretch: WC's is-large zet align-self:flex-start op de sidebar zelf,
		   waardoor hij in onze kolom-flex naar inhoudsbreedte kromp (~288px). */
		align-self: stretch !important;
	}
	/* WC rendert het besteloverzicht óók als "fill" onderin de actie-rij → dubbel.
	   Op mobiel verbergen; het overzicht bovenaan (sidebar) blijft. */
	.woocommerce-checkout .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block { display: none !important; }
	/* ================= BESTELOVERZICHT 1:1 op Figma 415:8627 =================
	   Standaard UITGEKLAPT (WC klapt 'm mobiel dicht → oogde leeg): forceer de inhoud
	   zichtbaar. In-/uitklappen regelen we zelf via een klasse op <body> — buiten Reacts
	   render-boom, dus die overleeft re-renders (een klasse op de sidebar/summary werd
	   wél weggerenderd). checkout.js togglet body.mimoda-summary-collapsed bij klik op de
	   titel. Styling hieronder = de compacte ontwerp-kaart. */
	/* Soepel in-/uitklappen (klant 13-08: schokkerig). display:none/block valt niet te
	   animeren, dus we animeren max-height naar de EXACT gemeten inhoudshoogte:
	   checkout.js schrijft die als --mimoda-summary-h op <body> (buiten Reacts boom) en
	   houdt 'm bij. Een vaste, te ruime max-height zou "wachten-en-schieten" opleveren;
	   met de echte hoogte loopt de curve gelijk met de inhoud. Groeit de inhoud (het
	   kortingsveld klapt open), dan verandert de variabele en animeert dit mee.
	   visibility pas ná de animatie weg, zodat ingeklapte inhoud niet tabbaar is. */
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
		display: block !important;
		overflow: hidden;
		max-height: var(--mimoda-summary-h, 1400px);
		opacity: 1;
		visibility: visible;
		transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .2s ease .06s, visibility 0s;
	}
	body.woocommerce-checkout.mimoda-summary-collapsed .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, visibility 0s .34s;
	}
	@media (prefers-reduced-motion: reduce) {
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
		body.woocommerce-checkout.mimoda-summary-collapsed .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
			transition: none;
		}
	}
	/* Kaart: ontwerp-rand (#e9dede) + 5px-radius + krappere verticale padding. */
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
		border: 1px solid #e9dede !important; border-radius: 5px !important; padding: 20px 0 10px !important;
	}
	/* Titelbalk: WC tekent een streep bóven én onder de titel (rgba(17,17,17,.2)) →
	   weg. Chevron rechts tonen (ontwerp), naar boven wijzend (opengeklapt). */
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
		/* Klapkop: de padding-onder is hier de tikruimte; de marge uit de basisregel
		   kwam daar bovenop (klant 12-08: te veel wit boven de producten) → marge
		   weg en padding terug naar 8px (2e ronde). */
		border: 0 !important; padding: 0 24px 8px !important; margin-bottom: 0 !important;
	}
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon {
		display: flex !important; align-items: center; color: var(--mimoda-ink);
	}
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon svg {
		width: 20px; height: 20px; fill: currentColor; transform: rotate(180deg); transition: transform .2s ease;
	}
	/* Chevron omlaag wanneer ingeklapt (body-klasse). */
	body.woocommerce-checkout.mimoda-summary-collapsed .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon svg { transform: none; }
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title,
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button { cursor: pointer; }
	/* Productregel: compact, beeld + tekst + prijs verticaal gecentreerd; dun lijntje
	   tussen (en onder de laatste) producten. */
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item {
		align-items: center !important; padding: 10px 24px !important; border-bottom: 1px solid #e9dede !important;
	}
	/* Naam + variatie strak gestapeld: de (verborgen) losse-stukprijs-wrapper nam
	   ruimte in waardoor naam en "Kleur: …" ver uit elkaar stonden → wrapper weg,
	   description als krappe kolom. */
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__description {
		display: flex; flex-direction: column; gap: 4px;
		flex: 1 1 auto; min-width: 0; /* zie de basisregel: anders knijpt de kolom dicht en rekt de rij */
	}
	/* Zeer smalle telefoons (≤340px): de 12,5%-containergoot + 24px rij-padding aten
	   128px op, waardoor er maar ~64px voor de tekst overbleef — naam brak in losse
	   woorden, kolom werd hoger dan het beeld en de rij rekte op (gat boven de foto).
	   Hier de rij-padding knijpen; de goot zelf blijft (die is site-breed). */
	@media (max-width: 340px) {
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item { padding: 10px 12px !important; }
		/* Ook het beeld iets kleiner: met 82px bleef er zó weinig over dat de
		   productnaam middenin het woord afbrak ("Blaze/r"). 60px geeft de tekst
		   genoeg breedte om netjes op woordgrenzen te wikkelen. Alleen ≤340px —
		   vanaf 360px (elke gangbare telefoon) blijft het 82×122 uit het ontwerp. */
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image,
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item__image img {
			width: 60px !important; height: 90px !important; min-width: 60px !important;
		}
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-cart-items-block) { padding: 0 12px !important; }
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { padding: 0 12px 8px !important; }
		body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button { padding-left: 12px !important; padding-right: 12px !important; }
	}
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-cart-item__prices { display: none !important; }
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary-item .wc-block-components-product-metadata { margin: 0; }
	/* Acties stapelen: "Afrekenen" full-width bovenaan, "terug naar winkelwagen" eronder. */
	.woocommerce-checkout .wc-block-checkout__actions_row {
		flex-direction: column !important; align-items: stretch; gap: 18px;
	}
	.woocommerce-checkout .wc-block-components-checkout-place-order-button {
		width: 100% !important; min-width: 0;
	}
	.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button { order: 1; align-self: center; }

	/* --------------------------------------------------------------------- ACCOUNT */
	.mimoda-account__hero { height: 180px; }
	.mimoda-account__wrap { padding-top: 34px; padding-bottom: 56px; }
	.mimoda-account__title { font-size: 40px; margin-bottom: 24px; }
	/* Zij-nav (vertikale lijst) boven de content (grid geldt nu ≥982). */
	.woocommerce-account.logged-in .mimoda-account .woocommerce-MyAccount-navigation { margin-bottom: 30px; }
	.woocommerce-account .mimoda-account .woocommerce-MyAccount-navigation li a { line-height: 44px; }

	/* Inloggen/registreren: vol-breed, zonder kaart-omlijning (ontwerp 417:7374). */
	.woocommerce-account:not(.logged-in) .woocommerce { max-width: none; }
	.woocommerce-account form.login, .woocommerce-account form.register {
		border: 0; border-radius: 0; padding: 0;
	}
	/* Inlog-/registreerknop vol-breed (ontwerp 417:7374). */
	.woocommerce-account:not(.logged-in) .woocommerce form button.button { width: 100%; }

	/* Bestellingen: tabel → gestapelde kaart per order (label links · waarde rechts). */
	.woocommerce-account table.account-orders-table { border: 0; border-radius: 0; overflow: visible; }
	.woocommerce-account table.account-orders-table thead { display: none; }
	.woocommerce-account table.account-orders-table tbody { display: block; }
	.woocommerce-account table.account-orders-table tr.order {
		display: block; border: 1px solid #e6e6e6; border-radius: 8px; margin: 0 0 16px; overflow: hidden;
	}
	.woocommerce-account table.account-orders-table tr.order > th,
	.woocommerce-account table.account-orders-table tr.order > td {
		display: flex; align-items: center; justify-content: space-between; gap: 16px;
		padding: 13px 16px; border-bottom: 1px solid #eee; text-align: left;
	}
	.woocommerce-account table.account-orders-table tr.order > *:last-child { border-bottom: 0; }
	.woocommerce-account table.account-orders-table tr.order > th::before,
	.woocommerce-account table.account-orders-table tr.order > td::before {
		content: attr(data-title); display: inline-block; font-weight: 700; color: var(--mimoda-ink);
	}
	.woocommerce-account table.account-orders-table tr.order .woocommerce-orders-table__cell-order-actions { flex-wrap: wrap; }

	/* Adressen: 1 kolom. */
	.woocommerce-account .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; gap: 30px; max-width: none; }

	/* Accountgegevens: Voornaam|Achternaam blijven 2-koloms (ontwerp), rest vol-breed,
	   knop vol-breed. */
	.woocommerce-EditAccountForm {
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 0; max-width: none;
	}
	.woocommerce-EditAccountForm .form-row-first { grid-column: 1; }
	.woocommerce-EditAccountForm .form-row-last { grid-column: 2; }
	.woocommerce-EditAccountForm .form-row-wide,
	.woocommerce-EditAccountForm .mimoda-account-pw,
	.woocommerce-EditAccountForm .mimoda-account-pw__submit { grid-column: 1 / -1; }
	.woocommerce-EditAccountForm .mimoda-account-pw__submit { text-align: left; }
	.woocommerce-account .woocommerce-EditAccountForm button.button { width: 100%; }

	/* Verzend-USP-band: gestapeld, gecentreerd. Elke USP moet op ÉÉN regel passen
	   (o.a. "Voor 15.00 besteld = zelfde dag verzonden") → kleiner icoon + kleinere
	   tekst + geen afbreken. */
	.mimoda-account-usps__inner { flex-direction: column; gap: 12px; padding: 16px 12.5%; }
	.mimoda-account-usps__item { font-size: 13px; gap: 9px; white-space: nowrap; }
	.mimoda-account-usps__icon { height: 28px; }

	/* ---------------------------------------------------------------- VERLANGLIJST */
	/* Item = zelfde stramien als de winkelwagen: beeld 130×176, trash rechtsboven,
	   prijs rechtsonder. (Overschrijft de oude ≤640 die het beeld naar 92px kromp.) */
	.mimoda-wishlist__item {
		grid-template-columns: 130px minmax(0, 1fr) auto; column-gap: 16px;
		align-items: stretch; padding: 24px 0;
	}
	.mimoda-wishlist__thumb img { width: 130px; height: 176px; }
	.mimoda-wishlist__name { font-size: 15px; }
	.mimoda-wishlist__end { justify-content: space-between; align-items: flex-end; gap: 0; }
	/* Actieknoppen: gestapeld, vol-breed. */
	.mimoda-wishlist__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
	.mimoda-wishlist__btn { width: 100%; margin: 0; }
	.mimoda-wishlist__btn--addall { margin-left: 0; }

	/* ----------------------------------------------------------------------- TOAST */
	.mimoda-toast {
		top: 16px; right: 16px; left: auto;
		width: min(300px, calc(100vw - 28px)); padding: 18px 22px 20px; gap: 6px;
	}
	.mimoda-toast__icon { width: 46px; height: 46px; margin-bottom: 2px; }
	.mimoda-toast__icon svg { width: 21px; height: 20px; }
	.mimoda-toast__title { font-size: 19px; }
	.mimoda-toast__detail { font-size: 14px; }
}

/* ---- Kleine telefoons (≤600px): verfijningen die het ontwerp op 402px vraagt. --- */
@media (max-width: 600px) {
	.mimoda-account__hero { height: 145px; }
	/* USP-band: op smalle telefoons (bv. 375px) past "Voor 15.00 besteld = zelfde
	   dag verzonden" niet op één regel bij 13px → 12px zodat beide USP's op één regel
	   blijven (icoon blijft 28px). */
	.mimoda-account-usps__item { font-size: 12px; }
	/* Toast compact zoals het ontwerp (≈235px kader, roze cirkel 40px). */
	.mimoda-toast { width: min(260px, calc(100vw - 28px)); padding: 16px 20px 18px; }
	.mimoda-toast__icon { width: 40px; height: 40px; }
	.mimoda-toast__title { font-size: 17px; }
	.mimoda-toast__detail { font-size: 13px; }
}

/* ---- Zeer smalle telefoons (≲440px): winkelwagen-regel schaalt mee. -----------
   Het ontwerp (402px) rekent op beeld 130px + goten + stepper 81px + prijs binnen
   de 12.5%-goot; onder ±400px blijft er voor de naam-/stepperkolom (minmax(0,1fr))
   te weinig over en lopen stepper en titel hun vak uit, onder prijs en iconen
   (klantmelding 06-08). Beeld + goten schalen hier mee (30vw, ratio 130×176) en
   de stepper wordt 72px — alles houdt dan zijn eigen vak tot ±320px. */
@media (max-width: 440px) {
	.woocommerce-cart table.shop_table tr.cart_item {
		/* 40% van de rij = de 130px-beeldkolom van het 402px-ontwerp, meeschalend
		   (met % i.p.v. vw: vw bleek in grid-tracks onder device-emulatie niet
		   betrouwbaar te herberekenen). */
		grid-template-columns: clamp(96px, 40%, 130px) minmax(0, 1fr) auto;
		/* Prijs verhuist van de smalle 3e kolom naar de qty-span (stepper links,
		   prijs rechts in dezelfde rij) — anders reserveert de prijs ~70px kolom-
		   breedte en houdt de stepper te weinig over. De 3e kolom dient nu alleen
		   nog de iconen (regel 1). */
		grid-template-areas:
			"thumb name remove"
			"thumb qty  qty";
		/* Geen grid-goot: WooCommerce' eigen celpadding (shop_table td: 9px 12px)
		   levert de 12px zijruimte al — met een gap erbovenop werd de goot dubbel
		   en schoof de prijs te ver naar rechts (klant 06-08: 0px staat goed). */
		column-gap: 0;
		min-height: 0; /* hoogte volgt het (nu statische) beeld, zie hieronder */
	}
	.woocommerce-cart td.product-subtotal { grid-area: qty; }
	/* Beeld statisch i.p.v. absoluut: vult de meeschalende beeldkolom en geeft de
	   rij vanzelf genoeg hoogte (de vaste 130px/176px-maten kloppen hier niet meer). */
	.woocommerce-cart td.product-thumbnail img {
		position: static;
		width: 100% !important;
		height: auto;
		aspect-ratio: 130 / 176;
	}
	/* Stepper compacter (81→66) + prijs 13px: samen passen ze in de qty-span
	   tot en met 320px-schermen. */
	.woocommerce-cart .mimoda-qty { width: 66px; height: 32px; }
	.woocommerce-cart .mimoda-qty__btn { flex-basis: 21px; width: 21px; }
	.woocommerce-cart .product-subtotal { font-size: 13px; }
}

/* =========================================================================
   Liggende tablet / laptop (982–1219px) — verfijningen (feedback klant).
   Afrekenen 2-koloms (passend) + nette verlanglijst-knoppen. Strikt op de
   tablet-band gescopet → geen conflict met mobiel of desktop.
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {

	/* --- Afrekenen: formulier + besteloverzicht NAAST elkaar met FLEXIBELE
	   breedtes zodat ze samen binnen de container passen. De ≥1000-regel gebruikt
	   vaste 743+448px (=1191) → die liepen op deze breedte buiten beeld waardoor
	   het besteloverzicht wegviel. Deze regel staat later + is even specifiek →
	   wint voor 1000–1219; en dekt ook 982–999 waar de ≥1000-regel niet geldt. */
	.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
		align-items: flex-start; gap: 40px !important;
	}
	/* min-width:0 heft de flex-default (min-width:auto = inhoudsbreedte) op, zodat de
	   formulierkolom KAN krimpen en het besteloverzicht ernaast past i.p.v. eronder. */
	.woocommerce-checkout .wc-block-checkout__main {
		flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
		max-width: none !important; margin: 0 !important;
	}
	.woocommerce-checkout .wc-block-checkout__sidebar {
		flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; margin: 0 !important;
	}
	/* WooCommerce' containerklasse is-medium (content < 700px — sinds de
	   proportionele containers valt deze band daar deels in) zet de sidebar
	   VÓÓR het formulier (order) en klapt het besteloverzicht dicht tot een
	   leeg accordeon-kaartje. Hier klasse-onafhankelijk rechtgezet: formulier
	   links, overzicht rechts, inhoud altijd open (zoals desktop), chevron weg. */
	.woocommerce-checkout .wc-block-checkout__main { order: 0 !important; }
	.woocommerce-checkout .wc-block-checkout__sidebar { order: 1 !important; }
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content { display: block !important; }
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon { display: none !important; }

	/* --- Verlanglijstje-knoppen: "legen" en "alles toevoegen" delen de regel in
	   gelijke helften, zodat alle knopranden uitlijnen (i.p.v. natuurlijke
	   breedtes met een gat ertussen → oogde ongelijk). */
	.mimoda-wishlist__btn--clear,
	.mimoda-wishlist__btn--addall { flex: 1 1 0; min-width: 0; margin-left: 0; }
}