.crumb {
	background: var(--color-surface);
	border-bottom: 1px solid var(--rule);
	padding: var(--space-14) 0;
	font-size: var(--text-13);
	color: var(--color-text-muted);
}
.crumb .crumb-nav a { color: var(--color-text-muted); }
.crumb .crumb-nav a:hover { color: var(--color-primary); }

.cat-hero {
	background: var(--color-surface);
	padding: var(--space-56) 0 var(--space-64);
	border-bottom: 1px solid var(--rule);
}
.cat-hero .cat-hero-grid {
	gap: var(--space-56);
	margin-bottom: 0;
	align-items: center;
}
.cat-hero .cat-hero-copy { min-width: 0; }
.cat-hero .eyebrow { margin: 0; }
.cat-hero .eyebrow:empty { display: none; }
.cat-hero h1 {
	font-size: clamp(32px, 4vw, 48px);
	overflow-wrap: anywhere;
	margin-top: var(--space-14);
	margin-bottom: var(--space-16);
}
.cat-hero .intro {
	font-size: var(--text-17);
	color: var(--color-text-muted);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 var(--space-28);
}
.cat-hero .intro p { margin: 0; font-size: inherit; }
.cat-hero .intro p + p { margin-top: var(--space-12); }
.cat-hero .chips { margin: 0; }
.cat-hero .chips:empty { display: none; }
.cat-hero .chips ul { display: flex; flex-wrap: wrap; gap: var(--space-10); margin: 0; padding: 0; list-style: none; }
.cat-hero .chips li { margin: 0; }
.cat-hero .chips .wp-block-term-name { margin: 0; }
.cat-hero .chips .wp-block-term-name a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--space-44);
	padding: 0 var(--space-16);
	background: var(--color-background);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	font-size: var(--text-14);
	font-weight: 500;
	color: var(--color-foreground);
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.cat-hero .chips .wp-block-term-name a::before { content: "→" / ""; color: var(--color-accent-text); font-size: var(--text-13); }
.cat-hero .chips .wp-block-term-name a:hover { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary); }
@media (min-width: 1024px) {
	.cat-hero .chips .wp-block-term-name a { min-height: var(--space-40); }
}

/* Kategoriens eget billede fra WooCommerce. Uden billede står kolonnen ikke, og teksten står alene. */
.cat-hero .cat-hero-media:not(:has(img)) { display: none; }
.cat-hero .cat-hero-photo {
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.cat-hero .cat-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cat-main { padding: var(--space-40) 0 var(--space-80); }
.cat-grid-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-32);
	align-items: flex-start;
}
.cat-results { min-width: 0; }
.cat-grid-layout > :is(.filters, .cat-results),
.filters > .wp-block-woocommerce-product-filters,
.cat-results > .pto-collection { margin-block-start: 0; }

/* Kolonnen klipper ikke sit indhold: filtrets felter står ude ved kanten, og en klipning skar deres fokusring væk. WooCommerce' egne variabler bærer farverne på afkrydsninger, skyder og aktive filtre. */
.filters {
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	--wc-product-filter-checkbox-list-option-element: var(--color-surface);
	--wc-product-filter-checkbox-list-option-element-border: var(--color-text-muted);
	--wc-product-filter-checkbox-list-option-element-selected: var(--color-surface);
	--wc-product-filter-price-slider: var(--color-primary);
	--wc-product-filter-price-slider-handle: var(--color-surface);
	--wc-product-filter-price-slider-handle-border: var(--color-primary);
}
.filters .filters-title {
	margin: 0;
	padding: var(--space-14) var(--space-16);
	background: var(--color-background);
	border-bottom: 1px solid var(--rule);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	font-size: var(--text-14);
	font-weight: 600;
	letter-spacing: -0.02em;
}
.filters .wc-block-product-filters__overlay-content > * {
	margin: 0;
	padding: var(--space-14) var(--space-16);
	border-bottom: 1px solid var(--rule);
}
.filters .wc-block-product-filters__overlay-content > :last-child { border-bottom: none; }
.filters .wc-block-product-filters__overlay-content h3 {
	margin: 0;
	font-size: var(--text-13);
	line-height: 1.65;
	font-weight: 600;
	letter-spacing: 0;
}
.filters .pto-filtergruppe > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-height: var(--space-44);
	list-style: none;
	cursor: pointer;
}
.filters .pto-filtergruppe > summary::-webkit-details-marker { display: none; }
.filters .pto-filtergruppe > summary::after { content: "▾" / ""; font-size: var(--text-10); color: var(--color-text-muted); transition: transform .15s; }
.filters .pto-filtergruppe > :not(summary) { margin-block-start: 0; }
.filters .pto-filtergruppe[open] > summary { margin-bottom: var(--space-14); }
.filters .pto-filtergruppe[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 1024px) {
	.filters .pto-filtergruppe > summary { min-height: var(--space-24); }
}

/* De aktive filtre står som piller øverst i filterkolonnen, i samme product-filters-blok som filtrene, så de følger et valg uden genindlæsning. Uden et valg er blokken skjult. */
.filters {
	--wc-product-filter-removable-chips-background: var(--color-surface);
	--wc-product-filter-removable-chips-border: var(--color-primary);
	--wc-product-filter-removable-chips-text: var(--color-primary);
}
.filters .wp-block-woocommerce-product-filter-active:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-16);
	margin-bottom: var(--space-16);
}
.filters .wp-block-woocommerce-product-filter-removable-chips,
.filters .wc-block-product-filter-removable-chips__items { min-width: 0; max-width: 100%; }
.filters .wc-block-product-filter-removable-chips__items { gap: var(--space-8); }
.filters .wc-block-product-filter-removable-chips__item {
	box-sizing: border-box;
	max-width: 100%;
	min-height: var(--space-44);
	padding: 0 var(--space-6) 0 var(--space-12);
	border-radius: var(--radius-sm);
	font-size: var(--text-13);
	font-weight: 500;
}
.filters .wc-block-product-filter-removable-chips__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filters .wc-block-product-filter-removable-chips__remove { min-width: var(--space-44); min-height: var(--space-44); justify-content: center; }
.filters .wc-block-product-filter-clear-button .wp-block-buttons { margin: 0; }
.filters .wc-block-product-filter-clear-button .wp-block-button__link {
	min-height: var(--space-44);
	padding: 0;
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-size: var(--text-13);
	font-weight: 400;
	text-decoration: underline;
}
.filters .wc-block-product-filter-clear-button .wp-block-button__link:hover { color: var(--color-danger); }
@media (min-width: 1024px) {
	.filters .wc-block-product-filter-removable-chips__item { min-height: calc(var(--space-24) + var(--space-6)); }
	.filters .wc-block-product-filter-removable-chips__remove,
	.filters .wc-block-product-filter-clear-button .wp-block-button__link { min-height: var(--space-24); }
	.filters .wc-block-product-filter-removable-chips__remove { min-width: var(--space-24); }
}

.filters .wc-block-product-filter-checkbox-list__items { display: flex; flex-direction: column; gap: var(--space-8); }
.filters .wc-block-product-filter-checkbox-list__item { margin: 0; }
.filters .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	font-size: var(--text-13);
	line-height: 1.4;
	cursor: pointer;
}
.filters .wc-block-product-filter-checkbox-list__input-wrapper { font-size: var(--text-16); }
.filters .wc-block-product-filter-checkbox-list__text-wrapper {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-8);
	font-size: inherit;
	overflow-wrap: anywhere;
}
/* WooCommerce sætter display: contents på teksten og antallet, så de blev ét anonymt flex-element; som egne elementer står antallet i en højrestillet kolonne. */
.filters .wc-block-product-filter-checkbox-list__text { display: inline; }
.filters .wc-block-product-filter-checkbox-list__count { display: inline; flex-shrink: 0; margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--text-12); color: var(--color-text-muted); }
.filters .wc-block-product-filter-checkbox-list__show-more {
	min-height: var(--space-44);
	margin-top: var(--space-4);
	color: var(--color-primary);
	font-size: var(--text-13);
	cursor: pointer;
}
@media (min-width: 1024px) {
	.filters .wc-block-product-filter-checkbox-list__show-more { min-height: var(--space-24); }
}
.filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--color-primary-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 var(--space-2) var(--color-accent-warm);
}

/* Under 1024 px er etiketterne og prisfelterne klikmål på 44 px. */
.filters .wc-block-product-filter-checkbox-list__label { min-height: var(--space-44); }
.wp-block-woocommerce-product-filter-price-slider.wc-block-product-filter-price-slider .text input[type="text"] { min-height: var(--space-44); }
@media (min-width: 1024px) {
	.filters .wc-block-product-filter-checkbox-list__label { min-height: var(--space-24); }
	.wp-block-woocommerce-product-filter-price-slider.wc-block-product-filter-price-slider .text input[type="text"] { min-height: auto; }
}
/* Klassen dobbles: WooCommerce' egen regel har samme specificitet. To lige brede felter deler rækken; 16 px rummer «118.640 kr.» i hvert felt og forhindrer, at mobilbrowsere zoomer ved fokus. */
.filters .wc-block-product-filter-price-slider__content {
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "price-slider price-slider" "left-input right-input";
	column-gap: var(--space-8);
}
.wp-block-woocommerce-product-filter-price-slider.wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: var(--space-8) var(--space-6);
	font-size: var(--text-16);
}
/* WooCommerce giver skyderne højden 0 og fjerner deres outline med !important, så fokus har hverken boks eller ring. Boksen får 24 px (WCAG 2.5.8) og flyttes op, så grebet står uændret. Sporet rykker 6 px ind fra siderne som i mockuppen, så greb og ring står inden for kolonnen. */
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range { margin-inline: var(--space-6); }
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"] { height: var(--space-24); top: calc(var(--space-12) * -1); }
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible { outline: 2px solid var(--color-primary-deep) !important; }
/* Under 601 px bruger filtrene WooCommerces eget panel: «Filtrer varer» åbner en dialog med grupperne og «Anvend», og siden står uberørt bag den. Fra 601 px står grupperne fremme i kolonnen. Panelets farver og afstande er WooCommerces egne variabler. */
.filters {
	--wc-product-filters-overlay-background-color: var(--color-surface);
	--wc-product-filters-overlay-text-color: var(--color-foreground);
	--wc-product-filter-block-spacing: 0;
}
.filters .wc-block-product-filters__overlay-content { padding-inline: 0; }
@media (width <= 600px) {
	.filters .filters-title { display: none; }
	.filters .wc-block-product-filters__open-overlay,
	.filters .wc-block-product-filters__close-overlay {
		box-sizing: border-box;
		min-height: var(--space-44);
		font-size: var(--text-14);
		font-weight: 600;
		cursor: pointer;
	}
	.filters .wc-block-product-filters__open-overlay { width: 100%; justify-content: center; gap: var(--space-8); }
	/* Pillerne ligger i det lukkede panel; et mærke på knappen siger, at der er valgt filtre. CSS alene, så det følger valget uden genindlæsning. */
	.filters .wc-block-product-filters:has(.wp-block-woocommerce-product-filter-active:not([hidden]) .wc-block-product-filter-removable-chips__item) .wc-block-product-filters__open-overlay::after {
		content: "valgt";
		padding: var(--space-2) var(--space-8);
		border-radius: var(--radius-pill);
		background: var(--color-primary-deep);
		color: var(--color-surface);
		font-size: var(--text-12);
	}
	/* Det lukkede panel ligger under skærmen, men dets knapper og felter står stadig i tabrækkefølgen, så fokus ender uden for billedet. Skjult får de ikke fokus; det åbne panel er synligt med det samme. */
	.filters .wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay { visibility: hidden; }
}

/* WooCommerces panel gælder kun til og med 600 px. Fra 601 px står grupperne fremme; hvor kolonnen endnu ikke findes (under 861 px) står de i flere kolonner, så filtrene ikke skubber varerne ned. */
@media (601px <= width < 861px) {
	.filters .wc-block-product-filters__overlay-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		align-items: start;
		gap: var(--space-16) var(--space-24);
	}
	.filters .wc-block-product-filters__overlay-content > .wp-block-woocommerce-product-filter-active { grid-column: 1 / -1; }
}

.toolbar { margin-bottom: var(--space-20); }
.toolbar-row { gap: var(--space-16); }
.toolbar-row .count { margin-right: auto; font-size: var(--text-14); color: var(--color-foreground); }
.toolbar-row .count strong { font-family: var(--font-mono); font-weight: 500; }
.toolbar-row .woocommerce.wc-block-product-results-count .woocommerce-result-count { margin: 0; }

.toolbar-row .woocommerce.wc-block-catalog-sorting .woocommerce-ordering {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	margin: 0;
}
.toolbar-row .woocommerce.wc-block-catalog-sorting label { margin: 0; font-size: var(--text-13); color: var(--color-text-muted); }
.toolbar-row .woocommerce.wc-block-catalog-sorting select.orderby {
	appearance: none;
	min-height: var(--space-44);
	padding: 0 var(--space-32) 0 var(--space-12);
	background: var(--color-surface);
	border: 1px solid var(--rule-field);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-16);
	color: var(--color-foreground);
	cursor: pointer;
}
.toolbar-row .woocommerce.wc-block-catalog-sorting .woocommerce-ordering::after {
	content: "▾" / "";
	position: absolute;
	right: var(--space-12);
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--text-12);
	color: var(--color-text-muted);
	pointer-events: none;
}
@media (min-width: 1024px) {
	.toolbar-row .woocommerce.wc-block-catalog-sorting select.orderby { min-height: var(--space-40); font-size: var(--text-13); }
}

/* En søgning uden træf har intet at filtrere og sortere: filtre og værktøjslinje står ikke, og søgefeltet i indholdet er «Søg igen»; sidehovedets er det andet. */
.search-no-results :is(.filters, .toolbar, .search-hero .wp-block-search) { display: none; }
.search-no-results .cat-grid-layout { display: block; }
.search-empty { padding: var(--space-40) 0; max-width: 560px; }
.search-empty .empty-title { font-size: var(--text-18); }
.search-empty .pto-kontakt { margin-top: var(--space-24); }
.search-empty-veje { max-width: 640px; }
.search-empty-veje .pto-search { margin: 0; }
/* Vejene videre deles med 404-siden; i resultaternes kolonne står de uden containerens egen polstring. */
.pto-veje-videre { padding-top: var(--space-40); }
.pto-veje-videre__spoerg { margin: 0 0 var(--space-12); font-size: var(--text-18); }
.search-empty-mere .container { padding-inline: 0; }

@media (max-width: 1023px) {
	.cat-grid-layout { grid-template-columns: 200px 1fr; gap: var(--space-24); }
}
/* Kategoriens tekster står under varerne i resultaternes kolonne. */
@media (width >= 861px) {
	.cat-grid-layout > .pto-kategoritekst { grid-column: 2; }
}
/* Under 861 px er heroen kompakt, så det første varekort står højt på skærmen: billedet er pynt og er skjult, og underkategorierne står på én række, der kan rulles.
   Rullen går fra kant til kant og har luft til fokusringen over og under knapperne; scroll-padding gør, at en knap, der er mere end halvt skjult, rulles ind med naboerne, når den får fokus. */
@media (width < 861px) {
	.cat-hero .cat-hero-grid { display: block; }
	.cat-hero .cat-hero-media { display: none; }
	.cat-hero .chips ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		max-width: none;
		margin: calc(var(--space-8) * -1) calc(var(--space-20) * -1);
		padding: var(--space-8) var(--space-20);
		scroll-padding-inline: var(--space-64);
	}
	.cat-hero .chips li { flex: none; }
	.cat-grid-layout { display: block; }
	.filters {
		margin-bottom: var(--space-24);
	}
}
@media (max-width: 640px) {
	.cat-hero { padding: var(--space-28) 0; }
	.toolbar-row { flex-wrap: wrap; }
}