/**
 * HydroFyn Produktside - koebsboksen.
 *
 * Maal og farver fra ejerens designhandoff 2026-09-12, men udtrykt i sitets
 * egne tokens, saa produktsiden foelger med, hvis paletten aendres eet sted.
 * Designets #17293a er sitets --hf-primaer (#1B2939); forskellen er under et
 * procentpoint pr. kanal.
 */

/* Prisspaendet "89 kr. - 4.495 kr." siger ikke noget om, hvad kunden skal
   betale. Den valgte pakkes pris staar i stedet i koebsboksen. Skjult frem
   for fjernet: andre scripts laeser stadig elementet. */
body.hf-ps-aktiv .summary > .price,
body.hf-ps-aktiv .elementor-widget-woocommerce-product-price {
	display: none !important;
}

body.hf-ps-aktiv .hf-ps-skjult {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Databaandet ---- */

.hf-ps-baand {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 14px 0 16px;
	border: 1px solid var(--hf-kant, #e7ecf1);
	border-radius: 11px;
	background-color: var(--hf-hvid-varm, #fff);
	overflow: hidden;
	font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hf-ps-baand[data-celler="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.hf-ps-baand[data-celler="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.hf-ps-baand__celle {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-right: 1px solid var(--hf-kant, #e7ecf1);
}

.hf-ps-baand__celle:last-child {
	border-right: 0;
}

.hf-ps-baand__etiket {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-baand__vaerdi {
	font-size: 14px;
	font-weight: 800;
	color: var(--hf-tekst, #16212F);
}

/* ---- Valgt pakke ---- */

.hf-ps-valgt {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 13px;
}

.hf-ps-valgt[hidden] {
	display: none !important;
}

.hf-ps-valgt__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hf-ps-valgt__pakke {
	font-size: 11px;
	font-weight: 700;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-valgt__priser {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.hf-ps-valgt__pris {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hf-tekst, #16212F);
}

.hf-ps-valgt__enhed {
	font-size: 12px;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-valgt__spar {
	margin-left: auto;
	padding: 6px 10px;
	border: 1px solid #cfe0d6;
	border-radius: 8px;
	background-color: #eef3f0;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	color: #1e5a3a;
}

.hf-ps-valgt__spar[hidden] {
	display: none !important;
}

/* ---- Pakketabellen ---- */

.hf-ps-pakker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hf-ps-pakker__hoved {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.hf-ps-pakker__titel {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #46525c;
}

.hf-ps-pakker__note {
	font-size: 11px;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-pakker__liste {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* Hele raekken er knappen: et 44 px hoejt maal, ikke en 14 px radioknap. */
.hf-ps-pakke__knap {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	min-height: 44px;
	padding: 9px 12px !important;
	border: 1px solid var(--hf-kant, #e2e2dd) !important;
	border-radius: 8px !important;
	background: var(--hf-hvid-varm, #fff) !important;
	color: var(--hf-tekst, #16212F) !important;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none !important;
	transition: border-color .12s ease, background-color .12s ease;
}

.hf-ps-pakke__knap:hover:not([disabled]),
.hf-ps-pakke__knap:focus-visible {
	border-color: var(--hf-primaer, #1B2939) !important;
	background: #fff !important;
}

.hf-ps-pakke.er-valgt .hf-ps-pakke__knap {
	border: 2px solid var(--hf-primaer, #1B2939) !important;
	padding: 8px 11px !important;
	background: #fff !important;
}

.hf-ps-pakke.er-udsolgt .hf-ps-pakke__knap {
	opacity: .55;
	cursor: not-allowed;
}

.hf-ps-pakke__prik {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 1.5px solid #b9c2c9;
	border-radius: 50%;
}

.hf-ps-pakke.er-valgt .hf-ps-pakke__prik {
	border-color: var(--hf-primaer, #1B2939);
}

.hf-ps-pakke.er-valgt .hf-ps-pakke__prik::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background-color: var(--hf-primaer, #1B2939);
}

.hf-ps-pakke__antal {
	flex: 0 0 auto;
	width: 56px;
	font-size: 12.5px;
	font-weight: 700;
}

.hf-ps-pakke__pris {
	flex: 0 0 auto;
	width: 82px;
	font-size: 12.5px;
	font-weight: 800;
}

.hf-ps-pakke__pris del,
.hf-ps-pakke__enhed del {
	display: none;
}

.hf-ps-pakke__enhed {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11.5px;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-pakke__spar {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: #eef3f0;
	font-size: 10.5px;
	font-weight: 800;
	white-space: nowrap;
	color: #1e5a3a;
}

.hf-ps-pakke__lager {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	color: #b4472a;
}

/* ---- Knappen ---- */

body.hf-ps-aktiv .single_add_to_cart_button {
	min-height: 46px;
	border-radius: 8px !important;
	background-color: var(--hf-primaer, #1B2939) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.hf-ps-aktiv .single_add_to_cart_button:hover {
	background-color: var(--hf-primaer-moerk, #11171F) !important;
}

/* ---- Tryghedslinjer ---- */

.hf-ps-tryghed {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 12px 0 0;
	padding: 11px 0 0;
	border-top: 1px solid var(--hf-kant, #ececE7);
	list-style: none;
}

.hf-ps-tryghed__punkt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	color: #2b3841;
}

/* Fluebenet tegnes med kant - ingen ikonfont at vente paa. */
.hf-ps-tryghed__ok {
	flex: 0 0 auto;
	width: 5px;
	height: 9px;
	margin-top: -3px;
	border-right: 2px solid #1e5a3a;
	border-bottom: 2px solid #1e5a3a;
	transform: rotate(45deg);
}

/* ---- Smalle skaerme ---- */

@media (max-width: 600px) {
	.hf-ps-baand {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.hf-ps-baand__celle:nth-child(2n) {
		border-right: 0;
	}

	.hf-ps-baand__celle:nth-child(-n + 2) {
		border-bottom: 1px solid var(--hf-kant, #e7ecf1);
	}

	/* Enhedsprisen flytter under antal og pris, saa raekken ikke knaekker.
	   Maalt 2026-09-12 (0.3.1): med `flex: 1 0 100%` skubbede den ogsaa
	   "Spar X %" ned paa en tredje linje, og hver raekke blev 98 px hoej.
	   60 % bryder stadig til ny linje, men lader badgen foelge med. */
	.hf-ps-pakke__knap {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.hf-ps-pakke__enhed {
		flex: 1 1 60%;
		padding-left: 24px;
	}

	.hf-ps-pakke__spar {
		margin-left: auto;
	}
}

/* ---- Rettelser efter foerste maaling paa live (0.1.1) ----
   Temaet saetter versaler paa alt i variantomraadet, saa tabellen stod som
   "1-STK 89 KR. PR. FR\u00d8". Og WooCommerce viser selv den valgte variants
   pris lige over knappen - den dublerer koebsboksens egen linje. */

body.hf-ps-aktiv .hf-ps-pakker,
body.hf-ps-aktiv .hf-ps-pakker *,
body.hf-ps-aktiv .hf-ps-valgt,
body.hf-ps-aktiv .hf-ps-valgt *,
body.hf-ps-aktiv .hf-ps-tryghed,
body.hf-ps-aktiv .hf-ps-tryghed * {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Etiketterne er de eneste, der SKAL staa med versaler. */
body.hf-ps-aktiv .hf-ps-pakker__titel,
body.hf-ps-aktiv .hf-ps-baand__etiket {
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
}

/* Dubletten: WooCommerces egen variantpris og dropdown-etiketten
   ("Vaelg variant:") er overfloedige, naar koebsboksen viser det samme. */
body.hf-ps-aktiv .woocommerce-variation-price,
body.hf-ps-aktiv .variations label,
body.hf-ps-aktiv .variations .label {
	display: none !important;
}

/* Elementor tegner prisspaendet i sin egen widget. */
body.hf-ps-aktiv .elementor-widget-woocommerce-product-price .price {
	display: none !important;
}

/* ---- Temaets faktaboks (0.1.2) ----
   Boksen med blomstringstid, udbytte, hoejde og THC ligger i en 50 %-kolonne
   oeverst til hoejre. Maalt 2026-09-12: H1'en straekker sig til x 1290, mens
   boksens kolonne begynder ved 1073 - saa titlen forsvinder ind under den.

   Vores databaand viser de samme fire felter i fuld bredde over koebsboksen,
   praecis som designet. Derfor skjules kolonnen, og titlen faar hele
   bredden. `:has()` er det praecise greb; element-id'et staar som reserve
   for browsere uden det. */
body.hf-ps-aktiv .elementor-inner-column:has(.seed-feat),
body.hf-ps-aktiv .elementor-element-1bfdfb0 {
	display: none !important;
}

/* Titlens kolonne var 50 % ved siden af faktaboksen. */
body.hf-ps-aktiv .elementor-inner-column:has(.seed-feat) + .elementor-inner-column,
body.hf-ps-aktiv .elementor-inner-column:has(h1.product_title) {
	width: 100% !important;
}

/* Temaets overskrift "Vaelg variant:" er overfloedig, naar tabellen har sin
   egen "VAELG PAKKE" lige under.

   Maalt 2026-09-12 (0.2.1): overskriften er ikke en h4, men et
   `<p class="swatch-header"><b>Vaelg variant:</b></p>` fra swatch-shortcoden.
   H4-reglerne blev derfor aldrig brugt; de staar tilbage som reserve, hvis
   temaet skifter tilbage. */
body.hf-ps-aktiv p.swatch-header,
body.hf-ps-aktiv .elementor-widget-woocommerce-product-add-to-cart .elementor-widget-container > h4,
body.hf-ps-aktiv .variations_form > h4,
body.hf-ps-aktiv .hf-ps-variantoverskrift {
	display: none !important;
}

/* ---- Etape 2: indholdskortene (0.2.0) ----
   Fanerne "Beskrivelse" og "Yderligere information" skjulte halvdelen af
   indholdet bag et klik, som ingen trykker paa. Designet laegger begge dele
   frem som to kort side om side. */

.hf-ps-kort {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	margin: 6px 0 0;
	font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Staar kun eet kort (ingen specifikationer, eller ingen beskrivelse),
   skal det ikke ligge klemt i en halv spalte. Klassen saettes paa serveren:
   `:only-child` holdt op med at virke i 0.3.0, da "Levering og retur" altid
   staar i markup'en - skjult paa desktop, men stadig et barn. */
.hf-ps-kort--eet {
	grid-template-columns: minmax(0, 1fr);
}

.hf-ps-kort__om,
.hf-ps-kort__spec {
	padding: 20px 22px;
	border: 1px solid var(--hf-kant, #e7ecf1);
	border-radius: 12px;
	background-color: var(--hf-hvid-varm, #fff);
}

/* Specifikationskortet er opslagsvaerket - lidt koeligere end teksten. */
.hf-ps-kort__spec {
	background-color: #f7f9fa;
}

.hf-ps-kort .hf-ps-kort__titel {
	margin: 0 0 12px !important;
	padding: 0 0 11px;
	border-bottom: 1px solid var(--hf-kant, #e7ecf1);
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--hf-tekst, #16212F) !important;
}

.hf-ps-kort__tekst {
	font-size: 14px;
	line-height: 1.62;
	color: #2b3841;
}

.hf-ps-kort__tekst > :first-child {
	margin-top: 0;
}

.hf-ps-kort__tekst > :last-child {
	margin-bottom: 0;
}

.hf-ps-kort__tekst p {
	margin: 0 0 11px;
}

.hf-ps-kort__tekst ul,
.hf-ps-kort__tekst ol {
	margin: 0 0 11px;
	padding-left: 20px;
}

.hf-ps-kort__tekst li {
	margin: 0 0 5px;
	list-style: inherit;
}

/* Beskrivelserne er redaktoerskrevne og har ofte en h2/h3 midt i teksten. */
.hf-ps-kort__tekst h2,
.hf-ps-kort__tekst h3,
.hf-ps-kort__tekst h4 {
	margin: 16px 0 7px;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.35;
	text-transform: none;
	color: var(--hf-tekst, #16212F);
}

/* ---- Smagsprofil ---- */

.hf-ps-smag {
	margin-top: 15px;
	padding-top: 14px;
	border-top: 1px solid var(--hf-kant, #e7ecf1);
}

.hf-ps-smag__etiket {
	display: block;
	margin-bottom: 8px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hf-tekst-svag, #5b6b7a);
}

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

.hf-ps-smag .hf-ps-smag__chip {
	margin: 0;
	padding: 5px 11px;
	border: 1px solid #cfe0d6;
	border-radius: 999px;
	background-color: #eef3f0;
	list-style: none;
	font-size: 11.5px;
	font-weight: 700;
	color: #1e5a3a;
}

/* ---- Specifikationer ---- */

.hf-ps-spec__gruppe + .hf-ps-spec__gruppe {
	margin-top: 16px;
}

.hf-ps-kort .hf-ps-spec__navn {
	margin: 0 0 7px !important;
	font-size: 9.5px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--hf-tekst-svag, #5b6b7a) !important;
}

.hf-ps-spec__liste {
	margin: 0;
}

/* Etikette og vaerdi paa samme linje med en punkteret foering imellem, saa
   oejet kan foelge en lang liste uden zebrastriber. */
.hf-ps-spec__raekke {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 0;
	border-bottom: 1px dotted #dbe3e9;
	font-size: 12.5px;
}

.hf-ps-spec__gruppe .hf-ps-spec__raekke:last-child {
	border-bottom: 0;
}

.hf-ps-spec__raekke dt {
	flex: 0 0 auto;
	max-width: 48%;
	margin: 0;
	font-weight: 400;
	color: var(--hf-tekst-svag, #5b6b7a);
}

.hf-ps-spec__raekke dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: right;
	font-weight: 700;
	color: var(--hf-tekst, #16212F);
}

/* Temaet saetter versaler paa alt i indholdsomraadet - samme rettelse som
   for koebsboksen (se 0.1.1). Etiketterne har deres egne regler ovenfor. */
body.hf-ps-aktiv .hf-ps-kort,
body.hf-ps-aktiv .hf-ps-kort * {
	text-transform: none;
	letter-spacing: normal;
}

@media (max-width: 1024px) {
	.hf-ps-kort {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---- Etape 3: rubrikkernes hoved (0.3.0) ----
   Samme markup paa alle bredder. Paa desktop er hovedet en overskrift, der
   ikke kan trykkes; paa mobil er det et 46 px trykmaal, der folder. */

.hf-ps-sek__titel {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.hf-ps-kort .hf-ps-sek__hoved {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font-family: inherit;
	text-align: left;
	/* Paa desktop folder den ingenting, saa den skal heller ikke opfoere sig
	   som en knap - hverken for musen eller for tastaturet. */
	cursor: default;
	pointer-events: none;
}

.hf-ps-sek__navn-smal,
.hf-ps-sek__maerke,
.hf-ps-sek__pil {
	display: none;
}

/* Rubrikken i kortet: "Om sorten" er kortets egen overskrift, grupperne i
   specifikationskortet er de smaa etiketter. */
.hf-ps-kort__om .hf-ps-sek__navn {
	display: block;
	margin: 0 0 12px;
	padding: 0 0 11px;
	border-bottom: 1px solid var(--hf-kant, #e7ecf1);
	width: 100%;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--hf-tekst, #16212F);
}

.hf-ps-kort__spec .hf-ps-sek + .hf-ps-sek {
	margin-top: 16px;
}

.hf-ps-kort__spec .hf-ps-sek__navn {
	display: block;
	margin: 0 0 7px;
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hf-tekst-svag, #5b6b7a);
}

/* "Levering og retur" hoerer kun til mobil. Paa desktop staar de samme
   loefter i tryghedslinjerne ved knappen og i sitets USP-bjaelke lige
   under kortene. */
.hf-ps-kort__levering {
	display: none;
}

/* ---- Etape 3: pakkeskuffen ----
   Paa desktop findes skuffen ikke som layout: `display: contents` loefter
   tabellen ud, saa den staar praecis som foer. */

.hf-ps-pakkevalg,
.hf-ps-skuffe__hoved,
.hf-ps-bjaelke {
	display: none;
}

/* Skuffen og panelet er noegne divs paa desktop. `display: contents` ville
   ogsaa virke, men er unoedvendig risiko: tabellen ligger i normalt flow,
   og en udstylet div aendrer ingenting. */

/* Elementor-containeren mister sin sidepolstring under mobil-breakpointet
   (maalt 2026-09-12: 20 px ved 834 px bredde, 0 px ved 393 px), mens H1 og
   koebsboksen beholder deres 20-30 px. Uden dette laa kortene 4 px fra
   skaermkanten, mens resten af siden laa 20 px inde. */
@media (max-width: 767px) {
	.hf-ps-kort {
		margin-inline: 20px;
		gap: 10px;
	}

	/* Paa mobil er hver rubrik sit eget kort - kortcontaineren bliver
	   neutral, praecis modsat desktop. */
	.hf-ps-kort__om,
	.hf-ps-kort__spec,
	.hf-ps-kort__levering {
		display: grid;
		gap: 10px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.hf-ps-kort__levering {
		display: grid;
	}

	.hf-ps-kort .hf-ps-sek {
		border: 1px solid var(--hf-kant, #e7ecf1);
		border-radius: 12px;
		background-color: var(--hf-hvid-varm, #fff);
		overflow: hidden;
	}

	.hf-ps-kort__spec .hf-ps-sek + .hf-ps-sek {
		margin-top: 0;
	}

	/* Kortets egen titel er overfloedig, naar rubrikkerne baerer navnet. */
	.hf-ps-kort .hf-ps-kort__titel {
		display: none;
	}

	.hf-ps-kort .hf-ps-sek__hoved {
		align-items: center;
		min-height: 46px;
		padding: 12px 15px !important;
		cursor: pointer;
		pointer-events: auto;
	}

	/* Det brede navn forsvinder kun, hvor der findes et smalt at saette i
	   stedet ("Genetik" -> "Specifikationer"). */
	.hf-ps-sek__navn--bred {
		display: none !important;
	}

	.hf-ps-kort__om .hf-ps-sek__navn,
	.hf-ps-sek__navn-smal {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 14.5px;
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: normal;
		text-transform: none;
		color: var(--hf-tekst, #16212F);
	}

	.hf-ps-sek__maerke {
		display: block;
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 400;
		color: var(--hf-tekst-svag, #5b6b7a);
	}

	/* Pilen tegnes med kanter - ingen ikonfont at vente paa. */
	.hf-ps-sek__pil {
		display: block;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin: -4px 2px 0 2px;
		border-right: 2px solid #5b6b7a;
		border-bottom: 2px solid #5b6b7a;
		transform: rotate(45deg);
		transition: transform .15s ease;
	}

	.hf-ps-sek:not(.er-lukket) .hf-ps-sek__pil {
		margin-top: 2px;
		transform: rotate(225deg);
	}

	.hf-ps-sek__krop {
		padding: 0 15px 15px;
	}

	.hf-ps-sek.er-lukket .hf-ps-sek__krop {
		display: none;
	}

	/* ---- Sammendragsraekken over skuffen ---- */

	.hf-ps-pakkevalg {
		display: block;
		margin-bottom: 13px;
	}

	.hf-ps-pakkevalg .hf-ps-pakkevalg__knap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100% !important;
		min-height: 58px;
		padding: 9px 13px !important;
		border: 2px solid var(--hf-primaer, #1B2939) !important;
		border-radius: 10px !important;
		background: var(--hf-hvid-varm, #fff) !important;
		color: var(--hf-tekst, #16212F) !important;
		font-family: inherit;
		text-align: left;
		box-shadow: none !important;
		cursor: pointer;
	}

	.hf-ps-pakkevalg__tekst {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.hf-ps-pakkevalg__etiket {
		font-size: 9.5px;
		font-weight: 800;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--hf-tekst-svag, #5b6b7a);
	}

	.hf-ps-pakkevalg__valg {
		font-size: 14.5px;
		font-weight: 800;
	}

	.hf-ps-pakkevalg__skift {
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap;
		color: var(--hf-primaer, #1B2939);
	}

	/* ---- Selve skuffen ---- */

	.hf-ps-skuffe {
		display: block;
	}

	.hf-ps-skuffe__panel {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		max-height: 82vh;
		overflow-y: auto;
		padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
		border-radius: 16px 16px 0 0;
		background-color: var(--hf-hvid-varm, #fff);
		box-shadow: 0 -10px 30px rgba(15, 23, 32, .22);
		transform: translateY(102%);
		/* Skjult skal ogsaa vaere ude af tastaturets raekkefoelge - et panel
		   under skaermkanten maa ikke kunne tabbes ind i. */
		visibility: hidden;
		transition: transform .22s ease, visibility .22s;
	}

	body.hf-ps-skuffe-aaben .hf-ps-skuffe__panel {
		transform: translateY(0);
		visibility: visible;
	}

	.hf-ps-skuffe__hoved {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 13px 0 10px;
		background-color: var(--hf-hvid-varm, #fff);
	}

	.hf-ps-skuffe__titel {
		font-size: 15px;
		font-weight: 800;
		color: var(--hf-tekst, #16212F);
	}

	.hf-ps-skuffe .hf-ps-skuffe__luk {
		min-height: 40px;
		padding: 8px 14px !important;
		border: 1px solid var(--hf-kant, #e7ecf1) !important;
		border-radius: 8px !important;
		background: none !important;
		color: var(--hf-tekst-svag, #5b6b7a) !important;
		font-family: inherit;
		font-size: 12.5px;
		font-weight: 700;
		box-shadow: none !important;
		cursor: pointer;
	}

	/* Tabellens eget hoved gentager skuffens titel. */
	.hf-ps-skuffe .hf-ps-pakker__titel {
		display: none;
	}

	.hf-ps-skuffe .hf-ps-pakker {
		margin-bottom: 0;
	}

	.hf-ps-taeppe {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: rgba(15, 23, 32, .5);
	}

	body.hf-ps-skuffe-aaben {
		overflow: hidden;
	}

	/* ---- Den klaebende koebsbjaelke ---- */

	.hf-ps-bjaelke {
		display: flex;
		align-items: center;
		gap: 11px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--hf-kant, #e7ecf1);
		background-color: var(--hf-hvid-varm, #fff);
		box-shadow: 0 -6px 18px rgba(15, 23, 32, .1);
		font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}

	.hf-ps-bjaelke[hidden] {
		display: none !important;
	}

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

	.hf-ps-bjaelke__beloeb {
		font-size: 19px;
		font-weight: 800;
		letter-spacing: -.02em;
		color: var(--hf-tekst, #16212F);
	}

	.hf-ps-bjaelke__under {
		font-size: 10.5px;
		white-space: nowrap;
		color: var(--hf-tekst-svag, #5b6b7a);
	}

	.hf-ps-bjaelke .hf-ps-bjaelke__knap {
		flex: 1 1 auto;
		min-height: 48px;
		padding: 12px 16px !important;
		border: 0 !important;
		border-radius: 9px !important;
		background: var(--hf-primaer, #1B2939) !important;
		color: #fff !important;
		font-family: inherit;
		font-size: 14.5px;
		font-weight: 800;
		letter-spacing: 0;
		text-transform: none;
		box-shadow: none !important;
		cursor: pointer;
	}

	.hf-ps-bjaelke .hf-ps-bjaelke__knap[disabled] {
		opacity: .55;
		cursor: not-allowed;
	}

	/* Plads til bjaelken, saa den ikke daekker footeren. */
	body.hf-ps-aktiv.hf-ps-mobilkoeb {
		padding-bottom: 76px;
	}

	/* Den inline knap og antalsfeltet viger for bjaelken - men KUN naar
	   JavaScript har meldt bjaelken klar. */
	body.hf-ps-mobilkoeb .single_add_to_cart_button,
	body.hf-ps-mobilkoeb form.cart .quantity {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.hf-ps-kort__om,
	.hf-ps-kort__spec {
		padding: 16px 15px;
	}

	/* Under ca. 360 px indhold knaekker etikette og vaerdi hellere end at
	   presse vaerdien sammen til to tegn pr. linje. */
	.hf-ps-spec__raekke dt {
		max-width: 55%;
	}
}