/*
 * header.css — topbjælke, header, navigation, mega menu og footer.
 *
 * Selektorerne er scopet med .fst-header eller .fst-footer foran, altså mindst
 * to klasser. Elementors kit styler alle button- og a-elementer, og en enkelt
 * klasse taber til den.
 */

/* ------------------------------------------------------------ Topbjælke -- */

/*
 * Farverne kommer fra indstillingerne som inline variabler, med temaets
 * egne som reserve. Så virker bjælken uændret uden pluginnet.
 */
.fst-topbjaelke {
	background: var(--fst-topbar-bg, var(--fst-ink));
	color: var(--fst-topbar-farve, var(--fst-paper));
	text-align: center;
	padding: 9px 16px;
}

.fst-topbjaelke__tekst {
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: inherit;
}

/*
 * Flere beskeder: alle ligger i SAMME gridcelle og krydsfader.
 *
 * Grid frem for absolut placering, fordi bjælken så tager højde efter den
 * længste besked. Med position: absolute ville beholderen falde sammen til
 * nul, og bjælken ville hoppe i højden hver gang en længere tekst kom frem
 * — eller slet ikke fylde noget.
 *
 * visibility følger opacity, så en skjult besked heller ikke kan markeres
 * med musen eller læses op.
 */
.fst-topbjaelke--flere {
	display: grid;
}

.fst-topbjaelke--flere .fst-topbjaelke__tekst {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.5s ease,
		visibility 0s linear 0.5s;
}

.fst-topbjaelke--flere .fst-topbjaelke__tekst--aktiv {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.5s ease,
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.fst-topbjaelke--flere .fst-topbjaelke__tekst,
	.fst-topbjaelke--flere .fst-topbjaelke__tekst--aktiv {
		transition: none;
	}
}

/* --------------------------------------------------------------- Header -- */

/*
 * Ingen streger i headeren — hverken under logo-rækken, over menuen eller
 * under headeren. Hvid mod hvid, og det er billederne der skaber kanten.
 * Det samme gælder overgangen til footeren og arkivets titelbjælke.
 */

/*
 * To variabler styrer hele headerens udseende.
 *
 * --fst-header-farve bruges af logo, menupunkter, ikoner og kurvtallet i
 * stedet for --fst-ink. --fst-header-bg er baggrunden. Skal headeren skifte
 * mellem hvid og gennemsigtig, er det kun de to værdier der ændrer sig — ikke
 * en regel pr. element. Uden det ville hvert enkelt element skulle have sin
 * egen overlay-regel, og et glemt element ville stå sort på et mørkt foto.
 *
 * Baggrunden skrives som rgba(255,255,255,…) og ikke som transparent:
 * transparent er rgba(0,0,0,0), og en overgang derfra til hvid går gennem
 * grå. Med samme kulør i begge ender er det kun alfa der ændrer sig.
 */
.fst-header {
	--fst-header-farve: var(--fst-ink);
	--fst-header-bg: rgba(255, 255, 255, 1);

	position: sticky;
	top: 0;
	z-index: 900;
	background-color: var(--fst-header-bg);
	transition: background-color 0.32s ease;
}

/*
 * To tilstande hvor headeren skal skifte ØJEBLIKKELIGT i stedet for at fade.
 *
 * 1. Før JavaScript har sat starttilstanden (`--klar` mangler). Headeren
 *    tegnes hvid, og først bagefter finder header.js ud af om siden begynder
 *    med en hero. Med overgangen tændt kunne man se den hvide bjælke tone
 *    væk ved hver eneste sideindlæsning.
 *
 * 2. Mens mega menuen åbner (`--straks`). Panelet er uigennemsigtigt fra
 *    første billede; fadede headeren samtidig over 0,32 sekunder, ville der
 *    stå et halvgennemsigtigt bånd oven over et helt hvidt panel. Ved
 *    lukning fjernes klassen igen, så headeren fader blødt tilbage — dér er
 *    der ikke noget at støde imod.
 *
 * Selektorerne har tre klasser og slår derfor de toklassede regler længere
 * nede, uden at der skal bruges !important.
 */
.fst-header:not(.fst-header--klar),
.fst-header:not(.fst-header--klar)::before,
.fst-header:not(.fst-header--klar) .fst-header__ikon,
.fst-header:not(.fst-header--klar) .fst-ikon,
.fst-header:not(.fst-header--klar) .fst-header__antal,
.fst-header:not(.fst-header--klar) .fst-nav__liste a,
.fst-header:not(.fst-header--klar) .fst-wordmark,
.fst-header:not(.fst-header--klar) .custom-logo,
.fst-header:not(.fst-header--klar) .fst-logo__lys,
.fst-header--straks,
.fst-header--straks::before,
.fst-header--straks .fst-header__ikon,
.fst-header--straks .fst-ikon,
.fst-header--straks .fst-header__antal,
.fst-header--straks .fst-nav__liste a,
.fst-header--straks .fst-wordmark,
.fst-header--straks .custom-logo,
.fst-header--straks .fst-logo__lys {
	transition: none;
}

/*
 * Fladere header. Målt på easylango.dk, ikke gættet.
 *
 * Oprindeligt: bjælke 80px + navigation 42px = 122px under topbjælken, og
 * 27px luft mellem logoets underkant og menuteksten.
 * Nu: 58 + 35 = 93px. Referencen er KOOKAÏ, hvor de to tilsammen fylder
 * omkring 100px.
 *
 * Bjælkens højde bestemmes af ikonknapperne, ikke af logoet. De er 40px, og
 * ikonet inde i dem er 20px — altså et STØRRE ikon i et mindre felt, så
 * headeren bliver lavere uden at ikonerne virker mindre.
 */
.fst-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 11px var(--fst-gutter) 7px;
}

.fst-header__venstre {
	display: flex;
	align-items: center;
	gap: 4px;
}

.fst-header__hoejre {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

/* Ikonknapper — to klasser, så kittets knapstil ikke slår igennem. */
.fst-header .fst-header__ikon,
.fst-header .fst-header__ikon:hover,
.fst-header .fst-header__ikon:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* 40 og ikke 44: headeren skal være lavere, og ikonet fylder nu mere
	   af feltet, så det ikke føles mindre. */
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/*
	 * Ingen understregning.
	 *
	 * Ikonerne til højre er links, og Elementors kit understreger alle links.
	 * På et SVG ses det ikke, men kurvens ANTAL er tekst inde i det samme
	 * link — og dér stod stregen. To klasser slår kittets (0,1,1).
	 */
	text-decoration: none;
	color: var(--fst-header-farve);
	cursor: pointer;
	transition: opacity var(--fst-overgang), color 0.32s ease;
}

.fst-header .fst-header__ikon:hover {
	opacity: 0.55;
}

/*
 * Ikonets SVG læser headerens farve DIREKTE.
 *
 * Her lå fejlen: ikonerne tegnes med stroke="currentColor", og currentColor
 * slår op i elementets egen color — ikke i forælderens. woocommerce.css
 * satte .fst-ikon { color: var(--fst-ink) }, og den farve var stærkere end
 * alt hvad linket omkring ikonet sagde. Derfor blev hjerte, konto og taske
 * ved med at være sorte i den gennemsigtige header, mens logo og
 * menupunkter skiftede til hvidt.
 *
 * Reglen peger på variablen frem for på inherit, så den er uafhængig af
 * hvad der måtte vinde farvekampen på selve linket. To klasser slår den ene
 * i woocommerce.css, uanset hvilken fil der indlæses sidst.
 */
/*
 * Ikonerne i headeren er større end de 17px fst_ikon() tegner dem i.
 *
 * Størrelsen sættes her og ikke i PHP, fordi de samme ikoner bruges i
 * USP-båndet, kurv-skuffen og på produktsiden, hvor 17px passer. width og
 * height på et SVG skalerer hele viewBoxen, så stregtykkelsen følger med.
 */
.fst-header .fst-ikon {
	width: 20px;
	height: 20px;
	color: var(--fst-header-farve);
	transition: color 0.32s ease;
}

/* Antal i kurven — lille tal ved siden af tasken, ikke en farvet cirkel. */
.fst-header__antal {
	font-family: var(--fst-font-ui);
	font-size: 12px;
	line-height: 1;
	margin-left: 4px;
	color: var(--fst-header-farve);
	text-decoration: none;
	transition: color 0.32s ease;
}

/* ------------------------------------------------------------ Wordmark --- */

.fst-header__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

/*
 * Midlertidig wordmark indtil logoet findes.
 *
 * Jost i versaler med 0.28em spatiering — værdierne fra DESIGN.md.
 * Den brede spatiering er dét der får en geometrisk sans til at læse som et
 * modelogo frem for som en overskrift.
 * Uploades et logo under Udseende → Tilpas → Webstedsidentitet, erstattes
 * dette automatisk, og der skal ikke røres kode.
 */
.fst-header .fst-wordmark,
.fst-header .fst-wordmark:hover {
	font-family: var(--fst-font-display);
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track-logo);
	color: var(--fst-header-farve);
	transition: color 0.32s ease;
	text-decoration: none;
	white-space: nowrap;
	/* Spatieringen lægger luft til HØJRE for sidste bogstav — uden dette
	   står ordet optisk forskudt mod venstre i en centreret kolonne. */
	text-indent: var(--fst-track-logo);
	opacity: 1;
}

/*
 * Fast højde, ikke max-height.
 *
 * Logo-kolonnen i griddet er `auto` og måler efter sit indhold. Havde billedet
 * kun max-height og width: auto, ville bredden afhænge af containeren, mens
 * containeren afhænger af bredden — en cirkulær beregning som browseren
 * afgør ved at sætte begge til 0. Derfor stod headeren uden logo.
 *
 * En fast højde giver billedet en entydig størrelse fra sit eget
 * højde/bredde-forhold, og kæden brydes.
 */
.fst-header .custom-logo-link img {
	height: var(--fst-logo-hoejde, 34px);
	width: auto;
	max-width: none;
	max-height: none;
	display: block;
}

.fst-header .custom-logo-link {
	display: block;
	line-height: 0;
	position: relative;
}

/*
 * Det lyse logo ligger oven på det mørke, ikke ved siden af.
 *
 * Begge billeder er i DOM'en hele tiden og der skiftes kun opacity — så er
 * det lyse allerede hentet når headeren bliver gennemsigtig, og der er ingen
 * glimt af ingenting. Det ligger absolut placeret i toppen til venstre, og
 * fordi de to filer har samme højde og samme format, dækker det præcist.
 *
 * Er der ikke uploadet et lyst logo, klarer filteret i overlay-afsnittet
 * nederst arbejdet i stedet.
 */
.fst-header .fst-logo__lys {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--fst-logo-hoejde, 34px);
	width: auto;
	max-width: none;
	max-height: none;
	display: block;
	opacity: 0;
	transition: opacity 0.32s ease;
	pointer-events: none;
}

/* ----------------------------------------------------------- Navigation -- */

.fst-header__nav {
	position: relative;
}

.fst-nav__liste {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fst-nav__liste li {
	margin: 0;
}

/*
 * 11px over, 12px under. Oprindeligt 15 i begge ender.
 *
 * Den øverste er en del af luften op til logoet, og den nederste bestemmer
 * hvor mega menuen begynder. Klikfeltet er 35px højt.
 */
.fst-header .fst-nav__liste a {
	display: block;
	padding: 11px 0 12px;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-header-farve);
	text-decoration: none;
	opacity: 1;
	transition: opacity var(--fst-overgang), color 0.32s ease;
}

/*
 * Hele menuen dæmpes, og kun det punkt musen er over bliver stående.
 *
 * Før var det omvendt: det man pegede på blev svagere, mens resten stod
 * uændret — altså blev signalet givet ved at FJERNE opmærksomhed fra dét man
 * var i gang med. Referencen er KOOKAÏ, hvor de øvrige punkter går i grå.
 *
 * Opacity og ikke en grå farve, fordi headeren også er gennemsigtig over
 * heroen. En fast grå ville forsvinde på et mørkt foto; en dæmpet hvid gør
 * præcis det samme dér som en grå gør på hvidt.
 *
 * De to regler har samme specificitet (0,3,1), så rækkefølgen afgør:
 * "bliv stående" SKAL stå efter "dæmp".
 */
.fst-header .fst-nav__liste:hover a,
.fst-header .fst-nav__liste:focus-within a,
.fst-header .fst-nav__liste--aaben a {
	opacity: 0.4;
}

.fst-header .fst-nav__liste a:hover,
.fst-header .fst-nav__liste a:focus-visible,
.fst-header .fst-nav__liste--aaben .fst-mega > a {
	opacity: 1;
}

.fst-nav__liste .current-menu-item > a,
.fst-nav__liste .current-product-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------- Mega menu ---- */

/*
 * Panelet skjules med visibility, ikke med hidden-attributten.
 *
 * hidden svarer til display: none, og den kan ikke animeres — panelet ville
 * bare springe frem. Med visibility kan både opacity og transform overgå
 * blødt, og pointer-events sikrer at det skjulte panel ikke opfanger klik.
 *
 * Bemærk forsinkelsen på visibility i den lukkede tilstand: uden den ville
 * panelet blive usynligt med det samme og fade'et aldrig blive set.
 */
/*
 * Panelet ruller ud — det toner IKKE ind.
 *
 * Før animerede det opacity fra 0 til 1, og i de 0,22 sekunder kunne man se
 * hero-billedet tværs igennem panelet. Oven i det var headeren selv midt i
 * sin egen overgang fra gennemsigtig til hvid, så to halvgennemsigtige lag
 * lå oven på hinanden med hver sin kurve. Resultatet var en synlig sømlinje
 * og et gråligt slør over billedet.
 *
 * Nu er panelet uigennemsigtigt fra første billede og vokser i højden i
 * stedet. Der er intet at se igennem på noget tidspunkt.
 *
 * MAX-HEIGHT og ikke grid-template-rows 0fr→1fr, som accordionen bruger.
 * Målt: i en absolut placeret beholder er den ledige plads ubestemt, og
 * `1fr` faldt tilbage til 0px — panelet blev aldrig højere end ingenting.
 * Højden sættes i stedet af header.js ud fra indholdets faktiske mål, så
 * overgangen varer lige lang tid uanset hvor mange kolonner der er.
 *
 * overflow: hidden klipper indholdet, men IKKE box-shadow'en — den tegnes
 * uden for elementets kant og bliver stående. visibility skjuler både panel
 * og skygge mens det er lukket; uden den ville skyggen ligge som en streg
 * under headeren.
 */
.fst-megapanel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	overflow: hidden;
	max-height: 0;
	background: var(--fst-paper);

	/*
	 * Skygge kun under panelet, ikke over det.
	 *
	 * Den gamle 0 12px 32px havde mere sløring (32) end forskydning (12), så
	 * skyggen bredte sig 20px op over panelets top og lagde sig som en grå
	 * stribe under menupunkterne. Med -12px spredning krymper skyggen først:
	 * dens overkant ligger nu 8px INDE under panelet og er skjult af det,
	 * mens underkanten stadig bløder 32px ned.
	 *
	 * Dæmpet fra 0.09 til 0.045 og med kortere sløring: skyggen skal antyde
	 * at panelet ligger oven på siden, ikke tegne en grå kant under det.
	 */
	box-shadow: 0 14px 18px -14px rgba(0, 0, 0, 0.045);
	z-index: 950;

	visibility: hidden;
	pointer-events: none;
	transition:
		max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0.3s;
}

/*
 * 80vh er reserven hvis JavaScript ikke når at måle. Så er selve
 * udfoldningen lidt hurtigere end de 0,3 sekunder, men panelet ÅBNER —
 * og det er dét der betyder noget.
 */
.fst-megapanel.fst-megapanel--aaben {
	max-height: var(--fst-mega-hoejde, 80vh);
	visibility: visible;
	pointer-events: auto;
	transition:
		max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.fst-megapanel,
	.fst-megapanel--aaben {
		transition: visibility 0s;
	}
}

/*
 * Kolonnetallet kommer fra menuen, ikke fra et fast tal her.
 *
 * --fst-mega-kol sættes inline af fst_mega_panel() ud fra hvor mange
 * kolonner mega menuen faktisk har. Før stod der fast repeat(4, …), og med
 * tre kolonner i menuen stod den fjerde tom ved siden af billedet.
 *
 * --fst-mega-cta er billedspaltens bredde. Er den ikke sat, bestemmer hver
 * regel sin egen standard: 280px til ét billede, 440 til to. Derfor skal
 * variablen KUN skrives ud når Magnus selv har valgt en bredde — ellers
 * ville det ene tal gælde begge tilfælde.
 */
.fst-megapanel__indre {
	display: grid;
	grid-template-columns: repeat(var(--fst-mega-kol, 4), minmax(0, 1fr)) var(--fst-mega-cta, 280px);
	gap: 40px;
	max-width: var(--fst-max);
	margin: 0 auto;
	padding: 40px var(--fst-gutter) 48px;
}

/*
 * Kolonneoverskriften er nu det mørkeste i panelet.
 *
 * Før var den grå og linkene sorte — altså omvendt af det man forventer, og
 * øjet fandt ikke kolonnernes inddeling. Nu er overskriften ægte sort (Onyx,
 * ikke Ink) og en anelse federe, mens linkene er en tone lysere. Forskellen
 * er dét der gør inddelingen læsbar, nu hvor begge dele er versaler.
 */
.fst-megapanel__titel {
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-onyx);
	margin: 0 0 16px;
}

.fst-megapanel__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fst-megapanel__liste li {
	margin: 0 0 11px;
}

/*
 * Versaler, som resten af navigationen.
 *
 * Graden falder fra 13 til 11px: versaler fylder mere end minuskler ved
 * samme grad, og 13px ville få en kolonne som "New arrivals" til at bryde.
 * Farven er Stone og ikke Ink, så overskriften ovenfor står tydeligt
 * sortere — ved hover går linket op i fuld sort.
 */
.fst-header .fst-megapanel__liste a {
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fst-stone);
	text-decoration: none;
	letter-spacing: var(--fst-track);
	padding: 0;
	text-transform: uppercase;
	transition: color var(--fst-overgang);
}

.fst-header .fst-megapanel__liste a:hover {
	color: var(--fst-ink);
	text-decoration: none;
	opacity: 1;
}

/*
 * Billedspalten rummer ét eller to kort.
 *
 * Spalten er 280px bred ved ét billede og 440 ved to, så hvert kort stadig
 * er bredt nok til at man kan se hvad der er på det. Er der slet ingen
 * billeder, falder spalten helt væk — ellers stod der 280px tom plads til
 * højre for kolonnerne.
 */
.fst-megapanel__cta {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-content: start;
}

.fst-megapanel__indre--to {
	grid-template-columns: repeat(var(--fst-mega-kol, 4), minmax(0, 1fr)) var(--fst-mega-cta, 440px);
}

.fst-megapanel__indre--to .fst-megapanel__cta {
	grid-template-columns: 1fr 1fr;
}

.fst-megapanel__indre--uden {
	grid-template-columns: repeat(var(--fst-mega-kol, 4), minmax(0, 1fr));
}

/*
 * Ingen hover-effekt på billederne.
 *
 * base.css dæmper alle links til 62 % ved hover, og på et foto ser det ud
 * som et hvidt slør — samme fejl som billedbåndet og produktkortene havde.
 * Undtagelsen skal have tre klasser plus elementet for at slå både base.css
 * (0,1,1) og Elementors kit (0,2,1).
 */
.fst-megapanel .fst-megapanel__kort,
.fst-megapanel a.fst-megapanel__kort:hover,
.fst-megapanel a.fst-megapanel__kort:focus {
	display: block;
	text-decoration: none;
	color: var(--fst-ink);
	opacity: 1;
}

.fst-megapanel__billede {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.fst-megapanel__ctatekst {
	display: block;
	margin-top: 10px;
	font-family: var(--fst-font-ui);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
}

/* ------------------------------------------------- Transparent header --- */

/*
 * Headeren ligger oven på heroen indtil der rulles.
 *
 * Klassen fst-header--overlay sættes af header.js, og KUN når sidens første
 * element er en hero der går til skærmkanten. Er der hvidt indhold øverst,
 * sker der ingenting — hvidt logo på hvid baggrund ville være usynligt.
 *
 * Selve overlappet laves med en negativ margin på <main>, ikke med position:
 * fixed. Headeren skal blive ved med at være sticky, og en fast placeret
 * header ville tage sin højde ud af flowet på HELE siden — også under heroen,
 * hvor resten af indholdet så ville rykke op under menuen.
 *
 * --fst-overlay-hoejde er bjælken plus navigationen, målt af header.js.
 * Topbjælken tæller ikke med: den bliver liggende som en sort stribe over
 * heroen, præcis som før.
 */
body.fst-header-overlay .site-main {
	margin-top: calc(-1 * var(--fst-overlay-hoejde, 0px));
}

.fst-header--overlay {
	--fst-header-farve: var(--fst-paper);
	--fst-header-bg: rgba(255, 255, 255, 0);
}

/*
 * Den hvide tilstand står ét sted.
 *
 * fst-header--fast sættes af header.js når der er rullet, når mega menuen er
 * åben, når søgefeltet er åbent eller når mobilmenuen er fremme. :hover og
 * :focus-within er med her, fordi de skal virke uden JavaScript — det er
 * netop dem der gør menuen læsbar når man peger på den uden at have rullet.
 */
.fst-header--overlay.fst-header--fast,
.fst-header--overlay:hover,
.fst-header--overlay:focus-within {
	--fst-header-farve: var(--fst-ink);
	--fst-header-bg: rgba(255, 255, 255, 1);
}

/*
 * Blød mørkning under menuen.
 *
 * Uden den forsvinder hvid tekst på et lyst foto. Gradienten er svag og
 * slutter før den halve headerhøjde, så den læses som lys frem for som en
 * bjælke. Skal den helt væk, sættes --fst-header-skygge til transparent.
 *
 * z-index: -1 holder den bag headerens eget indhold. Den kan ikke havne bag
 * siden, fordi headerens z-index: 900 allerede har lavet en stablingskontekst.
 */
.fst-header--overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		var(--fst-header-skygge, rgba(0, 0, 0, 0.22)),
		transparent
	);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.32s ease;
}

.fst-header--overlay.fst-header--fast::before,
.fst-header--overlay:hover::before,
.fst-header--overlay:focus-within::before {
	opacity: 0;
}

/*
 * Logoet.
 *
 * Er der uploadet et lyst logo under Butiksindstillinger, krydsfades der
 * mellem de to filer. Er der ikke, gøres det almindelige logo hvidt med et
 * filter: brightness(0) gør billedet helt sort uanset farve, invert(1)
 * vender det til helt hvidt. Det virker på ethvert ensfarvet logo og kræver
 * ingen ekstra fil — men et logo i flere farver bliver en hvid silhuet, og
 * så skal det lyse logo uploades.
 */
.fst-header--overlay .fst-header__logo:not(.fst-header__logo--todelt) .custom-logo {
	filter: brightness(0) invert(1);
	transition: filter 0.32s ease;
}

.fst-header--overlay.fst-header--fast .fst-header__logo:not(.fst-header__logo--todelt) .custom-logo,
.fst-header--overlay:hover .fst-header__logo:not(.fst-header__logo--todelt) .custom-logo,
.fst-header--overlay:focus-within .fst-header__logo:not(.fst-header__logo--todelt) .custom-logo {
	filter: none;
}

.fst-header--overlay .fst-header__logo--todelt .fst-logo__lys {
	opacity: 1;
}

.fst-header--overlay .fst-header__logo--todelt .custom-logo {
	opacity: 0;
	transition: opacity 0.32s ease;
}

.fst-header--overlay.fst-header--fast .fst-header__logo--todelt .fst-logo__lys,
.fst-header--overlay:hover .fst-header__logo--todelt .fst-logo__lys,
.fst-header--overlay:focus-within .fst-header__logo--todelt .fst-logo__lys {
	opacity: 0;
}

.fst-header--overlay.fst-header--fast .fst-header__logo--todelt .custom-logo,
.fst-header--overlay:hover .fst-header__logo--todelt .custom-logo,
.fst-header--overlay:focus-within .fst-header__logo--todelt .custom-logo {
	opacity: 1;
}

/*
 * Søgepanelet har sin egen hvide flade og må ikke stå gennemsigtigt over
 * heroen — man skal kunne se hvad man skriver.
 */
.fst-header--overlay .fst-soegepanel {
	background: var(--fst-paper);
}

@media (prefers-reduced-motion: reduce) {
	.fst-header,
	.fst-header .fst-header__ikon,
	.fst-header .fst-nav__liste a,
	.fst-header .fst-wordmark,
	.fst-header--overlay::before,
	.fst-header--overlay .custom-logo,
	.fst-header .fst-logo__lys {
		transition: none;
	}
}

/* --------------------------------------------------------------- Scrim --- */

.fst-scrim {
	position: fixed;
	inset: 0;
	z-index: 890;
	background: rgba(17, 17, 17, 0.3);
}

/* ---------------------------------------------------------- Mobilmenu ---- */

/*
 * To klasser, ikke én.
 *
 * .fst-header .fst-header__ikon sætter display: inline-flex med (0,2,0), og
 * en enkelt .fst-burger med display: none er (0,1,0) og taber. Burgeren stod
 * derfor synlig på desktop hvor den ikke hører hjemme.
 */
.fst-header .fst-burger {
	display: none;
}

@media (max-width: 1024px) {
	.fst-header .fst-burger {
		display: inline-flex;
	}

	/*
	 * Logoet stod ikke centreret på en telefon.
	 *
	 * Griddet er 1fr auto 1fr, men et grid-element har min-width: auto, altså
	 * sin egen indholdsbredde. Venstre side er to ikoner og højre side er tre
	 * plus kurvtallet, så de to 1fr-spalter kunne ikke blive lige brede — og
	 * midterspalten endte til venstre for midten. min-width: 0 lader dem
	 * krympe lige meget, og så ER midten midten.
	 *
	 * Samtidig bliver der plads: ikonknappen er 36px bred i stedet for 44,
	 * mens HØJDEN bliver på 44 så klikfeltet er lige så stort som før. Det
	 * sparer 40px på tværs af de fem ikoner, og de står tættere.
	 */
	.fst-header__bar {
		padding: 12px var(--fst-gutter);
		gap: 8px;
	}

	.fst-header__venstre,
	.fst-header__hoejre {
		min-width: 0;
	}

	.fst-header .fst-header__ikon,
	.fst-header .fst-header__ikon:hover,
	.fst-header .fst-header__ikon:focus {
		width: 36px;
	}

	.fst-header .fst-wordmark {
		font-size: 20px;
	}

	/*
	 * Logoet må ikke fortrænge ikonerne — men højden skal blive ved med at
	 * være en FAST værdi.
	 *
	 * Her stod height: auto med max-height og max-width. Det slog logoet helt
	 * ud på mobil, og årsagen står allerede beskrevet længere oppe i filen:
	 * logo-kolonnen i griddet er `auto` og måler efter sit indhold, så med
	 * height: auto afhænger billedets bredde af containeren, mens containeren
	 * afhænger af bredden. Browseren bryder den cirkel ved at sætte begge til
	 * nul, og logoet forsvinder uden en fejl at lede efter.
	 *
	 * Løsningen er derfor ikke en grænse, men en mindre fast højde: et
	 * wordmark på 5,3:1 fylder 111px i bredden ved 21px højde, altså omtrent
	 * det samme som den gamle skrevne wordmark gjorde.
	 */
	.fst-header .custom-logo-link img,
	.fst-header .fst-logo__lys {
		height: calc(var(--fst-logo-hoejde, 34px) * 0.8);
		width: auto;
		max-width: none;
	}

	/*
	 * Menupanelet er hvidt, uanset hvad headeren er.
	 *
	 * Uden dette ville punkterne stå hvide på hvidt i overlay-tilstand indtil
	 * JavaScript nåede at sætte den faste tilstand — og helt usynlige hvis
	 * scriptet fejlede.
	 */
	.fst-header--overlay .fst-header__nav {
		--fst-header-farve: var(--fst-ink);
	}

	/*
	 * Desktop-navigationen findes ikke på mobil.
	 *
	 * Før blev den lavet om til selve off canvas-panelet, og mega menuen blev
	 * foldet ud nedenunder. Resultatet var at mega menuens kolonner stod som
	 * en dublet af menupunkterne — "Shop, Dresses, Sale" to gange. Nu har
	 * mobilen sin egen markup, og de to rører ikke hinanden.
	 */
	.fst-header__nav {
		display: none;
	}

	/* Rullelåsen ligger i base.css som html.fst-laast — se header.js. */
}

/* ------------------------------------------------------- Mobilmenuen ---- */

/*
 * Panelet glider ind fra venstre med transform, ikke med display.
 *
 * display: none kan hverken animeres eller modtage fokus, og et panel man
 * ikke kan tabbe sig ind i er ikke en menu. visibility følger med, så det
 * lukkede panel heller ikke kan nås med tastaturet — men først EFTER
 * overgangen, ellers ville den forsvinde med det samme.
 */
.fst-mobilmenu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(360px, 88vw);
	display: none;
	flex-direction: column;
	background: var(--fst-paper);
	z-index: 901;
	transform: translateX(-100%);
	visibility: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition:
		transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0.34s;
}

@media (max-width: 1024px) {
	.fst-mobilmenu {
		display: flex;
	}
}

body.fst-mobilmenu-aaben .fst-mobilmenu {
	transform: translateX(0);
	visibility: visible;
	transition:
		transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

.fst-mobilmenu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px var(--fst-gutter) 10px;
}

.fst-mobilmenu__logo .fst-wordmark {
	font-size: 17px;
}

.fst-mobilmenu .fst-mobilmenu__logo img {
	height: 22px;
	width: auto;
	max-width: none;
	display: block;
}

.fst-mobilmenu .fst-mobilmenu__luk,
.fst-mobilmenu .fst-mobilmenu__luk:hover,
.fst-mobilmenu .fst-mobilmenu__luk:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: var(--fst-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fst-mobilmenu__liste {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
}

.fst-mobilmenu__punkt {
	margin: 0;
}

.fst-mobilmenu__raekke {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 8px;
}

/*
 * Rækken som knap, når punktet har underpunkter.
 *
 * To klasser, ellers lægger Elementors kit baggrund, ramme, radius og
 * midterstillet tekst på — den styler alle button-elementer på sitet.
 * width: 100% fordi en knap ellers kun fylder sit indhold, og så ville
 * klikfeltet stoppe midt i rækken.
 */
.fst-mobilmenu .fst-mobilmenu__udloeser,
.fst-mobilmenu .fst-mobilmenu__udloeser:hover,
.fst-mobilmenu .fst-mobilmenu__udloeser:focus {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: var(--fst-ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fst-mobilmenu .fst-mobilmenu__link {
	flex: 1 1 auto;
	display: block;
	padding: 15px var(--fst-gutter);
	font-family: var(--fst-font-ui);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	text-decoration: none;
	opacity: 1;
}

/*
 * Chevronen er en knap for sig, ikke hele rækken.
 *
 * Trykker man på navnet, går man til siden; trykker man på pilen, folder
 * man ud. Det er dét man forventer, og det er også den eneste måde et
 * menupunkt som "Shop" kan være både et link OG en mappe.
 */
.fst-mobilmenu .fst-mobilmenu__chevron,
.fst-mobilmenu .fst-mobilmenu__chevron:hover,
.fst-mobilmenu .fst-mobilmenu__chevron:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: var(--fst-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fst-mobilmenu__chevron .fst-ikon {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fst-mobilmenu__punkt--aaben .fst-mobilmenu__chevron .fst-ikon {
	transform: rotate(180deg);
}

/*
 * Samme udfoldning som accordionen på produktsiden: grid-template-rows fra
 * 0fr til 1fr. Fordelen frem for max-height er at der ikke skal gættes en
 * højde — griddet kender indholdets rigtige mål, så overgangen er lige lang
 * uanset om der er tre links eller tyve.
 *
 * Den indre wrapper er den der klippes, og den SKAL have overflow: hidden
 * og min-height: 0.
 */
.fst-mobilmenu__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fst-mobilmenu__punkt--aaben .fst-mobilmenu__panel {
	grid-template-rows: 1fr;
}

.fst-mobilmenu__indre {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.25s ease-out;
}

.fst-mobilmenu__punkt--aaben .fst-mobilmenu__indre {
	opacity: 1;
	transition-delay: 0.1s;
}

.fst-mobilmenu__gruppe {
	margin: 14px 0 6px;
	padding: 0 var(--fst-gutter);
	font-family: var(--fst-font-ui);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
}

.fst-mobilmenu .fst-mobilmenu__under {
	display: block;
	padding: 11px var(--fst-gutter) 11px calc(var(--fst-gutter) + 14px);
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
	text-decoration: none;
	opacity: 1;
}

.fst-mobilmenu .fst-mobilmenu__under:hover {
	color: var(--fst-ink);
}

/* Sidste punkt får luft ned til billedrækken. */
.fst-mobilmenu__indre > *:last-child {
	margin-bottom: 8px;
}

/* ------------------------------------------ Billedrækken i mobilmenuen -- */

/*
 * Vandret rulning med et kig til det næste billede — samme greb som
 * produktkarrusellen. Rækken skrives kun ud når der faktisk er billeder,
 * så der aldrig står et tomt felt i bunden af menuen.
 */
.fst-mobilmenu__billeder {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 42%;
	gap: 5px;
	margin-top: auto;
	padding: 24px var(--fst-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.fst-mobilmenu__billeder::-webkit-scrollbar {
	display: none;
}

.fst-mobilmenu .fst-mobilmenu__billede {
	display: block;
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--fst-ink);
	opacity: 1;
}

.fst-mobilmenu__billedefoto {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/*
 * margin-top: auto på billedrækken OG på bunden.
 *
 * Kun det første element med auto får den ledige plads, så er begge der,
 * skubbes billedrækken ned og bunden lægger sig lige under den. Er der
 * ingen billeder, tager bunden selv pladsen. Uden det ville linket ligge
 * klistret op under menupunkterne på en kort menu.
 */
.fst-mobilmenu__bund {
	margin-top: auto;
	padding: 4px var(--fst-gutter) 28px;
}

.fst-mobilmenu .fst-mobilmenu__bundlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	text-decoration: none;
	opacity: 1;
}

.fst-mobilmenu__billedetekst {
	display: block;
	margin-top: 8px;
	font-family: var(--fst-font-ui);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
}

@media (prefers-reduced-motion: reduce) {
	.fst-mobilmenu,
	.fst-mobilmenu__panel,
	.fst-mobilmenu__indre,
	.fst-mobilmenu__chevron .fst-ikon {
		transition: none;
	}
}

@media (max-width: 560px) {
	.fst-header .custom-logo-link img,
	.fst-header .fst-logo__lys {
		height: calc(var(--fst-logo-hoejde, 34px) * 0.62);
	}
}

@media (min-width: 1025px) {
	.fst-scrim {
		display: none;
	}
}

/* -------------------------------------------------------------- Footer --- */

.fst-footer {
	background: var(--fst-paper);
	margin-top: var(--fst-sektion-y);
}

.fst-footer__top {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr;
	gap: 40px;
	max-width: var(--fst-max);
	margin: 0 auto;
	padding: 56px var(--fst-gutter);
}

.fst-footer__titel {
	font-family: var(--fst-font-ui);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
	margin: 0 0 16px;
}

.fst-footer__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fst-footer__liste li {
	margin: 0 0 10px;
}

.fst-footer .fst-footer__liste a {
	font-family: var(--fst-font-ui);
	font-size: 13px;
	font-weight: 300;
	color: var(--fst-ink);
	text-decoration: none;
	opacity: 1;
}

.fst-footer .fst-footer__liste a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.fst-footer__bund {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	max-width: var(--fst-max);
	margin: 0 auto;
	padding: 20px var(--fst-gutter);
	border-top: 1px solid var(--fst-ash);
}

.fst-footer__copyright {
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--fst-stone);
}

@media (max-width: 1024px) {
	.fst-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding: 40px var(--fst-gutter);
	}

	.fst-footer__nyhedsbrev {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.fst-footer__top {
		grid-template-columns: 1fr;
	}

	.fst-footer__bund {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ------------------------------------------------------------- Søgning -- */

.fst-soegepanel {
	background: var(--fst-paper);
}

.fst-soeg {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--fst-max);
	margin: 0 auto;
	padding: 18px var(--fst-gutter);
}

/* Feltet uden ramme — kun en tynd linje under, som resten af sitets inputs. */
.fst-soeg input[type='search'] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fst-ash);
	border-radius: 0;
	padding: 10px 0;
	font-family: var(--fst-font-ui);
	font-size: 16px;
	font-weight: 300;
	color: var(--fst-ink);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.fst-soeg input[type='search']:focus {
	border-bottom-color: var(--fst-ink);
	outline: 0;
}

.fst-header .fst-soeg__knap,
.fst-header .fst-soeg__knap:hover,
.fst-header .fst-soeg__knap:focus {
	flex: 0 0 auto;
	width: auto;
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--fst-ink);
	border-radius: 0;
	box-shadow: none;
	padding: 10px 0;
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	cursor: pointer;
}

.fst-header .fst-soeg__luk,
.fst-header .fst-soeg__luk:hover,
.fst-header .fst-soeg__luk:focus {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	color: var(--fst-ink);
	cursor: pointer;
}

.fst-header .fst-soeg__luk:hover {
	opacity: 0.55;
}

@media (max-width: 560px) {
	.fst-soeg {
		gap: 10px;
		padding: 14px var(--fst-gutter);
	}

	.fst-soeg input[type='search'] {
		font-size: 15px;
	}
}

/* ------------------------------------------------- Live søgeresultater -- */

.fst-soegeresultat {
	max-width: var(--fst-max);
	margin: 0 auto;
	padding: 0 var(--fst-gutter) 28px;
	background: var(--fst-paper);
}

/*
 * Fem i bredden på desktop, uden rulning.
 *
 * Tallet står i CSS og ikke i JavaScript: serveren sender fem kort, og
 * griddet viser dem. Skal det laves om, er det FST_SOEG_ANTAL i
 * inc/soegning.php og dette tal der følges ad.
 */
.fst-soegeresultat__liste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.fst-soegepanel .fst-soegekort {
	display: block;
	text-decoration: none;
	color: var(--fst-ink);
	opacity: 1;
}

.fst-soegekort__media {
	display: block;
	background: var(--fst-bone);
	margin-bottom: 10px;
}

.fst-soegekort__img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.fst-soegekort__titel {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	margin-bottom: 4px;
}

.fst-soegekort__pris {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	color: var(--fst-ink);
}

.fst-soegekort__pris del {
	color: var(--fst-stone);
	margin-right: 6px;
}

.fst-soegekort__pris ins {
	background: none;
	color: var(--fst-signal);
	text-decoration: none;
}

.fst-soegeresultat__besked {
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 13px;
	color: var(--fst-stone);
}

.fst-soegepanel .fst-soegeresultat__alle {
	display: inline-block;
	margin-top: 20px;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	opacity: 1;
}

@media (max-width: 767px) {
	/*
	 * På telefon vises to kort helt og en femtedel af det tredje.
	 *
	 * Samme regnestykke som produktkarrusellen: (100% − kig) / antal −
	 * mellemrum. To kort plus to mellemrum fylder 80%, så det tredje
	 * begynder præcis 20% inde fra højre kant og fortæller at der er mere.
	 */
	.fst-soegeresultat {
		padding-bottom: 22px;
	}

	.fst-soegeresultat__liste {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 20%) / 2 - 8px);
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.fst-soegeresultat__liste::-webkit-scrollbar {
		display: none;
	}

	.fst-soegepanel .fst-soegekort {
		scroll-snap-align: start;
	}
}