/**
 * HydroFyn Search, design 2 (0.8.0): moerk glasflade med forslag og varer.
 *
 * Standardvaerdierne er gro-lys.dk i Black November: sidehovedets naesten
 * sorte #0D100F, gul accent #FFCE46, kort som shoppens egne (moerk gradient,
 * blødt lys bag varen, hvid plade bag billeder med hvid baggrund), groen pris
 * #99C156 og guldmaerke for rabatten. hf_search_tema_css_v2() skifter accent
 * og resultatsidens kort efter 1/12.
 *
 * Kontrast (maalt paa den effektive flade #141816): tekst #F3F5F1 15:1, svag
 * tekst (.70) 8:1, svagest (.56) 5,4:1, accent #FFCE46 12:1, pris #99C156 paa
 * kortet 9,6:1, foerpris #AEB8B1 8,5:1, moerk tekst paa accent 12:1.
 *
 * Gro-lys.dk's Elementor-kit giver knapper og felter groen flade, hjoerner
 * og versaler (CH-720); derfor saetter hver knap og hvert felt her sine egne
 * vaerdier, felterne med !important.
 */

.hf2,
.hf2-taeppe,
.hf2-toast {
	--hf2-ease: cubic-bezier(.16, 1, .3, 1);
	--hf2-glas: rgba(13, 16, 15, .84);
	--hf2-glas-fast: #121614;
	--hf2-linje: rgba(255, 255, 255, .08);
	--hf2-tekst: #F3F5F1;
	--hf2-tekst-2: rgba(243, 245, 241, .70);
	--hf2-tekst-3: rgba(243, 245, 241, .56);
	--hf2-hover: rgba(255, 255, 255, .06);
	--hf2-accent: #FFCE46;
	--hf2-accent-rgb: 255, 206, 70;
	--hf2-accent-ink: #0D100F;
	--hf2-pris: #99C156;
	--hf2-guld: linear-gradient(145deg, #F7DC7E 0%, #E3B23C 45%, #B8860B 100%);
	--hf2-titel-font: "League Spartan", Outfit, system-ui, sans-serif;
	--hf2-k-bg: linear-gradient(180deg, #272c29 0%, #161a18 50%, #0D100F 100%);
	--hf2-k-kant: rgba(255, 255, 255, .07);
	--hf2-k-kant-hover: rgba(255, 255, 255, .15);
	--hf2-k-tekst: #F3F5F1;
	--hf2-k-svag: rgba(243, 245, 241, .56);
	--hf2-k-pris: #99C156;
	--hf2-k-foer: #AEB8B1;
	--hf2-k-spot: radial-gradient(closest-side, rgba(255, 244, 214, .30), rgba(255, 244, 214, .10) 55%, rgba(255, 244, 214, 0) 100%);
	--hf2-k-mark: var(--hf2-accent);
	--hf2-k-skelet: rgba(255, 255, 255, .06);
	--hf2-k-skelet-lys: rgba(255, 255, 255, .12);
	/* Lidt lavere billedfelt i panelet, saa to raekker kort kan ses uden at
	   rulle (set 7/11); resultatsiden har shoppens kvadratiske. */
	--hf2-k-format: 6 / 5;
}

/* Resultatsiden ligger paa shoppens lyse side: lys tekst og flader omkring,
   kortene som shoppens (moerke i Black November, lyse efter 1/12). */
.hf2-res {
	--hf2-ease: cubic-bezier(.16, 1, .3, 1);
	--hf2-accent: #FFCE46;
	--hf2-accent-rgb: 255, 206, 70;
	--hf2-accent-ink: #0D100F;
	--hf2-guld: linear-gradient(145deg, #F7DC7E 0%, #E3B23C 45%, #B8860B 100%);
	--hf2-titel-font: "League Spartan", Outfit, system-ui, sans-serif;
	--hf2-s-tekst: #0D100F;
	--hf2-s-svag: #56605A;
	--hf2-s-kant: #E1E5E2;
	--hf2-s-flade: #FFFFFF;
	--hf2-s-hover: #F2F4F2;
	--hf2-s-aktiv: #0D100F;
	--hf2-rk-bg: linear-gradient(180deg, #272c29 0%, #161a18 50%, #0D100F 100%);
	--hf2-rk-kant: rgba(255, 255, 255, .07);
	--hf2-rk-tekst: #F3F5F1;
	--hf2-rk-svag: rgba(243, 245, 241, .6);
	--hf2-rk-pris: #99C156;
	--hf2-rk-foer: #AEB8B1;
	--hf2-rk-spot: radial-gradient(closest-side, rgba(255, 244, 214, .30), rgba(255, 244, 214, .10) 55%, rgba(255, 244, 214, 0) 100%);
	--hf2-k-bg: var(--hf2-rk-bg);
	--hf2-k-kant: var(--hf2-rk-kant);
	--hf2-k-kant-hover: rgba(127, 140, 132, .45);
	--hf2-k-tekst: var(--hf2-rk-tekst);
	--hf2-k-svag: var(--hf2-rk-svag);
	--hf2-k-pris: var(--hf2-rk-pris);
	--hf2-k-foer: var(--hf2-rk-foer);
	--hf2-k-spot: var(--hf2-rk-spot);
	--hf2-k-mark: var(--hf2-rk-mark, var(--hf2-accent));
	--hf2-k-skelet: rgba(127, 140, 132, .14);
	--hf2-k-skelet-lys: rgba(127, 140, 132, .26);
	--hf2-k-format: 1 / 1;
}

.hf2 *,
.hf2-res *,
.hf2-toast * {
	box-sizing: border-box;
}

.hf2[hidden],
.hf2-taeppe[hidden],
.hf2 [hidden],
.hf2-res [hidden] {
	display: none !important;
}

/* Knapper: temaets regler ud. */
.hf2 button,
.hf2-res button,
.hf2-toast button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 0;
	min-width: 0;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	box-shadow: none;
	line-height: 1.2;
	cursor: pointer;
}

.hf2 a,
.hf2-res a,
.hf2-toast a {
	text-decoration: none !important;
}

svg.hf2-ikon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

html.hf2-laast,
html.hf2-laast body {
	overflow: hidden !important;
}

/* ---- Taeppet ---- */

.hf2-taeppe {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(6, 8, 7, .58);
	-webkit-backdrop-filter: blur(5px) saturate(.9);
	backdrop-filter: blur(5px) saturate(.9);
	opacity: 0;
	transition: opacity .24s ease;
}

.hf2-taeppe.er-aaben {
	opacity: 1;
}

/* ---- Panelet ---- */

.hf2 {
	position: fixed;
	top: var(--hf2-top, 0);
	left: 0;
	right: 0;
	z-index: 99991;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--hf2-top, 0px) - 28px);
	height: min(calc(100dvh - var(--hf2-top, 0px) - 28px), 920px);
	color: var(--hf2-tekst);
	font-size: 14px;
	line-height: 1.4;
	background: var(--hf2-glas);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	backdrop-filter: blur(24px) saturate(140%);
	border-radius: 0 0 26px 26px;
	box-shadow: 0 40px 120px -24px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .06);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity .22s ease, transform .34s var(--hf2-ease);
	-webkit-font-smoothing: antialiased;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hf2 {
		background: var(--hf2-glas-fast);
	}
}

.hf2.er-aaben {
	opacity: 1;
	transform: none;
}

.hf2.er-lukker {
	opacity: 0;
	transform: translateY(-8px);
	transition-duration: .16s;
}

/* Et svagt skaer i accenten oeverst og en tynd linje i bunden. */
.hf2::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 220px;
	background: radial-gradient(60% 140px at 50% 0, rgba(var(--hf2-accent-rgb), .09), rgba(var(--hf2-accent-rgb), 0) 72%);
	pointer-events: none;
}

.hf2::after {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(var(--hf2-accent-rgb), 0), rgba(var(--hf2-accent-rgb), .6) 35%, rgba(153, 193, 86, .6) 65%, rgba(153, 193, 86, 0));
	pointer-events: none;
}

.hf2__top,
.hf2__krop,
.hf2__fod {
	position: relative;
	width: min(1320px, calc(100% - 64px));
	margin-left: auto;
	margin-right: auto;
}

/* ---- Toplinjen ---- */

/* Logo, felt og luk i tre kolonner, saa feltet staar i midten (0.8.3). */
.hf2__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 780px) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 22px 0 18px;
}

.hf2 .hf2__logo {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	height: 46px;
	padding: 0 4px;
	border-radius: 10px;
	opacity: .92;
	transition: opacity .2s ease;
}

.hf2 .hf2__logo:hover,
.hf2 .hf2__logo:focus-visible {
	opacity: 1;
}

.hf2 .hf2__logo:focus-visible {
	outline: 2px solid var(--hf2-accent);
	outline-offset: 2px;
}

.hf2__logo img {
	display: block;
	width: auto;
	height: 24px;
	max-width: 100%;
	margin: 0;
	/* 1.0.3: profilens logo_filter, fx hvidt naar logoet er moerkt. */
	filter: var(--hf2-logo-filter, none);
	/* 1.0.5: profilens logo_plade, en lys plade bag et logo med moerk tekst. */
	box-sizing: content-box;
	padding: var(--hf2-logo-pad, 0);
	border-radius: 8px;
	background: var(--hf2-logo-bg, none);
}

.hf2.er-aaben .hf2__logo {
	animation: hf2-tone .35s .08s ease backwards;
}

.hf2__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 58px;
}

.hf2__flade {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
	transform-origin: 50% 50%;
	transition: transform .36s var(--hf2-ease), background-color .32s ease, border-color .2s ease, box-shadow .2s ease;
	pointer-events: none;
}

.hf2__form:focus-within .hf2__flade {
	background-color: rgba(255, 255, 255, .09);
	border-color: rgba(var(--hf2-accent-rgb), .7);
	box-shadow: 0 0 0 4px rgba(var(--hf2-accent-rgb), .15), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.hf2__form.er-udfolder .hf2__flade {
	background-color: #fff;
	border-color: transparent;
}

.hf2.er-aaben .hf2__form > :not(.hf2__flade) {
	animation: hf2-tone .3s .1s ease backwards;
}

.hf2__feltIkon {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 100%;
	color: var(--hf2-tekst-2);
}

.hf2__feltIkon svg.hf2-ikon {
	width: 21px;
	height: 21px;
}

.hf2 .hf2__form input.hf2__felt {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 8px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--hf2-tekst) !important;
	caret-color: var(--hf2-accent);
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	letter-spacing: -.005em;
	line-height: normal !important;
	-webkit-appearance: none;
	appearance: none;
}

.hf2__felt::-webkit-search-cancel-button,
.hf2__felt::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}

.hf2__ph {
	position: absolute;
	left: 54px;
	right: 130px;
	top: 50%;
	overflow: hidden;
	color: var(--hf2-tekst-3);
	font-size: 17px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity .22s ease, transform .26s var(--hf2-ease);
}

.hf2__ph.er-ud {
	opacity: 0;
	transform: translateY(calc(-50% - 9px));
}

.hf2__ph.er-ind {
	opacity: 0;
	transform: translateY(calc(-50% + 9px));
	transition: none;
}

.hf2 .hf2__ryd {
	position: relative;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .09);
	color: var(--hf2-tekst-2);
	transition: background-color .15s ease, color .15s ease, transform .2s var(--hf2-ease);
}

.hf2 .hf2__ryd:hover,
.hf2 .hf2__ryd:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: var(--hf2-tekst);
	transform: scale(1.06);
}

.hf2__ryd svg.hf2-ikon {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
}

.hf2 kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	margin: 0 4px 0 0;
	padding: 0 6px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	color: var(--hf2-tekst-2);
	font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	box-shadow: none;
}

.hf2__esc {
	position: relative;
	margin-right: 14px !important;
}

.hf2 .hf2__luk {
	display: grid;
	place-items: center;
	justify-self: end;
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--hf2-tekst);
	transition: background-color .15s ease, border-color .15s ease;
}

.hf2 .hf2__luk:hover,
.hf2 .hf2__luk:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .2);
}

.hf2__luk svg.hf2-ikon {
	transition: transform .3s var(--hf2-ease);
}

.hf2 .hf2__luk:hover svg.hf2-ikon {
	transform: rotate(90deg);
}

.hf2__lukTekst {
	display: none;
}

/* ---- Lagene (0.9.0) ---- */

/* "i Headshop x" i feltet. */
.hf2 .hf2__scope {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	max-width: 42%;
	height: 30px;
	margin: 0 8px 0 0;
	padding: 0 8px 0 12px;
	border: 1px solid rgba(var(--hf2-accent-rgb), .38);
	border-radius: 999px;
	background: rgba(var(--hf2-accent-rgb), .15);
	color: var(--hf2-accent);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	animation: hf2-tone .2s ease backwards;
	transition: background-color .15s ease;
}

.hf2 .hf2__scope:hover,
.hf2 .hf2__scope:focus-visible {
	background: rgba(var(--hf2-accent-rgb), .26);
	color: var(--hf2-accent);
}

.hf2__scopeTekst {
	overflow: hidden;
	text-overflow: ellipsis;
}

.hf2__scope svg.hf2-ikon {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

/* Stien: tilbage, Alle > Headshop > Grinders. */
.hf2__sti {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(1320px, calc(100% - 64px));
	margin: 0 auto;
	padding: 2px 0 12px;
	animation: hf2-tone .25s ease backwards;
}

.hf2 .hf2-sti__tilbage {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--hf2-tekst);
	transition: background-color .15s ease, border-color .15s ease;
}

.hf2 .hf2-sti__tilbage:hover,
.hf2 .hf2-sti__tilbage:focus-visible,
.hf2 .hf2-sti__tilbage.er-aktiv {
	border-color: rgba(var(--hf2-accent-rgb), .5);
	background: rgba(255, 255, 255, .1);
	color: var(--hf2-tekst);
	outline: none;
}

.hf2-sti__tilbage svg.hf2-ikon {
	width: 16px;
	height: 16px;
	transform: rotate(180deg);
}

.hf2-sti__spor {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.hf2-sti__spor::-webkit-scrollbar {
	display: none;
}

.hf2-sti__led {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.hf2-sti__led::marker {
	content: none;
}

.hf2-sti__led + .hf2-sti__led::before {
	content: '\203A';
	margin: 0 4px;
	color: var(--hf2-tekst-3);
	font-size: 15px;
}

.hf2 .hf2-sti__knap {
	padding: 4px 6px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--hf2-tekst-2);
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color .14s ease, color .14s ease;
}

.hf2 .hf2-sti__knap:hover,
.hf2 .hf2-sti__knap:focus-visible {
	background: var(--hf2-hover);
	color: var(--hf2-tekst);
}

.hf2-sti__nu {
	padding: 4px 6px;
	color: var(--hf2-tekst);
	font-size: 13.5px;
	font-weight: 700;
}

/* Kategorier og maerker, der aabner et lag, har en pil til hoejre. */
.hf2 .hf2-raekke__pil--lag {
	opacity: 1;
	transform: none;
}

.hf2-raekke__pil--lag svg.hf2-ikon {
	width: 16px;
	height: 16px;
	transform: rotate(-90deg);
	transition: transform .2s var(--hf2-ease);
}

.hf2 .hf2-raekke--lag:hover .hf2-raekke__pil--lag svg.hf2-ikon,
.hf2 .hf2-raekke--lag.er-aktiv .hf2-raekke__pil--lag svg.hf2-ikon {
	transform: rotate(-90deg) translateY(2px);
}

.hf2 .hf2-raekke.er-valgt {
	background: rgba(var(--hf2-accent-rgb), .1);
	box-shadow: inset 2px 0 0 var(--hf2-accent);
}

/* Ind i et lag glider indholdet ind fra hoejre, op fra venstre. */
.hf2__krop.er-dybere > * {
	animation: hf2-fra-hoejre .32s var(--hf2-ease) backwards;
}

.hf2__krop.er-op > * {
	animation: hf2-fra-venstre .32s var(--hf2-ease) backwards;
}

@keyframes hf2-fra-hoejre {
	from { opacity: 0; transform: translateX(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes hf2-fra-venstre {
	from { opacity: 0; transform: translateX(-18px); }
	to { opacity: 1; transform: none; }
}

/* Fremdrift, mens indekset hentes. */
.hf2__fremdrift {
	position: relative;
	height: 2px;
	overflow: hidden;
}

.hf2.er-henter .hf2__fremdrift::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -30%;
	width: 30%;
	background: linear-gradient(90deg, rgba(var(--hf2-accent-rgb), 0), var(--hf2-accent), rgba(var(--hf2-accent-rgb), 0));
	animation: hf2-glid 1.1s ease-in-out infinite;
}

/* ---- Krop: forslag til venstre, varer til hoejre ---- */

.hf2__krop {
	display: grid;
	grid-template-columns: 276px minmax(0, 1fr);
	gap: 40px;
	flex: 1;
	min-height: 0;
	padding-top: 10px;
}

.hf2.er-aaben .hf2__krop {
	animation: hf2-tone .3s .06s ease backwards;
}

.hf2__side,
.hf2__hoved {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 28px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.hf2__side {
	margin-right: -12px;
	padding-right: 12px;
}

.hf2__hoved {
	padding-right: 4px;
}

.hf2__fod {
	display: flex;
	gap: 22px;
	padding: 12px 0 16px;
	border-top: 1px solid var(--hf2-linje);
	color: var(--hf2-tekst-3);
	font-size: 12px;
}

.hf2__hint {
	display: inline-flex;
	align-items: center;
}

.hf2__hint kbd + kbd {
	margin-left: -1px;
}

.hf2__hint kbd:last-of-type {
	margin-right: 8px;
}

/* ---- Sektioner og raekker ---- */

.hf2-sektion + .hf2-sektion {
	margin-top: 24px;
}

.hf2-sektion__hoved {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 24px;
	margin: 0 0 6px;
	padding: 0 10px;
}

.hf2-sektion__titel,
.hf2 .hf2-hoved__titel {
	margin: 0;
	color: var(--hf2-tekst-3);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hf2 .hf2-sektion__handling {
	padding: 3px 6px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--hf2-tekst-2);
	font-size: 12px;
	font-weight: 600;
	transition: color .15s ease, background-color .15s ease;
}

.hf2 .hf2-sektion__handling:hover,
.hf2 .hf2-sektion__handling:focus-visible {
	background: var(--hf2-hover);
	color: var(--hf2-accent);
}

.hf2-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf2-liste__punkt {
	position: relative;
	margin: 0;
	padding: 0;
}

.hf2-liste__punkt::before,
.hf2-liste__punkt::marker {
	content: none;
}

.hf2-liste__punkt.er-ny {
	animation: hf2-tone .25s ease backwards;
}

.hf2 .hf2-raekke {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 42px;
	padding: 6px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--hf2-tekst);
	font-size: 14.5px;
	font-weight: 500;
	text-align: left;
	transition: background-color .14s ease, box-shadow .14s ease;
}

.hf2 .hf2-raekke:hover,
.hf2 .hf2-raekke:focus-visible,
.hf2 .hf2-raekke.er-aktiv {
	background: var(--hf2-hover);
	color: var(--hf2-tekst);
	outline: none;
}

.hf2 .hf2-raekke.er-aktiv {
	box-shadow: inset 2px 0 0 var(--hf2-accent);
}

.hf2-raekke__ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .05);
	color: var(--hf2-tekst-2);
	overflow: hidden;
}

.hf2-raekke__ikon svg.hf2-ikon {
	width: 16px;
	height: 16px;
}

.hf2-raekke__ikon--billede {
	background: #fff;
}

.hf2-raekke__ikon--billede img {
	width: 100%;
	height: 100%;
	padding: 3px;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
}

.hf2-raekke__ikon--billede.er-hentet img {
	opacity: 1;
}

.hf2-raekke__tekst {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hf2-raekke--forslag .hf2-raekke__tekst {
	color: var(--hf2-tekst-2);
}

.hf2-raekke--forslag .hf2-raekke__tekst b {
	color: var(--hf2-tekst);
	font-weight: 700;
}

.hf2-raekke__antal {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	color: var(--hf2-tekst-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.hf2-raekke__pil {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--hf2-tekst-3);
	opacity: 0;
	transform: translate(3px, 3px);
	transition: opacity .15s ease, transform .2s var(--hf2-ease);
}

.hf2-raekke__pil svg.hf2-ikon {
	width: 15px;
	height: 15px;
}

.hf2 .hf2-raekke:hover .hf2-raekke__pil,
.hf2 .hf2-raekke.er-aktiv .hf2-raekke__pil,
.hf2 .hf2-raekke:focus-visible .hf2-raekke__pil {
	opacity: 1;
	transform: none;
}

.hf2-liste__punkt:has(.hf2-raekke__fjern) .hf2-raekke__pil {
	display: none;
}

.hf2 .hf2-raekke__fjern {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hf2-tekst-3);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.hf2-liste__punkt:hover .hf2-raekke__fjern,
.hf2 .hf2-raekke__fjern:focus-visible {
	opacity: 1;
}

.hf2 .hf2-raekke__fjern:hover {
	background: rgba(255, 255, 255, .1);
	color: var(--hf2-tekst);
}

.hf2-raekke__fjern svg.hf2-ikon {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

/* Det, soegningen ramte. */
.hf2 mark.hf2-mark,
.hf2-res mark.hf2-mark {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--hf2-k-mark);
	font-weight: inherit;
}

/* ---- Hoejre side ---- */

.hf2-hoved__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 24px;
	margin: 0 0 12px;
}

.hf2-fliser + .hf2-hoved__top,
.hf2-gitter + .hf2-hoved__top {
	margin-top: 28px;
}

.hf2-hoved__antal {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(var(--hf2-accent-rgb), .14);
	color: var(--hf2-accent);
	font-size: 11px;
	letter-spacing: 0;
	vertical-align: 1px;
}

.hf2 .hf2-hoved__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hf2-accent);
	font-size: 13px;
	font-weight: 700;
}

.hf2-hoved__link svg.hf2-ikon {
	width: 15px;
	height: 15px;
	transition: transform .2s var(--hf2-ease);
}

.hf2 .hf2-hoved__link:hover svg.hf2-ikon {
	transform: translateX(3px);
}

.hf2-note {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid rgba(var(--hf2-accent-rgb), .28);
	border-radius: 12px;
	background: rgba(var(--hf2-accent-rgb), .1);
	color: var(--hf2-tekst);
	font-size: 13px;
}

/* Kategorier som fliser i det tomme felt. */
.hf2-fliser {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
	gap: 10px;
}

.hf2 .hf2-flise {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px 9px 9px;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	color: var(--hf2-tekst);
	transition: background-color .15s ease, border-color .15s ease, transform .22s var(--hf2-ease);
}

.hf2 .hf2-flise:hover,
.hf2 .hf2-flise:focus-visible,
.hf2 .hf2-flise.er-aktiv {
	border-color: rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .07);
	color: var(--hf2-tekst);
	transform: translateY(-1px);
	outline: none;
}

.hf2 .hf2-flise.er-aktiv {
	border-color: rgba(var(--hf2-accent-rgb), .6);
}

.hf2-flise__billede {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: #fff;
	overflow: hidden;
}

.hf2-flise__billede img {
	width: 100%;
	height: 100%;
	padding: 4px;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
}

.hf2-flise__billede.er-hentet img {
	opacity: 1;
}

.hf2-flise__tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hf2-flise__navn {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hf2-flise__antal {
	color: var(--hf2-tekst-3);
	font-size: 12px;
}

/* ---- Varekort (panel og resultatside) ---- */

.hf2-gitter {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.hf2-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hf2-k-kant);
	border-radius: 16px;
	background: var(--hf2-k-bg);
	isolation: isolate;
	transition: transform .3s var(--hf2-ease), border-color .2s ease, box-shadow .3s ease;
}

/* Kun med en rigtig mus: paa en telefon bliver :hover haengende efter et
   tryk, saa kortet blev staaende loeftet og kurvknappen gul (set 7/11). */
@media (hover: hover) {
	.hf2-kort:hover {
		border-color: var(--hf2-k-kant-hover);
		box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
		transform: translateY(-3px);
	}

	.hf2-kort:hover .hf2-kort__billede img {
		transform: scale(1.045);
	}

	.hf2 .hf2-kort .hf2-kort__kurv:hover,
	.hf2-res .hf2-kort .hf2-kort__kurv:hover {
		border-color: transparent;
		background: var(--hf2-accent);
		color: var(--hf2-accent-ink);
		transform: scale(1.07);
	}
}

.hf2-kort.er-ny {
	animation: hf2-ind .38s var(--hf2-ease) backwards;
	animation-delay: calc(var(--i, 0) * 24ms);
}

.hf2 .hf2-kort__link,
.hf2-res .hf2-kort__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 8px;
	border-radius: inherit;
	color: var(--hf2-k-tekst);
	outline: none;
}

.hf2 .hf2-kort__link:hover,
.hf2-res .hf2-kort__link:hover {
	color: var(--hf2-k-tekst);
}

.hf2 .hf2-kort__link:focus-visible,
.hf2 .hf2-kort__link.er-aktiv,
.hf2-res .hf2-kort__link:focus-visible {
	box-shadow: 0 0 0 2px var(--hf2-accent);
}

.hf2-kort__billede {
	position: relative;
	display: block;
	aspect-ratio: var(--hf2-k-format, 1 / 1);
	border-radius: 11px;
	background: var(--hf2-k-spot);
	overflow: hidden;
}

.hf2-kort__billede.er-lys {
	background: #fff;
}

.hf2-kort__billede img {
	position: absolute;
	top: 7%;
	left: 7%;
	width: 86%;
	height: 86%;
	margin: 0;
	object-fit: contain;
	opacity: 0;
	transform: scale(.985);
	transition: opacity .35s ease, transform .55s var(--hf2-ease);
}

.hf2-kort__billede.er-hentet img {
	opacity: 1;
	transform: none;
}

.hf2-kort__maerkat {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 5px 8px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.hf2-kort__maerkat--spar {
	background: var(--hf2-guld);
	color: #1A1405;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .35);
}

.hf2-kort__maerkat--udsolgt {
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(13, 16, 15, .82);
	color: #F3F5F1;
}

.hf2-kort__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 3px;
	padding: 11px 4px 3px;
}

.hf2-kort__maerke {
	overflow: hidden;
	color: var(--hf2-k-svag);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hf2-kort__navn {
	display: -webkit-box;
	min-height: 2.64em;
	overflow: hidden;
	color: var(--hf2-k-tekst);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.32;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hf2-kort__pris {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin-top: auto;
	padding-top: 8px;
}

.hf2-kort__nu {
	color: var(--hf2-k-pris);
	font-size: 15.5px;
	font-weight: 750;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.hf2-kort__foer {
	color: var(--hf2-k-foer);
	font-size: 12px;
}

.hf2-kort__foer s {
	text-decoration-thickness: 1px;
}

/* Kurvknappen over billedets nederste hoejre hjoerne. */
.hf2-kort__over {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	z-index: 2;
	aspect-ratio: var(--hf2-k-format, 1 / 1);
	pointer-events: none;
}

.hf2 .hf2-kort__kurv,
.hf2-res .hf2-kort__kurv {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(13, 16, 15, .74);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(6px) scale(.92);
	transition: opacity .2s ease, transform .26s var(--hf2-ease), background-color .18s ease, color .18s ease, border-color .18s ease;
}

.hf2-kort:hover .hf2-kort__kurv,
.hf2 .hf2-kort__kurv:focus-visible,
.hf2-res .hf2-kort__kurv:focus-visible,
.hf2-kort__kurv.er-travl,
.hf2-kort__kurv.er-lagt {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.hf2 .hf2-kort__kurv,
	.hf2-res .hf2-kort__kurv {
		opacity: 1;
		transform: none;
	}
}

.hf2 .hf2-kort__kurv:focus-visible,
.hf2-res .hf2-kort__kurv:focus-visible {
	outline: 2px solid var(--hf2-accent);
	outline-offset: 2px;
}

.hf2-kort__kurv svg.hf2-ikon {
	width: 20px;
	height: 20px;
}

.hf2-kort__kurv .hf2-ikon--tjek,
.hf2-kort__spinner {
	display: none;
}

.hf2-kort__kurv.er-travl .hf2-ikon--kurv {
	display: none;
}

.hf2-kort__kurv.er-travl .hf2-kort__spinner {
	display: block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .28);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hf2-drej .7s linear infinite;
}

.hf2 .hf2-kort__kurv.er-lagt,
.hf2-res .hf2-kort__kurv.er-lagt {
	border-color: transparent;
	background: var(--hf2-pris, #99C156);
	color: #0D100F;
}

.hf2-kort__kurv.er-lagt .hf2-ikon--kurv {
	display: none;
}

.hf2-kort__kurv.er-lagt .hf2-ikon--tjek {
	display: block;
	stroke-width: 2.6;
	animation: hf2-pop .34s var(--hf2-ease);
}

/* "Se alle resultater for ..." */
.hf2 .hf2-alle {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	color: var(--hf2-tekst);
	transition: background-color .15s ease, border-color .15s ease;
}

.hf2 .hf2-alle:hover,
.hf2 .hf2-alle:focus-visible,
.hf2 .hf2-alle.er-aktiv {
	border-color: rgba(var(--hf2-accent-rgb), .45);
	background: rgba(var(--hf2-accent-rgb), .09);
	color: var(--hf2-tekst);
	outline: none;
}

.hf2-alle__ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(var(--hf2-accent-rgb), .14);
	color: var(--hf2-accent);
}

.hf2-alle__tekst {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--hf2-tekst-2);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hf2-alle__tekst strong {
	color: var(--hf2-tekst);
	font-weight: 700;
}

.hf2-alle__antal {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: var(--hf2-tekst-2);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.hf2-alle__pil {
	color: var(--hf2-tekst-2);
	transition: transform .2s var(--hf2-ease), color .15s ease;
}

.hf2 .hf2-alle:hover .hf2-alle__pil,
.hf2 .hf2-alle.er-aktiv .hf2-alle__pil {
	color: var(--hf2-accent);
	transform: translateX(3px);
}

/* Ingen traef. */
.hf2-tom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 72px 20px;
	text-align: center;
	animation: hf2-tone .3s ease backwards;
}

.hf2-tom__ikon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 50%;
	background: rgba(255, 255, 255, .05);
	color: var(--hf2-tekst-3);
}

.hf2-tom__ikon svg.hf2-ikon {
	width: 26px;
	height: 26px;
}

.hf2-tom__titel {
	margin: 0 0 6px;
	color: var(--hf2-tekst);
	font-family: var(--hf2-titel-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

.hf2-tom__hjaelp {
	max-width: 380px;
	margin: 0;
	color: var(--hf2-tekst-2);
}

/* Skelet, mens indekset hentes. */
.hf2-skelet {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--hf2-k-skelet) 0%, var(--hf2-k-skelet-lys) 50%, var(--hf2-k-skelet) 100%);
	background-size: 200% 100%;
	animation: hf2-glimt 1.3s ease-in-out infinite;
}

.hf2-skelet--raekke {
	height: 36px;
	margin: 6px 0;
	border-radius: 10px;
}

.hf2-skelet--titel {
	width: 160px;
	height: 12px;
	margin: 6px 0 18px;
}

.hf2-skelet--billede {
	aspect-ratio: var(--hf2-k-format, 1 / 1);
	margin: 8px;
	border-radius: 11px;
}

.hf2-skelet--linje {
	height: 11px;
	margin: 10px 12px 0;
}

.hf2-skelet--kort {
	width: 55%;
	margin-bottom: 14px;
}

.hf2-kort--skelet,
.hf2-kort--skelet:hover {
	box-shadow: none;
	transform: none;
	pointer-events: none;
}

/* ---- Besked efter "Laeg i kurv" ---- */

.hf2-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 99996;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(540px, calc(100vw - 32px));
	padding: 10px 10px 10px 12px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	background: rgba(20, 24, 22, .94);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6);
	color: #F3F5F1;
	font-size: 14px;
	line-height: 1.3;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 22px);
	transition: opacity .22s ease, transform .34s var(--hf2-ease);
}

.hf2-toast.er-vist {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.hf2-toast__ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hf2-pris);
	color: #0D100F;
}

.hf2-toast__ikon svg.hf2-ikon {
	stroke-width: 2.6;
}

.hf2-toast.er-fejl .hf2-toast__ikon {
	background: #E5484D;
	color: #fff;
}

.hf2-toast__tekst {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.hf2-toast__tekst strong {
	font-weight: 700;
}

.hf2-toast__navn {
	overflow: hidden;
	color: rgba(243, 245, 241, .7);
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hf2-toast .hf2-toast__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 9px 14px;
	border-radius: 11px;
	background: var(--hf2-accent);
	color: var(--hf2-accent-ink);
	font-size: 13px;
	font-weight: 700;
	transition: transform .15s ease;
}

.hf2-toast .hf2-toast__link:hover {
	color: var(--hf2-accent-ink);
	transform: translateY(-1px);
}

.hf2-toast__link svg.hf2-ikon {
	width: 15px;
	height: 15px;
}

/* ---- Mellembredde ---- */

@media (max-width: 1279px) {
	.hf2-gitter {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) and (min-width: 900px) {
	.hf2__krop {
		grid-template-columns: 236px minmax(0, 1fr);
		gap: 28px;
	}
}

/* ---- Mobil: fuld skaerm ---- */

@media (max-width: 899px) {
	.hf2 {
		height: calc(100vh - var(--hf2-top, 0px));
		height: calc(100dvh - var(--hf2-top, 0px));
		border-radius: 0;
		transform: translateY(16px);
	}

	.hf2.er-lukker {
		transform: translateY(12px);
	}

	.hf2::after {
		display: none;
	}

	.hf2__top,
	.hf2__sti {
		width: calc(100% - 28px);
	}

	.hf2__sti {
		padding-bottom: 8px;
	}

	.hf2 .hf2__scope {
		max-width: 46%;
		padding: 0 6px 0 10px;
		font-size: 12.5px;
	}

	/* ---- Mobil (0.9.3, Mikkel 7/11: "der traenger den virkelig til en
	   kaerlig haand"): venstre sides indhold kompakt, saa varerne kommer op;
	   ingen sloering bag en flade, der alligevel daekker skaermen. ---- */

	.hf2 {
		/* 1.0.17: shoppens egen mobilflade (superseeds.dk navy), ellers groen-sort. */
		background: var(--hf2-mobil-bg, linear-gradient(180deg, #161b18 0%, #0f1211 100%));
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.hf2-taeppe,
	.hf2-toast {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.hf2-toast {
		background: rgba(20, 24, 22, .98);
	}

	.hf2 .hf2-kort__kurv,
	.hf2-res .hf2-kort__kurv {
		background: rgba(13, 16, 15, .86);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.hf2__side {
		margin-bottom: 14px;
	}

	.hf2__side .hf2-sektion + .hf2-sektion {
		margin-top: 18px;
	}

	.hf2-sektion__titel,
	.hf2 .hf2-hoved__titel {
		font-size: 11.5px;
	}

	.hf2-sektion__hoved {
		margin-bottom: 8px;
	}

	/* Populaere og seneste soegninger: piller, der bryder om. */
	.hf2-sektion--soegninger .hf2-liste {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.hf2-sektion--soegninger .hf2-liste__punkt {
		flex: none;
		max-width: 100%;
	}

	.hf2 .hf2-sektion--soegninger .hf2-raekke {
		width: auto;
		min-height: 38px;
		padding: 6px 14px 6px 10px;
		gap: 7px;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 999px;
		background: rgba(255, 255, 255, .05);
		font-size: 14px;
	}

	.hf2-sektion--soegninger .hf2-raekke__ikon {
		width: 18px;
		height: 18px;
		border-radius: 0;
		background: none;
	}

	.hf2-sektion--soegninger .hf2-raekke__ikon svg.hf2-ikon {
		width: 15px;
		height: 15px;
	}

	.hf2-sektion--soegninger .hf2-raekke__pil {
		display: none;
	}

	.hf2 .hf2-sektion--soegninger .hf2-liste__punkt:has(.hf2-raekke__fjern) .hf2-raekke {
		padding-right: 38px;
	}

	.hf2 .hf2-sektion--soegninger .hf2-raekke__fjern {
		right: 4px;
		width: 30px;
		height: 30px;
	}

	/* Forslag: kompakte raekker uden ikonboks. */
	.hf2 .hf2-sektion--forslag .hf2-raekke {
		min-height: 42px;
		padding: 4px 2px;
		gap: 10px;
		font-size: 15px;
	}

	.hf2-sektion--forslag .hf2-raekke__ikon {
		width: 20px;
		height: 20px;
		background: none;
	}

	.hf2 .hf2-sektion--forslag .hf2-raekke__pil {
		opacity: 1;
		transform: none;
	}

	/* Kategorier og maerker: piller, der ruller sidelaens. */
	.hf2-sektion--links .hf2-liste {
		display: flex;
		gap: 8px;
		margin: 0 -14px;
		padding: 0 14px 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hf2-sektion--links .hf2-liste::-webkit-scrollbar {
		display: none;
	}

	.hf2-sektion--links .hf2-liste__punkt {
		flex: none;
	}

	.hf2 .hf2-sektion--links .hf2-raekke {
		width: auto;
		min-height: 40px;
		padding: 4px 12px 4px 4px;
		gap: 8px;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 999px;
		background: rgba(255, 255, 255, .04);
	}

	.hf2-sektion--links .hf2-raekke__ikon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.hf2-sektion--links .hf2-raekke__tekst {
		overflow: visible;
	}

	.hf2-sektion--links .hf2-raekke__pil {
		display: none;
	}

	.hf2 .hf2-sektion--links .hf2-raekke.er-valgt {
		border-color: rgba(var(--hf2-accent-rgb), .6);
		box-shadow: none;
	}

	/* Stien, ryd-krydset og "Se alle": trykflader paa mindst 36-40 px. */
	.hf2 .hf2-sti__tilbage {
		width: 40px;
		height: 40px;
	}

	.hf2 .hf2-sti__knap {
		padding: 10px 8px;
	}

	.hf2 .hf2__ryd {
		width: 36px;
		height: 36px;
		margin-right: 6px;
	}

	.hf2 .hf2-hoved__link {
		margin: -10px 0;
		padding: 10px 0;
	}

	/* "Se alle" som paa computer (soegeikon, tekst, antal til hoejre), men
	   fast i bunden, mens der rulles, paa en uigennemsigtig flade med skygge
	   (0.9.6). Mikkel 7/11: den gule i fuld bredde var "meget stor og gul";
	   "paa desktop fungerer det allerede ganske fint ... Det er nemlig ikke en
	   stor gul knap". */
	.hf2 .hf2-alle {
		position: sticky;
		bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 3;
		margin-top: 18px;
		padding: 10px 14px 10px 10px;
		border-color: rgba(255, 255, 255, .12);
		background: var(--hf2-alle-bg, #1b201d);
		box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .8);
	}

	.hf2 .hf2-alle:hover,
	.hf2 .hf2-alle:focus-visible,
	.hf2 .hf2-alle.er-aktiv {
		border-color: rgba(var(--hf2-accent-rgb), .45);
		background: var(--hf2-alle-hover, #1f2521);
	}

	.hf2__top {
		display: flex;
		gap: 6px;
		padding: 12px 0 10px;
	}

	.hf2 .hf2__logo {
		display: none;
	}

	.hf2__form {
		flex: 1;
		height: 48px;
	}

	.hf2__flade {
		border-radius: 14px;
	}

	.hf2__feltIkon {
		width: 44px;
	}

	.hf2 .hf2__form input.hf2__felt,
	.hf2__ph {
		font-size: 16px !important;
	}

	.hf2__ph {
		left: 44px;
		right: 46px;
	}

	.hf2__esc,
	.hf2__fod {
		display: none !important;
	}

	.hf2 .hf2__luk {
		width: auto;
		height: 44px;
		padding: 0 4px 0 8px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		font-size: 15px;
		font-weight: 600;
	}

	.hf2 .hf2__luk:hover,
	.hf2 .hf2__luk:focus-visible {
		background: transparent;
		color: var(--hf2-accent);
	}

	.hf2__luk svg.hf2-ikon {
		display: none;
	}

	.hf2__lukTekst {
		display: inline;
	}

	/* Fuld bredde med luften indvendigt: raekkerne af piller og fliser
	   raekker 14 px ud i kanten for at kunne rulle, og med kroppen 28 px
	   smallere end skaermen gav det 14 px sidelaens rulning i hele panelet
	   (Mikkel 7/11: "noget side-scroll paa mobil ... ved produkterne"). */
	.hf2__krop {
		display: block;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px 14px calc(24px + env(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
	}

	.hf2__side,
	.hf2__hoved {
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.hf2__side {
		margin-bottom: 20px;
	}

	.hf2-sektion__hoved {
		padding: 0 4px;
	}

	.hf2 .hf2-raekke {
		min-height: 46px;
		padding: 6px 4px;
	}

	.hf2-raekke__fjern {
		opacity: 1 !important;
	}

	/* Kategorierne i det tomme felt: to raekker, der ruller sidelaens. */
	.hf2-fliser {
		display: grid;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: minmax(150px, 44%);
		gap: 8px;
		margin: 0 -14px;
		padding: 0 14px 4px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.hf2-fliser::-webkit-scrollbar {
		display: none;
	}

	.hf2 .hf2-flise {
		padding: 7px 10px 7px 7px;
		gap: 10px;
		border-radius: 12px;
		scroll-snap-align: start;
	}

	.hf2-flise__billede {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.hf2-gitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hf2-kort__navn {
		font-size: 13.5px;
	}

	.hf2-kort__nu {
		font-size: 15px;
	}

	.hf2-tom {
		padding: 40px 12px;
	}

	.hf2-toast {
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
}

/* ---- Resultatsiden ---- */

.hf2-res {
	max-width: 1320px;
	margin: 0 auto;
	padding: 30px 24px 72px;
	color: var(--hf2-s-tekst);
	font-size: 14px;
	line-height: 1.45;
}

.hf2r-hoved {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin-bottom: 24px;
}

.hf2-res .hf2r-titel {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--hf2-s-tekst) !important;
	font-family: var(--hf2-titel-font) !important;
	font-size: clamp(25px, 2.6vw, 34px) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	line-height: 1.15 !important;
	text-transform: none !important;
}

.hf2r-ord {
	background: linear-gradient(transparent 64%, rgba(var(--hf2-accent-rgb), .55) 64%, rgba(var(--hf2-accent-rgb), .55) 92%, transparent 92%);
}

.hf2r-antal {
	margin: 0 !important;
	color: var(--hf2-s-svag);
	font-size: 15px;
}

.hf2r-krop {
	display: grid;
	grid-template-columns: 284px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Filtrene */
/* Under shoppens faste menulinje (ca. 40 px) ved rulning (set 7/11). */
.hf2r-filtre {
	position: sticky;
	top: 64px;
	max-height: calc(100vh - 88px);
	overflow: auto;
	border: 1px solid var(--hf2-s-kant);
	border-radius: 18px;
	background: var(--hf2-s-flade);
	box-shadow: 0 1px 2px rgba(13, 16, 15, .04), 0 10px 28px -14px rgba(13, 16, 15, .16);
	scrollbar-width: thin;
}

.hf2r-filtre__top,
.hf2r-filtre__bund {
	display: none;
}

.hf2r-filtre__indhold {
	padding: 4px 18px 10px;
}

.hf2r-kontakt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--hf2-s-kant);
	cursor: pointer;
	font-weight: 600;
}

.hf2r-kontakt__input,
.hf2r-valg__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}

.hf2r-kontakt__spor {
	position: relative;
	flex: none;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #D3D9D5;
	transition: background-color .2s ease;
}

.hf2r-kontakt__spor::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .26s var(--hf2-ease);
}

.hf2r-kontakt__input:checked + .hf2r-kontakt__spor {
	background: var(--hf2-s-aktiv);
}

.hf2r-kontakt__input:checked + .hf2r-kontakt__spor::after {
	transform: translateX(18px);
}

.hf2r-kontakt__input:focus-visible + .hf2r-kontakt__spor {
	outline: 2px solid var(--hf2-s-aktiv);
	outline-offset: 2px;
}

.hf2r-gruppe {
	border-bottom: 1px solid var(--hf2-s-kant);
}

.hf2r-gruppe:last-child {
	border-bottom: 0;
}

.hf2r-gruppe__titel {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 15px 0;
	color: var(--hf2-s-tekst);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.hf2r-gruppe__titel::-webkit-details-marker,
.hf2r-gruppe__titel::marker {
	display: none;
	content: '';
}

.hf2r-gruppe__titel > span:first-child {
	flex: 1;
}

.hf2r-gruppe__valgt {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--hf2-s-aktiv);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0;
}

.hf2r-gruppe__titel svg.hf2-ikon {
	color: var(--hf2-s-svag);
	transition: transform .22s var(--hf2-ease);
}

.hf2r-gruppe[open] .hf2r-gruppe__titel svg.hf2-ikon {
	transform: rotate(180deg);
}

.hf2r-gruppe__indre {
	padding: 0 0 14px;
}

.hf2r-gruppe[open] .hf2r-gruppe__indre {
	animation: hf2-tone .25s ease;
}

.hf2r-valg {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 -6px;
	padding: 6px;
	border-radius: 9px;
	cursor: pointer;
	transition: background-color .12s ease;
}

.hf2r-valg:hover {
	background: var(--hf2-s-hover);
}

.hf2r-valg.er-skjult {
	display: none;
}

.hf2r-valg__boks {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid #B4BDB7;
	border-radius: 6px;
	background: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}

.hf2r-valg__boks svg.hf2-ikon {
	width: 14px;
	height: 14px;
	stroke: #fff;
	stroke-width: 2.8;
	opacity: 0;
	transform: scale(.4);
	transition: transform .2s var(--hf2-ease), opacity .12s ease;
}

.hf2r-valg__input:checked + .hf2r-valg__boks {
	border-color: var(--hf2-s-aktiv);
	background: var(--hf2-s-aktiv);
}

.hf2r-valg__input:checked + .hf2r-valg__boks svg.hf2-ikon {
	opacity: 1;
	transform: none;
}

.hf2r-valg__input:focus-visible + .hf2r-valg__boks {
	box-shadow: 0 0 0 3px rgba(13, 16, 15, .22);
}

.hf2r-valg__navn {
	flex: 1;
	min-width: 0;
	color: var(--hf2-s-tekst);
	font-size: 14px;
}

.hf2r-valg__antal {
	color: var(--hf2-s-svag);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.hf2-res .hf2r-flere {
	margin-top: 6px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--hf2-s-tekst);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hf2-res input.hf2r-find {
	width: 100% !important;
	height: 38px !important;
	margin: 0 0 10px !important;
	padding: 0 12px !important;
	border: 1px solid var(--hf2-s-kant) !important;
	border-radius: 10px !important;
	background: #F7F8F7 !important;
	box-shadow: none !important;
	color: var(--hf2-s-tekst) !important;
	font-size: 14px !important;
	outline: none !important;
}

.hf2-res input.hf2r-find:focus {
	border-color: var(--hf2-s-aktiv) !important;
	background: #fff !important;
}

/* Pris: to skydere og to felter. */
.hf2r-skyder {
	position: relative;
	height: 28px;
	margin: 4px 4px 12px;
}

.hf2r-skyder__spor {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
	background: #DCE1DD;
}

.hf2r-skyder__fyld {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: inherit;
	background: var(--hf2-s-aktiv);
}

.hf2-res input.hf2r-skyder__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.hf2r-skyder__input::-webkit-slider-runnable-track {
	background: none;
}

.hf2r-skyder__input::-moz-range-track {
	background: none;
}

.hf2r-skyder__input::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	border: 2px solid var(--hf2-s-aktiv);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	transition: transform .15s ease;
}

.hf2r-skyder__input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--hf2-s-aktiv);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	cursor: grab;
	pointer-events: auto;
}

.hf2r-skyder__input:active::-webkit-slider-thumb {
	cursor: grabbing;
	transform: scale(1.12);
}

.hf2r-skyder__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(13, 16, 15, .2);
}

.hf2r-prisFelter {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.hf2r-prisFelt {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	margin: 0;
}

.hf2r-prisFelt__navn {
	color: var(--hf2-s-svag);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hf2-res .hf2r-prisFelt input {
	width: 100% !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 34px 0 12px !important;
	border: 1px solid var(--hf2-s-kant) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--hf2-s-tekst) !important;
	font-size: 14px !important;
	font-variant-numeric: tabular-nums;
	outline: none !important;
	-moz-appearance: textfield;
}

.hf2-res .hf2r-prisFelt input:focus {
	border-color: var(--hf2-s-aktiv) !important;
}

.hf2r-prisFelt input::-webkit-inner-spin-button,
.hf2r-prisFelt input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hf2r-prisFelt__enhed {
	position: absolute;
	right: 12px;
	bottom: 12px;
	color: var(--hf2-s-svag);
	font-size: 12px;
	pointer-events: none;
}

.hf2r-prisFelter__streg {
	padding-bottom: 10px;
	color: var(--hf2-s-svag);
}

/* Vaerktoejslinjen */
.hf2r-vaerktoej {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-bottom: 14px;
}

.hf2-res .hf2r-filtreKnap {
	display: none;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--hf2-s-aktiv);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.hf2r-filtreKnap svg.hf2-ikon {
	width: 17px;
	height: 17px;
}

.hf2r-filtreKnap__antal {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--hf2-accent);
	color: var(--hf2-accent-ink);
	font-size: 11px;
	font-weight: 700;
}

.hf2r-vaerktoej__antal {
	color: var(--hf2-s-svag);
	font-size: 14px;
}

.hf2r-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 auto;
}

.hf2r-sort__navn {
	color: var(--hf2-s-svag);
	font-size: 13px;
}

.hf2-res select.hf2r-sort__valg {
	height: 42px !important;
	margin: 0 !important;
	padding: 0 40px 0 14px !important;
	border: 1px solid var(--hf2-s-kant) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(13, 16, 15, .04) !important;
	color: var(--hf2-s-tekst) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.hf2-res select.hf2r-sort__valg:focus-visible {
	border-color: var(--hf2-s-aktiv) !important;
}

.hf2r-sort svg.hf2-ikon {
	position: absolute;
	right: 12px;
	color: var(--hf2-s-svag);
	pointer-events: none;
}

/* Aktive filtre */
.hf2r-aktive {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -2px 0 16px;
}

.hf2-res .hf2r-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px 0 12px;
	border: 1px solid var(--hf2-s-kant);
	border-radius: 999px;
	background: #fff;
	color: var(--hf2-s-tekst);
	font-size: 13px;
	font-weight: 600;
	animation: hf2-tone .2s ease backwards;
	transition: border-color .15s ease, background-color .15s ease;
}

.hf2-res .hf2r-chip:hover,
.hf2-res .hf2r-chip:focus-visible {
	border-color: var(--hf2-s-tekst);
	background: var(--hf2-s-hover);
	color: var(--hf2-s-tekst);
}

.hf2r-chip svg.hf2-ikon {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
}

.hf2-res .hf2r-nulstil {
	padding: 0 6px;
	border: 0;
	background: none;
	color: var(--hf2-s-svag);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Varerne */
.hf2r-gitter {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.hf2r-skelet {
	display: contents;
}

@media (hover: hover) {
	.hf2-res .hf2-kort:hover {
		box-shadow: 0 18px 36px -16px rgba(13, 16, 15, .45);
	}
}

.hf2-res .hf2-note {
	border-color: rgba(var(--hf2-accent-rgb), .45);
	background: rgba(var(--hf2-accent-rgb), .16);
	color: var(--hf2-s-tekst);
}

.hf2-tom--side .hf2-tom__ikon {
	border-color: var(--hf2-s-kant);
	background: #fff;
	color: var(--hf2-s-svag);
}

.hf2-tom--side .hf2-tom__titel {
	color: var(--hf2-s-tekst);
}

.hf2-tom--side .hf2-tom__hjaelp {
	color: var(--hf2-s-svag);
}

.hf2-tom--side {
	grid-column: 1 / -1;
}

/* "Vis flere" */
.hf2r-mere {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
}

.hf2r-mere:empty {
	display: none;
}

.hf2r-mere__status {
	margin: 0 !important;
	color: var(--hf2-s-svag);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.hf2r-mere__bar {
	width: 200px;
	height: 3px;
	border-radius: 999px;
	background: #DCE1DD;
	overflow: hidden;
}

.hf2r-mere__fyld {
	display: block;
	height: 100%;
	background: var(--hf2-s-aktiv);
	transition: width .45s var(--hf2-ease);
}

.hf2-res .hf2r-visFlere {
	height: 46px;
	margin-top: 6px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--hf2-s-aktiv);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: transform .15s ease, box-shadow .2s ease;
}

.hf2-res .hf2r-visFlere:hover,
.hf2-res .hf2r-visFlere:focus-visible {
	background: var(--hf2-s-aktiv);
	color: #fff;
	box-shadow: 0 10px 22px -10px rgba(13, 16, 15, .55);
	transform: translateY(-1px);
}

.hf2r-skuffeTaeppe {
	display: none;
}

@media (max-width: 1199px) {
	.hf2r-gitter {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.hf2-res {
		padding: 18px 14px 48px;
	}

	.hf2r-hoved {
		margin-bottom: 14px;
	}

	.hf2r-krop {
		display: block;
	}

	.hf2-res .hf2r-filtreKnap {
		display: inline-flex;
	}

	.hf2r-vaerktoej__antal,
	.hf2r-sort__navn {
		display: none;
	}

	.hf2r-gitter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Filtrene som skuffe nedefra. */
	.hf2r-filtre {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99992;
		display: flex;
		flex-direction: column;
		max-height: 86vh;
		max-height: 86dvh;
		border: 0;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -20px 60px rgba(0, 0, 0, .3);
		overflow: hidden;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform .34s var(--hf2-ease), visibility 0s linear .34s;
	}

	.hf2-res.er-skuffe-aaben .hf2r-filtre {
		visibility: visible;
		transform: none;
		transition: transform .34s var(--hf2-ease), visibility 0s;
	}

	.hf2r-filtre::before {
		content: '';
		position: absolute;
		top: 7px;
		left: 50%;
		width: 38px;
		height: 4px;
		margin-left: -19px;
		border-radius: 999px;
		background: #D3D9D5;
	}

	.hf2r-filtre__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 18px 12px;
		border-bottom: 1px solid var(--hf2-s-kant);
	}

	.hf2r-filtre__titel {
		margin: 0 !important;
		color: var(--hf2-s-tekst);
		font-family: var(--hf2-titel-font);
		font-size: 20px;
		font-weight: 700;
	}

	.hf2-res .hf2r-filtre__luk {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #F0F2F0;
		color: var(--hf2-s-tekst);
	}

	.hf2r-filtre__indhold {
		flex: 1;
		overflow: auto;
		padding: 4px 18px 12px;
		overscroll-behavior: contain;
	}

	.hf2r-filtre__bund {
		display: block;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--hf2-s-kant);
		background: var(--hf2-s-flade);
	}

	.hf2-res .hf2r-filtre__vis {
		width: 100%;
		height: 50px;
		padding: 0 16px;
		border: 0;
		border-radius: 14px;
		background: var(--hf2-s-aktiv);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
	}

	.hf2r-skuffeTaeppe {
		position: fixed;
		inset: 0;
		z-index: 99991;
		display: block;
		background: rgba(6, 8, 7, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .26s ease;
	}

	.hf2-res.er-skuffe-aaben .hf2r-skuffeTaeppe {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---- Berøring (0.9.3): ingen graa blink ved tryk, i stedet et let tryk ned;
   hover-loeft bliver ikke haengende efter et tryk. ---- */

.hf2,
.hf2-res,
.hf2-toast {
	-webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
	.hf2 .hf2-raekke,
	.hf2 .hf2-flise,
	.hf2 .hf2-alle,
	.hf2-res .hf2r-chip {
		transition: background-color .14s ease, transform .12s ease;
	}

	.hf2 .hf2-raekke:active,
	.hf2 .hf2-flise:active,
	.hf2 .hf2-alle:active,
	.hf2-res .hf2r-chip:active,
	.hf2 .hf2-sti__tilbage:active {
		transform: scale(.97);
	}

	.hf2-kort:active {
		transform: scale(.985);
	}

	.hf2 .hf2-flise:hover {
		border-color: rgba(255, 255, 255, .07);
		background: rgba(255, 255, 255, .04);
		transform: none;
	}

	.hf2 .hf2-raekke:hover:not(.er-aktiv):not(.er-valgt) {
		background: transparent;
	}
}

/* ---- Bevaegelser ---- */

@keyframes hf2-tone {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hf2-ind {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to { opacity: 1; transform: none; }
}

@keyframes hf2-glid {
	from { transform: translateX(0); }
	to { transform: translateX(440%); }
}

@keyframes hf2-glimt {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

@keyframes hf2-drej {
	to { transform: rotate(360deg); }
}

@keyframes hf2-pop {
	0% { transform: scale(.3); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hf2,
	.hf2 *,
	.hf2-taeppe,
	.hf2-res *,
	.hf2-toast {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}
}