/**
 * HydroFyn Swatches
 *
 * Udseendet er bevidst holdt taet op ad de swatches, sitet har i dag, saa
 * skiftet fra Variation Swatches ikke bliver en visuel overraskelse for
 * kunderne. Farverne er sitets egne: blaa var(--hf-primaer, #1B2939) og groen var(--hf-groen, #497D59).
 */

.hf-swatches-wrap {
	margin: 0 0 12px;
}

/* Selecten skal blive i DOM'en - WooCommerces variantlogik laeser og
   skriver den - men den skal ikke ses. display:none ville fjerne den fra
   formularen i visse temaer, saa den skjules visuelt i stedet. */
.hf-swatches__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hf-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* Knappen staar altid i en ul.hf-swatches. Selektoren er to klasser (0.8.19),
   fordi Elementor-kittet paa gro-lys.dk farver alle knapper med
   `.elementor-kit-12 button` (klasse + element), som slog den ene klasse
   `.hf-swatch`: blokkene blev lysegroenne med lysegraa tekst, maalt 2/11.
   Samme vaerdier som foer, kun vaegten er hoejere. */
.hf-swatches .hf-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid #c9d3dc;
	border-radius: 6px;
	background-color: var(--hf-hvid-varm, #FCFAF6);
	color: var(--hf-tekst, #16212F);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* Uden en eksplicit farve arver knappen Elementor-kittets globale
   link-hover-farve, som paa dette site er pink/roed. !important er
   noedvendigt: kittet saetter farven med hoejere specificitet og indlaeses
   efter pluginets stylesheet. */
.hf-swatches .hf-swatch:hover,
.hf-swatches .hf-swatch:focus {
	border-color: var(--hf-primaer, #1B2939);
	background-color: var(--hf-flade, #F4F5F6);
	color: var(--hf-tekst, #16212F) !important;
}

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

.hf-swatches .hf-swatch.is-selected {
	border-color: var(--hf-primaer, #1B2939);
	background-color: var(--hf-primaer, #1B2939);
	color: #fff !important;
}

.hf-swatches .hf-swatch.is-selected:hover,
.hf-swatches .hf-swatch.is-selected:focus {
	border-color: var(--hf-primaer-moerk, #11171F);
	background-color: var(--hf-primaer-moerk, #11171F);
	color: #fff !important;
}

/* Blokke (pris paa knappen): den valgte er hvid med moerk kant, som i
   ejerens mockup - ikke udfyldt. Fra 0.8.6 er alle knapper i kortet blokke. */
.hf-swatches--loop .hf-swatch--block.is-selected,
.hf-swatches--loop .hf-swatch--block.is-selected:hover,
.hf-swatches--loop .hf-swatch--block.is-selected:focus {
	border: 2px solid var(--hf-primaer, #1B2939);
	background-color: var(--hf-hvid-varm, #FCFAF6);
	color: var(--hf-tekst, #16212F) !important;
}

/* Ikke-mulige kombinationer skjules ikke - kunden skal kunne se, at
   stoerrelsen findes, men ikke kan vaelges lige nu. */
.hf-swatches .hf-swatch.is-unavailable {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.hf-swatches .hf-swatch.is-unavailable:hover {
	border-color: #c9d3dc;
}

/* Udsolgt er ikke det samme som "findes ikke i denne kombination".
   Vaerdien findes, prisen staar der - den kan bare ikke koebes lige nu.
   Derfor graa og laast, men uden overstregning: ejerens valg 2026-09-16.
   Klassen blev udskrevet allerede fra 0.8.16 til helt udsolgte kort, men
   var aldrig stylet noget sted - derfor var de "graatonede" blokke ikke
   graa. Reglen her daekker begge steder. */
.hf-swatches .hf-swatch.is-udsolgt {
	border-color: #dbe2e8;
	background-color: #f2f4f6;
	color: #8a97a3;
	cursor: not-allowed;
}

.hf-swatches .hf-swatch.is-udsolgt:hover,
.hf-swatches .hf-swatch.is-udsolgt:focus {
	border-color: #dbe2e8;
	background-color: #f2f4f6;
	color: #8a97a3;
}

/* Prisen skrives paa af produktsidens JS og lander derfor sidst i knappen.
   order sikrer, at "Udsolgt" alligevel staar nederst. */
.hf-swatch__udsolgt {
	order: 3;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a97a3;
}

/* ---- Varesiden ----
   WooCommerce tegner variantvalget som en tabel: etiketten i en 44 px smal
   celle til venstre, knapperne i cellen til hoejre, lodret centreret om
   hinanden. Maalt paa gro-lys.dk 2/11-2026: "Variant" til venstre, to smaa
   knapper, og tomt til hoejre. Ejerens oenske: pladsen udnyttet, knapperne
   lidt stoerre. Etiketten staar nu over knapperne i fuld bredde, og
   knapperne er 44 px hoeje med 15 px skrift (0.8.20). Tabelcellerne goeres
   til blokke, saa de kan stables uden at roere skabelonen. */
.hf-swatches-active form.variations_form table.variations,
.hf-swatches-active form.variations_form table.variations tbody,
.hf-swatches-active form.variations_form table.variations tr,
.hf-swatches-active form.variations_form table.variations th.label,
.hf-swatches-active form.variations_form table.variations td.value {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.hf-swatches-active form.variations_form table.variations tr + tr {
	margin-top: 14px;
}

/* Luften under etiketten: polstringen fra 0.8.20 blev overtrumfet af
   skabelonens regler, og etiketten roerte naesten knapperne (ejeren 2/11).
   Margin paa blokken med !important (0.8.22). */
.hf-swatches-active form.variations_form table.variations th.label {
	margin: 0 0 12px !important;
	padding: 0 !important;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* gro-lys.dk's Elementor-skabelon for varesiden (post 81900) skjuler
   WooCommerces etiket med !important og skriver ordet "Variant" i et
   th::before, uanset hvad attributten hedder. Vores etiket skal frem, og
   pseudo-elementet vaek; !important er noedvendigt mod deres (0.8.21). */
.hf-swatches-active form.variations_form table.variations th.label label {
	display: inline !important;
	margin: 0;
	font: inherit;
	color: inherit;
}

.hf-swatches-active form.variations_form table.variations th.label::before,
.hf-swatches-active form.variations_form table.variations th.label::after {
	content: none !important;
	display: none !important;
}

.hf-swatches-active form.variations_form table.variations td.value {
	padding: 0;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches-wrap {
	margin: 0;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches {
	gap: 8px;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches .hf-swatch {
	min-width: 56px;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
}

/* Blokke med pris paa varesiden (0.8.22), som paa kortene: vaerdien fed
   oeverst, prisen lille under. Raekken ombryder; blokkene har samme bredde
   inden for raekken, naar der er pris paa. Foerprisen ved tilbud skjules som
   i listen; varens egen prislinje viser stadig begge tal. */
.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch.hf-swatch--block {
	flex-direction: column;
	gap: 2px;
	min-width: 76px;
	min-height: 56px;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 700;
	white-space: normal;
	overflow-wrap: break-word;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch__price {
	display: block;
	max-width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Beloebet ligger i WooCommerces egne spans. gro-lys.dk farver dem groenne
   med !important og fem klasser (span.woocommerce-Price-amount i
   koebsformularen), saa prisen paa den valgte, moerkegroenne blok blev groen
   paa groen (Mikkel 2/11-2026). Tungere regel, samme arv (0.8.25). */
.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch .hf-swatch__price,
.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch .hf-swatch__price * {
	color: inherit !important;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch__price del {
	display: none;
}

.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch__price ins {
	text-decoration: none;
}

/* WooCommerces "Ryd"-link staar efter knapperne, naar der er valgt; det
   faar en linje for sig, saa det ikke klemmer sig ind i raekken. */
.hf-swatches-active form.variations_form table.variations td.value .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

@media (max-width: 767px) {
	.hf-swatches-active form.variations_form table.variations .hf-swatches .hf-swatch {
		min-width: 52px;
		min-height: 42px;
		padding: 8px 14px;
		font-size: 14px;
	}

	.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch.hf-swatch--block {
		min-width: 68px;
		min-height: 52px;
		padding: 7px 10px;
	}

	.hf-swatches-active form.variations_form table.variations .hf-swatches--pris .hf-swatch__price {
		font-size: 11px;
	}
}

/* ---- Produktlisten ---- */

/* Vandret luft, saa chipsene ikke gaar helt ud til kortets kant. Maalt foer:
   blokken spaendte 0 til 302 px paa et 302 px bredt kort. */
/* Maalt: med 20 px padding var der kun 262 px tilbage paa et 302 px kort,
   og fire chips plus "+2"-knappen fylder ~278 px. De wrappede derfor stadig
   til to raekker, og kortet blev hoejere i stedet for lavere. 16 px giver
   stadig tydelig luft til kanten og plads til raekken. */
/* 2026-09-10: indholdsbredden strammet fra 274 til 262 px paa ejerens
   oenske, og koeb-knappen er nu lige saa bred. Vaerdien staar eet sted, saa
   swatches og knap ikke kan komme i utakt. */
:root {
	--hf-kort-indryk: 20px;
}

/* Kortenes hoejde (0.8.23, ejeren 2/11-2026: "produktkortene er blevet
   meget hoeje"): blokken fyldte 95 px paa gro-lys.dk, hvoraf 16 px var
   temaets margin under <ul> (vores margin: 0 tabte til en tungere regel),
   10 px var luft over og under, og blokkene var 54 px. Nu 4 + 48 + 2 px. */
/* 10 px under blokken (0.8.24): med 2 px roerte blokkene ved kortets
   lagerlinjer ("Paa lager", "Kan afsendes i dag"), ejeren 2/11-2026. */
.hf-loop-swatches {
	margin: 4px 0 10px;
	padding: 0 var(--hf-kort-indryk);
}

ul.products li.product .hf-loop-swatches ul.hf-swatches--loop {
	margin: 0 !important;
}

/* Koeb-knappen fulgte foer sin egen indrykning paa 35 px og var derfor 42 px
   smallere end resten af indholdet. Teksten laa samtidig 10 px for hoejt,
   fordi knappen var display:block med fast hoejde; flex centrerer den
   uafhaengigt af polstring og linjehoejde. */
/* Hoejden var laast til 44 px. `min-height` frem for `height` giver knappen
   lov til at vokse, hvis teksten ombryder paa en smal skaerm - en fast hoejde
   ville klippe den. Ejerens oenske 2026-09-10. */
ul.products li.product a.add_to_cart_button,
ul.products li.product a.added_to_cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px !important;
	height: auto !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	margin-left: var(--hf-kort-indryk) !important;
	margin-right: var(--hf-kort-indryk) !important;
	line-height: 1.2;
	text-align: center;
}

/* Efter laeg i kurv (0.8.29, ejeren 2/11-2026): koebsknappen skjules, og
   WooCommerces genvej til kurven, som dens script saetter lige efter, staar
   i knappens stoerrelse med teksten "Gaa til kurv" (fra scriptet). Farven er
   temaets egen for `a.added_to_cart`. Kvitteringen "Lagt i kurv" er en linje
   lige over. Et nyt variantvalg paa kortet fjerner begge igen. */
ul.products li.product a.add_to_cart_button.added {
	display: none !important;
}

ul.products li.product .hf-loop-kvittering {
	margin: 0 var(--hf-kort-indryk) 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--hf-groen, #497D59);
}

/* Vaelg-tilstanden: hvid med kant, som i ejerens mockup. Temaet saetter den
   blaa fyldfarve med hoej specificitet, saa !important er noedvendigt her.
   Klassen fjernes af JavaScript, naar kunden har valgt, og knappen falder
   tilbage til temaets blaa "Laeg i kurv". */
ul.products li.product a.add_to_cart_button.hf-cta--vaelg:not(.added):not(.loading) {
	background-color: var(--hf-hvid-varm, #FCFAF6) !important;
	background-image: none !important;
	border: 1.5px solid var(--hf-kant-cta, #CCD2D6) !important;
	color: var(--hf-tekst, #16212F) !important;
	box-shadow: none !important;
}

ul.products li.product a.add_to_cart_button.hf-cta--vaelg:not(.added):not(.loading):hover,
ul.products li.product a.add_to_cart_button.hf-cta--vaelg:not(.added):not(.loading):focus-visible {
	background-color: var(--hf-flade, #F4F5F6) !important;
	border-color: var(--hf-primaer, #1B2939) !important;
	color: var(--hf-tekst, #16212F) !important;
}

/* ---- Faa varianter: store knapper med pris under hver ----
   Med to eller tre varianter er der plads til at vise prisen pr. variant, saa
   kunden kan sammenligne uden at klikke ind paa produktet. Knapperne deler
   bredden ligeligt. min-width tvinger dem til at ombryde paa smalle kort i
   stedet for at klemme teksten sammen; den ensomme knap paa sidste raekke
   vokser saa ud i fuld bredde. */
.hf-swatches--few {
	flex-wrap: wrap;
	gap: 6px;
}

/* Store blokke (0.8.6, ejerens mockup): tre lige brede i raekken, to linjer -
   antal fedt og pris under. "+N" er ren tekst ved siden af. Tre klasser paa
   blokken, saa den slaar den kompakte .hf-swatches--loop .hf-swatch nedenfor. */
/* Et fast gitter, ikke flex (0.8.9). Med `flex: 1 1 0` delte hver raekke
   bredden for sig: den foerste raekke havde tre blokke plus "+N", den
   udfoldede havde tre blokke alene - saa kanterne sprang baade til venstre
   og hoejre, naar kunden foldede ud. Ejeren rapporterede det 2026-09-11.
   Tre lige kolonner plus en auto-kolonne til "+N"; udfoldet falder
   auto-kolonnen vaek, og alle blokke beholder samme bredde. */
.hf-swatches--loop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

/* Auto-kolonnen kun paa lister med "+N" (0.8.35). Et kort med praecis tre
   varianter (--few) har ingen "+N", og dets tredje blok landede i
   auto-kolonnen: den blev saa bred som sit indhold og klemte de to andre til
   ca. 20 px, saa "36 Watt - 120cm" stod med et bogstav pr. linje (Kaspers
   telefon, gro-lys.dk, LED-bar, 2/11-2026). */
.hf-swatches--loop.hf-swatches--many:not(.is-expanded) {
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

/* Temaets clearfix (`ul::before/::after { content: " " }`) bliver til rigtige
   gitterceller og aad den foerste plads: raekke 1 begyndte i kolonne 2, mens
   de foelgende raekker begyndte i kolonne 1. Maalt 2026-09-11 - det var
   praecis den skaeve kant, ejeren saa. I flex var de usynlige. */
ul.hf-swatches--loop::before,
ul.hf-swatches--loop::after {
	content: none !important;
	display: none !important;
}

.hf-swatches--loop.is-expanded {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hf-swatches--loop .hf-swatches__item {
	min-width: 0;
}

.hf-swatches--loop .hf-swatches__more {
	flex: 0 0 auto;
	min-width: 0;
}

.hf-swatches--loop .hf-swatch.hf-swatch--block {
	width: 100%;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
	min-height: 48px;
	padding: 6px 6px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	/* Lange vaerdier ("0,5-2l potte", "4-25l potte" paa gro-lys.dk, maalt
	   2/11-2026) loeb ud over blokkens kant og ind i naboen, fordi temaet
	   saetter knapper til nowrap. De skal ombryde inde i blokken: ved
	   mellemrum, og inde i et ord kun naar ordet alene er for bredt. Prisen
	   maa kun bryde ved mellemrummet foer "kr." - "anywhere" gav "129,95 k"
	   og "r." paa hver sin linje (0.8.21). */
	white-space: normal;
	overflow-wrap: break-word;
}

.hf-swatches--loop .hf-swatch.hf-swatch--block .hf-swatch__label,
.hf-swatches--loop .hf-swatch.hf-swatch--block .hf-swatch__price {
	display: block;
	max-width: 100%;
	text-align: center;
}

/* Navnet paa een linje (0.8.26, ejeren 2/11-2026: "ø 12,5cm" brød som "ø",
   "12,5c", "m"). Fuld bredde, saa scriptet kan maale, om teksten er for
   bred, og nowrap; scriptet krymper skriften trin for trin ned til 10 px,
   og foerst hvis det ikke raekker, faar navnet klassen --wrap og maa bryde
   ved et mellemrum. */
.hf-swatches--loop .hf-swatch.hf-swatch--block .hf-swatch__label {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.hf-swatches--loop .hf-swatch.hf-swatch--block .hf-swatch__label.hf-swatch__label--wrap {
	white-space: normal;
	overflow: visible;
	overflow-wrap: break-word;
}

/* Kort med lange navne eller priser (klassen fra PHP): to blokke og "+N" i
   raekken paa alle bredder (0.8.26; foer kun paa mobil), saa navnet faar
   plads paa een linje. */
.hf-swatches--loop.hf-swatches--lange {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Fire klasser, saa den slaar den generelle "+N"-regel ovenfor (0.8.35). */
.hf-swatches--loop.hf-swatches--lange.hf-swatches--many:not(.is-expanded) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.hf-swatches--loop.hf-swatches--lange.is-expanded {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Kun paa kort med "+N" (--many): et kort med praecis tre varianter har ingen
   udfoldningsknap, og den tredje blok maa ikke gemmes vaek (0.8.27). */
.hf-swatches--loop.hf-swatches--lange.hf-swatches--many:not(.is-expanded) .hf-swatches__item:nth-child(n+3):not(.hf-swatches__more) {
	display: none;
}

.hf-swatches--loop .hf-swatch.hf-swatch--block .hf-swatch__price {
	overflow-wrap: normal;
	word-break: keep-all;
}

.hf-swatch__price {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	opacity: .75;
}

/* Paa den valgte blok paa varesiden er bunden moerkegroen og teksten hvid;
   med 75 % blev prisen graa og naesten ulaeselig (Mikkel 2/11-2026). Fuld
   farve paa alle valgte blokke, ogsaa i listen, hvor den er moerk paa hvid. */
.hf-swatches .hf-swatch.is-selected .hf-swatch__price {
	opacity: 1;
}

/* Prisen indeholder WooCommerces egen markup - ved tilbud et <del> med
   foer-prisen. Den skal foelge knappens farve, ogsaa naar knappen er valgt,
   hvor Elementor-kittet ellers ville farve den. */
.hf-swatch__price,
.hf-swatch__price * {
	color: inherit !important;
}

.hf-swatch__price del {
	opacity: .6;
	margin-right: 3px;
}

.hf-swatch__price ins {
	text-decoration: none;
}

/* ---- Mange varianter: opsummeringslinje under chipsene ----
   Fortaeller hvad der gemmer sig bag "+N", uden at kortet skal vokse. */
.hf-loop-swatches__summary {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 3px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-loop-swatches__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--hf-groen, #497D59);
}

/* Maalt ved 0.4.1: chipsene fyldte 251 px plus 20 px mellemrum = 271 px mod
   270 px tilgaengelig - raekken brod paa een enkelt pixel. 4 px mellemrum og
   14 px padding giver 274 px plads mod 267 px behov. */
.hf-swatches--loop {
	justify-content: center;
	gap: 4px;
}

/* Chippene er strammet 3 px ind i hver side.
   Maalt 2026-09-10: fire chips plus "+N" kraevede 251 px. Ved 1440 px er der
   262 px, men ved 1200 px er kortet smallere og listen kun 248 px - tre for
   lidt, saa raekken broed i to og gjorde kortet 32 px hoejere. Med 5 px
   polstring er behovet 241 px, hvilket holder ved begge bredder. */
/* Maalt 2026-09-11 efter at filterkolonnen blev 250 px: kortet er 292 px og
   listen 252 px. Med 38 px min-width og 5 px polstring gik "3 stk 5 stk 10 stk
   25 stk +2" paa to raekker; 34 px og 4 px holder det paa een. */
.hf-swatches--loop .hf-swatch {
	min-width: 34px;
	min-height: 28px;
	padding: 3px 4px;
	font-size: 13px;
}

/* Kun de foerste tre blokke vises (0.8.6; foer fire chips); resten foldes ud
   ved klik. Uden det fyldte seks to raekker og gjorde kortet unoedigt hoejt.
   Udfoldningsknappen er undtaget, saa den altid kan ses. */
.hf-swatches--loop:not(.is-expanded) .hf-swatches__item:nth-child(n+4):not(.hf-swatches__more) {
	display: none;
}

/* Kompakt, saa den kan staa paa samme raekke som de fire chips. Den stiplede
   kant var for svag til at vise, at der gemmer sig mere bag den (ejeren
   2026-09-10). Nu udfyldt lyseblaa med solid blaa kant - samme bredde, saa
   raekken ikke ombryder; et ord som "flere" ville koste en ekstra raekke. */
/* "+N" er ren tekst (0.8.6, mockuppet) - ingen kant eller flade, saa de tre
   blokke faar pladsen. */
.hf-swatches--loop .hf-swatch.hf-swatch--more {
	min-width: 0;
	min-height: 48px;
	padding: 0 2px;
	border: 0;
	background-color: transparent;
	color: var(--hf-tekst-svag, #5b6b7a);
	/* Temaets knapregel saetter 400 med hoejere specificitet; maalt 0.8.2. */
	font-weight: 700 !important;
	font-size: 14px;
	letter-spacing: .02em;
}

.hf-swatches--loop .hf-swatch.hf-swatch--more:hover,
.hf-swatches--loop .hf-swatch.hf-swatch--more:focus {
	background-color: transparent;
	color: var(--hf-primaer, #1B2939) !important;
	text-decoration: underline;
}

.hf-swatches--loop.is-expanded .hf-swatches__more {
	display: none;
}

/* Kortet er kun 174 px bredt paa mobil, saa der er plads til tre. */
@media (max-width: 767px) {
	/* Samme maal som foer 0.8.2, saa den tydeligere chip ikke koster plads
	   paa de smalle kort. */
	.hf-swatches--loop .hf-swatch.hf-swatch--more {
		min-height: 44px;
		font-size: 12px;
	}

	:root {
		--hf-kort-indryk: 12px;
	}

	.hf-loop-swatches {
		padding: 0 var(--hf-kort-indryk);
	}

	/* To blokke og "+N" i raekken paa alle mobilkort (0.8.27). Med tre var hver
	   blok 33 px, og selv "0,35L" og "ø20" maatte ned i 10 px eller bryde.
	   Maalt paa gro-lys.dk 2/11-2026 efter ejerens oenske om navne paa een
	   linje. Kort med praecis tre varianter (--few, ingen "+N") viser alle tre,
	   den tredje i naeste raekke. */
	.hf-swatches--loop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hf-swatches--loop.hf-swatches--many:not(.is-expanded) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
	}

	.hf-swatches--loop.is-expanded {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Den tredje blok paa et kort med praecis tre varianter faar hele naeste
	   raekke (0.8.35). */
	.hf-swatches--loop.hf-swatches--few .hf-swatches__item:nth-child(3) {
		grid-column: 1 / -1;
	}

	.hf-swatches--loop.hf-swatches--many:not(.is-expanded) .hf-swatches__item:nth-child(n+3):not(.hf-swatches__more) {
		display: none;
	}

	/* Maalt ved 0.5.0: med 72 px min-width og 6 px mellemrum kraevede to
	   knapper 150 px paa praecis 150 px tilgaengelig plads. De brod derfor
	   til hver sin raekke, og blokken blev 147 px hoej - tre knapper i
	   fuld bredde. 58 px og 4 px mellemrum giver 120 px behov mod 150 px
	   plads, saa der er to per raekke med luft til overs. */
	.hf-swatches--few {
		gap: 4px;
	}

	.hf-swatches--loop .hf-swatches__item {
		min-width: 0;
	}

	.hf-swatches--loop .hf-swatch.hf-swatch--block {
		min-height: 44px;
		padding: 5px 3px;
		border-radius: 8px;
		font-size: 12px;
	}

	.hf-swatch__price {
		font-size: 10px;
	}

	.hf-loop-swatches__summary {
		font-size: 10px;
		margin-top: 4px;
	}

	/* Lange vaerdier eller priser: to blokke i raekken staar nu uden for
	   media-reglen (0.8.26); indfoert for mobil i 0.8.21. */
}

/* Kunden trykkede paa laeg-i-kurv uden at vaelge stoerrelse foerst. */
.hf-loop-swatches--needs-choice .hf-swatches--loop {
	animation: hf-swatches-nudge .4s ease;
}

.hf-loop-swatches--needs-choice .hf-swatch {
	border-color: #b3261e;
}

@keyframes hf-swatches-nudge {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.hf-swatch {
		transition: none;
	}

	.hf-loop-swatches--needs-choice .hf-swatches--loop {
		animation: none;
	}
}

/* Foer-prisen fylder for meget i variantknappen (0.8.12). Paa tilbudsvarer
   stod der "100 kr. 299 kr." i en boks paa ca. 100 px, og teksten blev
   klippet midt i tallet (maalt paa headshop 2026-09-11). Kortets egen
   prislinje viser stadig baade foer og nu, saa rabatten gaar ikke tabt. */
.hf-swatches--loop .hf-swatch__price del {
	display: none;
}

.hf-swatches--loop .hf-swatch__price ins {
	text-decoration: none;
}

/* ---- Minikurv: skallen (0.8.31; anden udgave for alle fra 0.8.38) ----
   Ligger fast over hele siden og er skjult, til noget er lagt i kurven.
   Foerste udgaves udseende (Elementors vareliste i et hvidt panel) er fjernet
   i 0.8.38, da ejeren godkendte anden udgave paa begge shops (2/11-2026,
   CH-625). Udseendet staar i blokken "Minikurv, anden udgave" nedenfor. */
.hf-minikurv[hidden] {
	display: none;
}

.hf-minikurv {
	position: fixed;
	inset: 0;
	/* Over cookie-banneret. superseeds.dk's hf-consent ligger paa 2147483000;
	   med 2000000 (0.8.34) daekkede det stadig panelets knapper paa mobil hos
	   en ny besoegende (maalt 2/11 kl. 17:30). Lige under loftet 2147483647. */
	z-index: 2147483600;
}

.hf-minikurv__bagtaeppe {
	position: absolute;
	inset: 0;
}

.hf-minikurv__panel {
	position: absolute;
}

body.hf-minikurv-aaben,
html.hf-minikurv-aaben {
	overflow: hidden;
}

/* =========================================================================
   Minikurv, anden udgave (0.8.35, CH-621)

   Ejerens oenske 2/11-2026: en grundig stylingrunde, desktop og mobil, hver
   shop i sit eget udtryk. Alt udseende sidder i variablerne herunder; de to
   temaer er superseeds.dk (standard: creme flade, navy top, guld accent,
   groen koebsknap, Libre Franklin, knapper med versaler som shoppens kort)
   og gro-lys.dk (moerk top som headeren, lys graa flade, shoppens moerke-
   groenne knap, League Spartan til overskrifter og priser, Lato til tekst).

   Temaets og Elementor-kittets regler for h2, a og button har hoej
   specificitet og til dels !important (maalt paa begge shops 2/11), saa
   egenskaber, de saetter, faar !important her. Klassenavnene er nye
   (hf-mk__), saa foerste udgaves regler ikke rammer dem.
   ========================================================================= */
.hf-minikurv.hf-minikurv--v2 {
	--mk-font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mk-font-titel: var(--mk-font);
	--mk-font-knap: var(--mk-font);
	--mk-top-bg: #1B2939;
	--mk-top-tekst: #FCFAF6;
	--mk-chip-bg: rgba(210, 161, 96, .2);
	--mk-chip-tekst: #EBC992;
	--mk-flade: #F6F0E3;
	--mk-kort: #FFFFFF;
	--mk-kort-kant: #E9E0CD;
	--mk-kort-skygge: 0 1px 2px rgba(27, 41, 57, .05), 0 4px 14px -6px rgba(27, 41, 57, .10);
	--mk-tekst: #16212F;
	--mk-tekst-svag: #5C6573;
	--mk-skille: #ECE4D3;
	--mk-accent-flade: #497D59;
	--mk-accent-hover: #3B6849;
	--mk-accent-tekst: #FFFFFF;
	--mk-accent-skygge: rgba(73, 125, 89, .45);
	--mk-sek-kant: #1B2939;
	--mk-sek-tekst: #1B2939;
	--mk-sek-hover-bg: #1B2939;
	--mk-sek-hover-tekst: #FCFAF6;
	--mk-stepper-kant: #DCD2BD;
	--mk-trin-hover: #F3EEE2;
	--mk-ok-bg: #E7F0E9;
	--mk-ok-tekst: #2C5639;
	--mk-ok-ikon: #497D59;
	--mk-ny: #FBF3E3;
	--mk-ny-kant: #D2A160;
	--mk-ny-ring: rgba(210, 161, 96, .22);
	--mk-fejl-bg: #FBEAEA;
	--mk-fejl-tekst: #8A1F1F;
	--mk-billede-bg: #0E141B;
	--mk-billede-fit: cover;
	--mk-billede-pad: 0px;
	--mk-radius: 14px;
	--mk-knap-radius: 10px;
	--mk-knap-case: uppercase;
	--mk-knap-spacing: .05em;
	--mk-knap-vaegt: 700;
	--mk-pris-vaegt: 800;
	/* Skriftvaegte som variabler (0.8.40): en shop med Roboto 600 eller
	   Raleway 800 som tungeste snit skal ikke have en falsk fed. */
	--mk-titel-vaegt: 700;
	--mk-navn-vaegt: 700;
	--mk-bagtaeppe: rgba(14, 20, 27, .45);
	--mk-fokus-lys: #EBC992;
	--mk-fokus: #1B2939;
	--mk-glid: cubic-bezier(.22, 1, .36, 1);
	font-family: var(--mk-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--mk-tekst);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

.hf-minikurv.hf-minikurv--v2.hf-mk-tema-grolys {
	--mk-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mk-font-titel: "League Spartan", "Lato", system-ui, sans-serif;
	--mk-font-knap: "League Spartan", "Lato", system-ui, sans-serif;
	--mk-top-bg: #1D2324;
	--mk-top-tekst: #FFFFFF;
	--mk-chip-bg: rgba(135, 191, 112, .2);
	--mk-chip-tekst: #B9DEA9;
	--mk-flade: #F3F4F2;
	--mk-kort: #FFFFFF;
	--mk-kort-kant: #E3E7E2;
	--mk-kort-skygge: 0 1px 2px rgba(29, 35, 36, .05), 0 4px 14px -6px rgba(29, 35, 36, .10);
	--mk-tekst: #1D2324;
	--mk-tekst-svag: #5B6762;
	--mk-skille: #E6E9E5;
	--mk-accent-flade: linear-gradient(180deg, #3E7A4B 0%, #2B5D39 100%);
	--mk-accent-hover: #1F4529;
	--mk-accent-tekst: #FFFFFF;
	--mk-accent-skygge: rgba(43, 93, 57, .45);
	--mk-sek-kant: #C5CFC7;
	--mk-sek-tekst: #1D2324;
	--mk-sek-hover-bg: #EEF5EB;
	--mk-sek-hover-tekst: #1D2324;
	--mk-stepper-kant: #D3D9D3;
	--mk-trin-hover: #EEF3EC;
	--mk-ok-bg: #EAF4E4;
	--mk-ok-tekst: #24502F;
	--mk-ok-ikon: #4E8B3E;
	--mk-ny: #F1F8EC;
	--mk-ny-kant: #87BF70;
	--mk-ny-ring: rgba(135, 191, 112, .25);
	--mk-billede-bg: #FFFFFF;
	--mk-billede-fit: contain;
	--mk-billede-pad: 6px;
	--mk-radius: 12px;
	--mk-knap-case: none;
	--mk-knap-spacing: 0;
	--mk-knap-vaegt: 600;
	--mk-pris-vaegt: 700;
	--mk-bagtaeppe: rgba(15, 20, 21, .45);
	--mk-fokus-lys: #B9DEA9;
	--mk-fokus: #2B5D39;
}

/* ---- Bagtaeppe og panel ---- */
.hf-minikurv--v2 .hf-minikurv__bagtaeppe {
	background: transparent;
	transition: background-color .35s ease;
}

/* Kun daempet, ikke sloeret: siden bag skal kunne genkendes, saa "Shop
   videre" foeles som at vende tilbage til det samme sted. */
.hf-minikurv--v2.is-aaben .hf-minikurv__bagtaeppe {
	background: var(--mk-bagtaeppe);
}

.hf-minikurv--v2 .hf-minikurv__panel {
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	height: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mk-flade);
	border-radius: 20px 0 0 20px;
	box-shadow: -28px 0 64px rgba(10, 15, 20, .26), -2px 0 10px rgba(10, 15, 20, .08);
	transform: translateX(100%);
	transition: transform .46s var(--mk-glid);
	touch-action: pan-y;
	outline: none;
}

.hf-minikurv--v2.is-aaben .hf-minikurv__panel {
	transform: translateX(var(--hf-mk-traek, 0px));
}

.hf-minikurv--v2.is-traekkes .hf-minikurv__panel {
	transition: none;
}

.hf-minikurv--v2 .hf-minikurv__panel *,
.hf-minikurv--v2 .hf-minikurv__panel *::before,
.hf-minikurv--v2 .hf-minikurv__panel *::after {
	box-sizing: border-box;
}

/* ---- Toppen ---- */
.hf-minikurv--v2 .hf-mk__top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 68px;
	padding: 12px 14px 12px 24px;
	padding-top: max(12px, env(safe-area-inset-top));
	background: var(--mk-top-bg);
	color: var(--mk-top-tekst);
}

.hf-minikurv--v2 .hf-mk__titel {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--mk-font-titel) !important;
	font-size: 21px !important;
	font-weight: var(--mk-titel-vaegt) !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	color: var(--mk-top-tekst) !important;
	background: none !important;
}

.hf-minikurv--v2 .hf-minikurv__antal {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--mk-chip-bg);
	color: var(--mk-chip-tekst);
	font-family: var(--mk-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hf-minikurv--v2 .hf-minikurv__antal:empty {
	display: none;
}

.hf-minikurv--v2 .hf-mk__luk {
	flex: 0 0 auto;
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--mk-top-tekst) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.hf-minikurv--v2 .hf-mk__luk:hover {
	background: rgba(255, 255, 255, .12) !important;
}

.hf-minikurv--v2 .hf-mk__luk:active {
	transform: scale(.94);
}

.hf-minikurv--v2 .hf-mk__ikon {
	display: block;
	flex: 0 0 auto;
}

/* ---- Kvitteringen "Lagt i kurv" med flueben efter ---- */
.hf-minikurv--v2 .hf-mk__kvittering {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 11px 24px !important;
	background: var(--mk-ok-bg);
	color: var(--mk-ok-tekst) !important;
	font-family: var(--mk-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	overflow: hidden;
	max-height: 60px;
	transition: max-height .3s ease, padding .3s ease, opacity .2s ease;
}

.hf-minikurv--v2 .hf-mk__kvittering .hf-mk__ikon {
	width: 18px;
	height: 18px;
	color: var(--mk-ok-ikon);
	stroke-width: 2.6;
}

.hf-minikurv--v2 .hf-mk__flue {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
}

.hf-minikurv--v2.is-aaben .hf-mk__flue {
	animation: hfMkTegn .5s .28s cubic-bezier(.65, 0, .35, 1) forwards;
}

/* Naar kunden selv retter i kurven, er kvitteringen ikke laengere nyheden. */
.hf-minikurv--v2.is-redigeret .hf-mk__kvittering,
.hf-minikurv--v2.is-tom .hf-mk__kvittering {
	max-height: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	opacity: 0;
}

.hf-minikurv--v2 .hf-mk__fejl {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 10px 24px !important;
	background: var(--mk-fejl-bg);
	color: var(--mk-fejl-tekst) !important;
	font-size: 14px !important;
	font-weight: 600;
}

.hf-minikurv--v2 .hf-mk__fejl[hidden] {
	display: none;
}

/* ---- Listen ---- */
.hf-minikurv--v2 .hf-mk__indhold {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 16px 16px 24px;
	scrollbar-width: thin;
}

.hf-minikurv--v2 .hf-mk__varer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hf-minikurv--v2 .hf-mk__vare {
	position: relative;
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	grid-template-areas:
		"foto info pris"
		"foto handling handling";
	column-gap: 14px;
	row-gap: 10px;
	align-items: start;
	margin: 0 !important;
	padding: 12px !important;
	list-style: none !important;
	background: var(--mk-kort);
	border: 1px solid var(--mk-kort-kant);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-kort-skygge);
	transition: opacity .22s ease, transform .22s ease;
}

.hf-minikurv--v2 .hf-mk__vare::before {
	content: none !important;
}

.hf-minikurv--v2.is-intro .hf-mk__vare {
	animation: hfMkInd .5s var(--mk-glid) both;
}

.hf-minikurv--v2.is-intro .hf-mk__vare:nth-child(1) { animation-delay: .10s; }
.hf-minikurv--v2.is-intro .hf-mk__vare:nth-child(2) { animation-delay: .15s; }
.hf-minikurv--v2.is-intro .hf-mk__vare:nth-child(3) { animation-delay: .20s; }
.hf-minikurv--v2.is-intro .hf-mk__vare:nth-child(4) { animation-delay: .25s; }
.hf-minikurv--v2.is-intro .hf-mk__vare:nth-child(n+5) { animation-delay: .30s; }

/* Den vare, der lige blev lagt i: en blid glod i accentfarven. */
.hf-minikurv--v2 .hf-mk__vare.is-ny {
	animation: hfMkNy 2.4s ease .3s both;
}

.hf-minikurv--v2.is-intro .hf-mk__vare.is-ny {
	animation: hfMkInd .5s var(--mk-glid) .1s both, hfMkNy 2.4s ease .45s both;
}

.hf-minikurv--v2 .hf-mk__vare.is-fjernes {
	opacity: 0;
	transform: translateX(24px);
	pointer-events: none;
}

.hf-minikurv--v2 .hf-mk__foto {
	grid-area: foto;
	display: block;
	width: 80px;
	height: 80px;
	padding: var(--mk-billede-pad);
	overflow: hidden;
	border-radius: calc(var(--mk-radius) - 4px);
	background: var(--mk-billede-bg);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.hf-minikurv--v2 .hf-mk__billede {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: var(--mk-billede-fit);
	border-radius: 0 !important;
	box-shadow: none !important;
}

.hf-minikurv--v2 .hf-mk__info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding-top: 1px;
}

.hf-minikurv--v2 .hf-mk__navn {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--mk-font-titel) !important;
	font-size: 15px !important;
	font-weight: var(--mk-navn-vaegt) !important;
	line-height: 1.28 !important;
	letter-spacing: -.005em;
	color: var(--mk-tekst) !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}

.hf-minikurv--v2 a.hf-mk__navn:hover {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.hf-minikurv--v2 .hf-mk__variant {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-height: 22px;
	margin-top: 2px;
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--mk-flade);
	color: var(--mk-tekst) !important;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

.hf-minikurv--v2 .hf-mk__stykpris {
	font-size: 12.5px;
	color: var(--mk-tekst-svag) !important;
	font-variant-numeric: tabular-nums;
}

.hf-minikurv--v2 .hf-mk__stykpris .amount,
.hf-minikurv--v2 .hf-mk__stykpris .amount *,
.hf-minikurv--v2 .hf-mk__pris .amount,
.hf-minikurv--v2 .hf-mk__pris .amount *,
.hf-minikurv--v2 .hf-mk__beloeb .amount,
.hf-minikurv--v2 .hf-mk__beloeb .amount * {
	color: inherit !important;
	font: inherit !important;
	background: none !important;
}

.hf-minikurv--v2 .hf-mk__pris {
	grid-area: pris;
	padding-top: 1px;
	font-family: var(--mk-font-titel);
	font-size: 15px;
	font-weight: var(--mk-pris-vaegt);
	line-height: 1.28;
	color: var(--mk-tekst);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: opacity .2s ease;
}

.hf-minikurv--v2 .hf-mk__vare.is-opdaterer .hf-mk__pris {
	opacity: .4;
}

.hf-minikurv--v2 .hf-mk__handling {
	grid-area: handling;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* ---- Antal ---- */
.hf-minikurv--v2 .hf-mk__stepper {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 1px;
	border: 1px solid var(--mk-stepper-kant);
	border-radius: 999px;
	background: var(--mk-kort);
}

.hf-minikurv--v2 .hf-mk__trin {
	display: grid !important;
	place-items: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--mk-tekst) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .15s ease, transform .12s ease, opacity .15s ease;
}

.hf-minikurv--v2 .hf-mk__trin .hf-mk__ikon {
	width: 16px;
	height: 16px;
	stroke-width: 2.2;
}

.hf-minikurv--v2 .hf-mk__trin:hover:not(:disabled) {
	background: var(--mk-trin-hover) !important;
}

.hf-minikurv--v2 .hf-mk__trin:active:not(:disabled) {
	transform: scale(.9);
}

.hf-minikurv--v2 .hf-mk__trin:disabled {
	opacity: .3;
	cursor: default;
}

.hf-minikurv--v2 .hf-mk__tal {
	min-width: 30px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mk-tekst);
	user-select: none;
}

.hf-minikurv--v2 .hf-mk__fjern {
	display: inline-flex !important;
	align-items: center;
	min-height: 36px !important;
	min-width: 0 !important;
	margin: 0 -4px 0 0 !important;
	padding: 4px 6px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--mk-tekst-svag) !important;
	box-shadow: none !important;
	font-family: var(--mk-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .15s ease;
}

.hf-minikurv--v2 .hf-mk__fjern:hover {
	color: var(--mk-tekst) !important;
}

/* ---- Tom kurv ---- */
.hf-minikurv--v2 .hf-mk__tom {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 24px 24px;
}

.hf-minikurv--v2 .hf-mk__tom .hf-mk__ikon {
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	color: var(--mk-tekst-svag);
	stroke-width: 1.4;
	opacity: .7;
}

.hf-minikurv--v2 .hf-mk__tom-titel {
	margin: 0 0 6px !important;
	font-family: var(--mk-font-titel) !important;
	font-size: 19px !important;
	font-weight: var(--mk-titel-vaegt) !important;
	color: var(--mk-tekst) !important;
}

.hf-minikurv--v2 .hf-mk__tom-tekst {
	max-width: 280px;
	text-wrap: balance;
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--mk-tekst-svag) !important;
}

/* ---- Bunden ---- */
.hf-minikurv--v2 .hf-mk__bund {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
	background: var(--mk-kort);
	border-top: 1px solid var(--mk-skille);
	box-shadow: 0 -12px 28px -14px rgba(16, 24, 32, .14);
}

.hf-minikurv--v2 .hf-minikurv__sum:empty {
	display: none;
}

.hf-minikurv--v2 .hf-mk__sumlinje {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.hf-minikurv--v2 .hf-mk__sumtekst {
	font-size: 15px;
	font-weight: 600;
	color: var(--mk-tekst);
}

.hf-minikurv--v2 .hf-mk__beloeb {
	font-family: var(--mk-font-titel);
	font-size: 24px;
	font-weight: var(--mk-pris-vaegt);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--mk-tekst);
	font-variant-numeric: tabular-nums;
}

.hf-minikurv--v2 .hf-mk__beloeb small {
	font-size: 12px;
	font-weight: 500;
}

.hf-minikurv--v2 .hf-mk__smaat {
	margin: 2px 0 4px !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	color: var(--mk-tekst-svag) !important;
}

.hf-minikurv--v2 .hf-mk__knap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	border-radius: var(--mk-knap-radius) !important;
	font-family: var(--mk-font-knap) !important;
	font-size: 15.5px !important;
	font-weight: var(--mk-knap-vaegt) !important;
	line-height: 1.2 !important;
	letter-spacing: var(--mk-knap-spacing) !important;
	text-transform: var(--mk-knap-case) !important;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.hf-minikurv--v2 .hf-mk__knap:active {
	transform: translateY(1px);
}

.hf-minikurv--v2 .hf-mk__knap--kasse {
	background: var(--mk-accent-flade) !important;
	border: 0 !important;
	color: var(--mk-accent-tekst) !important;
	box-shadow: 0 8px 18px -8px var(--mk-accent-skygge) !important;
}

.hf-minikurv--v2 .hf-mk__knap--kasse:hover {
	background: var(--mk-accent-hover) !important;
	color: var(--mk-accent-tekst) !important;
	box-shadow: 0 10px 22px -8px var(--mk-accent-skygge) !important;
}

.hf-minikurv--v2 .hf-mk__knap--kasse .hf-mk__ikon {
	width: 18px;
	height: 18px;
	stroke-width: 2.4;
	transition: transform .2s var(--mk-glid);
}

.hf-minikurv--v2 .hf-mk__knap--kasse:hover .hf-mk__ikon {
	transform: translateX(4px);
}

.hf-minikurv--v2 .hf-mk__sekundaer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.hf-minikurv--v2 .hf-mk__knap--kurv,
.hf-minikurv--v2 .hf-mk__knap--videre {
	min-height: 46px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
}

.hf-minikurv--v2 .hf-mk__knap--kurv {
	background: transparent !important;
	border: 1.5px solid var(--mk-sek-kant) !important;
	color: var(--mk-sek-tekst) !important;
	box-shadow: none !important;
}

.hf-minikurv--v2 .hf-mk__knap--kurv:hover {
	background: var(--mk-sek-hover-bg) !important;
	border-color: var(--mk-sek-kant) !important;
	color: var(--mk-sek-hover-tekst) !important;
}

.hf-minikurv--v2 .hf-mk__knap--videre {
	background: var(--mk-flade) !important;
	border: 1.5px solid transparent !important;
	color: var(--mk-tekst) !important;
	box-shadow: none !important;
}

.hf-minikurv--v2 .hf-mk__knap--videre:hover {
	background: var(--mk-trin-hover) !important;
	color: var(--mk-tekst) !important;
}

/* Tom kurv: kun "Shop videre", som hovedknap. */
.hf-minikurv--v2.is-tom .hf-mk__knap--kasse,
.hf-minikurv--v2.is-tom .hf-mk__knap--kurv {
	display: none !important;
}

.hf-minikurv--v2.is-tom .hf-mk__sekundaer {
	grid-template-columns: 1fr;
}

.hf-minikurv--v2.is-tom .hf-mk__knap--videre {
	min-height: 54px !important;
	background: var(--mk-accent-flade) !important;
	color: var(--mk-accent-tekst) !important;
	font-size: 15.5px !important;
}

/* ---- Fokus: synlig ring kun ved tastatur ---- */
.hf-minikurv--v2 a:focus,
.hf-minikurv--v2 button:focus {
	outline: none;
}

.hf-minikurv--v2 a:focus-visible,
.hf-minikurv--v2 button:focus-visible {
	outline: 2px solid var(--mk-fokus) !important;
	outline-offset: 2px !important;
}

.hf-minikurv--v2 .hf-mk__top button:focus-visible {
	outline-color: var(--mk-fokus-lys) !important;
}

.hf-minikurv--v2 .hf-mk__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Mobil ---- */
@media (max-width: 520px) {
	.hf-minikurv--v2 .hf-minikurv__panel {
		width: 100%;
		border-radius: 0;
	}

	.hf-minikurv--v2 .hf-mk__top {
		min-height: 60px;
		padding-left: 18px;
		padding-right: 8px;
	}

	.hf-minikurv--v2 .hf-mk__titel {
		font-size: 19px !important;
	}

	.hf-minikurv--v2 .hf-mk__kvittering {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.hf-minikurv--v2 .hf-mk__indhold {
		padding: 12px 12px 20px;
	}

	.hf-minikurv--v2 .hf-mk__vare {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		column-gap: 12px;
		padding: 10px !important;
	}

	.hf-minikurv--v2 .hf-mk__foto {
		width: 72px;
		height: 72px;
	}

	.hf-minikurv--v2 .hf-mk__navn {
		font-size: 14.5px !important;
	}

	.hf-minikurv--v2 .hf-mk__bund {
		padding: 14px 16px;
		padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
		gap: 8px;
	}
}

/* Groffe pegeredskaber: knapperne mindst 40 px. */
@media (pointer: coarse) {
	.hf-minikurv--v2 .hf-mk__stepper {
		height: 42px;
	}

	.hf-minikurv--v2 .hf-mk__trin {
		width: 38px !important;
		height: 38px !important;
	}

	.hf-minikurv--v2 .hf-mk__fjern {
		min-height: 42px !important;
	}
}

@keyframes hfMkTegn {
	to { stroke-dashoffset: 0; }
}

@keyframes hfMkInd {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes hfMkNy {
	0% { background-color: var(--mk-ny); border-color: var(--mk-ny-kant); box-shadow: 0 0 0 3px var(--mk-ny-ring), var(--mk-kort-skygge); }
	70% { background-color: var(--mk-ny); border-color: var(--mk-ny-kant); box-shadow: 0 0 0 3px var(--mk-ny-ring), var(--mk-kort-skygge); }
	100% { background-color: var(--mk-kort); border-color: var(--mk-kort-kant); box-shadow: var(--mk-kort-skygge); }
}

@media (prefers-reduced-motion: reduce) {
	.hf-minikurv--v2 .hf-minikurv__panel,
	.hf-minikurv--v2 .hf-minikurv__bagtaeppe,
	.hf-minikurv--v2 .hf-mk__vare,
	.hf-minikurv--v2 .hf-mk__kvittering {
		transition: none !important;
		animation: none !important;
	}

	.hf-minikurv--v2 .hf-mk__flue {
		animation: none !important;
		stroke-dashoffset: 0;
	}
}

/* Varesidens knap, mens varen laegges i kurven uden genindlaesning (0.8.39). */
.single_add_to_cart_button.hf-tilfoejer {
	opacity: .7;
	cursor: progress;
	pointer-events: none;
}

/* ---- Varesiden mod skabelonens knapregler (0.8.43, CH-629) ----
   hydroponics.dk's og groudstyr.dk's vareskabelon farver alle knapper i
   koebsformularen som koebsknappen: `.elementor-5918 .elementor-element
   .elementor-element-73e64da .cart button` (fire klasser og et element) med
   petrol baggrund, versaler og tynd skrift. Variantknapperne blev alle
   petrol, valgt og ikke valgt kunne ikke skelnes, og "kr." blev "KR."
   (Mikkel 2/11 kl. ca. 20:30). `:not(#hf-ingen)` giver reglerne et id i
   vaegten, saa de slaar enhver klasseregel i et tema eller en skabelon uden
   !important. Vaerdierne er de samme som ovenfor. superseeds.dk's vareside
   (HydroFyn Produktside, body.hf-ps-aktiv) styrer selv sine knapper. */
body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch:not(#hf-ingen) {
	border-color: #c9d3dc;
	background-color: var(--hf-hvid-varm, #FCFAF6);
	background-image: none;
	color: var(--hf-tekst, #16212F);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch:not(#hf-ingen):hover,
body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch:not(#hf-ingen):focus {
	border-color: var(--hf-primaer, #1B2939);
	background-color: var(--hf-flade, #F4F5F6);
	color: var(--hf-tekst, #16212F);
}

body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-selected:not(#hf-ingen) {
	border-color: var(--hf-primaer, #1B2939);
	background-color: var(--hf-primaer, #1B2939);
	color: #fff;
}

body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-selected:not(#hf-ingen):hover,
body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-selected:not(#hf-ingen):focus {
	border-color: var(--hf-primaer-moerk, #11171F);
	background-color: var(--hf-primaer-moerk, #11171F);
	color: #fff;
}

body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-udsolgt:not(#hf-ingen),
body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-udsolgt:not(#hf-ingen):hover,
body:not(.hf-ps-aktiv) form.cart .hf-swatches .hf-swatch.is-udsolgt:not(#hf-ingen):focus {
	border-color: #dbe2e8;
	background-color: #f2f4f6;
	color: #8a97a3;
}

/* Den gamle overskrift "Vaelg variant:" fra Variation Swatches-tiden: en
   Elementor-kortkode (klassen m-swatch-header) over formularen i
   hydroponics.dk's og groudstyr.dk's vareskabelon. Formularens egen etiket
   "Vaelg variant" staar lige under, som paa gro-lys.dk; to ens overskrifter
   under hinanden saa uafproevet ud (Mikkel 2/11). */
body.hf-swatches-active.single-product .elementor-widget.m-swatch-header {
	display: none !important;
}

/* ---- Smalle kort (0.8.44, CH-629) ----
   hydroponics.dk og groudstyr.dk har fem kort i raekken; knaplisten er kun
   165 px bred (gro-lys.dk 211 px). Tre blokke blev 43 px hver: "0,35 L" brod
   over to linjer, og prisen "1,95 kr." hang uden for blokken (maalt 2/11 kl.
   20:45). Er listen under 200 px, vises to blokke og "+N", som paa mobil,
   uanset skaermens bredde. Containeren er kortets egen blok, saa det gaelder
   kun de smalle kort. */
.hf-loop-swatches {
	/* Fuld bredde eksplicit: en container maaler ikke sit indhold, saa et
	   flex-element uden bredde ville ellers klappe sammen. */
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: hfkort;
}

@container hfkort (max-width: 200px) {
	.hf-swatches--loop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hf-swatches--loop.hf-swatches--many:not(.is-expanded) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
	}

	.hf-swatches--loop.is-expanded {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hf-swatches--loop.hf-swatches--many:not(.is-expanded) .hf-swatches__item:nth-child(n+3):not(.hf-swatches__more) {
		display: none;
	}

	.hf-swatches--loop.hf-swatches--few .hf-swatches__item:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* ---- Varesidens korte beskrivelse foldet (0.8.45) ----
   Foer kodestump 102 paa gro-lys.dk alene (CH-614). Hoejden saettes af
   scriptet paa den sidste hele linje inden for 192 px; aaben har ingen
   graense. Knappen er en understreget tekst i shoppens farve, aldrig en
   knapflade, saa den ikke ligner koebsknappen. */
.single-product .hf-kort--foldet {
	overflow: hidden;
}

.single-product .hf-kort--foldet.is-aaben {
	max-height: none !important;
}

button.hf-laes-mere {
	display: inline-block !important;
	margin: 4px 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--hf-primaer, #1B2939) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: underline !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

button.hf-laes-mere:hover,
button.hf-laes-mere:focus {
	color: var(--hf-primaer-moerk, #11171F) !important;
	background: none !important;
}

button.hf-laes-mere::after {
	content: " \25BE";
}

button.hf-laes-mere[aria-expanded="true"]::after {
	content: " \25B4";
}