/* DrukDuivels shop surfaces: only what blocks cannot say. The templates (tools/build-woo-specs.py) set the page frame, headings, toolbar, card body and type, empty states and related products as block attributes and variations. Here: the category header printed by inc/woo.php, sorting, the sidebar, WooCommerce's filters, the product card's frame, link and hover, the grid and pagination. Token variables only. */ /* breadcrumbs: type and colour are in theme.json; the links are 44px targets */ .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); } /* ---------- category header ---------- */ /* category header (kit: category-header), compact (owner, 2026-10-21): title and lead right under the breadcrumbs; no scene picture, product count or category pills (the clothing type is a filter). */ .dd-cathead { display: grid; gap: var(--wp--preset--spacing--20); margin-block: 0 var(--wp--preset--spacing--30); } .dd-cathead > * { margin: 0 !important; max-width: var(--wp--custom--layout--content); } .dd-cathead .wp-block-query-title { font-size: var(--wp--preset--font-size--xx-large); font-weight: var(--wp--custom--font-weight--black); letter-spacing: var(--wp--custom--letter-spacing--heading); line-height: var(--wp--custom--line-height--heading); } .dd-cathead__word { position: relative; display: inline-block; z-index: 0; } .dd-cathead__word::after { content: ""; position: absolute; left: 2%; right: 0; bottom: 0.04em; height: 0.14em; border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--signature-2); z-index: -1; transform: rotate(-1.3deg); } .dd-cathead .wp-block-term-description, .dd-cathead .term-description, .dd-cathead__lead { font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--line-height--body); color: var(--wp--preset--color--accent-4); font-weight: var(--wp--custom--font-weight--medium); } .dd-cathead .term-description p, .dd-cathead .wp-block-term-description p { margin: 0; } /* ---------- toolbar ---------- */ .dd-toolbar .woocommerce-ordering, .dd-toolbar .woocommerce-result-count { margin: 0; } .dd-toolbar select, .dd-toolbar .woocommerce-ordering select, .woocommerce-ordering select, .wc-block-catalog-sorting select { appearance: none; -webkit-appearance: none; min-height: var(--wp--custom--control--min) !important; padding: 0 var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40) !important; border-radius: var(--wp--custom--radius--button) !important; background-color: var(--wp--preset--color--surface) !important; font-size: var(--wp--preset--font-size--small) !important; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--button); background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); background-image: none; } /* chevron: the collection's caret-down as a mask on the wrapper (a select cannot hold a pseudo-element) */ :is(.woocommerce-ordering, .wc-block-catalog-sorting) { position: relative; } :is(.woocommerce-ordering, .wc-block-catalog-sorting)::after { content: ""; position: absolute; right: var(--wp--preset--spacing--40); top: 0; bottom: 0; margin: auto; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); background: var(--wp--preset--color--contrast); -webkit-mask: var(--wp--custom--icon-url--caret-down) center / contain no-repeat; mask: var(--wp--custom--icon-url--caret-down) center / contain no-repeat; pointer-events: none; } .dd-toolbar select:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } /* ---------- layout: sidebar from 1024px, drawer below ---------- */ .dd-shop { align-items: flex-start; } .dd-shop > .wp-block-column { min-width: 0; } /* the sidebar width is a token, which a Column's width attribute cannot hold: size it here (core's column rules are 0,3,0) */ @media (min-width: 601px) { .dd-shop.wp-block-columns { flex-wrap: nowrap !important; } .wp-block-columns.dd-shop > .dd-shop__filters { flex: 0 0 calc(var(--wp--custom--layout--sidebar) - var(--wp--preset--spacing--50)); } .wp-block-columns.dd-shop > .dd-shop__results { flex: 1 1 0; min-width: 0; } .dd-shop__results .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { .wp-block-columns.dd-shop > .dd-shop__filters { flex-basis: var(--wp--custom--layout--sidebar); position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--40)); } } /* ---------- filters (kit: dd-filters) ---------- */ /* Sidebar panel from 601px: one card, eyebrow headings, sections spaced by gap. On phones the drawer dialog is the card. */ .wp-block-woocommerce-product-filters { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--contrast); } @media (min-width: 601px) { .dd-shop__filters .wc-block-product-filters__overlay-content { display: grid; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); box-shadow: var(--wp--preset--shadow--sm); } } .wc-block-product-filters__overlay-content > * { margin: 0 !important; } .wc-block-product-filters__overlay-content > .wc-block-product-filter--hidden { display: none; } .wp-block-woocommerce-product-filters h3.wp-block-heading { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; color: var(--wp--preset--color--contrast); } .wp-block-woocommerce-product-filters .wp-block-group:has(> .wp-block-heading) { margin: 0; } /* checkbox list: 24px box, ink fill and cream tick when checked, count right-aligned without brackets */ .wc-block-product-filter-checkbox-list__items { display: grid; gap: 0; } .wc-block-product-filter-checkbox-list__item { margin: 0; } .wc-block-product-filter-checkbox-list__label { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--control--min); width: 100%; cursor: pointer; } .wc-block-product-filter-checkbox-list__input-wrapper { position: relative; display: inline-grid; place-items: center; flex: none; } .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input { appearance: none; -webkit-appearance: none; display: block; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); 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); cursor: pointer; transition: background var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast); } .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input::after { content: none; } .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"].wc-block-product-filter-checkbox-list__input:not(:disabled) { border-color: var(--wp--preset--color--contrast); } .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); } .wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark { display: block !important; position: absolute; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); color: var(--wp--preset--color--on-accent); pointer-events: none; } .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } .wc-block-product-filter-checkbox-list input[type="checkbox"].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; } /* colour families (inc/colours.php): the checkbox is a round swatch in the family's colour (--dd-swatch, product data); checked = a magenta ring plus the bold label, no tick (it would vanish on white or yellow) */ .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input.dd-tint { border-radius: var(--wp--custom--radius--badge); border-color: var(--wp--preset--color--border-strong); background: var(--dd-swatch); } .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input.dd-tint:checked { background: var(--dd-swatch); border-color: var(--wp--preset--color--contrast); box-shadow: 0 0 0 var(--wp--custom--border--focus) var(--wp--preset--color--accent-1); } .wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input.dd-tint:checked + .wc-block-product-filter-checkbox-list__mark { display: none !important; } .wc-block-product-filter-checkbox-list__text-wrapper { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); } .wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__text { font-weight: var(--wp--custom--font-weight--bold); } .wc-block-product-filter-checkbox-list__count { font-size: 0; } .wc-block-product-filter-checkbox-list__count > span { display: inline-grid; place-items: center; min-width: 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); color: var(--wp--preset--color--accent-4); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--bold); min-height: var(--wp--custom--icon--md); box-sizing: border-box; } .wc-block-product-filter-checkbox-list__item:has(input:checked) .wc-block-product-filter-checkbox-list__count > span { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); } .wc-block-product-filter-checkbox-list__item:has(input:disabled) .wc-block-product-filter-checkbox-list__label { cursor: not-allowed; } .wc-block-product-filter-checkbox-list__item:has(input:disabled) .wc-block-product-filter-checkbox-list__text { color: var(--wp--preset--color--accent-4); } .wc-block-product-filter-checkbox-list__item:has(input:disabled) .wc-block-product-filter-checkbox-list__count > span { background: transparent; } /* option chips (kit: dd-chip): pill, strong border, ink when selected, struck and grey when unavailable */ .wc-block-product-filter-chips__items { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--control--min); min-width: var(--wp--custom--control--min); margin: 0; padding: 0 var(--wp--preset--spacing--40); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--chip); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold); cursor: pointer; transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:hover { background: var(--wp--preset--color--accent-5); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item[aria-checked="true"] { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:is([disabled], [aria-disabled="true"]) { background: var(--wp--preset--color--accent-6); border-color: var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-4); text-decoration: line-through; cursor: not-allowed; } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } /* active filters (kit: filter chip): accent-2 pill with a round close button, then the clear button */ .wp-block-woocommerce-product-filter-active { display: grid; gap: var(--wp--preset--spacing--30); } .wp-block-woocommerce-product-filter-active::before { content: ""; display: none; } .wc-block-product-filter-removable-chips__items { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__item { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: var(--wp--custom--control--min); margin: 0; padding: 0 var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-2); border-radius: var(--wp--custom--radius--chip); background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold); } /* a long choice ("Geschikt voor: Kantoor & klantcontact") wraps inside the filter card instead of running over the result count */ .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__item { max-width: 100%; box-sizing: border-box; } .wc-block-product-filter-removable-chips__label { min-width: 0; padding-block: calc(var(--wp--preset--spacing--20) / 2); overflow-wrap: anywhere; } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove { display: inline-grid; place-items: center; width: var(--wp--custom--icon--lg); height: var(--wp--custom--icon--lg); margin: 0; padding: 0; border: 0; border-radius: var(--wp--custom--radius--badge); background: transparent; color: var(--wp--preset--color--contrast); cursor: pointer; } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove:hover { background: var(--wp--preset--color--surface); } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove: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-product-filter-removable-chips__remove-icon { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); fill: currentColor; } .wp-block-woocommerce-product-filter-clear-button .wp-block-buttons { margin: 0; } .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link { min-height: var(--wp--custom--control--button-height-small); padding: 0 var(--wp--custom--control--padding-x-small); 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); color: var(--wp--preset--color--contrast); box-shadow: none; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold); } .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover { background: var(--wp--preset--color--accent-5); } /* price (kit: dd-range): ink fill on a pill track, cream thumbs with an ink ring, two fields */ .wc-block-product-filter-price-slider__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); } .wc-block-product-filter-price-slider__range { grid-column: 1 / -1; margin: var(--wp--preset--spacing--20) calc(var(--wp--custom--icon--md) / 2); } .wc-block-product-filter-price-slider__left, .wc-block-product-filter-price-slider__right { width: 100%; min-width: 0; } .wc-block-product-filter-price-slider__content input[type="text"] { width: 100%; max-width: none; box-sizing: border-box; text-align: left; } .wc-block-product-filter-price-slider__range .range-bar { height: var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-6); } .wc-block-product-filter-price-slider__range .range-bar::before, .wc-block-product-filter-price-slider__range .range-bar-fill { background: var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--badge); } .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb { background: var(--wp--preset--color--surface); border: var(--wp--custom--border--strong) solid var(--wp--preset--color--contrast); width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); border-radius: var(--wp--custom--radius--badge); box-shadow: var(--wp--preset--shadow--sm); cursor: grab; } .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb { background: var(--wp--preset--color--surface); border: var(--wp--custom--border--strong) solid var(--wp--preset--color--contrast); width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); border-radius: var(--wp--custom--radius--badge); box-shadow: var(--wp--preset--shadow--sm); cursor: grab; } .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-moz-range-thumb { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } /* drawer below 1024px: the filters open as a panel; the open button is a small outline button */ .wc-block-product-filters__open-overlay { min-height: var(--wp--custom--control--button-height-small); padding: 0 var(--wp--custom--control--padding-x-small); border: 0; border-radius: var(--wp--custom--radius--button); 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); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); } /* drawer controls (phones) */ .wc-block-product-filters__close-overlay { min-height: var(--wp--custom--control--min); display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); padding: 0 var(--wp--preset--spacing--40); 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); color: var(--wp--preset--color--contrast); font: inherit; font-weight: var(--wp--custom--font-weight--semibold); cursor: pointer; } .wc-block-product-filters__close-overlay:hover { background: var(--wp--preset--color--accent-5); } .wc-block-product-filters__apply { width: 100%; min-height: var(--wp--custom--control--button-height); border: 0; border-radius: var(--wp--custom--radius--button); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); cursor: pointer; box-shadow: var(--wp--preset--shadow--cta); } .wc-block-product-filters__apply:hover { background: var(--wp--preset--color--accent-3); } @media (max-width: 600px) { .wc-block-product-filters__overlay-dialog { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--lg); } /* only while open: closed, WooCommerce keeps the overlay in place (transparent, no pointer events) */ .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay { background: var(--wp--preset--color--overlay); } /* kit drawer: title left, close as a 44px icon button right, content scrolls, apply bar pinned at the bottom */ .wc-block-product-filters__overlay-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); } .wc-block-product-filters__overlay-header::before { content: "Filters"; font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--black); letter-spacing: var(--wp--custom--letter-spacing--heading); } .wc-block-product-filters__overlay-content { display: grid; align-content: start; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40); } /* kit: the close is a 44px icon button; the word stays for screen readers */ .wc-block-product-filters__close-overlay { width: var(--wp--custom--control--min); padding: 0 !important; justify-content: center; border-radius: var(--wp--custom--radius--icon-button) !important; } .wc-block-product-filters__close-overlay > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wc-block-product-filters__close-overlay svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); fill: currentColor; } .wc-block-product-filters__overlay-footer { padding: var(--wp--preset--spacing--40); border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--base); } } @media (min-width: 601px) { .wc-block-product-filters__open-overlay { display: none; } } /* ---------- product card ---------- */ .wc-block-product-template { display: grid !important; grid-template-columns: repeat(var(--wp--custom--grid--columns-mobile), minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--40) !important; padding: 0; margin: 0; list-style: none; } .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; } @media (min-width: 782px) { .wc-block-product-template { grid-template-columns: repeat(var(--wp--custom--grid--columns-tablet), minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { .wc-block-product-template { grid-template-columns: repeat(var(--wp--custom--grid--columns-desktop), minmax(0, 1fr)) !important; } .dd-shop__results .wc-block-product-template { grid-template-columns: repeat(var(--wp--custom--grid--columns-tablet), minmax(0, 1fr)) !important; } } /* shop and category pages: three columns beside the filters at every desktop width (owner's choice) */ li.wc-block-product { position: relative; display: flex; flex-direction: column; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); box-shadow: var(--wp--preset--shadow--sm); overflow: clip; transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); } li.wc-block-product:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--md); } li.wc-block-product:has(:focus-visible) { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } li.wc-block-product :focus-visible { outline: 0; } li.wc-block-product .wc-block-components-product-image { position: relative; margin: 0; aspect-ratio: var(--wp--custom--image--product); background: var(--wp--preset--color--accent-5); overflow: clip; border-radius: 0; } li.wc-block-product .wc-block-components-product-image a { position: absolute; inset: 0; display: block; } /* the photo always fills the square card (a tall photo made the card grow in Chrome and was cut around its middle in Safari); model photos (file names with "model") start at the top, so heads stay in (owner, 2026-10-21) */ li.wc-block-product .wc-block-components-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; display: block; border-radius: 0; } li.wc-block-product .wc-block-components-product-image img[src*="model"] { object-position: 50% 0; } .dd-card__badges { position: absolute; top: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); display: flex; gap: var(--wp--preset--spacing--20); flex-wrap: wrap; z-index: var(--wp--custom--z--base); } .dd-card__body { flex: 1; } /* the card's spacing and type are block attributes; the category stays on one line and the title link covers the card */ .dd-card__cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-card__cat a, .dd-card__title a { text-decoration: none; } .dd-card__title a::after { content: ""; position: absolute; inset: 0; } .dd-card__foot { margin-top: auto !important; } .dd-card__foot .wp-block-woocommerce-product-button { position: relative; z-index: var(--wp--custom--z--base); } .dd-card__foot .wp-block-button__link, .dd-card__foot .wc-block-components-product-button__button { min-height: var(--wp--custom--control--button-height-small); padding: 0 var(--wp--custom--control--padding-x-small); } .wc-block-components-product-button__button.disabled, .wc-block-components-product-button__button[aria-disabled="true"] { background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-4); box-shadow: none; } li.wc-block-product:has(.dd-badge--sold-out) .wc-block-components-product-image img { opacity: 0.55; } /* ---------- pagination ---------- */ .wp-block-query-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--60); } .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers, .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); min-width: var(--wp--custom--control--min); min-height: var(--wp--custom--control--min); padding: 0 var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--button); color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: var(--wp--custom--font-weight--semibold); } .wp-block-query-pagination a:hover, .woocommerce-pagination a.page-numbers:hover { background: var(--wp--preset--color--accent-5); } .wp-block-query-pagination span.page-numbers.current, .woocommerce-pagination span.page-numbers.current { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); } .wp-block-query-pagination .wp-block-query-pagination-numbers { display: inline-flex; gap: var(--wp--preset--spacing--20); } /* ---------- filters, refinement 2 (owner review): one step smaller, centred marks, full-width price fields ---------- */ .wp-block-woocommerce-product-filters { font-size: var(--wp--preset--font-size--small); } @media (min-width: 601px) { .dd-shop__filters .wc-block-product-filters__overlay-content { gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } } .wp-block-woocommerce-product-filters h3.wp-block-heading { margin-bottom: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--accent-4); } /* checkbox rows: 20px box, the whole 44px row is the target */ .wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); border-radius: calc(var(--wp--custom--radius--input) / 3); } .wc-block-product-filter-checkbox-list__label { gap: var(--wp--preset--spacing--30); } /* the tick is centred by inset + margin auto (Safari ignores grid centring for an absolute child) */ .wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark { inset: 0; margin: auto; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); transform: scale(0.8); } .wc-block-product-filter-checkbox-list__count > span { min-width: var(--wp--custom--icon--sm); min-height: var(--wp--custom--icon--sm); } /* option chips: a 44px button holding a 32px pill */ .wc-block-product-filter-chips__items { gap: 0 var(--wp--preset--spacing--20); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item { min-width: 0; padding: 0; border: 0; background: transparent !important; } .wc-block-product-filter-chips .wc-block-product-filter-chips__label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--icon--lg); min-width: var(--wp--custom--icon--lg); padding: 0 var(--wp--preset--spacing--30); box-sizing: border-box; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--chip); background: var(--wp--preset--color--surface); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--bold); transition: background var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:hover .wc-block-product-filter-chips__label { background: var(--wp--preset--color--accent-5); border-color: var(--wp--preset--color--contrast); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item[aria-checked="true"] { color: var(--wp--preset--color--on-accent); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item[aria-checked="true"] .wc-block-product-filter-chips__label { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:is([disabled], [aria-disabled="true"]) { text-decoration: none; } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:is([disabled], [aria-disabled="true"]) .wc-block-product-filter-chips__label { background: var(--wp--preset--color--accent-6); border-color: var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-4); text-decoration: line-through; } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:focus-visible { outline: 0; } .wc-block-product-filter-chips .wc-block-product-filter-chips__item:focus-visible .wc-block-product-filter-chips__label { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); } /* active filters: smaller label, the close button is a 44px target with a centred icon */ .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__item { min-height: var(--wp--custom--control--min); padding: 0 0 0 var(--wp--preset--spacing--40); gap: 0; font-size: var(--wp--preset--font-size--x-small); } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove { position: relative; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); background: transparent !important; } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove::before { content: ""; position: absolute; inset: 0; margin: auto; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--surface); opacity: 0; transition: opacity var(--wp--custom--transition--fast); } .wc-block-product-filter-removable-chips .wc-block-product-filter-removable-chips__remove:hover::before { opacity: 1; } .wc-block-product-filter-removable-chips__remove-icon { position: absolute; inset: 0; margin: auto; display: block; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); } .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link { min-height: var(--wp--custom--icon--lg); padding: 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--x-small); } .wp-block-woocommerce-product-filter-clear-button .wp-block-button { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); } /* price: WooCommerce sets a three-column grid and 60px inputs; slider above, two equal fields below */ .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "range range" "left right" !important; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range { grid-area: range !important; } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__left { grid-area: left !important; } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__right { grid-area: right !important; } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__content input[type="text"] { width: 100% !important; max-width: none !important; min-height: var(--wp--custom--control--min) !important; padding: 0 var(--wp--preset--spacing--30) !important; font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; text-align: left; background: var(--wp--preset--color--surface) !important; } .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); } .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb { width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); } .wc-block-product-filter-price-slider__range { margin-inline: calc(var(--wp--custom--icon--sm) / 2) !important; } /* price slider geometry: a 20px tall slider box, the 4px track and the thumbs both centred on its middle line, then a clear gap before the two fields */ .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range { position: relative; height: var(--wp--custom--icon--sm); margin: var(--wp--preset--spacing--20) calc(var(--wp--custom--icon--sm) / 2) var(--wp--preset--spacing--30) !important; } .wc-block-product-filter-price-slider__range .range-bar { position: absolute !important; left: 0; right: 0; top: 50% !important; height: calc(var(--wp--custom--border--strong) * 2) !important; transform: translateY(-50%); } .wc-block-product-filter-price-slider__range input[type="range"] { top: 50% !important; } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__content { row-gap: var(--wp--preset--spacing--30) !important; } .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__content input[type="text"] { min-height: var(--wp--custom--icon--xl) !important; height: var(--wp--custom--icon--xl); border-radius: var(--wp--custom--radius--input) !important; } /* selected price range: WooCommerce draws it as the slider's ::before from --low/--high; a 4px ink bar on the track */ .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range::before { content: "" !important; position: absolute !important; top: 50% !important; bottom: auto !important; left: var(--low, 0%) !important; right: auto !important; width: calc(var(--high, 100%) - var(--low, 0%)) !important; height: calc(var(--wp--custom--border--strong) * 2) !important; transform: translateY(-50%); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--contrast) !important; opacity: 1 !important; z-index: 1; pointer-events: none; -webkit-mask: none !important; mask: none !important; } .wc-block-product-filter-price-slider__range .range-bar::before, .wc-block-product-filter-price-slider__range .range-bar-fill { display: none !important; } .wc-block-product-filter-price-slider__range input[type="range"] { z-index: 2; } /* checkbox labels one step up */ .wc-block-product-filter-checkbox-list__text { font-size: var(--wp--preset--font-size--medium); } /* ---------- plain product card (layout.json card: plain; body class dd-cards--plain): image, then text, no frame ---------- */ .dd-cards--plain li.wc-block-product { background: none; border-color: transparent; box-shadow: none; overflow: visible; } .dd-cards--plain li.wc-block-product:hover { transform: none; box-shadow: none; } .dd-cards--plain li.wc-block-product .wc-block-components-product-image { border-radius: var(--wp--custom--radius--image); } .dd-cards--plain li.wc-block-product:hover .wc-block-components-product-image img { scale: var(--wp--custom--motion--zoom); } .dd-cards--plain li.wc-block-product .wc-block-components-product-image img { transition: scale var(--wp--custom--transition--base); } /* ---------- folding filters (assets/js/shop.js part 3, owner 2026-10-21) ---------- */ /* closed filters: the head's