/**
 * HydroFyn Katalog
 *
 * Farverne kommer fra farvelaget i hydrofyn-header (CSS-variabler med
 * fallback), Libre Franklin til overskrifter. Skiftet 2026-09-11 (CH-237). Radius paa pillerne er fuld,
 * paa CTA'erne 10px - toolbaren skal ligne noget, der hoerer til over
 * gitteret, ikke endnu en knapraekke.
 */

.hf-katalog {
	margin: 0 0 18px;
	color: var(--hf-tekst, #16212F);
}

/* ---- Titellinje ---- */

.hf-katalog__crumb {
	margin: 0 0 6px;
	font-family: "Libre Franklin", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-katalog__crumb a {
	color: var(--hf-link, #1F6794) !important;
	text-decoration: none;
}

.hf-katalog__crumb a:hover {
	text-decoration: underline;
}

.hf-katalog__sep {
	margin: 0 2px;
	color: #9aa7b2;
}

.hf-katalog__titel {
	margin: 0 0 14px;
	font-family: "Libre Franklin", sans-serif;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--hf-tekst, #16212F);
}

/* ---- Toolbar ---- */

.hf-katalog__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
}

.hf-katalog__antal {
	margin: 0;
	padding-right: 14px;
	border-right: 1px solid var(--hf-kant-cta, #CCD2D6);
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	color: var(--hf-tekst, #16212F);
}

.hf-katalog__antal strong {
	font-weight: 700;
}

/* Elementor/Woo tegner taellere med margin; vores skal staa paa linjen. */
.hf-katalog-aktiv .hf-katalog__antal.woocommerce-result-count {
	margin: 0;
	float: none;
}

.hf-katalog__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.hf-katalog__chips li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-katalog__chip {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--hf-kant-cta, #CCD2D6);
	border-radius: 999px;
	background: #fff;
	font-family: "Libre Franklin", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	/* Kittets globale a-farve slaar klassen; maalt 2026-09-11 (lyseblaa tekst). */
	color: var(--hf-tekst, #16212F) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.hf-katalog__chip:hover {
	border-color: var(--hf-primaer, #1B2939);
	color: var(--hf-primaer, #1B2939) !important;
	text-decoration: none;
}

.hf-katalog__chip:focus-visible {
	outline: 2px solid var(--hf-primaer, #1B2939);
	outline-offset: 2px;
}

.hf-katalog__chip.is-aktiv,
.hf-katalog__chip.is-aktiv:hover {
	border-color: var(--hf-primaer, #1B2939);
	background: var(--hf-primaer, #1B2939);
	color: #fff !important;
}

/* ---- Sortering ---- */

.hf-katalog__sort {
	margin: 0 0 0 auto;
	flex-shrink: 0;
}

.hf-katalog__sortlabel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px 0 14px;
	border: 1px solid var(--hf-kant-cta, #CCD2D6);
	border-radius: 999px;
	background: #fff;
	font-family: "Libre Franklin", sans-serif;
	font-size: 14px;
	line-height: 1;
	color: var(--hf-tekst-svag, #5b6b7a);
	cursor: pointer;
}

.hf-katalog__sortlabel:focus-within {
	border-color: var(--hf-primaer, #1B2939);
	box-shadow: 0 0 0 2px rgba(var(--hf-primaer-rgb, 27, 41, 57), .2);
}

.hf-katalog__sortord {
	white-space: nowrap;
}

.hf-katalog-aktiv .hf-katalog__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0 22px 0 0;
	border: 0;
	background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316212F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
	font-family: "Libre Franklin", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--hf-tekst, #16212F);
	cursor: pointer;
	box-shadow: none;
	height: auto;
	width: auto;
	min-height: 0;
}

.hf-katalog-aktiv .hf-katalog__select:focus {
	outline: none;
}

/* ---- Sikkerhedsnet mod Elementors cache ----
   Datafilteret fjerner hero (6512206), broedkrumme-sektion (e763ff7) og de
   fire USP-bokse fra skabelonens trae. Men Elementors element-cache serverer
   det, der blev renderet, mens pluginet var deaktiveret under en
   overskrivning - uden om filteret (CH-236). Body-klassen saettes af PHP paa
   hvert request, saa denne regel virker, uanset hvad cachen indeholder. */
body.hf-katalog-aktiv .elementor-element-6512206,
body.hf-katalog-aktiv .elementor-element-e763ff7,
body.hf-katalog-aktiv .elementor-element-fec98ab,
body.hf-katalog-aktiv .elementor-element-26d16e1,
body.hf-katalog-aktiv .elementor-element-fa3a23b,
body.hf-katalog-aktiv .elementor-element-5ec2475 {
	display: none !important;
}

/* ---- Det, toolbaren erstatter ---- */

/* Woo's egen raekke (taeller, doed "Skjul filter"-knap, dropdown) tegnes stadig
   af et snippet; med vores toolbar er den tom for mening. */
.hf-katalog-aktiv .elementor-widget-woocommerce-products .header-filter,
.hf-katalog-aktiv .elementor-widget-woocommerce-products form.woocommerce-ordering:not(.hf-katalog__sort) {
	display: none;
}

/* ---- Kolonnebredder paa kategorisider ----
   Sitets egen CSS laaser filterkolonnen til 220 px (!important, formentlig
   fra BeRocket-tiden), og filterkortet faar kun 190 px: "Autoblomstrende"
   kan ikke ombrydes og flyder hen over tallet. Maalt 2026-09-10. Kolonne-
   id'erne er skabelonens (15473): 435af78 er filterkolonnen, f09f665 er
   produktkolonnen. Fire klasser plus body slaar Customizer-reglens tre. */
@media (min-width: 1025px) {
	/* Indholdet foelger headerens bredde (1.425 px, --hf-header-bredde fra
	   hydrofyn-header) i stedet for kittets 1.225 px. Ejerens oenske
	   2026-09-11. Gaelder alle boxed sektioner paa kategori- og shop-sider. */
	body.hf-katalog-aktiv .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: var(--hf-header-bredde, 1425px) !important;
	}

	body.hf-katalog-aktiv.tax-product_cat .elementor-element.elementor-element-435af78 {
		width: 250px !important;
	}

	body.hf-katalog-aktiv.tax-product_cat .elementor-element.elementor-element-f09f665 {
		width: calc(100% - 250px) !important;
	}
}

/* ---- USP-kortet under filteret ---- */

.hf-usp {
	margin: 18px 0 0;
	padding: 4px 14px;
	border: 1px solid var(--hf-kant, #e7ecf1);
	border-radius: 10px;
	background: #fff;
}

.hf-usp__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-usp__punkt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--hf-flade, #F4F5F6);
	list-style: none;
}

.hf-usp__punkt:last-child {
	border-bottom: 0;
}

.hf-usp__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hf-flade, #F4F5F6);
	color: var(--hf-primaer, #1B2939);
	font-size: 15px;
}

.hf-usp__tekst {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.hf-usp__titel {
	font-family: "Libre Franklin", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hf-tekst, #16212F);
}

.hf-usp__under {
	font-size: 12px;
	line-height: 1.3;
	color: var(--hf-tekst-svag, #5b6b7a);
}

/* ---- Mobil ---- */

@media (max-width: 767px) {
	.hf-katalog {
		margin-bottom: 14px;
	}

	.hf-katalog__titel {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.hf-katalog__bar {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.hf-katalog__antal {
		order: 1;
		padding-right: 0;
		border-right: 0;
	}

	.hf-katalog__sort {
		order: 2;
	}

	/* Chips paa egen raekke, vandret rul i stedet for ombrydning. */
	.hf-katalog__chips {
		order: 3;
		flex: 1 0 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hf-katalog__chips::-webkit-scrollbar {
		display: none;
	}

	.hf-katalog__chip {
		height: 36px;
		padding: 0 14px;
	}

	.hf-katalog__sortlabel {
		height: 36px;
	}
}