/* ============================================================
   DE MOESTUIN — WooCommerce skin
   Trekt de standaard Woo shop-/mandje-/checkoutpagina's in het
   terracotta/groen-design. Raakt uitsluitend .woocommerce*-
   elementen, dus veilig naast de bestaande themastijlen.
   Design-tokens komen uit colors_and_type.css.
   ============================================================ */

.woocommerce,
.woocommerce-page {
	font-family: var(--dm-font-body);
	color: var(--dm-ink-2);
}

/* ---- Koppen --------------------------------------------------- */
.woocommerce .woocommerce-products-header__title,
.woocommerce h1,
.woocommerce h2,
.woocommerce .product_title {
	font-family: var(--dm-font-display);
	font-weight: var(--dm-display-weight);
	color: var(--dm-ink);
	letter-spacing: var(--dm-display-spacing);
}

/* ---- Productgrid (shop loop) ---------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--dm-bg-alt);
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	padding: 1rem 1rem 1.4rem;
	box-shadow: var(--dm-shadow-sm);
	transition: transform .3s var(--dm-ease), box-shadow .3s var(--dm-ease);
	overflow: hidden;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--dm-shadow-md);
}
.woocommerce ul.products li.product a img {
	border-radius: var(--dm-r-sm);
	margin-bottom: 1rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--dm-font-display);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--dm-ink);
	padding: 0;
}
.woocommerce ul.products li.product .price {
	color: var(--dm-terracotta-deep);
	font-family: var(--dm-font-body);
	font-weight: 600;
	font-size: 1.05rem;
}
.woocommerce ul.products li.product .price del { color: var(--dm-ink-3); font-weight: 400; }

/* ---- Categoriefilter / widgets -------------------------------- */
.woocommerce .widget_product_categories ul,
.woocommerce ul.product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.product-categories a {
	color: var(--dm-ink-2);
	text-decoration: none;
	letter-spacing: var(--dm-eyebrow-spacing);
	text-transform: uppercase;
	font-size: .82rem;
}
.woocommerce ul.product-categories a:hover { color: var(--dm-terracotta); }

/* ---- Knoppen — overal de De Moestuin "pil" -------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	font-family: var(--dm-font-eyebrow);
	font-weight: 500;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--dm-terracotta);
	color: var(--dm-primary-ink);
	border: 1.5px solid transparent;
	border-radius: var(--dm-r-pill);
	padding: .85em 1.7em;
	cursor: pointer;
	transition: background var(--dm-dur) var(--dm-ease),
		transform .3s var(--dm-ease),
		box-shadow .3s var(--dm-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--dm-terracotta-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(168, 85, 31, .28);
	color: var(--dm-primary-ink);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce #place_order:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* Secundaire knoppen (bv. "Mandje bijwerken") in groen */
.woocommerce button[name="update_cart"],
.woocommerce .button.wc-backward {
	background: var(--dm-green);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce .button.wc-backward:hover {
	background: var(--dm-green-deep);
	box-shadow: 0 10px 22px rgba(58, 84, 48, .28);
}

/* ---- Mandje- en checkouttabellen ------------------------------ */
.woocommerce table.shop_table {
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	overflow: hidden;
	background: var(--dm-bg-alt);
}
.woocommerce table.shop_table th {
	font-family: var(--dm-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .78rem;
	color: var(--dm-ink);
}
.woocommerce table.shop_table td { color: var(--dm-ink-2); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--dm-font-display);
	color: var(--dm-ink);
}

/* ---- Formuliervelden ------------------------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
	border: 1.5px solid var(--dm-line);
	border-radius: var(--dm-r-sm);
	background: var(--dm-offwhite);
	color: var(--dm-ink);
	padding: .7em .9em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
	outline: none;
	border-color: var(--dm-terracotta);
	box-shadow: 0 0 0 3px rgba(207, 120, 59, .15);
}

/* ---- Meldingen ------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--dm-terracotta);
	background: var(--dm-terracotta-wash);
	border-radius: var(--dm-r-sm);
	color: var(--dm-ink);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--dm-terracotta); }

/* ---- Prijs op single product ---------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dm-terracotta-deep);
	font-weight: 600;
}

/* ---- Badges (sale/out of stock) ------------------------------- */
.woocommerce span.onsale {
	background: var(--dm-green);
	color: var(--dm-primary-ink);
	border-radius: var(--dm-r-pill);
	font-family: var(--dm-font-eyebrow);
	letter-spacing: .08em;
}

/* ============================================================
   Eigen-ontwerp winkelarchief (template-override content-product.php)
   De kaarten erven .dm-shop__* uit site.css; hier alleen de
   WooCommerce-grid-wrapper en de knop binnen de kaart.
   ============================================================ */
.dm-shop__layout > .wp-block-group { min-width: 0; }
.dm-shop__layout ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.dm-shop__layout ul.products::before,
.dm-shop__layout ul.products::after { content: none; }
/* Responsief: 4 (desktop) -> 3 (<=1080px) -> 2 (<=680px). */
@media (max-width: 1080px) { .dm-shop__layout ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .dm-shop__layout ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.dm-shop__card .dm-shop__add { width: 100%; text-align: center; }
.dm-shop__card .added_to_cart { display: none; }
.dm-shop__empty { color: var(--dm-ink-3); padding: 2rem 0; }
/* Naam + foto zijn nu links (naar de productpagina): geen blauwe link-stijl */
.dm-shop__card a { color: inherit; text-decoration: none; }
.dm-shop__card .dm-shop__name a:hover { color: var(--dm-terracotta); }

/* ---- Productdetailpagina: foto links, info rechts ------------- */
.dm-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}
.dm-product div.product .dm-product__media { min-width: 0; margin: 0; }
.dm-product div.product .woocommerce-product-gallery { margin: 0; }
/* WooCommerce verbergt de galerij (opacity:0) tot de slider-JS draait; die
   JS laadt niet op ons block-thema met geforceerde klassieke template. Onze
   producten hebben één foto, dus we tonen 'm statisch en verbergen het
   JS-afhankelijke zoom-icoon. */
.dm-product div.product .woocommerce-product-gallery { opacity: 1 !important; }
.dm-product div.product .woocommerce-product-gallery__trigger { display: none; }
.dm-product div.product .woocommerce-product-gallery img { border-radius: var(--dm-r-md); }
.dm-product div.product .summary { margin: 0; }
/* Titel/prijs/knop in de samenvatting netjes gespatieerd */
.dm-product div.product .summary .product_title { margin: 0 0 .6rem; }
.dm-product div.product .summary p.price { margin: 0 0 1.2rem; font-size: 1.5rem; }
.dm-product div.product .summary form.cart { margin: 1.2rem 0 1.4rem; }
.dm-product div.product .summary .product_meta { margin-top: 1.2rem; font-size: .85rem; color: var(--dm-ink-3); }
.dm-product div.product .summary .product_meta a { color: var(--dm-terracotta); text-decoration: none; }
.dm-product div.product .summary .product_meta a:hover { color: var(--dm-terracotta-deep); text-decoration: underline; }
/* Lange beschrijving onder de twee kolommen */
.dm-product__desc {
	margin-top: 2.6rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--dm-line);
	max-width: 70ch;
	font-family: var(--dm-font-body);
	line-height: 1.7;
	color: var(--dm-ink-2);
}
@media (max-width: 720px) {
	.dm-product div.product { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOK-MANDJE & BLOK-CHECKOUT  (Roy koos het afreken-blok)
   De block-pagina's gebruiken .wc-block-*-markup i.p.v. de
   klassieke .shop_table/.form-row hierboven, dus dit is een
   aparte laag. WooCommerce' eigen CSS is vrij specifiek →
   een paar !important's zijn nodig om de tokens te laten winnen.
   ============================================================ */

/* ---- Koppen (stap-titels, "Besteloverzicht", mandje-totalen) - */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--dm-font-display) !important;
	font-weight: 600;
	color: var(--dm-ink);
	letter-spacing: var(--dm-display-spacing);
}

/* ---- Primaire knoppen: de terracotta-pil ---------------------
   Dekt "Plaats bestelling" én "Doorgaan naar afrekenen". */
.wc-block-components-button.contained,
.wc-block-cart__submit-container .wc-block-components-button,
a.wc-block-components-button.wp-element-button.contained {
	background: var(--dm-terracotta) !important;
	color: var(--dm-primary-ink) !important;
	border: 1.5px solid transparent !important;
	border-radius: var(--dm-r-pill) !important;
	font-family: var(--dm-font-eyebrow);
	font-weight: 500;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background var(--dm-dur) var(--dm-ease),
		transform .3s var(--dm-ease), box-shadow .3s var(--dm-ease);
}
.wc-block-components-button.contained:hover {
	background: var(--dm-terracotta-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(168, 85, 31, .28);
}
.wc-block-components-button.contained:active { transform: translateY(0) scale(.98); box-shadow: none; }
.wc-block-components-button.contained .wc-block-components-button__text { color: inherit; }

/* Tekst-/link-knoppen (bv. "Bewerken", "Coupon toevoegen") in terracotta */
.wc-block-components-button.is-link,
.wc-block-components-totals-coupon-link,
.wc-block-checkout__use-address-for-billing a { color: var(--dm-terracotta) !important; }

/* ---- Invoervelden + selects + combobox ------------------------ */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container {
	border: 1.5px solid var(--dm-line) !important;
	border-radius: var(--dm-r-sm) !important;
	background: var(--dm-offwhite) !important;
	color: var(--dm-ink) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox.is-active .components-form-token-field__input-container,
.wc-block-components-select .wc-block-components-select__container:focus-within {
	border-color: var(--dm-terracotta) !important;
	box-shadow: 0 0 0 3px rgba(207, 120, 59, .15) !important;
	outline: none;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label { color: var(--dm-ink-3); }
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step__description { color: var(--dm-ink-2); }

/* ---- Verzend- en betaalopties (radiokaarten) ------------------ */
.wc-block-components-radio-control__option {
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-sm);
	margin-bottom: .6rem;
	padding: .9rem 1rem .9rem 2.6rem;
	background: var(--dm-offwhite);
	transition: border-color .25s var(--dm-ease), background .25s var(--dm-ease);
}
.wc-block-components-radio-control__option:hover { border-color: var(--dm-terracotta-tint); }
.wc-block-components-radio-control__option-checked {
	border-color: var(--dm-terracotta);
	background: var(--dm-terracotta-wash);
}
.wc-block-components-radio-control__input { accent-color: var(--dm-terracotta); }
.wc-block-components-radio-control__label { color: var(--dm-ink); }

/* ---- Bestel-/mandje-overzicht als crème-kaart ----------------- */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: var(--dm-bg-alt);
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	padding: 1.4rem 1.5rem;
	box-shadow: var(--dm-shadow-sm);
}

/* ---- Totalen -------------------------------------------------- */
.wc-block-components-totals-item { color: var(--dm-ink-2); }
.wc-block-components-totals-item__label { color: var(--dm-ink-2); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	font-family: var(--dm-font-display);
	font-weight: 600;
	color: var(--dm-terracotta-deep);
}
.wc-block-components-product-price,
.wc-block-components-order-summary-item__total .wc-block-components-formatted-money-amount {
	color: var(--dm-terracotta-deep);
	font-weight: 600;
}
.wc-block-components-product-name { color: var(--dm-ink); }

/* ---- Mandje-regeltabel (block) -------------------------------- */
.wc-block-cart-items__header {
	font-family: var(--dm-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .74rem;
	color: var(--dm-ink);
}
.wc-block-cart-item__product-name a { color: var(--dm-ink); text-decoration: none; }
.wc-block-cart-item__product-name a:hover { color: var(--dm-terracotta); }

/* ============================================================
   BEDANKPAGINA — block "Order Confirmation" (.wc-block-order-
   confirmation-*). Header/footer + paginatitel erven al de skin;
   hier de samenvattingsregel, totalentabel en adresblokken.
   ============================================================ */
.wc-block-order-confirmation-status {
	font-family: var(--dm-font-display);
	color: var(--dm-ink);
}

/* Samenvattingsregel: Bestelling # · Datum · Totaal · E-mail · Betaling */
.wc-block-order-confirmation-summary-list {
	list-style: none;
	margin: 1.4rem 0 2rem;
	padding: 1.3rem 1.5rem;
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	background: var(--dm-bg-alt);
	display: flex;
	flex-wrap: wrap;
	gap: 1.3rem 2.6rem;
}
.wc-block-order-confirmation-summary-list-item { margin: 0; padding: 0; }
.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	font-family: var(--dm-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--dm-eyebrow-spacing);
	font-size: .66rem;
	color: var(--dm-ink-3);
	margin-bottom: .35rem;
}
.wc-block-order-confirmation-summary-list-item__value {
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--dm-ink);
}

/* Totalentabel */
.wc-block-order-confirmation-totals__table {
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--dm-bg-alt);
}
.wc-block-order-confirmation-totals__table th {
	font-family: var(--dm-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .74rem;
	color: var(--dm-ink);
}
.wc-block-order-confirmation-totals__table td { color: var(--dm-ink-2); }
/* Productlink niet meer browser-blauw */
.wc-block-order-confirmation-totals__product a,
.wc-block-order-confirmation-totals a {
	color: var(--dm-ink);
	text-decoration: none;
}
.wc-block-order-confirmation-totals__product a:hover { color: var(--dm-terracotta); }

/* Adresblokken als zachte kaart */
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
	border: 1px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	background: var(--dm-bg-alt);
	padding: 1rem 1.2rem;
	color: var(--dm-ink-2);
}

/* ============================================================
   MIJN ACCOUNT  (klassieke .woocommerce-MyAccount-*)
   Standaard zijn de navigatie- en inline-links browser-blauw;
   hier in de huisstijl getrokken.
   ============================================================ */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0 0 .2rem; }
.woocommerce-MyAccount-navigation li a {
	display: inline-block;
	font-family: var(--dm-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .82rem;
	font-weight: 500;
	color: var(--dm-ink-2);
	text-decoration: none;
	padding: .35rem 0;
	transition: color .25s var(--dm-ease);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a { color: var(--dm-terracotta); }
.woocommerce-MyAccount-content a { color: var(--dm-terracotta); text-decoration: underline; }
.woocommerce-MyAccount-content a:hover { color: var(--dm-terracotta-deep); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .addresses .woocommerce-Address-title h3 {
	font-family: var(--dm-font-display);
	color: var(--dm-ink);
}

/* ============================================================
   AFWERKING 27/6 — winkel/product/mandje opfrissing.
   Staat bewust achteraan: overschrijft de regels hierboven via
   bronvolgorde + gelijke/hogere specificiteit.
   ============================================================ */

/* B3 — Productfoto's staand (langwerpig). De sidebar-layout maakt de
   kolommen breder, waardoor de vaste 320px-hoogte uit site.css te
   vierkant oogde; een vaste verhouding houdt de flessen mooi staand. */
.dm-shop__layout .dm-shop__card .dm-shop__photo { height: auto; aspect-ratio: 3 / 4; }

/* C2 — Foto groter: bredere linkerkolom op de productdetailpagina. */
.dm-product div.product { grid-template-columns: 1.2fr 0.85fr; gap: 2.8rem; }

/* C1 — Lange beschrijving staat nu in de rechterkolom (summary) i.p.v.
   full-width onder de foto: reset de oude full-width-opmaak. */
.dm-product div.product .summary .dm-product__desc {
	margin: 0 0 1.4rem;
	padding: 0;
	border: 0;
	max-width: none;
	font-family: var(--dm-font-body);
	line-height: 1.7;
	color: var(--dm-ink-2);
}
.dm-product div.product .summary .dm-product__desc p { margin: 0 0 .8rem; }
.dm-product div.product .summary .dm-product__desc > :last-child { margin-bottom: 0; }

/* C3 — Hoeveelheidsveld + knop in de huisstijl (was een kaal number-input). */
.dm-product div.product .summary form.cart {
	margin: 1.2rem 0 1.4rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
}
.dm-product div.product .summary .quantity { margin: 0; }
.dm-product div.product .summary .quantity .qty {
	width: 76px;
	height: 48px;
	border: 1.5px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	background: var(--dm-offwhite);
	color: var(--dm-ink);
	font-family: var(--dm-font-body);
	font-size: 1rem;
	text-align: center;
	padding: 0 .4em;
	transition: border-color .25s var(--dm-ease), box-shadow .25s var(--dm-ease);
}
.dm-product div.product .summary .quantity .qty:focus {
	outline: none;
	border-color: var(--dm-terracotta);
	box-shadow: 0 0 0 3px var(--dm-terracotta-wash);
}

/* C4 — "Toegevoegd aan winkelwagen"-melding in de huisstijl. WooCommerce 10.x
   rendert deze als blok-notice (.wc-block-components-notice-banner.is-success,
   standaard groen); wij maken 'm terracotta + de "Bekijk winkelwagen"-link een
   pil (homepage-CTA-look). De klassieke .woocommerce-message ook meegenomen. */
.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	background: var(--dm-terracotta-wash) !important;
	border: 1px solid var(--dm-terracotta-tint) !important;
	border-left: 4px solid var(--dm-terracotta) !important;
	border-radius: var(--dm-r-md) !important;
	color: var(--dm-ink) !important;
}
.wc-block-components-notice-banner.is-success > svg { fill: var(--dm-offwhite) !important; background: var(--dm-terracotta) !important; }
.wc-block-components-notice-banner__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem 1.2rem;
	flex-wrap: wrap;
	font-family: var(--dm-font-body);
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button,
.woocommerce-message a.wc-forward,
.woocommerce-message .button {
	display: inline-block !important;
	font-family: var(--dm-font-eyebrow);
	font-weight: 500;
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--dm-terracotta) !important;
	color: var(--dm-primary-ink) !important;
	border: 1.5px solid transparent !important;
	border-radius: var(--dm-r-pill) !important;
	padding: .6em 1.3em !important;
	text-decoration: none !important;
	transition: background var(--dm-dur) var(--dm-ease), transform .3s var(--dm-ease), box-shadow .3s var(--dm-ease);
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward:hover,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-message .button:hover {
	background: var(--dm-terracotta-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(168, 85, 31, .28);
	color: var(--dm-primary-ink) !important;
}

/* G — Cadeaubon eigen-bedrag-veld op de productpagina (huisstijl). */
.dm-gc-amount { margin: 0 0 1.2rem; }
.dm-gc-presets { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.dm-gc-preset {
	font-family: var(--dm-font-eyebrow);
	font-size: .8rem;
	letter-spacing: .04em;
	padding: .5em 1.1em;
	border-radius: var(--dm-r-pill);
	border: 1.5px solid var(--dm-line);
	background: #fff;
	color: var(--dm-ink);
	cursor: pointer;
	transition: all .25s var(--dm-ease);
}
.dm-gc-preset:hover { border-color: var(--dm-terracotta-tint); color: var(--dm-terracotta); }
.dm-gc-amount label {
	display: block;
	font-family: var(--dm-font-eyebrow);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dm-ink-3);
	margin: 0 0 .4rem;
}
.dm-gc-amount input[type="number"] {
	width: 150px;
	height: 48px;
	border: 1.5px solid var(--dm-line);
	border-radius: var(--dm-r-md);
	background: var(--dm-offwhite);
	color: var(--dm-ink);
	font-family: var(--dm-font-body);
	font-size: 1.05rem;
	text-align: center;
	padding: 0 .5em;
}
.dm-gc-amount input[type="number"]:focus {
	outline: none;
	border-color: var(--dm-terracotta);
	box-shadow: 0 0 0 3px var(--dm-terracotta-wash);
}

/* D2 — Vaste header (.dm-nav position:fixed) overlapte de blok-mandje/
   checkout/account-pagina's; die renderen direct in .wp-site-blocks en
   missen de .dm-section--page-spacer (padding-top:150px) van onze eigen
   templates, waardoor de titel over het logo viel. */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-account .wp-site-blocks { padding-top: 120px; }
@media (max-width: 920px) {
	body.woocommerce-cart .wp-site-blocks,
	body.woocommerce-checkout .wp-site-blocks,
	body.woocommerce-account .wp-site-blocks { padding-top: 88px; }
}

/* Blok-mandje/checkout/account op de standaard site-breedte (1280px + 40px
   zijpadding, net als .dm-wrap/nav/footer). De WooCommerce page-content-wrapper
   <main> draagt wél is-layout-constrained maar mist de wp-container-hash →
   de contentSize-begrenzing grijpt niet, waardoor de inhoud de volle viewport
   spande (breder dan header/footer). We begrenzen de main zelf. (Mobiele
   20px-padding overschrijft dit onderaan via dezelfde selector, ≤600px.) */
body.woocommerce-cart .wp-site-blocks > main,
body.woocommerce-checkout .wp-site-blocks > main,
body.woocommerce-account .wp-site-blocks > main {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

/* F — 18+-vinkje alléén tonen als het mandje een gin bevat. De body-class
   dm-cart-18 wordt server-side gezet (inc/woocommerce.php). Standaard verborgen. */
body:not(.dm-cart-18) .wc-block-components-address-form__demoestuin-age-18 { display: none !important; }

/* C-fix — geen zwarte focus-rand rond de "toegevoegd aan winkelwagen"-melding
   (de blok-notice krijgt programmatisch focus → focus-outline). */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible { outline: none !important; box-shadow: none !important; }

/* D-fix — productfoto vult nu de linkerkolom. WooCommerce beperkt de galerij
   standaard tot 48% breedte, wat veel witruimte tussen foto en tekst gaf. */
.dm-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
.dm-product div.product .woocommerce-product-gallery__wrapper,
.dm-product div.product .woocommerce-product-gallery img { width: 100%; }

/* E — Verzenden|Afhalen-schakelaar in de huisstijl: afgeronde hoeken + een
   cohesieve terracotta selected-staat (zoals de radio-kaarten eronder), i.p.v.
   de hoekige WooCommerce-default. */
.wc-block-checkout__shipping-method { gap: .6rem !important; }
.wc-block-checkout__shipping-method-option {
	border-radius: var(--dm-r-md) !important;
	border: 1.5px solid var(--dm-line) !important;
	background: var(--dm-offwhite) !important;
	transition: border-color .25s var(--dm-ease), background .25s var(--dm-ease);
}
.wc-block-checkout__shipping-method-option:hover { border-color: var(--dm-terracotta-tint) !important; }
.wc-block-checkout__shipping-method-option--selected {
	border-color: var(--dm-terracotta) !important;
	background: var(--dm-terracotta-wash) !important;
}

/* G — checkout-kop in de huisstijl: mandje-icoon terracotta (was browser-blauw)
   + de site-titel in het Cormorant-display-lettertype. */
.wc-block-cart-link { color: var(--dm-terracotta) !important; }
.wp-block-site-title,
.wp-block-site-title a {
	font-family: var(--dm-font-display) !important;
	font-weight: 600;
	color: var(--dm-ink) !important;
	text-decoration: none;
}

/* ============================================================
   CHECKOUT — volledige huisstijl-afwerking (afgeronde kaarten +
   kleurschema). !important omdat WooCommerce' blok-CSS later laadt
   en de eerdere niet-important regels overschreef.
   ============================================================ */

/* Alle keuze-opties (verzending + betaling) als afgeronde, los gescheiden
   kaarten met terracotta selected-staat. Betaalmethodes zitten in een extra
   accordion-wrapper die we neutraliseren, zodat de binnenste kaart overblijft —
   zo zien betaal- en verzendopties er identiek uit. */
.wc-block-components-radio-control__option {
	border: 1.5px solid var(--dm-line) !important;
	border-radius: var(--dm-r-md) !important;
	margin-bottom: .55rem !important;
	background: var(--dm-offwhite) !important;
	transition: border-color .25s var(--dm-ease), background .25s var(--dm-ease);
}
.wc-block-components-radio-control__option:hover { border-color: var(--dm-terracotta-tint) !important; }
.wc-block-components-radio-control__option-checked {
	border-color: var(--dm-terracotta) !important;
	background: var(--dm-terracotta-wash) !important;
}
.wc-block-components-radio-control-accordion-option {
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}
.wc-block-components-radio-control-accordion-content { padding: .1rem 1rem 1rem 2.6rem; }
.wc-block-components-radio-control__input { accent-color: var(--dm-terracotta); }

/* Besteloverzicht — verzorgde huisstijl-kaart. */
.wc-block-components-order-summary-item { padding: .65rem 0 !important; }
.wc-block-components-order-summary-item__quantity span {
	background: var(--dm-terracotta) !important;
	color: var(--dm-primary-ink) !important;
}
.wc-block-components-product-metadata { color: var(--dm-ink-3); }
.wc-block-checkout__sidebar .wc-block-components-product-name { font-family: var(--dm-font-display); font-weight: 600; }

/* A — lege-mandje-pagina in de huisstijl (de standaard smiley + "leeg" + de
   "Nieuw in de winkel"-aanbevelingen worden via een render_block-filter in
   inc/woocommerce.php vervangen door deze boodschap + twee CTA's). */
.dm-empty-cart { text-align: center; padding: 1.5rem 0 3rem; }
.dm-empty-cart__msg {
	font-family: var(--dm-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 1.95rem);
	color: var(--dm-ink);
	margin: 0 0 1.9rem;
}
.dm-empty-cart__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   AFWERKING 27/6 (nacht) — webshop ↔ site styling-consistentie.
   Doel: mandje/checkout exact in de taal van de rest van de site
   (homepage, reserveer-formulier). Referentie-tokens gemeten op de
   site: .dm-input (velden), .dm-field-lab (labels), .dm-chip/.dm-toggle
   (pillen). Staat achteraan zodat het de eerdere lagen overschrijft.
   ============================================================ */

/* — Velden exact als .dm-input op de site: 18px-radius (--dm-r-md),
   wit i.p.v. offwhite, terracotta-wash focus-ring. Gold voor checkout-
   én mandje-velden (e-mail, adres, coupon, ordernotitie, selects). */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-combobox .components-form-token-field__input-container {
	border-radius: var(--dm-r-md) !important;
	background: #fff !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox.is-active .components-form-token-field__input-container,
.wc-block-components-select .wc-block-components-select__container:focus-within {
	border-color: var(--dm-terracotta) !important;
	box-shadow: 0 0 0 3px var(--dm-terracotta-wash) !important;
}

/* — Stap-titels (Contactgegevens, Levering, …) krachtiger, zoals de
   zelfverzekerde koppen elders op de site (WooCommerce drukt ze standaard
   plat op ~15px/500; wij geven ze presence). */
.wc-block-components-checkout-step__title {
	font-size: 1.18rem !important;
	font-weight: 600 !important;
	letter-spacing: var(--dm-display-spacing);
}

/* — Mandje: hoeveelheidsstepper als zachte pil i.p.v. de hoekige 4px-
   WooCommerce-default; veld erft Raleway (was Arial), knoppen krijgen een
   terracotta hover zoals de chips/pillen elders. */
.wc-block-components-quantity-selector {
	border-radius: var(--dm-r-pill) !important;
	border: 1.5px solid var(--dm-line) !important;
	background: #fff !important;
	overflow: hidden;
}
.wc-block-components-quantity-selector__input {
	font-family: var(--dm-font-body) !important;
	color: var(--dm-ink) !important;
	background: transparent !important;
}
.wc-block-components-quantity-selector__button {
	color: var(--dm-ink-2);
	transition: color .2s var(--dm-ease), background .2s var(--dm-ease);
}
.wc-block-components-quantity-selector__button:hover {
	color: var(--dm-terracotta);
	background: var(--dm-terracotta-wash);
}

/* — Mandje: productnaam geen browser-onderstreping (was underline); de
   rest van de site gebruikt nergens onderstreepte links. */
.wc-block-components-product-name { text-decoration: none !important; }
a.wc-block-components-product-name:hover { color: var(--dm-terracotta) !important; }

/* ============================================================
   AFWERKING 28/6 — mandje + checkout + productpagina (Roy's batch).
   Staat achteraan zodat het de eerdere lagen overschrijft.
   ============================================================ */

/* — "Winkelwagen"/"Afrekenen"-paginatitel: de standaard h1 (Cormorant-display)
   i.p.v. de WP-default Raleway/32px, en strak naar boven uitgelijnd. */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
	font-family: var(--dm-font-display) !important;
	font-weight: 500;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	color: var(--dm-ink);
	margin-top: 0;
	text-align: left;
}

/* — Mandje-productfoto in dezelfde staande 3/4-verhouding als de webshopkaart
   (was een 80×80 vierkant). */
.wc-block-cart-item__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	height: auto;
	border-radius: var(--dm-r-sm);
}

/* — Mobiel: 20px ademruimte links/rechts op mandje + checkout (stond strak
   tegen de schermrand omdat de block-pagina's geen root-padding hebben). */
@media (max-width: 600px) {
	body.woocommerce-cart .wp-site-blocks > main,
	body.woocommerce-checkout .wp-site-blocks > main {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* — Invoervelden: ruimere horizontale padding zodat tekst + zwevend label
   netjes inspringen (was 9px → tekst plakte aan de rand). */
.wc-block-components-text-input input {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.wc-block-components-text-input label { left: 16px !important; }

/* — Levering, Verzendopties en Betalingsopties als consistente, licht-grijze
   panelen met padding + dezelfde radius als de rest van de pagina. */
.wc-block-checkout__shipping-method,
.wc-block-checkout__shipping-option,
.wc-block-checkout__payment-method {
	background: #ece8e1 !important;
	border-radius: var(--dm-r-md) !important;
	padding: 1.15rem 1.25rem 1.3rem !important;
}

/* — Verzendadres-kaart: dezelfde radius als de rest (was 4px). */
.wc-block-components-address-card {
	border-radius: var(--dm-r-md) !important;
}

/* — Verzend-/betaalkeuzes: geen losse (donkere) rand meer rond elke optie —
   de terracotta selected-staat is al de aanduiding. Witte kaartjes op het
   grijze paneel geven genoeg scheiding. */
.wc-block-components-radio-control__option {
	background: #fff !important;
	border-color: transparent !important;
}
.wc-block-components-radio-control__option-checked {
	border-color: var(--dm-terracotta) !important;
	background: var(--dm-terracotta-wash) !important;
}

/* — Mobiel: "In mandje"-knop op winkelkaarten een ruimer touch-target. */
@media (max-width: 680px) {
	.dm-shop__card .dm-shop__add { padding: .7em 1em; font-size: .7rem; min-height: 40px; }
}

/* — Productpagina MOBIEL: herordening tot Titel → Foto → Tekst → Prijs → In
   mandje. display:contents tilt de .summary-kinderen op tot flex-items van de
   product-container zodat de titel bóven de foto kan en de prijs eronder. */
@media (max-width: 720px) {
	.dm-product div.product { display: flex; flex-direction: column; gap: 0; }
	.dm-product div.product .dm-product__media { order: 2; margin: 0 0 1.4rem; }
	.dm-product div.product .summary { display: contents; }
	.dm-product div.product .summary .product_title { order: 1; margin: 0 0 1rem; }
	.dm-product div.product .summary .woocommerce-product-details__short-description { order: 3; }
	.dm-product div.product .summary .dm-product__desc { order: 4; }
	.dm-product div.product .summary p.price { order: 5; margin: .4rem 0 1.2rem; }
	.dm-product div.product .summary form.cart { order: 6; }
	.dm-product div.product .summary .product_meta { order: 7; }
}

/* ============================================================
   AFWERKING 28/6 (deel 2) — checkout-opties + Besteloverzicht.
   ============================================================ */

/* — Weg met WooCommerce' grijze 1,5px inset-rand (boxShadow charcoal) op de
   keuze-opties; die zat op de gekozen verzend-/betaaloptie en oogde als een
   vuile rand. Selectie = enkel een nette terracotta-ring + wash (geen grijs). */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option { box-shadow: none !important; }
.wc-block-components-radio-control__option-checked {
	border-color: transparent !important;
	box-shadow: inset 0 0 0 1.6px var(--dm-terracotta) !important;
}

/* — Weg met de faint grijze omranding rond de verzend-/betaaloptie-groep: die
   komt uit WooCommerce' eigen block-CSS via ::after-pseudo's (een border op de
   highlight-checked wrapper + op de laatste optie). We laten de selectie enkel
   aanduiden met de terracotta-ring; geen grijze lijn meer. */
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:last-child::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:last-child::after,
.wc-block-checkout__shipping-option .wc-block-components-radio-control-accordion-option:last-child::after,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:last-child::after {
	border: 0 !important;
}

/* — Besteloverzicht in de huisstijl: kop in Cormorant-display (was Raleway 13px),
   ruimere productnamen, en nette afgeronde productminiaturen in 3/4-verhouding
   (cover i.p.v. de vervormende fill). */
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--dm-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.5rem !important;
	letter-spacing: var(--dm-display-spacing);
	text-transform: none !important;
	color: var(--dm-ink) !important;
}
.wc-block-checkout__sidebar .wc-block-components-product-name { font-size: 1.05rem !important; }
.wc-block-components-order-summary-item__image {
	width: 52px !important;
	height: auto !important;
	border-radius: var(--dm-r-sm) !important;
	overflow: hidden;
}
.wc-block-components-order-summary-item__image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4;
	object-fit: cover !important;
	border-radius: var(--dm-r-sm) !important;
}
/* — Coupon-uitklap in terracotta i.p.v. browser-grijs. */
.wc-block-components-totals-coupon .wc-block-components-panel__button { color: var(--dm-terracotta-deep) !important; }