/* DrukDuivels WooCommerce shared primitives (layer 3): used by every WooCommerce surface, on block and classic markup.
   Token variables only (raw values: 0, 1px hairlines, motion transforms). Page CSS only lays out its surface. */

/* ---------- buttons ---------- */
.wc-block-components-button:not(.is-link),
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-woocommerce-product-button .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--control--button-height); padding: 0 var(--wp--custom--control--padding-x);
	border: var(--wp--custom--border--hairline) solid transparent; border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast);
	font-family: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); line-height: var(--wp--custom--line-height--snug); text-decoration: none; cursor: pointer;
	box-shadow: var(--wp--preset--shadow--cta);
	transition: transform var(--wp--custom--transition--base), background var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--on-accent); transform: translateY(-2px); }
.wc-block-components-button:not(.is-link):active, .woocommerce a.button:active { transform: translateY(0); box-shadow: var(--wp--preset--shadow--sm); }
.wc-block-components-button:disabled, .wc-block-components-button[aria-disabled="true"], .woocommerce button.button:disabled, .woocommerce button.button.disabled {
	background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-4); border-color: var(--wp--preset--color--accent-6); box-shadow: none; transform: none; cursor: not-allowed;
}
.wc-block-components-button.outlined, .wc-block-components-button.is-style-outline, .woocommerce a.button.alt-outline {
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); box-shadow: inset 0 0 0 var(--wp--custom--border--hairline) var(--wp--preset--color--border-strong);
}
.wc-block-components-button.outlined:hover, .wc-block-components-button.is-style-outline:hover { background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); }
.wc-block-components-button.is-link, .wc-block-components-button.wc-block-components-button--text { background: transparent; color: var(--wp--preset--color--link); box-shadow: none; text-decoration: underline; min-height: var(--wp--custom--control--min); padding: 0 var(--wp--preset--spacing--20); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--on-accent); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--wp--preset--color--accent-1-strong); }
.wc-block-components-button__text { color: inherit; }

/* ---------- fields ---------- */
.wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-form .wc-block-components-text-input input[type],
.wc-blocks-components-select__select, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .woocommerce-page form .input-text,
.woocommerce #respond textarea, .woocommerce #respond input[type="text"], .woocommerce #respond input[type="email"], .woocommerce #respond input[type="url"],
.wc-block-components-textarea textarea, .wc-block-product-filter-price-slider__content input[type="text"] {
	min-height: var(--wp--custom--control--height) !important; padding: 0 var(--wp--custom--control--input-padding-x) !important;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong) !important; border-radius: var(--wp--custom--radius--input) !important;
	background-color: var(--wp--preset--color--accent-5) !important; color: var(--wp--preset--color--contrast) !important; font-family: var(--wp--preset--font-family--body) !important; font-size: var(--wp--preset--font-size--medium) !important; box-shadow: none !important;
}
.wc-block-components-text-input textarea, .woocommerce form textarea, .woocommerce #respond textarea, .wc-block-components-textarea textarea { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; min-height: calc(var(--wp--custom--control--height) * 2) !important; }
/* floating labels sit inside the field: leave room above the value */
.wc-block-components-text-input:not(.is-textarea) input, .wc-block-components-form .wc-block-components-text-input:not(.is-textarea) input[type], .wc-blocks-components-select__select, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { padding-top: var(--wp--preset--spacing--30) !important; }
.wc-block-components-text-input input:focus, .woocommerce form .input-text:focus, .wc-blocks-components-select__select:focus, .woocommerce form select:focus, .woocommerce #respond textarea:focus { background-color: var(--wp--preset--color--surface) !important; border-color: var(--wp--preset--color--contrast) !important; outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus) !important; outline-offset: var(--wp--custom--border--focus-offset); }
.wc-block-components-text-input.has-error input, .woocommerce form .woocommerce-invalid .input-text, .woocommerce form .woocommerce-invalid select { border-color: var(--wp--preset--color--error) !important; background-color: var(--wp--preset--color--error-surface) !important; }
.wc-block-components-text-input label, .wc-blocks-components-select__label, .woocommerce form .form-row label { color: var(--wp--preset--color--accent-4); font-size: var(--wp--preset--font-size--small); }
.wc-block-components-validation-error, .woocommerce form .woocommerce-invalid .required { color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--medium); }
.wc-block-components-validation-error p { margin: 0; color: inherit; }
::placeholder { color: var(--wp--preset--color--accent-4); opacity: 1; }

/* ---------- checkbox and radio ---------- */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"], .woocommerce form .input-checkbox, .woocommerce-form__input-checkbox,
.wc-block-product-filter-checkbox-list__input, .wp-block-woocommerce-product-filter-checkbox-list input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); flex: none; margin: 0;
	border: var(--wp--custom--border--strong) solid var(--wp--preset--color--border-strong); border-radius: calc(var(--wp--custom--radius--input) / 2); background: var(--wp--preset--color--surface); display: inline-grid; place-content: center; cursor: pointer;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked, .woocommerce-form__input-checkbox:checked, .wc-block-product-filter-checkbox-list__input:checked { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked::after, .woocommerce-form__input-checkbox:checked::after, .wc-block-product-filter-checkbox-list__input:checked::after {
	content: ""; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); background: var(--wp--preset--color--on-accent);
	-webkit-mask: url(../icons/wp/check.svg) center / contain no-repeat; mask: url(../icons/wp/check.svg) center / contain no-repeat;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark, .wc-block-product-filter-checkbox-list__mark, .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none !important; }
.wc-block-components-checkbox__input:disabled, .wc-block-product-filter-checkbox-list__input:disabled { background: var(--wp--preset--color--accent-6); border-color: var(--wp--preset--color--accent-6); cursor: not-allowed; }
.wc-block-components-radio-control__input { appearance: none; -webkit-appearance: none; width: var(--wp--custom--icon--md) !important; height: var(--wp--custom--icon--md) !important; min-width: 0; margin: 0 !important; border: var(--wp--custom--border--strong) solid var(--wp--preset--color--border-strong) !important; border-radius: var(--wp--custom--radius--badge) !important; background: var(--wp--preset--color--surface) !important; display: inline-grid; place-content: center; }
.wc-block-components-radio-control__input:checked { background: var(--wp--preset--color--contrast) !important; border-color: var(--wp--preset--color--contrast) !important; }
.wc-block-components-radio-control__input:checked::before { content: ""; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--on-accent); transform: scale(0.5); }
.wc-block-components-radio-control__input::after { display: none; }
.wc-block-components-checkbox label, .wc-block-components-radio-control label { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--medium); }

/* ---------- notices ---------- */
body .wc-block-components-notice-banner, body .woocommerce-message, body .woocommerce-info, body .woocommerce-error, body .woocommerce-notice {
	display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); margin: 0 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid currentColor; border-radius: var(--wp--custom--radius--input); background: var(--wp--preset--color--info-surface); color: var(--wp--preset--color--info); font-size: var(--wp--preset--font-size--medium); list-style: none;
}
body .wc-block-components-notice-banner[class] > svg { fill: currentColor; background: transparent; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); padding: 0; flex: none; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content[class] { flex: 1; min-width: 0; color: var(--wp--preset--color--contrast); padding: 0; }
body .wc-block-components-notice-banner.is-success[class], body .woocommerce-message { background: var(--wp--preset--color--success-surface); color: var(--wp--preset--color--success); border-color: currentColor; }
body .wc-block-components-notice-banner.is-warning[class] { background: var(--wp--preset--color--warning-surface); color: var(--wp--preset--color--warning); }
body .wc-block-components-notice-banner.is-error[class], body .woocommerce-error { background: var(--wp--preset--color--error-surface); color: var(--wp--preset--color--error); }
body .wc-block-components-notice-banner.is-info[class], body .woocommerce-info { background: var(--wp--preset--color--info-surface); color: var(--wp--preset--color--info); }
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error { color: var(--wp--preset--color--contrast); }
body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { position: static; content: ""; flex: none; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); background: currentColor; -webkit-mask: url(../icons/wp/info-fill.svg) center / contain no-repeat; mask: url(../icons/wp/info-fill.svg) center / contain no-repeat; color: var(--wp--preset--color--info); }
body .woocommerce-message::before { color: var(--wp--preset--color--success); -webkit-mask-image: url(../icons/wp/check-circle-fill.svg); mask-image: url(../icons/wp/check-circle-fill.svg); }
body .woocommerce-error::before { color: var(--wp--preset--color--error); -webkit-mask-image: url(../icons/wp/x-circle-fill.svg); mask-image: url(../icons/wp/x-circle-fill.svg); }
body .woocommerce-message .button, body .woocommerce-info .button { order: 2; margin-left: auto; min-height: var(--wp--custom--control--button-height-small); box-shadow: none; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward, body .woocommerce-message a.wc-forward { color: var(--wp--preset--color--link); text-decoration: underline; background: transparent; box-shadow: none; min-height: 0; padding: 0; font-weight: var(--wp--custom--font-weight--bold); }
body .woocommerce-error li { margin: 0; }
.woocommerce-store-notice, p.demo_store { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--on-accent); font-size: var(--wp--preset--font-size--small); }

/* ---------- badges ---------- */
.wc-block-components-product-sale-badge, .woocommerce span.onsale, .wc-block-components-product-badge {
	display: inline-flex; align-items: center; min-height: var(--wp--custom--icon--md); padding: 0 var(--wp--preset--spacing--30); margin: 0; border: 0; border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--sale-surface); color: var(--wp--preset--color--sale); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--semibold); letter-spacing: var(--wp--custom--letter-spacing--badge); text-transform: none; line-height: 1;
}
.woocommerce span.onsale { position: absolute; top: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); z-index: var(--wp--custom--z--base); }
.dd-badge { display: inline-flex; align-items: center; min-height: var(--wp--custom--icon--md); padding: 0 var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--semibold); letter-spacing: var(--wp--custom--letter-spacing--badge); line-height: 1; }
.dd-badge--sale { background: var(--wp--preset--color--sale-surface); color: var(--wp--preset--color--sale); }
.dd-badge--new { background: var(--wp--preset--color--soft); }
.dd-badge--bestseller { background: var(--wp--preset--color--signature-2); }
.dd-badge--low { background: var(--wp--preset--color--warning-surface); color: var(--wp--preset--color--warning); }
.dd-badge--sold-out { background: var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-4); }

/* ---------- prices ---------- */
.wc-block-components-product-price, .woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .wp-block-woocommerce-product-price { font-variant-numeric: tabular-nums; font-weight: var(--wp--custom--font-weight--semibold); color: var(--wp--preset--color--contrast); }
.wc-block-components-product-price del, .woocommerce .price del { color: var(--wp--preset--color--accent-4); font-weight: var(--wp--custom--font-weight--regular); opacity: 1; }
.wc-block-components-product-price ins, .woocommerce .price ins { color: var(--wp--preset--color--sale); text-decoration: none; background: transparent; }
.wc-block-components-product-price__value.is-discounted { color: var(--wp--preset--color--sale); }
.wc-block-formatted-money-amount { font-variant-numeric: tabular-nums; }
.dd-price-from { margin-right: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--regular); color: var(--wp--preset--color--accent-4); }

/* ---------- rating chip and classic stars ---------- */
.dd-rating { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); color: var(--wp--preset--color--contrast); line-height: 1; }
.dd-rating__star { width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); background: var(--wp--preset--color--star); -webkit-mask: url(../icons/wp/star-fill.svg) center / contain no-repeat; mask: url(../icons/wp/star-fill.svg) center / contain no-repeat; flex: none; }
.dd-rating .dd-count-text { color: var(--wp--preset--color--accent-4); font-weight: var(--wp--custom--font-weight--regular); }
.dd-rating__link { color: var(--wp--preset--color--accent-4); font-weight: var(--wp--custom--font-weight--regular); text-decoration: underline; }
.woocommerce .star-rating, .woocommerce p.stars a { color: var(--wp--preset--color--star); }
.woocommerce .star-rating::before { color: var(--wp--preset--color--accent-6); }

/* ---------- quantity ---------- */
.wc-block-components-quantity-selector, .woocommerce .quantity {
	display: inline-flex; align-items: center; min-height: var(--wp--custom--control--height); width: auto; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--button); background: var(--wp--preset--color--surface); box-shadow: none; overflow: hidden;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input, .woocommerce .quantity .qty { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: var(--wp--custom--control--min) !important; padding: 0 !important; width: var(--wp--preset--spacing--70); text-align: center; font-weight: var(--wp--custom--font-weight--semibold); color: var(--wp--preset--color--contrast) !important; border-radius: 0 !important; outline: 0 !important; }
.wc-block-components-quantity-selector__button { width: var(--wp--custom--control--min); min-height: var(--wp--custom--control--min); border: 0; background: transparent; color: var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--button); opacity: 1; cursor: pointer; box-shadow: none; }
.wc-block-components-quantity-selector__button:hover { background: var(--wp--preset--color--accent-5); }
.wc-block-components-quantity-selector__button:disabled { color: var(--wp--preset--color--accent-4); cursor: not-allowed; background: transparent; }
.wc-block-components-quantity-selector:has(:focus-visible), .woocommerce .quantity:has(:focus-visible) { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
.wc-block-components-quantity-selector :focus-visible { outline: 0; }

/* ---------- spinners, skeletons ---------- */
.wc-block-components-spinner { color: var(--wp--preset--color--contrast); }
.wc-block-components-button--loading .wc-block-components-spinner, .woocommerce a.button.loading::after { color: var(--wp--preset--color--on-accent); }
.wc-block-components-skeleton__element, .wc-block-components-loading-mask { background-color: var(--wp--preset--color--accent-5); }

/* ---------- tables ---------- */
.woocommerce table.shop_table, .woocommerce-page table.shop_table, table.woocommerce-table { width: 100%; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); border-radius: var(--wp--custom--radius--input); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: var(--wp--preset--font-size--small); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border: 0; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); text-align: left; }
.woocommerce table.shop_table thead th { background: var(--wp--preset--color--accent-5); font-weight: var(--wp--custom--font-weight--semibold); }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce address { font-style: normal; line-height: var(--wp--custom--line-height--body); }

/* ---------- links and focus inside WooCommerce ---------- */
/* Link colour comes from theme.json. Do not restyle `.woocommerce a`: the body carries that class on shop pages and it would recolour the header and footer links. */
.wc-block-components-product-name { color: var(--wp--preset--color--link); }
.wc-block-components-button:focus-visible, .woocommerce a.button:focus-visible, .woocommerce button:focus-visible, .wc-block-components-radio-control__option:has(:focus-visible) { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }

/* quantity, kit revision (kit: quantity): each button is its own 44px circle, inset evenly inside the 54px pill, so the hover
   tint follows the pill's curve. WooCommerce squares the outer corners per button (__button--minus / --plus); the text
   glyphs are replaced by the kit's minus and plus icons. */
.wc-block-components-quantity-selector, .woocommerce .quantity { align-items: center; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { display: grid; place-items: center; flex: none; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); min-width: 0; margin: 0 calc((var(--wp--custom--control--height) - var(--wp--custom--control--min)) / 2); padding: 0; border-radius: var(--wp--custom--radius--badge) !important; font-size: 0; transition: background var(--wp--custom--transition--fast); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button::before { content: ""; width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); background: currentColor; -webkit-mask: url(../icons/wp/plus.svg) center / contain no-repeat; mask: url(../icons/wp/plus.svg) center / contain no-repeat; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus::before { -webkit-mask-image: url(../icons/wp/minus.svg); mask-image: url(../icons/wp/minus.svg); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:not(:disabled):hover { background: var(--wp--preset--color--accent-5); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { opacity: 1; color: var(--wp--preset--color--border-strong); }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: calc(-1 * var(--wp--custom--border--focus)); }
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { width: var(--wp--preset--spacing--60) !important; min-width: 0; font-weight: var(--wp--custom--font-weight--bold); font-variant-numeric: tabular-nums; }
/* quantity icons: centred by inset + margin auto. In Safari the hidden "+"/"−" text stays a grid row and pushes a grid-centred
   icon upwards, so the icon is taken out of the flow. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { position: relative; overflow: hidden; color: var(--wp--preset--color--contrast); line-height: 0; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button::before { position: absolute; inset: 0; margin: auto; }

/* DrukDuivels: the excl. btw price (WooCommerce price suffix, inc/discount.php for variable products) on its own line, small and muted */
.woocommerce-price-suffix:has(.dd-price-excl) { display: block; }
.dd-price-excl { display: block; margin-top: calc(var(--wp--preset--spacing--20) / 2); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--regular); line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--accent-4); }
/* the minimum per product on the card's photo (inc/woo.php, 2026-10-22): navy, so it reads on light studio photos */
.dd-badge--min { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }