/*
 * Product archive / category / shop listing styles.
 *
 * Refreshed 16-10-2026. Until then this file reproduced the live site's
 * Elementor archive pixel for pixel (11-10-2026 parity round); the refresh keeps
 * every piece of that structure and behaviour — 12 per page, three columns,
 * WooCommerce's own count and sort, the facet set, the tile row, the type
 * colours — and replaces only the look: a full-width shortcut row, a calmer
 * filter column with real dividers and drawn checkboxes, and a card where the
 * type label sits on the photo and "v.a." sits over the price.
 *
 * Scoping — read this before adding a rule:
 *
 * WooCommerce's own stylesheet IS still loaded here (inc/woocommerce.php only
 * dequeues it off-shop), and its loop selectors are specific:
 * `.woocommerce ul.products li.product` (0,3,2),
 * `.woocommerce ul.products li.product a img` (0,3,3),
 * `.woocommerce ul.products li.product .price` (0,4,2).
 *
 * ⚠️ The body-class prefix alone is NOT enough. `:is(…) .hs-pcard` is (0,2,0):
 * :is() counts as its most specific argument — ONE class, not one per argument.
 * So a rule that has to beat WooCommerce also names the loop chain it is fighting
 * — `… ul.products li.product.hs-pcard …` — which puts it at (0,4,2) or better.
 * Rules with no Woo counterpart keep the short prefix; they only need the page
 * scoping. Still no !important anywhere: check the computed value, don't assume.
 *
 * This doubles as the page-scoping CLAUDE.md requires: nothing in this file can
 * reach the global chrome. .hs-pcard*, .hs-tile*, .hs-facet* belong to this file
 * alone, and nothing outside it may reuse those names.
 *
 * The card selectors also carry .single-product, because the PDP's related and
 * up-sell loops use the same card. The grid and page rules deliberately do NOT:
 * on a PDP the related grid is product.css's, and this file must not fight it.
 *
 * Breakpoints: 992px (below it the filters become a full-screen panel;
 * assets/js/archive.js uses the same number), 1025px (three columns) and 768px
 * (phone card).
 */

/* Scoped tokens. Page-scoped, so they can never leak into the chrome. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) {
	--hs-archive-line: var(--border-1);
	/* The lightest grey that still gives a control boundary 3:1 on white
	 * (WCAG 1.4.11): checkbox edges, price fields, the sort select. */
	--hs-archive-control: var(--hs-ink-4);
	--hs-archive-card-radius: var(--r-xl);
	--hs-archive-media-radius: var(--r-xl);
	/* Teal-tinted, offset and soft: the card lifts towards the reader. */
	--hs-archive-lift: 0 14px 30px -14px rgba(1, 82, 97, .30), 0 2px 6px -2px rgba(1, 82, 97, .10);
	--hs-archive-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Page title ----------
 * base.css owns the global h1; only the archive's spacing differs.
 * woocommerce_content() prints this <h1 class="page-title"> without a header
 * wrapper. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .wc-wrap > h1.page-title {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-32);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	text-wrap: balance;
}

/* ---------- "Waar ben je naar op zoek?" — the shortcut row ----------
 *
 * Full width above filters and grid (inc/archive-filters.php renders it before
 * the layout opens). Desktop: one row of equal tiles. Below 1025px: a
 * horizontally scrolling rail that snaps per tile, so the shortcuts are there on
 * a phone too — live hid them there, which removed the quickest way out of a
 * category on exactly the screen where scrolling a long grid hurts most. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__tiles {
	margin: 0 0 var(--sp-8);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__tiles-title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tiles {
	display: flex;
	gap: var(--sp-3);
	margin: 0;
	padding: 2px 2px var(--sp-2); /* room for the focus ring and the scrollbar */
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* No scrollbar: under the first tile its thumb read as "selected". The
	 * tile cut off at the right edge is the scroll hint. */
	scrollbar-width: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tiles::-webkit-scrollbar {
	display: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tiles > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

@media (min-width: 1025px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tiles {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		overflow: visible;
		padding-bottom: 0;
	}
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	height: 100%;
	min-height: 76px;
	padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
	border: 1px solid var(--hs-archive-line);
	border-radius: var(--r-xl);
	background: var(--bg-2);
	color: var(--fg-1);
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile:hover {
	border-color: var(--hs-teal-200);
	background: var(--hs-teal-50);
	box-shadow: var(--hs-archive-lift);
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile:active {
	transform: translateY(1px);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* The photo sits in its own white square, so a product shot with a white
 * background reads as an object on a tile and not as a hole in it. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile__img {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	padding: 6px;
	border-radius: var(--r-lg);
	background: var(--bg-1);
	object-fit: contain;
	transition: transform var(--dur-slow) var(--ease-out);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile:hover .hs-tile__img {
	transform: scale(1.06);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile__label {
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--fs-15);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	white-space: nowrap;
	color: var(--fg-1);
}

@media (max-width: 767px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .wc-wrap > h1.page-title {
		margin-bottom: var(--sp-4);
		font-size: var(--fs-28);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__tiles {
		margin-bottom: var(--sp-5);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__tiles-title {
		font-size: var(--fs-18);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile {
		min-height: 60px;
		padding-right: var(--sp-4);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-tile__img {
		width: 44px;
		height: 44px;
		padding: 4px;
	}
}

/* ---------- Layout: filter column + main column ----------
 * 264px of filters and the rest for the grid from 992px; stacked below. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__layout {
	display: flex;
	flex-direction: column;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__main {
	min-width: 0;
}

@media (min-width: 992px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__layout {
		display: grid;
		grid-template-columns: 264px minmax(0, 1fr);
		column-gap: var(--sp-10);
		align-items: start;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__layout--nofilters {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* ---------- Toolbar: count left, search + sort right ----------
/* ---------- Toolbar: search + sort on one row, the count under it ----------
 *
 * Resultaat 1–12 van 19 …        [ Zoek in de webshop…  ⌕ ] [⇅ Sorteren]
 * (on a phone: search + sort icon on one row, the count under it)
 *
 * The search field is the shop-only search (hs_archive_search_form() in
 * inc/archive.php), not the site search in the header. Sorting is a compact
 * control next to it: on a phone only the icon.
 *
 * ⚠️ The float resets are load-bearing. woocommerce-layout.css floats the
 * count left and the ordering form right at (0,2,0); the clearfix that caught
 * that — ul.products::before/::after — is switched off below because it became
 * a grid cell. The selectors name the wrapper and land on (0,3,0) or better. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-5);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-result-count {
	order: 1;
	flex: 1 1 auto;
	float: none;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	letter-spacing: normal;
	font-variant-numeric: tabular-nums;
	color: var(--fg-3);
}

/* -- The search field. The magnifier is the submit button, inside the field on
 * the right; a "wis" cross appears before it once a term is active. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search {
	position: relative;
	order: 2;
	display: flex;
	/* 360px, not the full row (16-10-2026): a product name is short, and a
	 * field as wide as the grid read as the page's main search. */
	flex: 0 1 360px;
	align-items: center;
	min-width: 0;
	margin: 0; /* right-hand side, next to the sort control */
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 52px 0 var(--sp-4);
	border: 1px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1);
	color: var(--fg-1);
	font-family: var(--font-sans);
	font-size: var(--fs-16); /* 16px: no iOS zoom on focus */
	line-height: 1.2;
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-input::placeholder {
	color: var(--fg-3);
	opacity: 1;
}

/* The browser's own clear button would sit on top of ours. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-input:hover {
	border-color: var(--fg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-input:focus-visible {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--hs-teal-100);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search:has(.hs-archive__search-clear) .hs-archive__search-input {
	padding-right: 88px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-submit {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--accent-fill);
	color: var(--fg-on-brand);
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-submit .hs-icon {
	width: 18px;
	height: 18px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-submit:hover {
	background: var(--hs-teal-800);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-submit:focus-visible,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-clear:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-clear {
	position: absolute;
	top: 4px;
	right: 44px;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	color: var(--fg-2);
	background:
		linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat,
		linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search-clear:hover {
	background-color: var(--bg-2);
	color: var(--fg-1);
}

/* -- Sort. The select stays a NATIVE <select>: the only element that gives
 * the OS picker on mobile and works without JavaScript. It is drawn as a
 * compact button: the sort glyph as its background, and its own text replaced
 * by the word "Sorteren" (::after on the form, pointer-events: none, so a click
 * anywhere still lands on the select). The chosen option is what the open list
 * shows checked; the screen-reader name is WooCommerce's own aria-label. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering {
	position: relative;
	order: 3;
	flex: 0 0 auto;
	float: none;
	margin: 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 136px;
	height: 44px;
	margin: 0;
	padding: 0 0 0 40px;
	border: 1px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 16.5 7 20l3.5-3.5M17 20V4M13.5 7.5 17 4l3.5 3.5'/%3E%3C/svg%3E") no-repeat 13px center / 18px;
	color: transparent;
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	line-height: 1.2;
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}

/* The options in the open list keep readable text (Firefox and Windows draw
 * them with the select's colour). */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering select.orderby option {
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering::after {
	content: "Sorteren";
	position: absolute;
	top: 50%;
	left: 40px;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--fg-1);
	pointer-events: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering select.orderby:hover {
	border-color: var(--fg-2);
	background-color: var(--bg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* -- Live suggestions under the search field (assets/js/archive.js). A card
 * that floats over the grid, as wide as the field or a little wider. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__suggest {
	position: absolute;
	top: calc(100% + 6px);
	right: 0; /* the field sits on the right, so the card grows leftwards */
	z-index: 40;
	width: max(100%, 420px);
	max-width: calc(100vw - 2 * var(--sp-4));
	max-height: min(70vh, 560px);
	padding: var(--sp-2);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--hs-archive-line);
	border-radius: var(--r-xl);
	background: var(--bg-1);
	box-shadow: var(--shadow-3);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2);
	border-radius: var(--r-lg);
	color: var(--fg-1);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__item:hover,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__item.is-active {
	background: var(--hs-teal-50);
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__suggest .hs-suggest__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 4px;
	border-radius: var(--r-lg);
	background: var(--bg-2);
	object-fit: contain;
	mix-blend-mode: multiply;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__title {
	overflow: hidden;
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__price {
	font-size: var(--fs-14);
	font-variant-numeric: tabular-nums;
	color: var(--fg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__all {
	display: block;
	width: 100%;
	margin: var(--sp-1) 0 0;
	padding: var(--sp-3);
	border: 0;
	border-top: 1px solid var(--border-2);
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	background: none;
	font-family: var(--font-sans);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--accent-text);
	text-align: left;
	cursor: pointer;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__all:hover,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__all:focus-visible {
	background: var(--bg-2);
	color: var(--hs-teal-800);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-suggest__empty {
	margin: 0;
	padding: var(--sp-3);
	font-size: var(--fs-14);
	color: var(--fg-2);
}

/* While a lookup runs, the magnifier pulses; no spinner needed for ~100ms. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search.is-loading .hs-archive__search-submit {
	animation: hs-archive-pulse 900ms var(--ease-standard) infinite;
}

@keyframes hs-archive-pulse {
	50% { opacity: .55; }
}

/* -- The custom sort dropdown (assets/js/archive.js). Once it is built the
 * form carries .is-enhanced: the native select stays in the form as the field
 * that submits, but is taken out of sight and out of the tab order. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering.is-enhanced select.orderby {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering.is-enhanced::after {
	content: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort {
	position: relative;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__button {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	height: 44px;
	margin: 0;
	padding: 0 var(--sp-4) 0 40px;
	border: 1px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 16.5 7 20l3.5-3.5M17 20V4M13.5 7.5 17 4l3.5 3.5'/%3E%3C/svg%3E") no-repeat 13px center / 18px;
	color: var(--fg-1);
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__button:hover,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort.is-open .hs-sort__button {
	border-color: var(--fg-2);
	background-color: var(--bg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 40;
	min-width: 240px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	border: 1px solid var(--hs-archive-line);
	border-radius: var(--r-xl);
	background: var(--bg-1);
	box-shadow: var(--shadow-3);
	transform-origin: top right;
	animation: hs-sort-in var(--dur-base) var(--ease-out);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__list:focus {
	outline: none;
}

@keyframes hs-sort-in {
	from { opacity: 0; transform: translateY(-4px) scale(.98); }
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 40px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-lg);
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	color: var(--fg-1);
	white-space: nowrap;
	cursor: pointer;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option:hover,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option.is-active {
	background: var(--hs-teal-50);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option.is-active {
	box-shadow: inset 0 0 0 2px var(--hs-teal-200);
}

/* The current choice: bold with a tick on the right. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option[aria-selected="true"] {
	font-weight: var(--fw-bold);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__option[aria-selected="true"]::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23006e7c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px;
}

/* A phone: the icon alone, so the search field gets the width. */
@media (max-width: 767px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__search {
		flex: 1 1 0;
		margin-right: 0;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-result-count {
		order: 4;
		flex-basis: 100%;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__suggest {
		right: auto;
		left: 0;
		width: calc(100vw - 2 * var(--sp-4));
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__button {
		width: 44px;
		padding: 0;
		background-position: center;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-sort__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering select.orderby {
		width: 44px;
		padding: 0;
		background-position: center;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__toolbar .woocommerce-ordering::after {
		content: none;
	}
}

/* ---------- Grid ---------- */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products {
		gap: var(--sp-3);
	}
}

/*
 * Kill WooCommerce's float clearfix on the list.
 *
 * woocommerce-layout.css ships `.woocommerce ul.products::before, ::after
 * { content: " "; display: table }`. In a GRID container both pseudo-elements
 * become real grid items: ::before claims cell 1 and ::after a cell at the end
 * (measured: the first product sat in column 2). If you ever turn another
 * WooCommerce container into a grid or flex layout, check its clearfix first.
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products::before,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products::after {
	content: none;
}

/*
 * The compounded .woocommerce-page is load-bearing. Below 768px
 * woocommerce-smallscreen.css applies `.woocommerce ul.products[class*=columns-]
 * li.product { width: 48% }` at (0,4,2); without the body class this reset
 * lands at (0,3,2) and loses (measured: cards at 48% of their own cell).
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product).woocommerce-page ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}

/* ---------- The cell around the card (22-10-2026) ----------
 * The archive renders hs_product_card() (product-card.css) inside each li; the
 * li is only the grid cell and passes its full row height on to the card.
 * WooCommerce's ".woocommerce ul.products li.product a img" (0,3,3) gives the
 * photo width: 100% and a 1em bottom margin, which would stretch the device
 * out of its halo; this resets it at (0,5,3). The old card rules below still
 * style the PDP's up-sells loop. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product).woocommerce-page ul.products li.product.hs-pcard-cell { display: flex; }
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) ul.products li.hs-pcard-cell > .hs-home-pcard { flex: 1; min-width: 0; }
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product).woocommerce-page ul.products li.product .hs-home-pcard__media img { width: auto; margin: 0; box-shadow: none; }
/* "Bekijk" in the shop (client, 22-10-2026): larger than on the homepage on a
 * desktop, and the full width of the card on a phone, under the price. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-pcard-cell .hs-home-pcard__cta { padding: 12px 14px 12px 18px; font-size: var(--fs-15); }
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-pcard-cell .hs-home-pcard__cta .hs-icon { width: 15px; height: 15px; }
@media (max-width: 767px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-pcard-cell .hs-home-pcard__foot { flex-wrap: wrap; }
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-pcard-cell .hs-home-pcard__cta { flex: 1 1 100%; justify-content: center; margin-left: 0; padding: 12px; }
}

/* ---------- Card ----------
 *
 * Photo panel with the type label on it, title, colours, then — pinned to the
 * bottom so it lines up across a row whatever the title length — "v.a." over the
 * price, the stock line, and "Bekijk" bottom-right. WooCommerce closes the
 * product link before the button, so the button cannot share a row with the
 * price in the DOM; hence absolute on desktop, in the flow on a phone.
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-3) var(--sp-3) var(--sp-4);
	border: 1px solid var(--hs-archive-line);
	border-radius: var(--hs-archive-card-radius);
	background: var(--bg-1);
	box-shadow: none;
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-out);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard:hover {
	border-color: var(--hs-teal-200);
	box-shadow: var(--hs-archive-lift);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard .woocommerce-LoopProduct-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: var(--hs-archive-media-radius);
}

/*
 * The photo panel: a fixed-height soft panel, image centred with
 * `object-fit: contain`. `mix-blend-mode: multiply` lets the white backdrop of a
 * product shot take the panel's tint instead of showing as a white rectangle.
 *
 * The img is absolutely positioned: WooCommerce ships `.woocommerce ul.products
 * li.product a img { height: auto; margin: 0 0 1em }` at (0,3,3), so the
 * selector names the loop chain and lands at (0,5,3).
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__media {
	position: relative;
	height: 230px;
	border-radius: var(--hs-archive-media-radius);
	background: var(--bg-2);
	overflow: hidden;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__media img {
	position: absolute;
	inset: var(--sp-6) var(--sp-4) var(--sp-4);
	display: block;
	width: calc(100% - var(--sp-8));
	max-width: none;
	height: calc(100% - var(--sp-6) - var(--sp-4));
	max-height: none;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--dur-slow) var(--ease-out);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard:hover .hs-pcard__media img {
	transform: scale(1.04);
}

/* Type + sale label, top-left on the photo.
 *
 * ⚠️ White on --badge-refurb / --badge-new is the logged, owner-approved AA
 * deviation documented at those tokens in variables.css — same colours as live
 * and as the PDP badge. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__badges .hs-badge {
	padding: 5px 9px;
	border-radius: var(--r-lg);
	font-family: var(--font-sans);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: .01em;
	box-shadow: 0 2px 6px -2px rgba(15, 23, 26, .25);
}

/* Title: two lines at most, and always two lines tall, so colours and price
 * start at the same height in every card of a row. Woo pads it `.5em 0` at
 * (0,4,2); the loop chain lifts this above that. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: calc(2em * 1.35);
	margin: var(--sp-4) var(--sp-1) 0;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--font-display);
	font-size: var(--fs-18); /* 16 → 18 on 20-10-2026: the name is what you scan for */
	font-weight: var(--fw-semibold);
	line-height: 1.35;
	letter-spacing: var(--tracking-tight);
	color: var(--fg-1);
}

/* Colour dots. The fill is the term's own hex; the inset ring keeps a white or
 * near-white colour visible against the white card (WCAG 1.4.11). */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--sp-3) var(--sp-1) 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hs-ink) 18%, transparent);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__dots-more {
	margin-left: 2px;
	font-family: var(--font-sans);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	line-height: 18px;
	color: var(--fg-2);
}

/*
 * Price: pinned to the bottom of the link (margin-top: auto), "v.a." on its own
 * line above the amount.
 *
 * ⚠️ Accessibility, not just styling. WooCommerce prices the loop in its own
 * olive at .857em/400 at (0,4,2) — 3.41:1 on white. Naming the loop chain lands
 * this at (0,5,2) so the design values apply (--fg-1 is 15.3:1).
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .price {
	display: block;
	margin: auto var(--sp-1) 0;
	padding: var(--sp-4) 104px 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	letter-spacing: var(--tracking-tight);
	font-variant-numeric: tabular-nums;
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .price del {
	margin-right: var(--sp-1);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	color: var(--fg-3);
	opacity: 1;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .price ins {
	text-decoration: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__from {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-sans);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--fg-2);
}

/* Stock line under the price, led by a dot in the same colour. Live's #00af6a
 * fails 1.4.3 for small text; --hs-green-800 (7.08:1) is the accessible green. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--sp-1) var(--sp-1) 0;
	padding-right: 104px;
	font-family: var(--font-sans);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	line-height: 1.4;
	letter-spacing: normal;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock--in {
	color: var(--hs-green-800);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock--backorder {
	color: var(--fg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock--out {
	color: var(--hs-danger);
}

/* "Bekijk", bottom-right. --accent-fill (#008392) is the teal that carries
 * white text at 4.5:1. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__cta {
	position: absolute;
	right: var(--sp-4);
	bottom: var(--sp-4);
	margin: 0;
	padding: 10px 20px;
	border-radius: var(--r-lg);
	box-shadow: none;
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	line-height: 24px;
	letter-spacing: normal;
	transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__cta:hover {
	background: var(--hs-teal-800);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__cta:active {
	transform: translateY(1px);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__cta:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Two narrow columns: no room beside the price, so "Bekijk" goes into the flow
 * under the stock line, full card width. */
@media (max-width: 767px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard {
		padding: var(--sp-2) var(--sp-2) var(--sp-3);
		border-radius: var(--r-xl);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__media {
		height: 160px;
		border-radius: var(--r-lg);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__media img {
		inset: 36px var(--sp-2) var(--sp-2);
		width: calc(100% - var(--sp-4));
		height: calc(100% - 36px - var(--sp-2));
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__badges {
		top: 6px;
		left: 6px;
		right: 6px;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__badges .hs-badge {
		padding: 4px 7px;
		font-size: 11px;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .woocommerce-loop-product__title {
		margin-top: var(--sp-3);
		font-size: var(--fs-15);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__dot {
		width: 14px;
		height: 14px;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__dots {
		gap: 4px;
		margin-top: var(--sp-2);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .price {
		padding: var(--sp-3) 0 0;
		font-size: var(--fs-18);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) .hs-pcard__stock {
		padding-right: 0;
		font-size: var(--fs-12);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product, .single-product) ul.products li.product.hs-pcard .hs-pcard__cta {
		position: static;
		display: flex;
		justify-content: center;
		margin: var(--sp-3) var(--sp-1) 0;
		padding: 8px 12px;
		font-size: var(--fs-14);
	}
}

/* ---------- The filter column ----------
 *
 * A visible "Producten filteren" heading, then one group per facet separated by
 * a hairline: title in the display face, values as drawn checkboxes on 32px
 * rows (above the 24 × 24 WCAG 2.5.8 asks for; the whole row is the <label>).
 * Type is two coloured toggles, price two fields with a currency sign. Which
 * facets render depends on the product group (hs_archive_facet_set()).
 *
 * Below 992px it is a <details>: the summary is the "Filters:" button, and with
 * archive.js the open panel is full screen. One render of the form only — two
 * would give two fields with the same `name` and the last would win.
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: 10px 22px;
	border: 1px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1);
	color: var(--fg-1);
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	line-height: 24px;
	letter-spacing: normal;
	cursor: pointer;
	list-style: none;
	transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}

/* Three lines of decreasing length: the filter glyph, drawn, not a character. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__toggle::before {
	content: "";
	width: 16px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) top center / 16px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
		linear-gradient(currentColor, currentColor) bottom center / 4px 2px no-repeat;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__toggle::-webkit-details-marker {
	display: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__toggle:hover {
	border-color: var(--accent);
	background: var(--hs-teal-50);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* The heading labels the <aside> and is the panel's focus target. Visible on
 * desktop; in the mobile panel the summary already says "Filters", so there it
 * is visually hidden — never display:none, which would drop it from the
 * accessibility tree. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * ⚠️ The <details> mechanism. On desktop the panel must be permanently open,
 * but CSS cannot force `open`: a closed <details> does not render its content.
 * ::details-content with content-visibility can, behind a feature query. Where
 * that is unsupported the summary stays as a working toggle — one extra click on
 * desktop, but the fields are never unreachable. That is the invariant.
 */
@media (min-width: 992px) {
	@supports selector(::details-content) {
		:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets::details-content {
			display: block;
			content-visibility: visible;
			block-size: auto;
		}

		:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets > .hs-facets__toggle {
			display: none;
		}
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__title {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 var(--sp-2);
		overflow: visible;
		clip-path: none;
		white-space: normal;
		font-family: var(--font-display);
		font-size: var(--fs-18);
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug);
		color: var(--fg-1);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__title:focus {
		outline: none;
	}
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet {
	min-width: 0;
	margin: 0;
	padding: var(--sp-4) 0;
	border: 0;
	border-top: 1px solid var(--hs-archive-line);
}

/* The legend floats so it lays out as an ordinary block inside the fieldset's
 * padding instead of sitting in the border edge (where it would cut through the
 * divider above). The list after it clears the float. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--sp-2);
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--fs-15);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: normal;
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__legend + * {
	clear: both;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__values {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-regular);
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--fg-2);
}

/* The drawn checkbox: a native input with its look replaced, so it keeps its
 * keyboard behaviour, its form value and its checked state for free. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	display: grid;
	place-content: center;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	border: 1.5px solid var(--hs-archive-control);
	border-radius: 5px;
	background: var(--bg-1) no-repeat center / 14px;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value input[type="checkbox"]:checked {
	border-color: var(--accent-fill);
	background-color: var(--accent-fill);
	background-image: var(--hs-archive-check);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value:hover input[type="checkbox"]:not(:disabled):not(:checked) {
	border-color: var(--accent);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* The label stretches over the whole row, so the row is the target. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value label {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 0;
	color: var(--fg-2);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value:hover label,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value input:checked + label {
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value input:checked + label {
	font-weight: var(--fw-bold);
}

/* A value with no result here (Type and Merk only): faded and not clickable.
 * A disabled control is exempt from the contrast minimum (1.4.3). */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value--disabled label {
	color: var(--hs-ink-4);
	cursor: default;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value--disabled input[type="checkbox"] {
	border-color: var(--border-1);
	background-color: var(--bg-2);
	cursor: default;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__value--disabled:hover label {
	color: var(--hs-ink-4);
}

/* "Toon meer": collapsed only once archive.js has run (it adds .is-collapsed
 * and un-hides the button); without JavaScript every value is visible. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet.is-collapsed .hs-facet__value--more {
	display: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: var(--sp-1) 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--accent-text);
	cursor: pointer;
}

/* A chevron that points where the list will go. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__more::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__more[aria-expanded="true"]::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__more:hover {
	color: var(--hs-teal-800);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__more:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* The category list: links drawn like the checkbox rows. The current category
 * gets the box filled and ticked; aria-current says the same to a screen
 * reader. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	padding: 6px 0;
	color: var(--fg-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link:hover {
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link:hover .hs-facet__box {
	border-color: var(--accent);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link.is-current {
	font-weight: var(--fw-bold);
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	border: 1.5px solid var(--hs-archive-control);
	border-radius: 5px;
	background: var(--bg-1) no-repeat center / 14px;
	transition: border-color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet__link.is-current .hs-facet__box {
	border-color: var(--accent-fill);
	background-color: var(--accent-fill);
	background-image: var(--hs-archive-check);
}

/* ---------- Type: Refurbished / Nieuw in doos as two toggles ----------
 *
 * Side by side, each in its own colour — the same --badge-* colours as the card
 * label, so the filter and the card can never drift. Off: a tinted outline with
 * dark text. On: the solid label with a drawn tick (a shape, not only a colour —
 * WCAG 1.4.1). White on the solid fill is the logged, owner-approved AA
 * deviation (variables.css).
 *
 * The real checkbox is clipped, never display:none, so it stays focusable and
 * operable with the space bar (2.1.1); the focus ring sits on the toggle. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value {
	min-height: 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 8px 14px;
	border: 1.5px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1);
	color: var(--fg-1);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value--tone-refurb label {
	border-color: var(--badge-refurb);
	background: var(--hs-green-50);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value--tone-new label {
	border-color: var(--badge-new);
	background: var(--hs-orange-100);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value--tone-refurb input:checked + label {
	background: var(--badge-refurb);
	color: var(--badge-refurb-fg);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value--tone-new input:checked + label {
	background: var(--badge-new);
	color: var(--badge-new-fg);
}

/* Checked: a white tick in front of the word on the solid fill. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type input:checked + label::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: var(--hs-archive-check) no-repeat center / 14px;
}

/* A type with no result here: faded. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value--disabled label {
	opacity: .45;
	cursor: default;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type .hs-facet__value:not(.hs-facet__value--disabled) label:hover {
	box-shadow: 0 4px 10px -6px rgba(15, 23, 26, .35);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facet--product-type input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Price range: [ min ] tot [ max ] € ----------
 * Two equal fields filling the column. The boundary is --hs-ink-4, the 3:1 that
 * WCAG 1.4.11 asks of a control. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-regular);
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--fg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__input {
	width: 100%;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 var(--sp-3);
	border: 1px solid var(--hs-archive-control);
	border-radius: var(--r-lg);
	background: var(--bg-1);
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--fg-1);
	-moz-appearance: textfield;
	transition: border-color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__input:hover {
	border-color: var(--fg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__input::-webkit-inner-spin-button,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__input:focus-visible {
	border-color: var(--accent);
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-price__to {
	margin: 0;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__actions {
	margin-top: var(--sp-5);
}

/* ---------- Active filters, above the grid ----------
 * The only filter links on the page (§9.3), and they carry rel="nofollow". */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__chips {
	margin: 0 0 var(--sp-5);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__chiplist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__chiplist .hs-chip {
	padding: 7px 12px 7px 14px;
	border-color: var(--hs-teal-200);
	background: var(--hs-teal-50);
	color: var(--fg-1);
	text-decoration: none;
}

/* The ✕ is part of the chip's own target, not a second 16px button. Drawn
 * with two bars rather than a glyph so it sits on the optical centre. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-chip--remove::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left: var(--sp-1);
	background:
		linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__chiplist .hs-chip:hover {
	border-color: var(--accent-fill);
	background: var(--accent-fill);
	color: var(--fg-on-brand);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__clear {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--accent-text);
	text-underline-offset: 3px;
}

/* ---------- Empty state ---------- */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty {
	padding: var(--sp-8);
	border: 1px solid var(--hs-archive-line);
	border-radius: var(--hs-archive-card-radius);
	background: var(--bg-2);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty-title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	text-wrap: balance;
	color: var(--fg-1);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty-text {
	max-width: 60ch;
	margin: 0;
	color: var(--fg-2);
	line-height: var(--lh-base);
	text-wrap: pretty;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty-links .hs-chip {
	color: var(--fg-1);
	text-decoration: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__empty-links .hs-chip:hover {
	color: var(--fg-on-brand);
}

/* ---------- Pagination ----------
 *
 * 40 × 40 targets with rounded corners; the current page filled teal-800
 * (8.82:1 with white).
 *
 * ⚠️ Every selector names the Woo chain it fights:
 * `.woocommerce nav.woocommerce-pagination ul li a` is (0,2,4); naming `nav`,
 * `ul.page-numbers` and `a.page-numbers` puts this at (0,4,4). The arrows'
 * accessible names are a PHP filter on woocommerce_pagination_args
 * (inc/archive.php).
 */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination {
	margin-top: var(--sp-12);
}

/* Clearfix first, then flex: woocommerce-layout.css puts `content: " ";
 * display: table` on this <ul>'s ::before and ::after, which become flex items. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers::before,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers::after {
	content: none;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	white-space: normal;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--sp-2);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	background: none;
	font-family: var(--font-sans);
	font-size: var(--fs-15);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: normal;
	color: var(--fg-1);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	border-color: var(--hs-teal-200);
	background: var(--hs-teal-50);
	color: var(--fg-1);
}

/* The current page. Woo sets aria-current="page" on this <span> itself. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
	background: var(--hs-teal-800);
	color: var(--fg-on-brand);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
	color: var(--fg-3);
}

:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Live filtering and the mobile panel (§4.4, §4.5, §10.2) ----------
 *
 * Everything below hangs off .hs-facets--live, which assets/js/archive.js sets.
 * Without JavaScript none of it exists and the visible "Toon resultaten" button
 * is the real trigger. */

/* While fetching, the grid dims and reports busy. No overlay: the previous
 * result stays readable while the new one is on its way. */
:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-archive__results[aria-busy="true"] {
	opacity: .6;
	transition: opacity var(--dur-base) var(--ease-standard);
}

/* On desktop the filter applies instantly and there is no panel to leave, so
 * the button has no job. On mobile it stays: it is the way back. */
@media (min-width: 992px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live .hs-facets__actions {
		display: none;
	}
}

/* Full screen, not a bottom sheet. The whole <details> is fixed, so the
 * <summary> stays the panel's header and the first stop in the focus trap. */
@media (max-width: 991px) {
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] {
		position: fixed;
		inset: 0;
		/* Under the nav drawer (1000), above the sticky header (100). */
		z-index: 950;
		/* The <details> itself scrolls, not the form. Chrome wraps everything
		 * after the summary in a ::details-content box, so a flex column with an
		 * overflowing form never got a height to scroll in: measured 16-10-2026,
		 * the form was 3254px tall in an 812px panel and the "Toon producten"
		 * button sat 2.4k px below the screen, unreachable. */
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--bg-1);
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] > .hs-facets__toggle {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		margin: 0;
		padding: var(--sp-4);
		border: 0;
		border-bottom: 1px solid var(--border-1);
		border-radius: 0;
		background: var(--bg-1);
	}

	/* In panel form the toggle is a close button: the filter glyph gives way to
	 * a drawn ✕ on the right. */
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] > .hs-facets__toggle::before {
		display: none;
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] > .hs-facets__toggle::after {
		content: "";
		width: 16px;
		height: 16px;
		background:
			linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
			linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
	}

	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] > .hs-facets__form {
		padding: 0 var(--sp-4) var(--sp-4);
	}

	/* The first group needs no divider under the panel header. */
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__title + .hs-facet,
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets__title + input + .hs-facet {
		border-top: 0;
	}

	/* The button stays in view while scrolling: it carries the current count
	 * ("Toon 27 producten") and so answers every change. */
	:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .hs-facets--live[open] .hs-facets__actions {
		position: sticky;
		bottom: 0;
		margin-top: var(--sp-6);
		padding: var(--sp-4) 0 0;
		background: var(--bg-1);
		box-shadow: 0 -8px 12px -8px rgba(15, 23, 26, .15);
	}
}