/*
 * forside.css — sektionerne til forsiden.
 *
 * Alle sektioner går til skærmkanten uanset hvilken Elementor-container de
 * ligger i. Det sker med 100vw + negativ margin, og det virker kun fordi
 * html har overflow-x: clip — clip, ikke hidden. hidden ville gøre html til
 * en scroll-container og slå position: sticky ihjel i header og drawer.
 *
 * Variablerne kommer fra temaets base.css.
 */

html {
	overflow-x: clip;
}

/*
 * 100vw tæller rullepanelet med, det gør 100% ikke.
 *
 * På en side med lodret rullepanel bliver sektionen derfor ~15px bredere end
 * det synlige område, og fordi den centreres, blev 7px klippet af i venstre
 * side og 8px i højre. Det ramte alle fuldbredde-sektioner, men det var først
 * synligt i produktgriddet, hvor det åd kantafstanden på det yderste kort.
 *
 * --fs-rullepanel sættes af fashion-shop.js. Uden JavaScript falder værdien
 * tilbage til 0px, altså præcis den gamle opførsel — intet går i stykker.
 */
.fs-hero,
.fs-baand,
.fs-split,
.fs-usp,
.fs-produkter {
	width: calc(100vw - var(--fs-rullepanel, 0px));
	margin-left: calc(50% - 50vw + var(--fs-rullepanel, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--fs-rullepanel, 0px) / 2);
	box-sizing: border-box;
}

/* ================================================================ HERO === */

.fs-hero {
	position: relative;
	display: grid;
	background: var(--fst-bone, #f5f3f1);
	overflow: hidden;
}

/*
 * Højden er en klasse pr. skærmstørrelse — h, h-t og h-m.
 *
 * En hero der fylder hele skærmen på desktop er tit for meget på en telefon,
 * hvor den skubber alt andet under folden. Derfor kan de tre vælges hver for
 * sig, og tablet/mobil arver hvis de ikke er sat.
 */
.fs-hero--h-fuld   { min-height: 100svh; }
.fs-hero--h-stor   { min-height: 78vh; }
.fs-hero--h-medium { min-height: 56vh; }
.fs-hero--h-lav    { min-height: 42vh; }

.fs-hero__media,
.fs-hero__indhold {
	grid-area: 1 / 1;
}

.fs-hero__media {
	position: relative;
}

.fs-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.fs-hero__desktop,
.fs-hero__mobil {
	position: absolute;
	inset: 0;
}

.fs-hero__mobil {
	display: none;
}

.fs-hero__indhold {
	position: relative;
	z-index: 1;
	display: flex;
	padding: 56px var(--fst-gutter, 24px);
}

/* Placering: kolonne = vandret, række = lodret. */
.fs-hero--venstre-bund  { }
.fs-hero--venstre-bund  .fs-hero__indhold { align-items: flex-end;  justify-content: flex-start; text-align: left; }
.fs-hero--venstre-midt  .fs-hero__indhold { align-items: center;    justify-content: flex-start; text-align: left; }
.fs-hero--midt-midt     .fs-hero__indhold { align-items: center;    justify-content: center;     text-align: center; }
.fs-hero--midt-bund     .fs-hero__indhold { align-items: flex-end;  justify-content: center;     text-align: center; }
.fs-hero--hoejre-bund   .fs-hero__indhold { align-items: flex-end;  justify-content: flex-end;   text-align: right; }
.fs-hero--hoejre-midt   .fs-hero__indhold { align-items: center;    justify-content: flex-end;   text-align: right; }

.fs-hero__tekst {
	max-width: 620px;
}

.fs-hero--lys   { color: var(--fst-paper, #fff); }
.fs-hero--moerk { color: var(--fst-ink, #111); }

/*
 * Overlay kun bag lys tekst — og kun i bunden, hvor teksten som regel står.
 * Et overlay over hele billedet gør det gråt; det her lægger sig under.
 */
.fs-hero--lys .fs-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 55%);
	pointer-events: none;
}

.fs-hero--lys.fs-hero--venstre-midt .fs-hero__media::after,
.fs-hero--lys.fs-hero--midt-midt .fs-hero__media::after,
.fs-hero--lys.fs-hero--hoejre-midt .fs-hero__media::after {
	background: rgba(0, 0, 0, 0.18);
}

.fs-hero .fs-hero__overskrift {
	font-family: var(--fst-font-display);
	font-size: var(--fs-hero-titel, 54px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.03em;
	color: inherit;
	margin: 0 0 14px;
}

.fs-hero__undertekst {
	font-family: var(--fst-font-ui);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: inherit;
	margin: 0 0 26px;
	opacity: 0.92;
}

/* Knappen er understreget tekst i hero'en — en sort blok på et foto er tungt. */
.fs-hero .fs-hero__knap,
.fs-hero .fs-hero__knap:visited {
	display: inline-block;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	opacity: 1;
	transition: opacity var(--fst-overgang, 0.25s ease);
}

.fs-hero .fs-hero__knap:hover {
	opacity: 0.65;
	color: inherit;
}

@media (max-width: 1024px) {
	.fs-hero--h-t-fuld   { min-height: 100svh; }
	.fs-hero--h-t-stor   { min-height: 78vh; }
	.fs-hero--h-t-medium { min-height: 56vh; }
	.fs-hero--h-t-lav    { min-height: 42vh; }

	.fs-hero .fs-hero__overskrift {
		font-size: var(--fs-hero-titel-t, var(--fs-hero-titel, 54px));
	}
}

@media (max-width: 767px) {
	/*
	 * Uden et valg på mobil falder alle højder tilbage til 72svh.
	 *
	 * Det er den gamle opførsel, og den bevares som standard: en hero på
	 * 100svh med en sort topbjælke over sig efterlader ingenting synligt
	 * under folden. Vælges en højde på mobil, vinder den — reglerne står
	 * efter denne og har samme specificitet.
	 */
	.fs-hero {
		min-height: 72svh;
	}

	.fs-hero--h-m-fuld   { min-height: 100svh; }
	.fs-hero--h-m-stor   { min-height: 78vh; }
	.fs-hero--h-m-medium { min-height: 56vh; }
	.fs-hero--h-m-lav    { min-height: 42vh; }

	/* Er der sat et mobilbillede, byttes der om. */
	.fs-hero__mobil { display: block; }
	.fs-hero__desktop:not(:only-child) { display: none; }

	.fs-hero__indhold {
		padding: 32px var(--fst-gutter, 16px);
	}

	/*
	 * 34px som standard, men kun indtil der er sat en værdi på mobil eller
	 * tablet. Uden kæden her ville en skyder på mobil blive slået af den
	 * faste værdi, fordi denne regel står senere i filen.
	 */
	.fs-hero .fs-hero__overskrift {
		font-size: var(--fs-hero-titel-m, var(--fs-hero-titel-t, 34px));
	}

	.fs-hero__undertekst {
		font-size: 14px;
	}
}

/* ========================================================== BILLEDBÅND === */

/*
 * Kolonner og mellemrum pr. skærmstørrelse — samme model som produktgriddet:
 * tallet er en variabel, valgene er klasser.
 */
.fs-baand {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(var(--fs-baand-kol, 4), minmax(0, 1fr));
}

.fs-baand--gab-lille { gap: 5px; }
.fs-baand--gab-0 { gap: 0; }

.fs-baand__felt {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--fst-bone, #f5f3f1);
	color: var(--fst-paper, #fff);
	text-decoration: none;
}

/*
 * Ingen hover-effekter i denne sektion.
 *
 * Her lå før en zoom på billedet. Oveni kom temaets generelle
 * a:hover { opacity: 0.62 } fra base.css, som lagde sig over fotoet og så
 * ud som et hvidt slør — nøjagtig den fejl produktkortene allerede havde.
 *
 * Undtagelsen skal have TRE klasser. base.css er (0,1,1), Elementors kit
 * rammer med .elementor-kit-XXX a:hover som er (0,2,1), og begge to
 * indlæses efter denne fil. Med .fs-baand a.fs-baand__felt:hover er vi på
 * (0,3,1) og vinder uanset rækkefølge.
 */
.fs-baand a.fs-baand__felt:hover,
.fs-baand a.fs-baand__felt:focus {
	opacity: 1;
}

.fs-baand__img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.fs-baand--format-2-3 .fs-baand__img { aspect-ratio: 2 / 3; }
.fs-baand--format-3-4 .fs-baand__img { aspect-ratio: 3 / 4; }
.fs-baand--format-1-1 .fs-baand__img { aspect-ratio: 1 / 1; }

.fs-baand a.fs-baand__felt:hover .fs-baand__img {
	transform: none;
	opacity: 1;
}

/* Titel og knap står som én blok nederst til venstre i billedet. */
.fs-baand__tekst {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
}

.fs-baand__label {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: var(--fs-baand-titel, 26px);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fst-paper, #fff);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.32);
}

/* Knappen får luft til titlen — men kun når der faktisk er en titel. */
.fs-baand__label + .fs-knap {
	margin-top: 14px;
}

/*
 * Titlens størrelse pr. skærm.
 *
 * Variablerne sættes inline på sektionen af widgetten. Kæden af fallbacks
 * er Elementors egen logik skrevet i CSS: er mobil ikke sat, bruges tablet,
 * og er tablet ikke sat, bruges desktop. Navnene skal være forskellige —
 * en variabel der falder tilbage på sig selv er en cyklus, og hele
 * deklarationen kasseres uden en fejl at lede efter.
 */
@media (max-width: 1024px) {
	.fs-baand {
		grid-template-columns: repeat(var(--fs-baand-kol-t, var(--fs-baand-kol, 2)), minmax(0, 1fr));
	}

	.fs-baand--gab-t-lille { gap: 5px; }
	.fs-baand--gab-t-0 { gap: 0; }

	.fs-baand--format-t-2-3 .fs-baand__img { aspect-ratio: 2 / 3; }
	.fs-baand--format-t-3-4 .fs-baand__img { aspect-ratio: 3 / 4; }
	.fs-baand--format-t-1-1 .fs-baand__img { aspect-ratio: 1 / 1; }

	.fs-baand__label {
		font-size: var(--fs-baand-titel-t, var(--fs-baand-titel, 26px));
	}
}

@media (max-width: 767px) {
	.fs-baand {
		grid-template-columns: repeat(var(--fs-baand-kol-m, var(--fs-baand-kol-t, var(--fs-baand-kol, 2))), minmax(0, 1fr));
	}

	.fs-baand--gab-m-lille { gap: 5px; }
	.fs-baand--gab-m-0 { gap: 0; }

	.fs-baand--format-m-2-3 .fs-baand__img { aspect-ratio: 2 / 3; }
	.fs-baand--format-m-3-4 .fs-baand__img { aspect-ratio: 3 / 4; }
	.fs-baand--format-m-1-1 .fs-baand__img { aspect-ratio: 1 / 1; }

	.fs-baand__label {
		font-size: var(--fs-baand-titel-m, var(--fs-baand-titel-t, var(--fs-baand-titel, 26px)));
	}
}

@media (max-width: 560px) {
	.fs-baand__tekst {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}
}

/* ========================================================= SPLIT-BANNER == */

.fs-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.fs-split__felt {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--fst-bone, #f5f3f1);
	text-decoration: none;
}

.fs-split__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.fs-split__felt:hover .fs-split__img {
	transform: scale(1.03);
}

.fs-split__tekst {
	position: absolute;
	left: 32px;
	bottom: 30px;
	right: 32px;
}

.fs-split--lys   .fs-split__tekst { color: var(--fst-paper, #fff); }
.fs-split--moerk .fs-split__tekst { color: var(--fst-ink, #111); }

.fs-split--lys .fs-split__felt::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 50%);
	pointer-events: none;
}

.fs-split__tekst {
	z-index: 1;
}

.fs-split .fs-split__overskrift {
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: inherit;
	margin: 0 0 8px;
}

.fs-split__knap {
	display: inline-block;
	font-family: var(--fst-font-ui);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

@media (max-width: 767px) {
	.fs-split {
		grid-template-columns: 1fr;
	}

	.fs-split__tekst {
		left: var(--fst-gutter, 16px);
		right: var(--fst-gutter, 16px);
		bottom: 20px;
	}
}

/* ============================================================== USP-BÅND = */

.fs-usp {
	border-top: 1px solid var(--fst-ash, #e5e2de);
	border-bottom: 1px solid var(--fst-ash, #e5e2de);
}

.fs-usp--bone {
	background: var(--fst-bone, #f5f3f1);
	border: 0;
}

.fs-usp__indre {
	display: flex;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
	max-width: var(--fst-max, 1440px);
	margin: 0 auto;
	padding: 18px var(--fst-gutter, 24px);
}

.fs-usp__felt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-ink, #111);
	white-space: nowrap;
}

.fs-usp__felt .fst-ikon {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.fs-usp__indre {
		gap: 14px 28px;
		padding: 14px var(--fst-gutter, 16px);
	}

	.fs-usp__felt {
		font-size: 10px;
	}
}

/* ============================================================ PRODUKTER === */

.fs-produkter {
	padding: var(--fst-sektion-y, 88px) 0 calc(var(--fst-sektion-y, 88px) - 32px);
}

.fs-produkter__hoved {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--fst-grid-gap, 5px);
	margin-bottom: 32px;
}

/*
 * Centreret overskrift: tre spalter, ikke flex.
 *
 * Teksten skal stå midt på SIDEN, ikke midt i den plads der er tilovers ved
 * siden af karrusellens pile. Med 1fr auto 1fr og teksten i midterspalten
 * flytter overskriften sig ikke, uanset om der er pile eller ej.
 *
 * Begge børn får deres spalte tildelt eksplicit. Automatisk placering ville
 * være kortere, men så afhænger resultatet af rækkefølgen i markuppen — og
 * den slags har kostet tid i kassen før.
 */
.fs-produkter--j-midt .fs-produkter__hoved {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.fs-produkter--j-midt .fs-produkter__tekst {
	grid-column: 2;
	text-align: center;
}

.fs-produkter--j-midt .fs-produkter__pile {
	grid-column: 3;
	justify-self: end;
}

/*
 * Overskriftens grad sættes af widgetten som en inline variabel.
 *
 * Standarden er 28px og ikke de gamle 12 — det er en sektionsoverskrift, ikke
 * en etiket. Spatieringen er samtidig trukket ned fra 0.14em til 0.08em:
 * versalspatiering skal falde når graden stiger, ellers falder ordet fra
 * hinanden i enkeltbogstaver.
 */
.fs-produkter .fs-produkter__titel {
	font-family: var(--fst-font-ui);
	font-size: var(--fs-produkter-titel, 28px);
	font-weight: 300;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fst-ink, #111);
	margin: 0;
}

.fs-produkter .fs-produkter__titel + .fs-knap {
	margin-top: 18px;
}

/* Mangler overskriften, står pilene alene til højre. */
.fs-produkter__hoved > .fs-produkter__pile:only-child {
	margin-left: auto;
}

.fs-produkter__pile {
	display: flex;
	gap: 4px;
}

.fs-produkter .fs-produkter__pil,
.fs-produkter .fs-produkter__pil:hover,
.fs-produkter .fs-produkter__pil:focus {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--fst-ink, #111);
	cursor: pointer;
}

.fs-produkter .fs-produkter__pil:hover {
	opacity: 0.5;
}

/*
 * Listen får temaets kort-styling gennem sine egne klasser — uden .products,
 * så WooCommerces procentbredder ikke rammer li-elementerne.
 */
/*
 * Samme mellemrum og samme kantafstand som arkivet og "You may also like".
 *
 * Bemærk: her stod tidligere padding to gange — først med kantafstanden, så
 * padding: 0 fem linjer længere nede. Den sidste vandt, og widget-griddet gik
 * derfor helt ud til skærmkanten mens de øvrige grids ikke gjorde.
 */
/*
 * Kolonnetallet er en VARIABEL, ikke en klasse pr. tal.
 *
 * Før stod der en regel for hver værdi (--kol-2 til --kol-6). Med tre
 * skærmstørrelser ville det være femten regler, og hver ny værdi skulle
 * tilføjes tre steder. Nu sætter widgetten --fs-kol inline, og kæden af
 * fallbacks nedenfor er Elementors arv skrevet i CSS: er mobil ikke sat,
 * bruges tablet, og er tablet ikke sat, bruges desktop.
 *
 * minmax(0, 1fr) og ikke 1fr: en grid-spalte har som udgangspunkt
 * min-width: auto, og et langt produktnavn uden mellemrum ville kunne
 * skubbe spalten bredere end sin andel.
 */
.fs-produkter__liste {
	display: grid;
	gap: var(--fst-grid-gap, 5px);
	padding: 0 var(--fst-grid-gap, 5px);
	grid-template-columns: repeat(var(--fs-kol, 4), minmax(0, 1fr));
	list-style: none;
	margin: 0;
}

/*
 * Karrusel: samme grid, men lagt på tværs med scroll-snap.
 *
 * Kortets bredde er (100% − kig) / antal kolonner − mellemrum. Regnestykket
 * går op: N kort plus N mellemrum fylder præcis 100% − kig, og derfor
 * begynder det næste kort nøjagtig `kig` inde fra højre kant. Det er dét,
 * der gør at man kan SE at der er mere at bladre til.
 */
.fs-produkter--v-karrusel .fs-produkter__liste {
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - var(--fs-kig, 0%)) / var(--fs-kol, 4) - var(--fst-grid-gap, 5px));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--fst-grid-gap, 5px);
	gap: var(--fst-grid-gap, 5px);
}

.fs-produkter__liste::-webkit-scrollbar {
	display: none;
}

.fs-produkter__liste li.product {
	scroll-snap-align: start;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0 0 32px;
	text-align: left;
	min-width: 0;
}

/* Kortene arver temaets styling; den er skrevet mod ul.products, så vi
   gentager de få regler der ellers ikke ville ramme. */
.fs-produkter__liste li.product > a {
	display: block;
	width: 100%;
}

/*
 * Ingen understregning på produktkortene.
 *
 * WooCommerce pakker HELE kortet ind i ét <a> — billede, titel og pris — og
 * text-decoration smitter af på alt indeni. Elementors kit sætter
 * understregning på alle links med .elementor-kit-XX a, og temaets modregel
 * er skrevet mod `.woocommerce ul.products li.product a`, som kun findes på
 * shop-siderne. På forsiden hedder listen .fs-produkter__liste og ligger
 * ikke i en .woocommerce-beholder, så dér ramte den ikke, og både titel og
 * pris stod med streg under.
 *
 * Fire klasser og to elementer, så den også slår kittets a:hover på (0,2,1).
 */
.fs-produkter__liste li.product a,
.fs-produkter__liste li.product a:hover,
.fs-produkter__liste li.product a:focus,
.fs-produkter__liste li.product a:visited {
	text-decoration: none;
}

/*
 * Samme problem i de to billedsektioner, hvor feltet også er ét stort link.
 * `.fs-baand__felt { text-decoration: none }` alene er (0,1,0) og taber til
 * kittets (0,1,1).
 */
.fs-baand a.fs-baand__felt,
.fs-baand a.fs-baand__felt:hover,
.fs-baand a.fs-baand__felt:focus,
.fs-split a.fs-split__felt,
.fs-split a.fs-split__felt:hover,
.fs-split a.fs-split__felt:focus {
	text-decoration: none;
}

.fs-produkter__liste li.product .woocommerce-loop-product__title {
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	color: var(--fst-ink, #111);
	padding: 0;
	margin: 0 0 6px;
}

.fs-produkter__liste li.product .price {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 13px;
	font-weight: 400;
	color: var(--fst-ink, #111);
	padding: 0;
	margin: 0;
}

.fs-produkter__liste li.product .price del {
	color: var(--fst-stone, #6b6b6b);
	opacity: 1;
	margin-right: 8px;
}

.fs-produkter__liste li.product .price ins {
	background: none;
	color: var(--fst-signal, #c1272d);
	text-decoration: none;
	font-weight: 400;
}

.fs-produkter__liste li.product .star-rating {
	display: none;
}

/* I karrusellen ligger teksten uden gutter — kortet har allerede sit mellemrum. */
.fs-produkter--v-karrusel .fs-produkter__liste li.product .woocommerce-loop-product__title,
.fs-produkter--v-karrusel .fs-produkter__liste li.product .price,
.fs-produkter--v-karrusel .fs-produkter__liste .fst-swatches {
	padding-left: 0;
	padding-right: 0;
}

/*
 * ---------------------------------------------- Pr. skærmstørrelse ------
 *
 * Hver blok gør tre ting: sætter kolonnetallet for den skærm, tænder
 * karrusellen hvis den er valgt DER eller arvet oppefra, og slukker den igen
 * hvis skærmen udtrykkeligt siger grid.
 *
 * Rækkefølgen inde i blokken er ikke tilfældig: tænd-reglen og sluk-reglen
 * har samme specificitet (to klasser), så det er den sidste der vinder. Står
 * de omvendt, kan man ikke vælge grid på mobil når desktop er karrusel.
 */
@media (max-width: 1024px) {
	.fs-produkter__liste {
		grid-template-columns: repeat(var(--fs-kol-t, var(--fs-kol, 4)), minmax(0, 1fr));
	}

	.fs-produkter--v-karrusel .fs-produkter__liste,
	.fs-produkter--v-t-karrusel .fs-produkter__liste {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - var(--fs-kig-t, var(--fs-kig, 0%))) / var(--fs-kol-t, var(--fs-kol, 4)) - var(--fst-grid-gap, 5px));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.fs-produkter--v-t-grid .fs-produkter__liste {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(var(--fs-kol-t, var(--fs-kol, 4)), minmax(0, 1fr));
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.fs-produkter .fs-produkter__titel {
		font-size: var(--fs-produkter-titel-t, var(--fs-produkter-titel, 28px));
	}

	.fs-produkter--j-t-midt .fs-produkter__hoved {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.fs-produkter--j-t-midt .fs-produkter__tekst {
		grid-column: 2;
		text-align: center;
	}

	.fs-produkter--j-t-midt .fs-produkter__pile {
		grid-column: 3;
		justify-self: end;
	}

	.fs-produkter--j-t-venstre .fs-produkter__hoved {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fs-produkter--j-t-venstre .fs-produkter__tekst {
		text-align: left;
	}
}

@media (max-width: 767px) {
	.fs-produkter {
		padding: var(--fst-sektion-y, 56px) 0 calc(var(--fst-sektion-y, 56px) - 24px);
	}

	.fs-produkter__liste {
		grid-template-columns: repeat(var(--fs-kol-m, var(--fs-kol-t, var(--fs-kol, 2))), minmax(0, 1fr));
	}

	.fs-produkter--v-karrusel .fs-produkter__liste,
	.fs-produkter--v-t-karrusel .fs-produkter__liste,
	.fs-produkter--v-m-karrusel .fs-produkter__liste {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - var(--fs-kig-m, var(--fs-kig-t, var(--fs-kig, 0%)))) / var(--fs-kol-m, var(--fs-kol-t, var(--fs-kol, 1))) - var(--fst-grid-gap, 5px));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.fs-produkter--v-m-grid .fs-produkter__liste {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(var(--fs-kol-m, var(--fs-kol-t, var(--fs-kol, 2))), minmax(0, 1fr));
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.fs-produkter__hoved {
		margin-bottom: 24px;
	}

	.fs-produkter .fs-produkter__titel {
		font-size: var(--fs-produkter-titel-m, var(--fs-produkter-titel-t, var(--fs-produkter-titel, 28px)));
	}

	.fs-produkter--j-m-midt .fs-produkter__hoved {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.fs-produkter--j-m-midt .fs-produkter__tekst {
		grid-column: 2;
		text-align: center;
	}

	.fs-produkter--j-m-midt .fs-produkter__pile {
		grid-column: 3;
		justify-self: end;
	}

	.fs-produkter--j-m-venstre .fs-produkter__hoved {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fs-produkter--j-m-venstre .fs-produkter__tekst {
		text-align: left;
	}

	.fs-produkter .fs-produkter__titel + .fs-knap {
		margin-top: 14px;
	}
}

/* =============================================================== KNAPPEN == */

/*
 * Én knap, tre udseender — brugt i både produktsektionen og billedbåndet.
 *
 * Selektorerne er toklassede med et element foran (.fs-produkter a.fs-knap),
 * fordi Elementors kit rammer links med .elementor-kit-XXX a — (0,1,1) — og
 * dets hover-regel med (0,2,1). Kittet indlæses efter denne fil, så en enkelt
 * klasse ville tabe både farve, ramme og radius til det.
 *
 * I billedbåndet er knappen et span inde i feltets link. Derfor er hover
 * skrevet på FELTET og ikke på knappen: peger man på billedet, skal knappen
 * reagere med, ellers virker den død lige indtil musen rammer præcis den.
 */
.fs-produkter a.fs-knap,
.fs-produkter span.fs-knap,
.fs-baand .fs-knap {
	position: relative;
	display: inline-block;
	overflow: hidden;
	box-sizing: border-box;
	padding: 13px 30px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track, 0.14em);
	text-decoration: none;
	color: var(--fst-ink, #111);
	opacity: 1;
	cursor: pointer;
	transition: color 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* I billedbåndet står knappen på et foto og er derfor altid hvid. */
.fs-baand .fs-knap {
	color: var(--fst-paper, #fff);
	padding: 11px 24px;
}

/*
 * Fyldet er et lag der skaleres op fra bunden.
 *
 * transform kan animeres uden at browseren skal tegne layoutet om — en
 * overgang på height eller på background-position koster en ny beregning
 * for hver frame. Samtidig starter fyldet i bunden og ender i toppen,
 * hvilket er dét der giver bevægelsen retning frem for bare at blinke.
 */
.fs-produkter .fs-knap::before,
.fs-baand .fs-knap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	transform: scaleY(0);
	transform-origin: center bottom;
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.fs-knap__tekst {
	position: relative;
	z-index: 1;
	display: block;
	transition: color 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Tilstandene må IKKE kræve et <a>.
 *
 * Uden et link sat i widgetten tegnes knappen som et span — et link uden
 * href er ikke et link. Med a.fs-knap--ramme:hover i selektoren skete der
 * derfor ingenting i frontend, mens indstillingerne stod og så rigtige ud
 * i panelet. Samme fejl gjorde at "Tekst"-stilen beholdt sin ramme, fordi
 * også DEN regel var skrevet med a foran.
 *
 * To klasser plus :hover er (0,3,0) og slår kittets .elementor-kit-XX
 * a:hover på (0,2,1), så elementet er der ikke brug for.
 */

/* Farven på selve knappen låses i alle tilstande — fyldet bruger currentColor. */
.fs-produkter .fs-knap:hover,
.fs-produkter .fs-knap:focus-visible {
	color: var(--fst-ink, #111);
}

.fs-baand a.fs-baand__felt:hover .fs-knap,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap {
	color: var(--fst-paper, #fff);
}

/* Ramme → fyldes. Teksten skifter til modsat farve præcis samtidig. */
.fs-produkter .fs-knap--ramme:hover::before,
.fs-produkter .fs-knap--ramme:focus-visible::before,
.fs-baand a.fs-baand__felt:hover .fs-knap--ramme::before,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap--ramme::before {
	transform: scaleY(1);
}

.fs-produkter .fs-knap--ramme:hover .fs-knap__tekst,
.fs-produkter .fs-knap--ramme:focus-visible .fs-knap__tekst {
	color: var(--fst-paper, #fff);
}

.fs-baand a.fs-baand__felt:hover .fs-knap--ramme .fs-knap__tekst,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap--ramme .fs-knap__tekst {
	color: var(--fst-ink, #111);
}

/* Sort → tømmes. Fyldet ligger fra start og trækker sig sammen nedad. */
.fs-produkter .fs-knap.fs-knap--fyldt::before,
.fs-baand .fs-knap.fs-knap--fyldt::before {
	transform: scaleY(1);
}

.fs-produkter .fs-knap--fyldt .fs-knap__tekst {
	color: var(--fst-paper, #fff);
}

.fs-baand .fs-knap--fyldt .fs-knap__tekst {
	color: var(--fst-ink, #111);
}

.fs-produkter .fs-knap--fyldt:hover::before,
.fs-produkter .fs-knap--fyldt:focus-visible::before,
.fs-baand a.fs-baand__felt:hover .fs-knap--fyldt::before,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap--fyldt::before {
	transform: scaleY(0);
}

.fs-produkter .fs-knap--fyldt:hover .fs-knap__tekst,
.fs-produkter .fs-knap--fyldt:focus-visible .fs-knap__tekst {
	color: var(--fst-ink, #111);
}

.fs-baand a.fs-baand__felt:hover .fs-knap--fyldt .fs-knap__tekst,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap--fyldt .fs-knap__tekst {
	color: var(--fst-paper, #fff);
}

/*
 * Tekst med streg.
 *
 * Ingen ramme og ingen polstring i siderne — stregen skal være præcis så
 * bred som ordet. Den ligger som et ::after i bunden og glider ind fra
 * venstre. text-decoration kunne ikke bruges: den kan ikke animeres.
 */
.fs-produkter .fs-knap.fs-knap--tekst,
.fs-baand .fs-knap.fs-knap--tekst {
	border: 0;
	padding: 0 0 7px;
}

.fs-produkter .fs-knap.fs-knap--tekst::before,
.fs-baand .fs-knap.fs-knap--tekst::before {
	content: none;
}

.fs-produkter .fs-knap.fs-knap--tekst::after,
.fs-baand .fs-knap.fs-knap--tekst::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fs-produkter .fs-knap--tekst:hover::after,
.fs-produkter .fs-knap--tekst:focus-visible::after,
.fs-baand a.fs-baand__felt:hover .fs-knap--tekst::after,
.fs-baand a.fs-baand__felt:focus-visible .fs-knap--tekst::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.fs-produkter .fs-knap,
	.fs-baand .fs-knap,
	.fs-knap__tekst,
	.fs-produkter .fs-knap::before,
	.fs-baand .fs-knap::before,
	.fs-produkter .fs-knap.fs-knap--tekst::after,
	.fs-baand .fs-knap.fs-knap--tekst::after {
		transition: none;
	}
}

/* =========================================== KANTAFSTAND PÅ TELEFON ====== */

/*
 * Sektionerne går til skærmkanten på desktop — det er signaturen, se
 * DESIGN.md afsnit 5. På en telefon bliver det for hårdt: billederne står
 * klods op ad glaskanten, og der er ingen luft til at hvile øjet.
 *
 * Luften lægges som padding INDE i sektionen og ikke som margin udenom.
 * Sektionerne er 100vw brede med negativ margin for at bryde ud af
 * Elementors container, og en margin her ville modarbejde netop den udregning.
 */
@media (max-width: 767px) {
	.fs-baand,
	.fs-split,
	.fs-produkter__liste,
	.fs-produkter__hoved {
		padding-left: var(--fs-mobil-kant, 12px);
		padding-right: var(--fs-mobil-kant, 12px);
	}

	/*
	 * Karrusellen skal kunne rulle HELT ud til kanten igen.
	 *
	 * Med padding på en vandret scroll-container stopper det sidste kort
	 * 12px inde, og så ser rækken afhugget ud. scroll-padding sørger for at
	 * snap-punktet også tager højde for kanten.
	 */
	.fs-produkter--v-karrusel .fs-produkter__liste,
	.fs-produkter--v-t-karrusel .fs-produkter__liste,
	.fs-produkter--v-m-karrusel .fs-produkter__liste {
		scroll-padding-left: var(--fs-mobil-kant, 12px);
	}
}

/* ============================================ ANTAL PR. SKÆRMSTØRRELSE === */

/*
 * Hvor mange kort der VISES på tablet og mobil.
 *
 * Forespørgslen henter det antal desktop beder om; her skjules de
 * overskydende. Et :nth-child-tal kan ikke komme fra en CSS-variabel, og
 * derfor er der en selektor pr. tal i stedet for én regel med en variabel i.
 * Reglerne er maskingenereret — ret dem ikke i hånden.
 *
 * Kortene er stadig i HTML'en. Det koster ikke båndbredde, fordi billederne
 * er lazy-loadede og et skjult element aldrig når at hente sit billede.
 */
@media (max-width: 1024px) {
	.fs-produkter--antal-t-1 .fs-produkter__liste > *:nth-child(n + 2),
	.fs-produkter--antal-t-2 .fs-produkter__liste > *:nth-child(n + 3),
	.fs-produkter--antal-t-3 .fs-produkter__liste > *:nth-child(n + 4),
	.fs-produkter--antal-t-4 .fs-produkter__liste > *:nth-child(n + 5),
	.fs-produkter--antal-t-5 .fs-produkter__liste > *:nth-child(n + 6),
	.fs-produkter--antal-t-6 .fs-produkter__liste > *:nth-child(n + 7),
	.fs-produkter--antal-t-7 .fs-produkter__liste > *:nth-child(n + 8),
	.fs-produkter--antal-t-8 .fs-produkter__liste > *:nth-child(n + 9),
	.fs-produkter--antal-t-9 .fs-produkter__liste > *:nth-child(n + 10),
	.fs-produkter--antal-t-10 .fs-produkter__liste > *:nth-child(n + 11),
	.fs-produkter--antal-t-11 .fs-produkter__liste > *:nth-child(n + 12),
	.fs-produkter--antal-t-12 .fs-produkter__liste > *:nth-child(n + 13),
	.fs-produkter--antal-t-13 .fs-produkter__liste > *:nth-child(n + 14),
	.fs-produkter--antal-t-14 .fs-produkter__liste > *:nth-child(n + 15),
	.fs-produkter--antal-t-15 .fs-produkter__liste > *:nth-child(n + 16),
	.fs-produkter--antal-t-16 .fs-produkter__liste > *:nth-child(n + 17),
	.fs-produkter--antal-t-17 .fs-produkter__liste > *:nth-child(n + 18),
	.fs-produkter--antal-t-18 .fs-produkter__liste > *:nth-child(n + 19),
	.fs-produkter--antal-t-19 .fs-produkter__liste > *:nth-child(n + 20),
	.fs-produkter--antal-t-20 .fs-produkter__liste > *:nth-child(n + 21),
	.fs-produkter--antal-t-21 .fs-produkter__liste > *:nth-child(n + 22),
	.fs-produkter--antal-t-22 .fs-produkter__liste > *:nth-child(n + 23),
	.fs-produkter--antal-t-23 .fs-produkter__liste > *:nth-child(n + 24),
	.fs-produkter--antal-t-24 .fs-produkter__liste > *:nth-child(n + 25) {
		display: none;
	}
}

@media (max-width: 767px) {
	.fs-produkter--antal-m-1 .fs-produkter__liste > *:nth-child(n + 2),
	.fs-produkter--antal-m-2 .fs-produkter__liste > *:nth-child(n + 3),
	.fs-produkter--antal-m-3 .fs-produkter__liste > *:nth-child(n + 4),
	.fs-produkter--antal-m-4 .fs-produkter__liste > *:nth-child(n + 5),
	.fs-produkter--antal-m-5 .fs-produkter__liste > *:nth-child(n + 6),
	.fs-produkter--antal-m-6 .fs-produkter__liste > *:nth-child(n + 7),
	.fs-produkter--antal-m-7 .fs-produkter__liste > *:nth-child(n + 8),
	.fs-produkter--antal-m-8 .fs-produkter__liste > *:nth-child(n + 9),
	.fs-produkter--antal-m-9 .fs-produkter__liste > *:nth-child(n + 10),
	.fs-produkter--antal-m-10 .fs-produkter__liste > *:nth-child(n + 11),
	.fs-produkter--antal-m-11 .fs-produkter__liste > *:nth-child(n + 12),
	.fs-produkter--antal-m-12 .fs-produkter__liste > *:nth-child(n + 13),
	.fs-produkter--antal-m-13 .fs-produkter__liste > *:nth-child(n + 14),
	.fs-produkter--antal-m-14 .fs-produkter__liste > *:nth-child(n + 15),
	.fs-produkter--antal-m-15 .fs-produkter__liste > *:nth-child(n + 16),
	.fs-produkter--antal-m-16 .fs-produkter__liste > *:nth-child(n + 17),
	.fs-produkter--antal-m-17 .fs-produkter__liste > *:nth-child(n + 18),
	.fs-produkter--antal-m-18 .fs-produkter__liste > *:nth-child(n + 19),
	.fs-produkter--antal-m-19 .fs-produkter__liste > *:nth-child(n + 20),
	.fs-produkter--antal-m-20 .fs-produkter__liste > *:nth-child(n + 21),
	.fs-produkter--antal-m-21 .fs-produkter__liste > *:nth-child(n + 22),
	.fs-produkter--antal-m-22 .fs-produkter__liste > *:nth-child(n + 23),
	.fs-produkter--antal-m-23 .fs-produkter__liste > *:nth-child(n + 24),
	.fs-produkter--antal-m-24 .fs-produkter__liste > *:nth-child(n + 25) {
		display: none;
	}
}