/* ==========================================================================
   MyDecor Modern – moderne laag bovenop MyDecor
   Kleuren komen uit de MyDecor Theme Options (zie :root-variabelen die
   functions.php inline toevoegt). Alles is gescoped op body.mdm.
   ========================================================================== */

:root {
	--mdm-radius: 10px;
	--mdm-radius-lg: 16px;
	--mdm-soft: #f6f5f3;
	--mdm-success: #1f7a4d;
	--mdm-shadow: 0 1px 2px rgba(22, 22, 22, .06), 0 4px 16px rgba(22, 22, 22, .06);
	--mdm-shadow-hover: 0 2px 4px rgba(22, 22, 22, .08), 0 8px 24px rgba(22, 22, 22, .10);
	--mdm-ease: cubic-bezier(.2, .7, .2, 1);
	--mdm-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7V6a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E");
	--mdm-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--mdm-icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--mdm-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Algemene modernisering: knoppen, velden, focus
   -------------------------------------------------------------------------- */

body.mdm .button,
body.mdm button.button,
body.mdm input[type="submit"],
body.mdm .woocommerce a.button,
body.mdm .woocommerce button.button {
	border-radius: var(--mdm-radius);
	transition: background-color .2s var(--mdm-ease), color .2s var(--mdm-ease), border-color .2s var(--mdm-ease), box-shadow .2s var(--mdm-ease), transform .2s var(--mdm-ease);
}

body.mdm input[type="text"],
body.mdm input[type="email"],
body.mdm input[type="tel"],
body.mdm input[type="password"],
body.mdm input[type="number"],
body.mdm input[type="search"],
body.mdm select,
body.mdm textarea,
body.mdm .select2-container--default .select2-selection--single {
	border-radius: var(--mdm-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.mdm input[type="text"]:focus,
body.mdm input[type="email"]:focus,
body.mdm input[type="tel"]:focus,
body.mdm input[type="password"]:focus,
body.mdm input[type="number"]:focus,
body.mdm input[type="search"]:focus,
body.mdm select:focus,
body.mdm textarea:focus {
	border-color: var(--mdm-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdm-ink) 12%, transparent);
	outline: none;
}

body.mdm a:focus-visible,
body.mdm button:focus-visible,
body.mdm .button:focus-visible,
body.mdm input[type="radio"]:focus-visible,
body.mdm input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mdm-ink);
	outline-offset: 2px;
}

/* Iets zachtere productafbeeldingen */
body.mdm .products .product .thumbnail-wrapper,
body.mdm .products .product .thumbnail-wrapper img {
	border-radius: var(--mdm-radius);
}

/* --------------------------------------------------------------------------
   2. Duidelijke "In winkelwagen"-knop – gedeelde basis
   -------------------------------------------------------------------------- */

body.mdm .mdm-cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	margin: 0;
	border: 1.5px solid var(--mdm-cart);
	border-radius: var(--mdm-radius);
	background: var(--mdm-cart);
	color: var(--mdm-on-cart);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transform: none;
	word-break: normal;
}

body.mdm .mdm-cart-btn::before,
body.mdm .mdm-cart-btn::after {
	content: none !important;
	display: none !important;
}

body.mdm .mdm-cart-btn:hover,
body.mdm .mdm-cart-btn:focus-visible {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	border-color: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	color: var(--mdm-on-cart);
	box-shadow: var(--mdm-shadow-hover);
	transform: translateY(-1px);
	text-decoration: none;
}

body.mdm .mdm-cart-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

body.mdm .mdm-cart-btn svg {
	display: block;
	flex: none;
}

body.mdm .mdm-cart-btn__icon,
body.mdm .mdm-cart-btn__check {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: none;
}

body.mdm .mdm-cart-btn__check {
	display: none;
}

body.mdm .mdm-cart-btn__label {
	font-size: inherit;
	line-height: inherit;
	/* reset tooltip-stijlen van het hoofdthema */
	position: static;
	opacity: 1;
	visibility: visible;
	background: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Secundair: "Opties kiezen" / "Lees meer" */
body.mdm .mdm-cart-btn--secondary {
	background: transparent;
	color: var(--mdm-ink);
	border-color: var(--mdm-ink);
}

body.mdm .mdm-cart-btn--secondary:hover,
body.mdm .mdm-cart-btn--secondary:focus-visible {
	background: var(--mdm-ink);
	border-color: var(--mdm-ink);
	color: #fff;
}

/* Bezig met toevoegen */
body.mdm .mdm-cart-btn.loading {
	pointer-events: none;
	opacity: .85 !important;
}

body.mdm .mdm-cart-btn.loading .mdm-cart-btn__icon {
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	animation: mdm-spin .7s linear infinite;
}

body.mdm .mdm-cart-btn.loading .mdm-cart-btn__icon svg {
	display: none;
}

/* Toegevoegd */
body.mdm .mdm-cart-btn.added .mdm-cart-btn__icon {
	display: none;
}

body.mdm .mdm-cart-btn.added .mdm-cart-btn__check {
	display: inline-flex;
	animation: mdm-pop .35s var(--mdm-ease);
}

body.mdm .mdm-cart-btn.mdm-just-added {
	background: var(--mdm-success);
	border-color: var(--mdm-success);
	color: #fff;
}

@keyframes mdm-spin {
	to { transform: rotate(360deg); }
}

@keyframes mdm-pop {
	0% { transform: scale(.4); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	body.mdm .mdm-cart-btn,
	body.mdm .mdm-cart-btn:hover {
		transform: none;
		transition: none;
	}
	body.mdm .mdm-cart-btn.added .mdm-cart-btn__check {
		animation: none;
	}
}

/* Meldingen (toegevoegd aan winkelwagen e.d.): gewone letters i.p.v. hoofdletters */
body.mdm .woocommerce-message,
body.mdm .woocommerce-notices-wrapper .woocommerce-info,
body.mdm #page .wc-block-components-notice-banner.is-success {
	border-radius: var(--mdm-radius);
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
}

body.mdm .woocommerce-message .button,
body.mdm #page .wc-block-components-notice-banner.is-success .button,
body.mdm .woocommerce-message .wc-forward {
	text-transform: none;
	letter-spacing: 0;
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   3. Productkaart (shop, categorieën, Elementor-productwidgets)
   -------------------------------------------------------------------------- */

body.mdm .mdm-loop-cart {
	margin: 12px 0 0;
	clear: both;
}

body.mdm .products .product .mdm-loop-cart a.mdm-cart-btn,
body.mdm .ts-product .product .mdm-loop-cart a.mdm-cart-btn {
	display: flex;
	width: 100%;
	font-size: 14px;
}

/* "Bekijk winkelwagen"-link die WooCommerce na toevoegen plaatst.
   Het hoofdthema verbergt die; wij tonen hem juist, als duidelijke vervolgstap. */
body.mdm .woocommerce .product .mdm-loop-cart a.added_to_cart,
body.mdm .product .mdm-loop-cart a.added_to_cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mdm-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	min-height: 0;
	animation: mdm-fade-in .3s ease;
}

body.mdm .product .mdm-loop-cart a.added_to_cart::after {
	content: "\2192";
	text-decoration: none;
	display: inline-block;
}

@keyframes mdm-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* Wishlist/vergelijk-rij onder de knop compacter */
body.mdm.mdm-loop-cart-visible .product-group-button-meta {
	border-top: 0;
	margin-top: 6px;
	padding-top: 0;
}

/* Lijstweergave */
body.mdm #page .main-products.list .mdm-loop-cart a.mdm-cart-btn {
	width: auto;
	display: inline-flex;
	min-width: 200px;
}

@media (max-width: 480px) {
	body.mdm .products .product .mdm-loop-cart a.mdm-cart-btn,
	body.mdm .ts-product .product .mdm-loop-cart a.mdm-cart-btn {
		min-height: 42px;
		padding: 8px 10px;
		gap: 6px;
		font-size: 13px;
		white-space: normal; /* lange vertalingen mogen afbreken i.p.v. afgekapt te worden */
		text-align: center;
	}
	body.mdm .products .product .mdm-loop-cart .mdm-cart-btn__label {
		overflow: visible;
	}
	body.mdm .mdm-cart-btn__icon,
	body.mdm .mdm-cart-btn__check {
		width: 16px;
		height: 16px;
	}
	body.mdm .mdm-cart-btn svg {
		width: 16px;
		height: 16px;
	}
}

/* --------------------------------------------------------------------------
   4. Productpagina: grote, duidelijke knop
   -------------------------------------------------------------------------- */

body.mdm div.product.product-type-simple form.cart,
body.mdm div.product .woocommerce-variation-add-to-cart,
body.mdm div.product.product-type-external form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	float: none;
	max-width: 480px;
}

/* clearfix-pseudo-elementen zouden als lege flex-items een extra gap geven */
body.mdm div.product.product-type-simple form.cart::before,
body.mdm div.product.product-type-simple form.cart::after,
body.mdm div.product .woocommerce-variation-add-to-cart::before,
body.mdm div.product .woocommerce-variation-add-to-cart::after,
body.mdm div.product.product-type-external form.cart::before,
body.mdm div.product.product-type-external form.cart::after {
	display: none;
}

body.mdm div.product form.cart div.quantity {
	margin: 0;
	float: none;
}

body.mdm.woocommerce div.product form.cart .button.single_add_to_cart_button,
body.mdm .woocommerce div.product form.cart .button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	float: none;
	flex: 1 1 200px;
	width: auto;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	height: 52px;
	min-height: 52px;
	padding: 0 24px;
	border: 1.5px solid var(--mdm-cart);
	border-radius: var(--mdm-radius);
	background: var(--mdm-cart);
	color: var(--mdm-on-cart);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	opacity: 1;
}

/* Gegroepeerde producten: knop onder de tabel, volle breedte */
body.mdm div.product.product-type-grouped form.cart .button.single_add_to_cart_button {
	width: 100%;
	max-width: 480px;
	margin-top: 16px;
}

body.mdm.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
body.mdm .woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	border-color: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	color: var(--mdm-on-cart);
	box-shadow: var(--mdm-shadow-hover);
}

body.mdm.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
body.mdm .woocommerce div.product form.cart .button.single_add_to_cart_button.disabled {
	opacity: .5;
	box-shadow: none;
}

body.mdm.woocommerce div.product form.cart .single_add_to_cart_button::before,
body.mdm .woocommerce div.product form.cart .single_add_to_cart_button::before {
	content: "" !important;
	display: inline-block;
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	background: currentColor;
	-webkit-mask: var(--mdm-icon-bag) center / contain no-repeat;
	mask: var(--mdm-icon-bag) center / contain no-repeat;
	border: 0;
	animation: none;
}

body.mdm.woocommerce div.product form.cart .single_add_to_cart_button.loading::before,
body.mdm .woocommerce div.product form.cart .single_add_to_cart_button.loading::before {
	-webkit-mask: none;
	mask: none;
	background: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mdm-spin .7s linear infinite;
}

body.mdm.woocommerce div.product form.cart .single_add_to_cart_button.added::before,
body.mdm .woocommerce div.product form.cart .single_add_to_cart_button.added::before {
	-webkit-mask-image: var(--mdm-icon-check);
	mask-image: var(--mdm-icon-check);
}

body.mdm.woocommerce div.product form.cart .single_add_to_cart_button::after,
body.mdm .woocommerce div.product form.cart .single_add_to_cart_button::after {
	content: none !important;
	display: none !important;
}

/* "Nu kopen": netjes onder de knop in plaats van met een transform ernaast */
body.mdm #page .summary .ts-buy-now-button,
body.mdm #page .product-type-variable .summary .ts-buy-now-button,
body.mdm #page .product-type-variable.sold-individually .summary .ts-buy-now-button {
	float: none;
	clear: both;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: none;
	margin: 12px 0 0;
	min-height: 48px;
	min-width: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	background: transparent;
	color: var(--mdm-ink);
	border: 1.5px solid var(--mdm-ink);
	border-radius: var(--mdm-radius);
	font-weight: 600;
	text-transform: none;
}

body.mdm #page .summary .ts-buy-now-button:hover {
	background: var(--mdm-ink);
	color: #fff;
}

/* Hoeveelheid-kiezer als nette pil */
body.mdm .summary .quantity {
	width: 132px;
	flex: none;
}

body.mdm div.product form.cart .quantity .number-button {
	box-sizing: border-box;
	height: 52px;
	border: 1.5px solid var(--mdm-border);
	border-radius: var(--mdm-radius);
	background: var(--mdm-surface);
	overflow: hidden;
}

body.mdm div.product form.cart .quantity .minus,
body.mdm div.product form.cart .quantity .plus {
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--mdm-ink);
	font-size: 18px;
	line-height: 1;
	transition: background-color .15s ease;
}

body.mdm div.product form.cart .quantity .plus {
	left: auto;
	right: 0;
}

body.mdm div.product form.cart .quantity .minus:hover,
body.mdm div.product form.cart .quantity .plus:hover {
	background: var(--mdm-soft);
}

body.mdm div.product form.cart .quantity input.qty {
	height: 100%;
	padding: 0 40px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mdm-ink);
	border: 0;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Sticky knop op mobiel (productpagina)
   -------------------------------------------------------------------------- */

.mdm-sticky-cart {
	display: none;
}

@media (max-width: 767px) {
	body.mdm .mdm-sticky-cart {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--mdm-bottom-offset, 0px); /* boven de mobiele knoppenbalk van MyDecor */
		z-index: 993;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--mdm-surface);
		border-top: 1px solid var(--mdm-border);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
		transform: translateY(110%);
		transition: transform .3s var(--mdm-ease);
	}
	body.mdm .mdm-sticky-cart.is-visible {
		transform: none;
	}
	body.mdm .mdm-sticky-cart__info {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		flex: 1;
	}
	body.mdm .mdm-sticky-cart__img {
		width: 44px;
		height: 44px;
		object-fit: cover;
		border-radius: 8px;
		flex: none;
	}
	body.mdm .mdm-sticky-cart__name {
		display: block;
		font-size: 13px;
		font-weight: 600;
		color: var(--mdm-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body.mdm .mdm-sticky-cart__price {
		display: block;
		font-size: 13px;
		color: var(--mdm-text);
	}
	body.mdm .mdm-sticky-cart__price del {
		display: none;
	}
	body.mdm .mdm-sticky-cart__button {
		flex: none;
		min-height: 46px;
	}
	body.mdm.mdm-sticky-active #to-top {
		bottom: calc(var(--mdm-bottom-offset, 0px) + 80px);
	}
}

/* --------------------------------------------------------------------------
   6. Winkelwagen in de header + mini-cart
   -------------------------------------------------------------------------- */

body.mdm .shopping-cart-wrapper .cart-control .cart-number {
	min-width: 18px;
	width: auto;
	height: 18px;
	padding: 0 5px;
	right: -7px;
	top: -6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	border-radius: 999px;
	background-color: var(--mdm-cart);
	color: var(--mdm-on-cart);
	box-shadow: 0 0 0 2px var(--mdm-surface);
}

body.mdm .shopping-cart-wrapper.mdm-bump .cart-control .cart-number {
	animation: mdm-bump .5s var(--mdm-ease);
}

@keyframes mdm-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.45); }
	100% { transform: scale(1); }
}

body.mdm .ts-tiny-cart-wrapper .dropdown-footer .button.checkout-button,
body.mdm #ts-add-to-cart-popup-modal .action .button.checkout,
body.mdm #ts-add-to-cart-popup-modal .action .button.checkout-button {
	background: var(--mdm-cart);
	border-color: var(--mdm-cart);
	color: var(--mdm-on-cart);
	min-height: 48px;
	font-weight: 600;
}

body.mdm .ts-tiny-cart-wrapper .dropdown-footer .button.checkout-button:hover {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	border-color: color-mix(in srgb, var(--mdm-cart) 86%, #000);
}

body.mdm .ts-tiny-cart-wrapper .dropdown-footer .button,
body.mdm #ts-add-to-cart-popup-modal .action .button {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	border-radius: var(--mdm-radius);
}

/* "Bekijk winkelwagen" secundair (omlijnd), afrekenen primair */
body.mdm .ts-tiny-cart-wrapper .dropdown-footer .button.view-cart,
body.mdm #ts-add-to-cart-popup-modal .action .button.view-cart {
	background: transparent;
	color: var(--mdm-ink);
	border: 1.5px solid var(--mdm-ink);
	min-height: 48px;
}

body.mdm .ts-tiny-cart-wrapper .dropdown-footer .button.view-cart:hover,
body.mdm #ts-add-to-cart-popup-modal .action .button.view-cart:hover {
	background: var(--mdm-ink);
	color: #fff;
}

/* Winkelwagenpagina: grote "Doorgaan naar afrekenen" */
body.mdm .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	background: var(--mdm-cart);
	border-color: var(--mdm-cart);
	color: var(--mdm-on-cart);
	border-radius: var(--mdm-radius);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
}

body.mdm .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	border-color: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	color: var(--mdm-on-cart);
}

/* --------------------------------------------------------------------------
   7. Eenvoudige checkout (klassiek)
   -------------------------------------------------------------------------- */

/* 7.1 Voortgangsbalk: compacte stappenbalk (ook op winkelwagen en bedankpagina) */
body.mdm #page .ts-cart-checkout-process-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	max-width: 760px;
	margin: 0 auto 32px;
	padding: 0;
	border: 0;
}

/* Op de checkout staat de balk (door het hoofdthema) in de login/coupon-wrapper:
   volle rij, stappen gecentreerd. */
body.mdm #page .checkout-login-coupon-wrapper > .ts-cart-checkout-process-bar {
	flex: 0 0 100%;
	order: -1;
	max-width: none;
	box-sizing: border-box;
	padding-left: max(0px, calc((100% - 760px) / 2));
	padding-right: max(0px, calc((100% - 760px) / 2));
}

body.mdm .ts-cart-checkout-process-bar > a {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 0 12px;
	border-width: 0 0 3px;
	border-style: solid;
	border-color: var(--mdm-border);
}

body.mdm .ts-cart-checkout-process-bar > a.active {
	border-color: var(--mdm-ink);
}

body.mdm .ts-cart-checkout-process-bar .status {
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0;
	line-height: 24px;
	font-size: 13px;
	border-color: var(--mdm-border);
	color: var(--mdm-muted);
	background: transparent;
}

body.mdm .ts-cart-checkout-process-bar a.active .status {
	background: var(--mdm-ink);
	border-color: var(--mdm-ink);
	color: #fff;
	font-size: 0; /* cijfer verbergen, vinkje (::before) tonen */
}

body.mdm .ts-cart-checkout-process-bar a.active .status::before {
	font-size: 11px;
	color: #fff;
}

body.mdm .ts-cart-checkout-process-bar h6 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mdm-ink);
}

body.mdm .ts-cart-checkout-process-bar > a:not(.active) h6 {
	color: var(--mdm-text); /* voldoende contrast (WCAG AA) */
}

body.mdm .ts-cart-checkout-process-bar > a.process-confirm * {
	opacity: 1;
}

body.mdm .ts-cart-checkout-process-bar a div > span:not(.status) {
	display: none;
}

@media (max-width: 767px) {
	body.mdm #page .ts-cart-checkout-process-bar {
		gap: 6px;
		margin-bottom: 20px;
	}
	body.mdm .ts-cart-checkout-process-bar > a {
		gap: 6px;
		padding-bottom: 10px;
	}
	body.mdm .ts-cart-checkout-process-bar .status {
		width: 22px;
		height: 22px;
		line-height: 20px;
		font-size: 11px;
	}
	body.mdm .ts-cart-checkout-process-bar h6 {
		font-size: 12px;
	}
}

/* 7.2 Inloggen / kortingscode: één rustige regel */
body.mdm-checkout-simple .checkout-login-coupon-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0 0 8px;
}

body.mdm-checkout-simple .checkout-login-coupon-wrapper > div {
	width: auto;
	margin: 0;
	flex: 1 1 280px;
	border: 0;
}

body.mdm-checkout-simple .checkout-login-coupon-wrapper .woocommerce-info,
body.mdm-checkout-simple #page .checkout-login-coupon-wrapper .wc-block-components-notice-banner.is-info {
	padding: 12px 16px !important; /* hoofdthema zet padding met !important */
	margin: 0 !important;
	border: 1px solid var(--mdm-border);
	border-radius: var(--mdm-radius);
	background: var(--mdm-soft);
	color: var(--mdm-text);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
}

body.mdm-checkout-simple .checkout-login-coupon-wrapper .woocommerce-info a,
body.mdm-checkout-simple #page .checkout-login-coupon-wrapper .wc-block-components-notice-banner.is-info a {
	color: var(--mdm-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
}

body.mdm-checkout-simple .checkout-login-coupon-wrapper .woocommerce-info::before {
	display: none;
}

body.mdm-checkout-simple .checkout-login-coupon-wrapper form.checkout_coupon,
body.mdm-checkout-simple .checkout-login-coupon-wrapper form.login {
	margin: 8px 0 0;
	padding: 16px;
	border: 1px solid var(--mdm-border);
	border-radius: var(--mdm-radius);
}

/* Foutmeldingen: rustig en leesbaar i.p.v. rode hoofdletters */
body.mdm-checkout-simple .woocommerce-NoticeGroup .woocommerce-error,
body.mdm-checkout-simple .woocommerce-notices-wrapper .woocommerce-error,
body.mdm-checkout-simple .woocommerce-NoticeGroup .wc-block-components-notice-banner.is-error {
	margin: 0 0 24px;
	padding: 14px 18px 14px 18px;
	border: 1px solid #f1c4c4;
	border-left: 4px solid #c62828;
	border-radius: var(--mdm-radius);
	background: #fdf4f4;
	color: #7f1d1d;
	font-size: 14px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	list-style: none;
}

body.mdm-checkout-simple .woocommerce-NoticeGroup .woocommerce-error::before,
body.mdm-checkout-simple .woocommerce-notices-wrapper .woocommerce-error::before {
	display: none;
}

body.mdm-checkout-simple .woocommerce-error li,
body.mdm-checkout-simple .woocommerce-error li a,
body.mdm-checkout-simple .woocommerce-error li strong {
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

body.mdm-checkout-simple .woocommerce-error li {
	padding: 2px 0;
	margin: 0;
}

body.mdm-checkout-simple .woocommerce-error li a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.mdm-checkout-simple form.checkout .form-row .checkout-inline-error-message {
	margin: 6px 0 0;
	font-size: 13px;
	color: #b3261e;
}

/* 7.3 Twee kolommen: gegevens links, overzicht rechts (sticky) */
@media (min-width: 992px) {
	body.mdm-checkout-simple .woocommerce > form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"notices notices"
			"details heading"
			"details review";
		column-gap: 56px;
		overflow: visible;
		padding-top: 24px;
	}
	body.mdm-checkout-simple form.checkout > .woocommerce-NoticeGroup {
		grid-area: notices;
	}
	body.mdm-checkout-simple form.checkout > #customer_details {
		grid-area: details;
	}
	body.mdm-checkout-simple form.checkout > #order_review_heading {
		grid-area: heading;
	}
	body.mdm-checkout-simple form.checkout > #order_review {
		grid-area: review;
		align-self: start;
		position: sticky;
		top: 24px;
	}
	body.mdm-checkout-simple.admin-bar form.checkout > #order_review {
		top: 56px;
	}
	body.mdm-checkout-simple form.checkout > #order_review_heading {
		align-self: end;
	}
}

body.mdm-checkout-simple.woocommerce-checkout #customer_details,
body.mdm-checkout-simple.woocommerce-checkout #order_review,
body.mdm-checkout-simple.woocommerce-checkout #order_review_heading {
	width: auto;
	float: none;
	margin: 0;
}

body.mdm-checkout-simple.woocommerce-checkout #customer_details::before {
	display: none;
}

/* Koppen met stapnummer */
body.mdm-checkout-simple form.checkout {
	counter-reset: mdm-step;
}

body.mdm-checkout-simple .woocommerce-billing-fields > h3,
body.mdm-checkout-simple #order_review_heading {
	counter-increment: mdm-step;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--mdm-ink);
}

body.mdm-checkout-simple .woocommerce-billing-fields > h3::before,
body.mdm-checkout-simple #order_review_heading::before {
	content: counter(mdm-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--mdm-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

body.mdm-checkout-simple .woocommerce-billing-fields > h3::after {
	display: none;
}

/* 7.4 Velden in een strak grid */
body.mdm-checkout-simple .woocommerce-billing-fields__field-wrapper,
body.mdm-checkout-simple .woocommerce-shipping-fields__field-wrapper,
body.mdm-checkout-simple .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

body.mdm-checkout-simple .woocommerce-billing-fields__field-wrapper::before,
body.mdm-checkout-simple .woocommerce-billing-fields__field-wrapper::after,
body.mdm-checkout-simple .woocommerce-shipping-fields__field-wrapper::before,
body.mdm-checkout-simple .woocommerce-shipping-fields__field-wrapper::after {
	display: none;
}

body.mdm-checkout-simple form.checkout .form-row {
	grid-column: 1 / -1;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

body.mdm-checkout-simple form.checkout .form-row-first {
	grid-column: 1;
}

body.mdm-checkout-simple form.checkout .form-row-last {
	grid-column: 2;
}

body.mdm-checkout-simple form.checkout .form-row label {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mdm-ink);
}

body.mdm-checkout-simple form.checkout .form-row .optional {
	color: var(--mdm-muted);
	font-weight: 400;
}

body.mdm-checkout-simple form.checkout .form-row input.input-text,
body.mdm-checkout-simple form.checkout .form-row select,
body.mdm-checkout-simple form.checkout .select2-container .select2-selection--single {
	min-height: 48px;
	font-size: 16px; /* voorkomt inzoomen op iOS */
}

body.mdm-checkout-simple form.checkout .form-row.woocommerce-invalid input.input-text {
	border-color: #c62828;
}

body.mdm-checkout-simple form.checkout .form-row.woocommerce-validated input.input-text {
	border-color: color-mix(in srgb, var(--mdm-success) 55%, var(--mdm-border));
}

body.mdm-checkout-simple .woocommerce .checkout #customer_details .col-2 {
	margin-top: 8px;
}

body.mdm-checkout-simple #ship-to-different-address {
	margin: 20px 0 16px;
	font-size: 15px;
	text-transform: none;
}

body.mdm-checkout-simple #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: var(--mdm-ink);
	cursor: pointer;
}

body.mdm-checkout-simple #ship-to-different-address input {
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mdm-ink);
}

body.mdm-checkout-simple form.checkout .create-account,
body.mdm-checkout-simple form.checkout p.create-account {
	margin-top: 16px;
}

/* 7.5 Overzicht & betalen als kaart */
body.mdm-checkout-simple .woocommerce .checkout #order_review,
body.mdm-checkout-simple #order_review {
	padding: 24px;
	border-radius: var(--mdm-radius-lg);
	background: var(--mdm-soft);
}

body.mdm-checkout-simple .woocommerce .checkout #order_review > table {
	padding: 0;
	border: 0;
	margin: 0 0 20px;
	background: transparent;
}

body.mdm-checkout-simple .woocommerce .checkout #order_review table thead {
	display: none;
}

body.mdm-checkout-simple .woocommerce .checkout #order_review table th,
body.mdm-checkout-simple .woocommerce .checkout #order_review table td {
	padding: 10px 0;
	border-color: var(--mdm-border);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	vertical-align: middle;
}

body.mdm-checkout-simple .woocommerce .checkout #order_review table tbody tr:first-child > * {
	border-top: 0;
}

body.mdm-checkout-simple .woocommerce .checkout #order_review table .order-total th,
body.mdm-checkout-simple .woocommerce .checkout #order_review table .order-total td {
	padding-top: 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--mdm-ink);
	border-bottom: 0;
}

body.mdm-checkout-simple .woocommerce .checkout #order_review table .order-total td * {
	color: var(--mdm-ink);
}

/* Product met afbeelding en aantal-badge */
.mdm-review-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	vertical-align: middle;
	max-width: calc(100% - 8px);
}

.mdm-review-thumb-wrap {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
}

.mdm-review-thumb-wrap img.mdm-review-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--mdm-border);
	background: #fff;
	display: block;
}

.mdm-review-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--mdm-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.mdm-review-name {
	color: var(--mdm-ink);
	font-weight: 500;
	line-height: 1.35;
}

.mdm-review-name dl.variation {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--mdm-muted);
}

/* 7.6 Betaalmethoden als kaarten */
body.mdm-checkout-simple .woocommerce-checkout #payment,
body.mdm-checkout-simple #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

body.mdm-checkout-simple #payment ul.payment_methods {
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 0 0 16px;
	border: 0;
}

body.mdm-checkout-simple .woocommerce-checkout #payment ul.payment_methods li,
body.mdm-checkout-simple #payment ul.payment_methods li {
	position: relative;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--mdm-border);
	border-radius: var(--mdm-radius);
	background: #fff;
	list-style: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.mdm-checkout-simple #payment ul.payment_methods li:hover {
	border-color: color-mix(in srgb, var(--mdm-ink) 40%, var(--mdm-border));
}

body.mdm-checkout-simple #payment ul.payment_methods li:has(> input:checked) {
	border-color: var(--mdm-ink);
	box-shadow: 0 0 0 1px var(--mdm-ink);
}

body.mdm-checkout-simple #payment ul.payment_methods li > input[type="radio"] {
	position: static;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: middle;
	accent-color: var(--mdm-ink);
}

body.mdm-checkout-simple #payment ul.payment_methods li > label {
	display: inline;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mdm-ink);
	cursor: pointer;
}

/* Hele kaart klikbaar */
body.mdm-checkout-simple #payment ul.payment_methods li > label::after {
	content: "";
	position: absolute;
	inset: 0;
}

body.mdm-checkout-simple #payment ul.payment_methods li > label img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 8px;
	vertical-align: middle;
	float: right;
}

body.mdm-checkout-simple #payment div.payment_box {
	position: relative;
	z-index: 1;
	margin: 10px 0 0;
	padding: 0;
	background: transparent;
	color: var(--mdm-text);
	font-size: 13px;
	line-height: 1.5;
}

body.mdm-checkout-simple #payment div.payment_box::before {
	display: none;
}

body.mdm-checkout-simple #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* Privacy/voorwaarden kleiner */
body.mdm-checkout-simple .woocommerce-terms-and-conditions-wrapper,
body.mdm-checkout-simple .woocommerce-privacy-policy-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--mdm-text);
}

body.mdm-checkout-simple .woocommerce-privacy-policy-text p {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: 12px;
}

body.mdm-checkout-simple .woocommerce-privacy-policy-text a {
	color: inherit;
}

/* 7.7 Grote bestelknop met slotje */
body.mdm-checkout-simple #payment .place-order {
	padding: 0;
	margin: 0;
}

body.mdm-checkout-simple .woocommerce #payment #place_order,
body.mdm-checkout-simple #payment #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	float: none;
	min-height: 56px;
	padding: 14px 20px;
	margin: 4px 0 0;
	border: 0;
	border-radius: var(--mdm-radius);
	background: var(--mdm-cart);
	color: var(--mdm-on-cart);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: var(--mdm-shadow);
}

body.mdm-checkout-simple .woocommerce #payment #place_order::before,
body.mdm-checkout-simple #payment #place_order::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--mdm-icon-lock) center / contain no-repeat;
	mask: var(--mdm-icon-lock) center / contain no-repeat;
}

body.mdm-checkout-simple .woocommerce #payment #place_order:hover,
body.mdm-checkout-simple #payment #place_order:hover {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	color: var(--mdm-on-cart);
	box-shadow: var(--mdm-shadow-hover);
}

/* 7.8 Mobiel */
@media (max-width: 991px) {
	body.mdm-checkout-simple .woocommerce > form.checkout {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	body.mdm-checkout-simple #order_review_heading {
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	body.mdm-checkout-simple .woocommerce-billing-fields__field-wrapper,
	body.mdm-checkout-simple .woocommerce-shipping-fields__field-wrapper {
		gap: 14px 12px;
	}
	body.mdm-checkout-simple .woocommerce .checkout #order_review,
	body.mdm-checkout-simple #order_review {
		padding: 18px 16px;
		margin-left: -4px;
		margin-right: -4px;
	}
	body.mdm-checkout-simple .woocommerce-billing-fields > h3,
	body.mdm-checkout-simple #order_review_heading {
		font-size: 20px;
	}
}

/* 7.9 Bedankpagina */
body.mdm .woocommerce-order .woocommerce-thankyou-order-received {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 28px;
	padding: 16px 20px;
	border-radius: var(--mdm-radius);
	background: color-mix(in srgb, var(--mdm-success) 10%, #fff);
	color: var(--mdm-ink);
	font-size: 17px;
	font-weight: 600;
}

body.mdm .woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mdm-success) var(--mdm-icon-check-white) center / 16px no-repeat;
}

/* --------------------------------------------------------------------------
   8. Afleidingsvrije checkout: alleen logo in de header, geen footer
   -------------------------------------------------------------------------- */

body.mdm-checkout-focus .ts-header .menu-wrapper,
body.mdm-checkout-focus .ts-header .header-right,
body.mdm-checkout-focus .ts-header .ts-mobile-icon-toggle,
body.mdm-checkout-focus .ts-header .header-top,
body.mdm-checkout-focus .ts-header .header-bottom,
body.mdm-checkout-focus #colophon,
body.mdm-checkout-focus #ts-mobile-button-bottom {
	display: none !important;
}

body.mdm-checkout-focus:not(.ts_desktop) {
	padding-bottom: 0;
}

body.mdm-checkout-focus .ts-header .header-middle .header-container > * {
	justify-content: center;
}

body.mdm-checkout-focus .ts-header .logo-wrapper {
	margin: 0 auto;
	float: none;
}

body.mdm-checkout-focus .breadcrumb-title-wrapper .breadcrumb-title h1,
body.mdm-checkout-focus .breadcrumb-title-wrapper .breadcrumb-title .heading-title {
	font-size: 32px;
}

body.mdm-checkout-focus #main-content {
	padding-bottom: 64px;
}

/* --------------------------------------------------------------------------
   9. WooCommerce Checkout/Cart blocks (als de pagina blocks gebruikt)
   -------------------------------------------------------------------------- */

body.mdm .wc-block-components-checkout-place-order-button,
body.mdm .wc-block-cart__submit-button,
body.mdm .wc-block-mini-cart__footer-checkout {
	min-height: 56px;
	border-radius: var(--mdm-radius);
	background: var(--mdm-cart);
	border-color: var(--mdm-cart);
	color: var(--mdm-on-cart);
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
}

body.mdm .wc-block-components-checkout-place-order-button:hover,
body.mdm .wc-block-cart__submit-button:hover {
	background: color-mix(in srgb, var(--mdm-cart) 86%, #000);
	color: var(--mdm-on-cart);
}

body.mdm .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.mdm .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--mdm-ink);
	border-radius: var(--mdm-radius);
}

body.mdm .wc-block-checkout .wc-block-components-text-input input,
body.mdm .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: var(--mdm-radius);
}

/* --------------------------------------------------------------------------
   10. Hover-iconen (quick view, vergelijk, wishlist) passend bij ronde hoeken
   -------------------------------------------------------------------------- */

body.mdm .thumbnail-wrapper .product-group-button {
	right: 8px;
	bottom: 8px;
}

body.mdm .thumbnail-wrapper .product-group-button > div {
	margin-top: 4px;
}

body.mdm .thumbnail-wrapper .product-group-button > div a {
	border-radius: 8px;
	box-shadow: var(--mdm-shadow);
}