/* DrukDuivels chrome: what the header, menu drawer, mini cart and footer still need from CSS.
   Their colours, type, spacing, radius and shadows are block attributes and style variations (Frosted bar, Glass,
   Tilted badge, Label, Payment mark) in the parts, so the Site Editor shows and edits them (tools/build-parts.py).
   Kept here: the sticky part wrapper, the phone header grid, the menu link animation, icon controls, drawer rows,
   WooCommerce markup. Token variables only (raw values: 0, 1px hairlines, media-query breakpoints, motion transforms). */

/* ---------- page frame ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- header ---------- */
/* The part wrapper would limit sticky to its own height: let its children sit directly in .wp-site-blocks. */
.wp-block-template-part:has(> .dd-header-wrap) { display: contents; }
.dd-header-wrap { z-index: var(--wp--custom--z--sticky); }
/* the brand group is one link: the title link stretches over the badge */
.dd-brand { position: relative; flex: none; }
.dd-brand .wp-block-site-title { margin: 0; }
.dd-brand .wp-block-site-title a::after { content: ""; position: absolute; inset: 0; }

/* navigation: inline from 1024px, drawer below (core switches at 600px, so move the switch) */
.dd-nav { margin-right: auto; margin-left: var(--wp--preset--spacing--50); }
.dd-nav .wp-block-navigation-item__content { position: relative; padding: var(--wp--preset--spacing--30) 0; }
.dd-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: var(--wp--preset--spacing--20); height: var(--wp--custom--border--strong); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-1); transition: right var(--wp--custom--transition--base); }
.dd-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::after,
.dd-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.dd-nav .wp-block-navigation__responsive-container-open,
.dd-header .wp-block-navigation__responsive-container-open { display: none; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); align-items: center; justify-content: center; border-radius: var(--wp--custom--radius--icon-button); color: var(--wp--preset--color--contrast); background: transparent; border: 0; padding: 0; cursor: pointer; }
.dd-nav .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1-strong); }
.dd-nav .wp-block-navigation__responsive-container-open svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }
@media (max-width: 1023px) {
	.dd-nav { order: 3; margin: 0; }
	.dd-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.dd-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.dd-header .dd-tools { margin-left: auto; }
}
@media (max-width: 599px) {
	.dd-header { display: grid; grid-template-columns: var(--wp--custom--control--min) 1fr var(--wp--custom--control--min); }
	.dd-header .dd-nav { order: 0; grid-column: 1; }
	.dd-header .dd-brand { order: 1; grid-column: 2; justify-self: center; }
	.dd-header .dd-tools { order: 2; grid-column: 3; justify-self: end; }
	/* the cart is the only phone tool; on the cart and checkout pages WooCommerce hides it, so hide the empty pill too (keeps its grid cell) */
	.dd-header .dd-tools:has(.wc-block-mini-cart[aria-hidden="true"]) { visibility: hidden; }
}
@media (min-width: 1024px) {
	.dd-header { min-height: var(--wp--custom--layout--header-height) !important; }
}

/* ---------- header variants (design-system/content/layout.json header.style, tools/build-parts.py) ---------- */
/* inline: the same icon buttons without the glass pill */
.dd-tools.dd-tools--plain { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* centered: logo in the middle and the tools on the right, the menu on its own row below (from 1024px) */
@media (min-width: 1024px) {
	.dd-header.dd-header--centered { display: grid !important; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand tools" "nav nav nav"; align-items: center; row-gap: var(--wp--preset--spacing--20); padding-block: var(--wp--preset--spacing--30); }
	.dd-header--centered .dd-brand { grid-area: brand; }
	.dd-header--centered .dd-tools { grid-area: tools; justify-self: end; }
	.dd-header--centered .dd-nav { grid-area: nav; justify-self: center; margin: 0; }
}

/* over the hero (layout.json header.over_hero): transparent while the page sits at the top of a hero that runs under
   the header (.dd-hero--under-header), solid once it scrolls (assets/js/hero-motion.js sets body.dd-is-scrolled).
   Only with JavaScript (html.dd-js, printed in the head), so without it the header simply stays solid. */
.dd-header-wrap--over-hero { transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); }
html.dd-js body:not(.dd-is-scrolled):has(.dd-hero--under-header) .dd-header-wrap--over-hero { background-color: transparent !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.dd-js body:not(.dd-is-scrolled):has(.dd-hero--under-header.dd-hero--tone-dark) .dd-header-wrap--over-hero { color: var(--wp--preset--color--on-accent); }
html.dd-js body:not(.dd-is-scrolled):has(.dd-hero--under-header.dd-hero--tone-dark) .dd-header-wrap--over-hero .dd-tools--plain :is(.wp-block-search__button, .dd-tools__account a, .wc-block-mini-cart__button) { color: inherit; }

/* tools (Glass pill): search, account and cart as 44px icon buttons */
.dd-tools .wp-block-search { margin: 0; }
.dd-tools .wp-block-search__button, .dd-tools__account a, .dd-tools .wc-block-mini-cart__button {
	display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); min-height: 0; padding: 0; margin: 0;
	border: 0; border-radius: var(--wp--custom--radius--icon-button); background: transparent; color: var(--wp--preset--color--contrast); box-shadow: none; cursor: pointer;
	transition: transform var(--wp--custom--transition--fast), background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.dd-tools .wp-block-search__button:hover, .dd-tools__account a:hover, .dd-tools .wc-block-mini-cart__button:hover { transform: translateY(-1px); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1-strong); }
.dd-tools .wp-block-search__button svg, .dd-tools__account svg, .dd-tools .wc-block-mini-cart__button svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); min-width: 0; min-height: 0; }
.dd-tools__account { margin: 0; }
.dd-tools__account .wc-block-customer-account__avatar { display: none; }
.dd-tools__account .wc-block-customer-account__visual { display: grid; place-items: center; }
/* Focus ring inside each tool button: the pill (backdrop-filter, radius) would clip an outside ring. */
.dd-tools :where(.wp-block-search__button, .dd-tools__account a, .wc-block-mini-cart__button):focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: calc(-1 * var(--wp--custom--border--focus)); background: var(--wp--preset--color--surface); }
.dd-tools .wc-block-mini-cart__quantity-badge { position: relative; display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); }
/* WooCommerce's script copies the button colours into an inline style on the badge, so these two need !important. */
.dd-tools .wc-block-mini-cart__badge { position: absolute; top: calc(var(--wp--preset--spacing--20) / 2); right: calc(var(--wp--preset--spacing--20) / 2); left: auto; transform: none; min-width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); padding: 0 var(--wp--custom--border--strong); display: grid; place-items: center; box-sizing: border-box; border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-1) !important; color: var(--wp--preset--color--on-accent) !important; font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--black); line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 var(--wp--custom--border--strong) var(--wp--preset--color--surface); border: 0; pointer-events: none; }
.dd-tools .wc-block-mini-cart__amount { display: none; }

/* ---------- menu drawer (navigation overlay; the panel's look is in the part) ---------- */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--overlay); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > * { display: block; height: auto; }
.dd-drawer { width: 100%; max-width: var(--wp--custom--layout--drawer); box-sizing: border-box; }
/* core's overlay rule sets display:block on the panel's children: keep the head a row */
.dd-drawer__head { display: flex !important; }
.dd-drawer .wp-block-navigation-overlay-close, .dd-drawer .wp-block-navigation__responsive-container-close { display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); border: 0; border-radius: var(--wp--custom--radius--icon-button); background: transparent; color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; position: static; }
.dd-drawer .wp-block-navigation-overlay-close:hover { background: var(--wp--preset--color--accent-2); }
.dd-drawer__nav .wp-block-navigation__container { display: grid; width: 100%; gap: 0; }
.dd-drawer__nav .wp-block-navigation-item { display: block; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.dd-drawer__nav .wp-block-navigation-item:last-child { border-bottom: 0; }
.dd-drawer__nav .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; min-height: var(--wp--custom--control--min); padding: var(--wp--preset--spacing--20) 0; }
.dd-drawer__account a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }

/* ---------- mini cart drawer ---------- */
.wc-block-components-drawer__screen-overlay { background: var(--wp--preset--color--overlay); }
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: visibility 0s linear var(--wp--custom--transition--base); }
.wc-block-mini-cart__drawer.wc-block-components-drawer { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--card) 0 0 var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--lg); }
.wc-block-mini-cart__drawer .wc-block-components-drawer__content { background: var(--wp--preset--color--surface); }
.wc-block-mini-cart__title { margin: 0 !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0 !important; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large) !important; font-weight: var(--wp--custom--font-weight--black); letter-spacing: var(--wp--custom--letter-spacing--heading); display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.wc-block-mini-cart__title .wc-block-mini-cart__title-items-counter, .wc-block-mini-cart__title [class*="items-counter"] { display: inline-grid; place-items: center; min-width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); padding: 0 var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-5); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--bold); }
.wc-block-components-drawer__close.wc-block-components-button { margin: 0 !important; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); min-height: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--icon-button); background: transparent; color: var(--wp--preset--color--contrast); box-shadow: none; transform: none; }
.wc-block-components-drawer__close.wc-block-components-button:hover { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-1-strong); transform: none; }
.wc-block-components-drawer__close svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; }
.wc-block-mini-cart__items { padding-inline: var(--wp--preset--spacing--40); }
.wc-block-mini-cart__footer { background: var(--wp--preset--color--base); border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.wc-block-mini-cart__footer .wc-block-components-button, .wc-block-mini-cart__footer-checkout, .wc-block-mini-cart__footer-cart { min-height: var(--wp--custom--control--button-height); border-radius: var(--wp--custom--radius--button); font-weight: var(--wp--custom--font-weight--semibold); }
.wc-block-mini-cart__footer-checkout { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); border: var(--wp--custom--border--hairline) solid transparent; box-shadow: var(--wp--preset--shadow--cta); }
.wc-block-mini-cart__footer-cart { 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-mini-cart__footer-checkout:hover { background: var(--wp--preset--color--accent-3); }
.wc-block-mini-cart__footer-cart:hover { background: var(--wp--preset--color--accent-5); }
.wc-block-mini-cart__empty-cart-wrapper { display: grid; justify-items: center; gap: var(--wp--preset--spacing--40); text-align: center; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }


/* ---------- footer (colours, spacing and type are in the part) ---------- */
.dd-footer a { text-decoration: none; }
.dd-footer a:hover { text-decoration: underline; }
.dd-footer :where(a, button, [tabindex]):focus-visible { outline-color: var(--wp--preset--color--focus-inverse); }
.dd-footer .wp-block-column { min-width: 0; }
/* menu links: 44px tap rows */
.dd-footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }
.dd-footer__bottom .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--on-accent); }
.dd-footer__bottom > * { margin: 0; }
/* social logos stay core brand marks: 44px round targets that invert on hover */
.dd-footer .wp-block-social-links { gap: var(--wp--preset--spacing--20); }
.dd-footer .wp-block-social-links .wp-social-link { background: transparent !important; color: var(--wp--preset--color--on-accent) !important; border-radius: var(--wp--custom--radius--icon-button); }
.dd-footer .wp-block-social-links .wp-social-link a { display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); padding: 0; color: inherit; }
.dd-footer .wp-block-social-links .wp-social-link a:hover, .dd-footer .wp-block-social-links .wp-social-link a:focus-visible { background: var(--wp--preset--color--on-accent); color: var(--wp--preset--color--accent-3) !important; text-decoration: none; border-radius: var(--wp--custom--radius--icon-button); }
.dd-footer .wp-block-social-links .wp-social-link a:hover svg, .dd-footer .wp-block-social-links .wp-social-link a:focus-visible svg { fill: var(--wp--preset--color--accent-3); }
.dd-footer .wp-block-social-links svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }

/* ---------- search field (core/search with a visible field: 404, menu drawer) ---------- */
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--control--height); padding: 0 var(--wp--preset--spacing--20) 0 0; 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--accent-5); box-sizing: border-box; max-width: 100%; }
.wp-block-search.wp-block-search__button-outside .wp-block-search__inside-wrapper { border: 0; padding: 0; background: transparent; }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__input { flex: 1; min-width: 0; min-height: var(--wp--custom--control--height); padding: 0 var(--wp--custom--control--input-padding-x); border: 0; border-radius: var(--wp--custom--radius--button); background: transparent; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); }
.wp-block-search.wp-block-search__button-outside .wp-block-search__input { border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); background: var(--wp--preset--color--accent-5); }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__input:focus { outline: 0; }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__inside-wrapper:has(:focus-visible), .wp-block-search:not(.wp-block-search__button-only) .wp-block-search__input:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); background: var(--wp--preset--color--surface); }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__button { display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); min-height: 0; margin: 0; padding: 0; flex: none; border: 0; border-radius: var(--wp--custom--radius--button); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); box-shadow: none; cursor: pointer; }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__button:hover { background: var(--wp--preset--color--accent-3); transform: none; }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__button svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; }
.wp-block-search.wp-block-search__button-outside .wp-block-search__button { width: var(--wp--custom--control--height); height: var(--wp--custom--control--height); }

/* ---------- mini cart: buttons inside the drawer have no outer shadow (the drawer clips it) ---------- */
.wc-block-mini-cart__drawer .wp-block-button__link, .wc-block-mini-cart__drawer .wc-block-components-button:not(.wc-block-components-drawer__close) { box-shadow: none; }
.wc-block-mini-cart__empty-cart-wrapper { padding-bottom: var(--wp--preset--spacing--60); }
.wc-block-mini-cart__empty-cart-wrapper .wp-block-heading, .wc-block-mini-cart__empty-cart-wrapper h2 { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--black); letter-spacing: var(--wp--custom--letter-spacing--heading); }

/* WooCommerce hides the mini cart on the cart and checkout pages with visibility; drop its slot so the icon bar stays balanced */
.dd-tools .wc-block-mini-cart[aria-hidden="true"] { display: none; }

/* drawer close: the theme button style adds the cta shadow, which the drawer edge clips */
.wc-block-components-drawer__close.wc-block-components-button { box-shadow: none !important; }
/* empty mini cart: same empty-state anatomy as the 404 and no-results cards (soft brand mark, black heading) */
.wc-block-mini-cart__empty-cart-wrapper::before { content: ""; display: block; width: var(--wp--custom--icon--xl); height: var(--wp--custom--icon--xl); border-radius: var(--wp--custom--radius--glass); background: var(--wp--preset--color--soft); }
.wc-block-mini-cart__empty-cart-wrapper::after { content: ""; position: absolute; left: 50%; top: calc(var(--wp--preset--spacing--60) + (var(--wp--custom--icon--xl) - var(--wp--custom--icon--lg)) / 2); width: var(--wp--custom--icon--lg); height: var(--wp--custom--icon--lg); transform: translateX(-50%); background: var(--wp--preset--color--contrast); -webkit-mask: var(--wp--custom--icon-url--brand-mark) center / contain no-repeat; mask: var(--wp--custom--icon-url--brand-mark) center / contain no-repeat; }
.wc-block-mini-cart__empty-cart-wrapper { position: relative; padding-block: var(--wp--preset--spacing--60) !important; }
.wc-block-mini-cart__empty-cart-wrapper > p:first-child, .wc-block-mini-cart__empty-cart-wrapper > p:first-of-type { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--black); letter-spacing: var(--wp--custom--letter-spacing--heading); color: var(--wp--preset--color--contrast); }
.wc-block-mini-cart__empty-cart-wrapper > p:first-of-type strong { font-weight: inherit; }

/* ---------- menu drawer, kit revision (kit: menu-drawer) ---------- */
/* head: brand left, close right (the phone header's brand order must not reach the drawer) */
.dd-drawer .dd-drawer__head .dd-brand { order: 0; }
.dd-drawer .dd-drawer__head .wp-block-navigation-overlay-close { order: 1; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.dd-drawer .dd-drawer__head .wp-block-navigation-overlay-close svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); fill: currentColor; }
/* search: one pill field with a leading magnifier (the submit button sits on the icon) */
.dd-drawer .wp-block-search__inside-wrapper { position: relative; display: flex; gap: 0; }
.dd-drawer .wp-block-search__input { width: 100%; padding-left: var(--wp--preset--spacing--70) !important; }
.dd-drawer .wp-block-search__button { position: absolute; left: var(--wp--preset--spacing--20); top: 50%; transform: translateY(-50%); width: var(--wp--custom--control--min); min-width: 0; min-height: var(--wp--custom--control--min) !important; height: var(--wp--custom--control--min); margin: 0; padding: 0 !important; display: grid; place-items: center; border-radius: var(--wp--custom--radius--badge) !important; background: transparent !important; color: var(--wp--preset--color--accent-4) !important; box-shadow: none !important; }
.dd-drawer .wp-block-search__button:hover { color: var(--wp--preset--color--contrast) !important; background: var(--wp--preset--color--accent-5) !important; }
.dd-drawer .wp-block-search__button svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; }
/* links: large, hairline rows, chevron on the right, current page marked with the coral dot */
.dd-drawer__nav .wp-block-navigation-item__content::after { content: ""; width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); flex: none; background: var(--wp--preset--color--accent-4); -webkit-mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; transition: transform var(--wp--custom--transition--fast); }
.dd-drawer__nav .wp-block-navigation-item__content:hover::after { transform: translateX(3px); background: var(--wp--preset--color--contrast); }
.dd-drawer__nav .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.dd-drawer__nav .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label::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--signature); transform: scale(0.5); }
/* account: icon link on its own row above a hairline */
.dd-drawer__account a { gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--link); }
.dd-drawer__account a::before { content: ""; width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); flex: none; background: currentColor; -webkit-mask: url(../icons/wp/user.svg) center / contain no-repeat; mask: url(../icons/wp/user.svg) center / contain no-repeat; }

/* ---------- cart lines, kit revision (kit: cart-line). Shared by the Cart page and the mini cart drawer ---------- */
.wc-block-cart-items .wc-block-cart-item__image { width: var(--wp--preset--spacing--80); padding-right: var(--wp--preset--spacing--40) !important; vertical-align: top; }
.wc-block-cart-items .wc-block-cart-item__image img:not([hidden]) { display: block; width: var(--wp--preset--spacing--80); max-width: none; aspect-ratio: var(--wp--custom--image--avatar); object-fit: cover; border-radius: var(--wp--custom--radius--input); background: var(--wp--preset--color--accent-5); }
.wc-block-cart-items .wc-block-cart-item__wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); }
.wc-block-cart-items .wc-block-cart-item__wrap > * { margin: 0 !important; }
.wc-block-cart-items a.wc-block-components-product-name { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--bold) !important; line-height: var(--wp--custom--line-height--snug); text-decoration: none; }
.wc-block-cart-items a.wc-block-components-product-name:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.wc-block-cart-items .wc-block-cart-item__prices { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); }
.wc-block-cart-items .wc-block-cart-item__prices del { color: var(--wp--preset--color--accent-4); }
.wc-block-cart-items .wc-block-cart-item__prices ins { color: var(--wp--preset--color--sale); text-decoration: none; }
/* the short description is for the product page; the line keeps name, options and price */
.wc-block-cart-items .wc-block-components-product-metadata__description { display: none; }
/* chosen options as chips: "Weight 2 kg" */
.wc-block-cart-items .wc-block-components-product-metadata { margin: 0; }
.wc-block-cart-items .wc-block-components-product-details { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.wc-block-cart-items .wc-block-components-product-details > :is(li, span) { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--icon--lg); margin: 0; padding: 0 var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--chip); 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--bold); line-height: var(--wp--custom--line-height--heading); }
.wc-block-cart-items .wc-block-components-product-details__name { color: var(--wp--preset--color--accent-4); font-weight: var(--wp--custom--font-weight--semibold); }
.wc-block-cart-items .wc-block-components-product-details__name::after { content: ""; }
/* stock badges on a line: small status pills (low stock, backorder) */
.wc-block-cart-items .wc-block-components-product-badge:not(.wc-block-components-sale-badge) { display: inline-flex; align-items: center; min-height: var(--wp--custom--icon--md); padding: 0 var(--wp--preset--spacing--30); border: 0; border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--warning-surface); color: var(--wp--preset--color--warning); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--bold); text-transform: none; }
/* quantity and remove on one row; remove is a 44px round icon button */
.wc-block-cart-items .wc-block-cart-item__quantity { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--20) !important; }
.wc-block-cart-items .wc-block-cart-item__remove-link { display: inline-grid !important; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); min-height: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--badge); background: transparent; color: var(--wp--preset--color--accent-4); cursor: pointer; text-decoration: none; transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast); }
/* the Cart block's own rule (table … __quantity .__remove-link, 0,4,1) sets 24px: match it plus one to keep 44px */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link { width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); }
.wc-block-cart-items .wc-block-cart-item__remove-link:hover { background: var(--wp--preset--color--error-surface); color: var(--wp--preset--color--error); }
.wc-block-cart-items .wc-block-cart-item__remove-link: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-cart-items .wc-block-cart-item__remove-link svg { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; }
.wc-block-cart-items .wc-block-cart-item__total { vertical-align: top; text-align: right; font-weight: var(--wp--custom--font-weight--bold); font-variant-numeric: tabular-nums; }
.wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: var(--wp--preset--spacing--20); }

/* ---------- mini cart drawer, kit revision (kit: mini-cart) ---------- */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { padding-right: calc(var(--wp--custom--control--min) + var(--wp--preset--spacing--50)) !important; min-height: var(--wp--custom--control--min); }
.wc-block-mini-cart__title [class*="items-counter"] { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--on-contrast) !important; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small) !important; font-weight: var(--wp--custom--font-weight--bold) !important; letter-spacing: 0; opacity: 1; }
/* close: a clearly visible 44px icon button (hairline, tinted ground, 24px icon) */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button { top: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--contrast); opacity: 1; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button:hover { background: var(--wp--preset--color--accent-2); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
/* lines: hairline between items, totals at the right */
.wc-block-mini-cart__drawer .wc-block-cart-items__row { padding-block: var(--wp--preset--spacing--40); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.wc-block-mini-cart__drawer .wc-block-cart-items__row:last-child { border-bottom: 0; }
.wc-block-mini-cart__footer .wc-block-components-totals-item__label { font-weight: var(--wp--custom--font-weight--bold); }
.wc-block-mini-cart__footer .wc-block-components-totals-item__value { font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--black); }
/* the staffelkorting under the subtotal (assets/js/mini-cart-discount.js): the subtotal steps back, the total after
   discount takes its size; WooCommerce's "kortingen worden bij het afrekenen berekend" gives way to the theme's note */
.wc-block-mini-cart__footer.dd-has-discount .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value { font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--bold); }
.wc-block-mini-cart__footer.dd-has-discount .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description { display: none; } /* WooCommerce's own rule uses four classes */
.dd-mc-discount { display: grid; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }
.dd-mc-discount .wc-block-components-totals-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; }
.dd-mc-discount .dd-mc-discount__fee .wc-block-components-totals-item__label { font-weight: var(--wp--custom--font-weight--semibold); }
.dd-mc-discount .dd-mc-discount__fee .wc-block-components-totals-item__value { font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--sale); }
.dd-mc-discount .dd-mc-discount__total { padding-top: var(--wp--preset--spacing--20); border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }

.wc-block-cart-items .wc-block-cart-item__image img[hidden], .wc-block-cart-items .wc-block-cart-item__image a[hidden] { display: none !important; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button { height: var(--wp--custom--control--min) !important; min-height: 0 !important; padding: 0 !important; display: grid; place-items: center; }

/* search with a field (404, no results, drawer): the pill is the only frame and the only focus ring */
.wp-block-search:not(.wp-block-search__button-only):not(.wp-block-search__button-outside) .wp-block-search__input,
.wp-block-search:not(.wp-block-search__button-only):not(.wp-block-search__button-outside) .wp-block-search__input:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important; min-height: var(--wp--custom--control--height) !important; }
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__input:focus-visible { outline: 0 !important; }
.wp-block-search:not(.wp-block-search__button-only):not(.wp-block-search__button-outside) .wp-block-search__inside-wrapper { padding: 0 calc((var(--wp--custom--control--height) - var(--wp--custom--control--min)) / 2) 0 0; box-sizing: border-box; }
.wp-block-search:not(.wp-block-search__button-only):not(.wp-block-search__button-outside) .wp-block-search__inside-wrapper:focus-within { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); border-color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); }
/* cart and mini cart lines: a compact 44px quantity pill (the 54px pill belongs to the buy box) */
.wc-block-cart-items .wc-block-components-quantity-selector { min-height: var(--wp--custom--control--min) !important; height: var(--wp--custom--control--min); width: auto !important; }
.wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { width: calc(var(--wp--custom--control--min) - 2 * var(--wp--custom--border--hairline)); height: calc(var(--wp--custom--control--min) - 2 * var(--wp--custom--border--hairline)); margin: 0; }
.wc-block-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { width: var(--wp--preset--spacing--50) !important; min-height: 0 !important; height: 100%; font-size: var(--wp--preset--font-size--small); }
/* line thumbnails: spacing-70 (up to 80px); spacing-80 grows to 112px and overflows WooCommerce's image column */
.wc-block-cart-items .wc-block-cart-item__image { width: var(--wp--preset--spacing--70); padding-right: 0 !important; }
.wc-block-cart-items .wc-block-cart-item__image img:not([hidden]) { width: 100%; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row { grid-template-columns: var(--wp--preset--spacing--70) minmax(0, 1fr) auto !important; column-gap: var(--wp--preset--spacing--40) !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image { grid-column: 1; grid-row: 1 / span 3; width: auto; }
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__image { padding-right: var(--wp--preset--spacing--40) !important; box-sizing: content-box; }
/* mini cart title: WooCommerce fades it with a mask; the title stays solid */
.wc-block-mini-cart__title { -webkit-mask-image: none !important; mask-image: none !important; }
/* "Save 5.00": the badge is flex, which drops the space; also in the drawer */
.wc-block-components-sale-badge:not([hidden]) { display: inline-block !important; }

/* one page edge everywhere: TT5's fluid root padding (24 to 36px) becomes the store gutter, so pages built on the
   default templates (cart, checkout, account, content pages) line up with the header at every width */
body { --wp--style--root--padding-left: var(--wp--custom--layout--gutter-mobile); --wp--style--root--padding-right: var(--wp--custom--layout--gutter-mobile); }
@media (min-width: 782px) { body { --wp--style--root--padding-left: var(--wp--custom--layout--gutter); --wp--style--root--padding-right: var(--wp--custom--layout--gutter); } }

/* ---------- line badges, one size (cart, mini cart, checkout summary): 24px pills, text centred ---------- */
:is(.wc-block-cart-items, .wc-block-components-order-summary) .wc-block-components-product-details > :is(li, span),
:is(.wc-block-cart-items, .wc-block-components-order-summary) .wc-block-components-product-badge:not([hidden]) { display: inline-flex !important; align-items: center; box-sizing: border-box; height: var(--wp--custom--icon--md); min-height: 0 !important; margin: 0 !important; padding: 0 var(--wp--preset--spacing--30) !important; border: 0 !important; border-radius: var(--wp--custom--radius--badge) !important; font-size: var(--wp--preset--font-size--x-small) !important; font-weight: var(--wp--custom--font-weight--bold); line-height: var(--wp--custom--line-height--heading); letter-spacing: 0; text-transform: none; white-space: nowrap; column-gap: calc(var(--wp--preset--spacing--20) / 2); vertical-align: middle; }
:is(.wc-block-cart-items, .wc-block-components-order-summary) .wc-block-components-product-details > :is(li, span) { gap: var(--wp--preset--spacing--20); white-space: nowrap; background: var(--wp--preset--color--accent-5); }
:is(.wc-block-cart-items, .wc-block-components-order-summary) .wc-block-components-sale-badge:not([hidden]) { background: var(--wp--preset--color--sale-surface) !important; color: var(--wp--preset--color--sale) !important; }
.wc-block-components-order-summary .wc-block-components-product-details > :is(li, span) { background: var(--wp--preset--color--surface); }
/* backdrop-filter makes the header the containing block of position:fixed children, which would trap the menu overlay
   inside the 78px header: drop the blur while the menu is open */
.dd-header-wrap:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--base); }

/* ---------- DrukDuivels: logo and header button (layout.json header.logo / header.cta) ---------- */
/* The Site Logo block's width attribute holds a number only: the logo tokens size it per breakpoint here. */
.wp-block-site-logo.dd-brand img { width: auto; height: var(--wp--custom--layout--logo-header-mobile); }
@media (min-width: 1024px) { .dd-header .wp-block-site-logo.dd-brand img { height: var(--wp--custom--layout--logo-header); } }
/* square corners: the mark's horns and tail reach the image edges (core's img inherits the link's radius) */
.wp-block-site-logo.dd-brand :is(a, img) { border-radius: 0; }
.wp-block-site-logo.dd-brand a { display: block; }
.dd-brand--full img { width: var(--wp--custom--layout--logo-footer); height: auto; }
.dd-brand--full { margin: 0; }
/* the outline pill sits after the icon tools from 1280px only: below that the eight clothing types need its room
   to stay on one line (2026-10-22); tablets and phones keep the icons */
.dd-header-cta { margin-left: var(--wp--preset--spacing--30); }
/* core's .wp-block-buttons.is-layout-flex sets display: flex with two classes: match it */
@media (max-width: 1279px) { .dd-header .wp-block-buttons.dd-header-cta { display: none; } }
.dd-header-cta .wp-block-button__link { min-height: var(--wp--custom--control--button-height-small); }
/* over the dark hero: the mock-up's translucent hairline under the bar and the light outline pill */
html.dd-js body:not(.dd-is-scrolled):has(.dd-hero--under-header) .dd-header-wrap--over-hero { border-bottom: var(--wp--custom--border--hairline) solid var(--wp--custom--line--on-photo); }
html.dd-js body:not(.dd-is-scrolled):has(.dd-hero--under-header.dd-hero--tone-dark) .dd-header-cta .wp-block-button__link { color: var(--wp--preset--color--contrast); border-color: var(--wp--custom--line--on-photo-strong); background: var(--wp--preset--color--base); }
/* footer on tablets: four columns are too narrow for the uppercase labels, so two by two from 782 to 1023px */
@media (min-width: 782px) and (max-width: 1023px) {
	.dd-footer > .wp-block-columns { flex-wrap: wrap !important; }
	.dd-footer > .wp-block-columns > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--60)) !important; flex-grow: 0; }
}
.dd-footer .is-style-label { overflow-wrap: normal; hyphens: none; }
.wc-block-mini-cart__footer .dd-mc-vat { font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--regular); color: var(--wp--preset--color--accent-4); white-space: nowrap; }

/* Landing banner with an illustration (tools/build-landing.py, hero "art": true): on phones the art becomes a band above
   the copy instead of sitting behind it; the band fades into the deep banner colour. */
@media (max-width: 781px) {
	.wp-block-cover.dd-landing-banner--art { padding-top: calc(var(--wp--custom--layout--cathead-min-mobile) + var(--wp--preset--spacing--30)) !important; background-color: var(--wp--preset--color--accent-3); }
	.wp-block-cover.dd-landing-banner--art > .wp-block-cover__image-background { bottom: auto; height: var(--wp--custom--layout--cathead-min-mobile); object-position: 85% 50% !important; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
	.wp-block-cover.dd-landing-banner--art > .wp-block-cover__background { background: none !important; }
}

/* ---------- prices incl./excl. btw switch in the announcement bar (inc/vat-display.php, 2026-10-22) ----------
   PHP-printed markup: a pill with two buttons, the chosen one filled. From 1024px it sits at the bar's right end; on
   smaller screens the bar wraps and the switch gets its own centred row under the text. */
.wp-block-group:has(> .dd-vat-toggle) { position: relative; flex-wrap: wrap !important; }
.dd-vat-toggle { display: inline-flex; flex: none; border: var(--wp--custom--border--hairline) solid var(--wp--custom--line--on-photo-strong); border-radius: var(--wp--custom--radius--badge); }
.dd-vat-toggle__option { min-height: var(--wp--custom--icon--lg); padding: 0 var(--wp--preset--spacing--30); border: 0; border-radius: var(--wp--custom--radius--badge); background: none; color: inherit; font: inherit; font-size: var(--wp--preset--font-size--x-small); white-space: nowrap; cursor: pointer; }
.dd-vat-toggle__option[aria-pressed="true"] { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--on-accent); cursor: default; }
.dd-vat-toggle__option:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
@media (min-width: 1024px) {
	.dd-vat-toggle { position: absolute; top: 50%; right: var(--wp--custom--layout--gutter); transform: translateY(-50%); }
}
@media (max-width: 1023px) { .dd-vat-toggle__option { min-height: var(--wp--custom--control--min); } } /* 44px touch targets */
/* below 1024px: icon and text stay together on the first row (the text shrinks and wraps), the switch takes the next */
@media (max-width: 1023px) {
	.wp-block-group:has(> .dd-vat-toggle) > p { flex: 0 1 0; min-width: 0; flex-grow: 1; max-width: max-content; }
	.wp-block-group:has(> .dd-vat-toggle)::after { content: ""; flex-basis: 100%; order: 2; } /* row break before the switch */
	.dd-vat-toggle { order: 3; }
}

/* ---------- cookie consent bar (inc/consent.php, 2026-10-22): PHP-printed, fixed at the bottom, two equal choices ---------- */
.dd-consent { position: fixed; inset: auto var(--wp--custom--layout--gutter-mobile) var(--wp--custom--layout--gutter-mobile); z-index: 100000; display: flex; justify-content: center; pointer-events: none; }
.dd-consent[hidden] { display: none; }
.dd-consent__inner { pointer-events: auto; display: grid; gap: var(--wp--preset--spacing--30); width: 100%; max-width: var(--wp--custom--layout--content); padding: var(--wp--preset--spacing--40); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--preset--shadow--md); font-size: var(--wp--preset--font-size--small); }
.dd-consent__title { margin: 0; font-weight: var(--wp--custom--font-weight--black); font-size: var(--wp--preset--font-size--medium); }
.dd-consent__text { margin: 0; }
.dd-consent__text a { color: inherit; }
.dd-consent__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
.dd-consent__button { flex: 1 1 0; min-height: var(--wp--custom--control--min); padding: 0 var(--wp--custom--control--padding-x-small); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--button); background: transparent; color: var(--wp--preset--color--contrast); font: inherit; font-weight: var(--wp--custom--font-weight--bold); cursor: pointer; }
.dd-consent__button--accept { border-color: var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--on-accent); }
.dd-consent__button:focus-visible, .dd-consent-open:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
/* the footer's "Cookie-instellingen": a button that reads as the copyright line's link */
.dd-consent-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }