/*
 * woocommerce.css — produktarkiv og produktside.
 *
 * Størstedelen af filen handler om at fjerne WooCommerce' standardudseende:
 * rammer omkring produktkort, grå knapper, centreret tekst og kvadratiske
 * billeder. Vi overskriver med klasser frem for !important overalt hvor det
 * kan lade sig gøre — undtagelserne er kommenteret.
 */

/* ================================================== ELEMENTOR-OVERSTYRING = */

/*
 * Elementors kit sætter skrifttype, vægt og farve på h1-h6 med selektoren
 * .elementor-kit-XXX h2 — altså specificitet (0,1,1). Vores h2 i base.css er
 * (0,0,1) og taber uanset rækkefølge. Her scoper vi til body.fst-shop, så vi
 * lander på (0,1,1) og vinder på at blive indlæst sidst.
 *
 * Den varige løsning er at nulstille Elementor → Site Settings → Typography,
 * så kittet slet ikke sætter skrifter. Denne blok er sikkerhedsnettet.
 */
body.fst-shop h1,
body.fst-shop h2 {
	font-family: var(--fst-font-display);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: 0.01em;
	color: var(--fst-ink);
}

body.fst-shop h3,
body.fst-shop h4,
body.fst-shop h5,
body.fst-shop h6 {
	font-family: var(--fst-font-ui);
	font-weight: 400;
	color: var(--fst-ink);
}

/*
 * Hellos sidetitel på kurv, kasse og konto.
 *
 * Den slås fra i PHP (fst_skjul_sidetitel). Dette er sikkerhedsnettet, hvis en
 * fremtidig Hello-version omdøber filteret — ellers stod titlen der to gange.
 */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header,
body.woocommerce-account .page-header {
	display: none;
}

/* Sektionsoverskrifter er h2 med klasse — to klasser slår kittets (0,1,1). */
.fst-handpicked .fst-sektionstitel,
.fst-relaterede .fst-sektionstitel,
.fst-shop .fst-sektionstitel {
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--fst-track);
	text-transform: uppercase;
	text-align: center;
	color: var(--fst-ink);
	margin: 0 0 32px;
}

/* Elementor og Hello sætter radius på billeder og knapper via kittet. */
body.fst-shop img,
body.fst-shop button,
body.fst-shop input,
body.fst-shop select,
body.fst-shop textarea,
body.fst-shop .button {
	border-radius: 0;
}

/* ============================================================ ARKIVET ==== */

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

/*
 * To klasser — (0,2,0).
 *
 * Her stod før én klasse med 12px, og den tabte til Elementor-kittets
 * .elementor-kit-XXX h1 (0,1,1) på 70px. Resultatet var en titel på ~50px
 * i stedet for den lille versal der var tænkt. Nu vinder størrelsen.
 */
.fst-arkivbjaelke .fst-arkivbjaelke__titel {
	font-family: var(--fst-font-ui);
	font-size: 22px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.1;
}

@media (max-width: 767px) {
	.fst-arkivbjaelke .fst-arkivbjaelke__titel {
		font-size: 18px;
	}
}

.fst-arkivbjaelke__vaerktoej {
	display: flex;
	align-items: center;
	gap: 24px;
}

.fst-sorter {
	margin: 0;
}

.fst-sorter__select {
	width: auto;
	border: 0;
	padding: 0 24px 0 0;
	font-size: 12px;
	background-position: right center;
	cursor: pointer;
}

.fst-sorter__select:focus {
	border: 0;
}

/* ------------------------------------------------------------- Griddet --- */

/*
 * Kantafstanden er den SAMME som mellemrummet mellem kortene.
 *
 * Uden padding gik griddet helt ud i skærmkanten, mens kortene indbyrdes
 * havde luft — så så venstre kolonne beskåret ud. Nu er rytmen ens hele
 * vejen, og kanten læses som en fortsættelse af mellemrummet.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fst-grid-gap);
	margin: 0;
	padding: 0 var(--fst-grid-gap);
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/*
 * Attributselektoren er nødvendig, ikke pynt.
 *
 * WooCommerce sætter .woocommerce ul.products.columns-4 li.product til
 * width: 22.05% — specificitet (0,4,2). Vores selektor uden attributdelen er
 * (0,3,2) og taber. Og fordi elementet er et grid-item, regnes procenten ud
 * fra GRID-CELLEN, ikke fra listen: 13,5 % af en 164px celle blev til et 22px
 * produktkort. [class*="columns-"] tæller som en klasse, så vi lander på
 * (0,4,2) og vinder på at blive indlæst sidst.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*='columns-'] li.product,
.woocommerce-page ul.products[class*='columns-'] li.product {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0 0 32px;
	text-align: left;
	clear: none;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------- Produktkort --- */

/*
 * WooCommerce pakker hele kortet i et <a>, som er inline.
 *
 * Et inline-element giver ingen bredde videre, så .fst-kort__media kan ikke
 * fylde sin kolonne og billedet falder tilbage til sin egen intrinsic
 * størrelse — nogle få titusinde pixels i stedet for hele kortet.
 */
.woocommerce ul.products li.product > a,
.woocommerce-page ul.products li.product > a {
	display: block;
	width: 100%;
}

/*
 * Kortets billedfelt sizes af billedet selv, ikke af containeren.
 *
 * Første forsøg gav .fst-kort__media en aspect-ratio og lagde billederne
 * absolut oveni. Det virker kun hvis containeren rent faktisk får bredde af
 * sin forælder — og WooCommerces <a> kan være både inline og flex afhængigt
 * af tema og Elementor-kit. Var den flex, blev feltet krympet til billedets
 * min-content-bredde, og kortet endte som en 23px miniature.
 *
 * Nu ligger billederne i flowet med deres egen aspect-ratio, og de stables
 * i samme grid-celle. Så kommer højden fra billedet, uanset hvad forælderen
 * finder på. min-width forhindrer at en flex-forælder kan krympe feltet.
 */
.fst-kort__media {
	position: relative;
	display: grid;
	width: 100%;
	min-width: 100%;
	background: var(--fst-bone);
	overflow: hidden;
	margin-bottom: 12px;
}

.fst-kort__img {
	position: static;
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
	margin: 0;
	max-width: 100%;
}

/*
 * Det primære billede må aldrig dæmpes.
 *
 * Elementors kit sætter transition: all på billeder og kan lægge en
 * hover-opacity på. Vi låser den, så krydsfaden kun består i at billede to
 * toner ind ovenpå — ikke i at billede ét toner ud mod baggrunden.
 */
.fst-kort__img--primaer,
.fst-kort__media:hover .fst-kort__img--primaer {
	opacity: 1;
	filter: none;
	transition: none;
}

.fst-kort__img--sekundaer {
	opacity: 0;
	transition: opacity 0.35s ease-out;
}

/*
 * Krydsfade til billede nummer to. Vi skifter opacity frem for at udskifte
 * src med JavaScript — så er billedet allerede hentet når musen når frem.
 */
.fst-kort__media--hover:hover .fst-kort__img--sekundaer {
	opacity: 1;
}

/* Ingen ramme, ingen skygge, ingen radius — DESIGN.md afsnit 4. */
.woocommerce ul.products li.product a img {
	border: 0;
	box-shadow: none;
	margin: 0;
}

.woocommerce ul.products 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);
	color: var(--fst-ink);
	padding: 0;
	margin: 0 0 6px;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 13px;
	font-weight: 400;
	color: var(--fst-ink);
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	color: var(--fst-stone);
	opacity: 1;
	margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--fst-signal);
	text-decoration: none;
	font-weight: 400;
}

/* Stjernebedømmelse hører ikke til på kortet — den støjer i et rent grid. */
.woocommerce ul.products li.product .star-rating {
	display: none;
}


/* ========================================================= PRODUKTSIDEN == */

/*
 * Produktsiden bruger vores egen skabelon,
 * woocommerce/content-single-product.php. Strukturen er:
 *
 *   .fst-pdp
 *     .fst-pdp__top          <- afgrænser den klæbende kolonne
 *       .fst-pdp__media      <- billedgrid i to kolonner, scroller
 *       .fst-pdp__info       <- sticky, indeholder også handpicked
 *     .fst-pdp__sektioner    <- relaterede produkter, uden for top
 *
 * position: sticky afgrænses af sit FORÆLDREELEMENT. Derfor skal sektionerne
 * ligge uden for fst-pdp__top — ligger de indeni, klæber kolonnen videre ned
 * over dem.
 */
.fst-pdp {
	display: block;
}

.fst-pdp__top {
	display: grid;
	grid-template-columns: 1fr 620px;
	gap: 0;
	align-items: start;
}

.fst-pdp__media {
	position: relative;
	min-width: 0;
	background: var(--fst-bone);
}

/*
 * Fire klasser, ikke én.
 *
 * WooCommerce sætter selv .woocommerce div.product div.summary til
 * float: right og width: 48% — specificitet (0,3,2). En enkelt klasse taber,
 * og kolonnen blev presset ned til 48% af sin egen bredde, så teksten stod
 * med tre ord pr. linje. Vi lander her på (0,4,2) og vinder rent.
 */
.woocommerce div.fst-pdp div.summary.fst-pdp__info,
.fst-pdp__info {
	position: sticky;
	top: 88px;
	align-self: start;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 56px 48px 72px;
	min-width: 0;
}

@media (max-width: 1280px) {
	.fst-pdp__top {
		grid-template-columns: 1fr 500px;
	}

	.woocommerce div.fst-pdp div.summary.fst-pdp__info,
	.fst-pdp__info {
		padding: 40px 32px 56px;
	}
}

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

	.woocommerce div.fst-pdp div.summary.fst-pdp__info,
	.fst-pdp__info {
		position: static;
		padding: 32px var(--fst-gutter) 48px;
	}
}

/* ------------------------------------------------------- Billedgriddet --- */

/*
 * ALTID to kolonner.
 *
 * Ét billede fylder venstre halvdel, to står ved siden af hinanden, fire
 * bliver et 2x2-opslag. Lod vi ét billede fylde hele kolonnen, ville
 * produktsiden skifte layout alt efter hvor mange fotos der er lagt ind.
 */
.fst-galleri {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-content: start;
}

/*
 * Billedet er en <button>, så lightboxen kan åbnes med tastatur.
 * To klasser, fordi Elementors kit ellers sætter baggrund, padding og radius
 * på alle button-elementer.
 */
.fst-galleri .fst-galleri__item,
.fst-galleri .fst-galleri__item:hover,
.fst-galleri .fst-galleri__item:focus {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--fst-bone);
	aspect-ratio: 2 / 3;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;

	/*
	 * Tyndt plus som markør, tegnet som SVG i samme stregtykkelse som resten
	 * af ikonerne. Tallene 14 14 er markørens hotspot — plussets centrum.
	 * zoom-in er fallback hvis browseren afviser den brugerdefinerede markør.
	 */
	cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 7v14M7 14h14' stroke='%23111' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") 14 14, zoom-in;
}

.fst-galleri__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	will-change: transform;

	/*
	 * Zoompunktet sættes af produkt.js ud fra musens position, så billedet
	 * forstørres dér hvor markøren står — som en lup — i stedet for mod midten.
	 *
	 * transform-origin står med vilje IKKE i transition-erklæringen: den skal
	 * følge musen øjeblikkeligt, ellers slæber udsnittet bagefter markøren.
	 */
	transform-origin: var(--fst-ox, 50%) var(--fst-oy, 50%);

	/*
	 * Ingen forsinkelse på vej TILBAGE. Flytter musen væk, skal billedet
	 * falde på plads med det samme — en forsinkelse dér ville føles som træghed.
	 */
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: 0s;
}

/*
 * 0,2 sekunders pause før zoomet sætter i gang, så et strejf hen over
 * griddet ikke får fire billeder til at hoppe. Selve bevægelsen tager
 * 0,3 sekunder, så den glider frem for at springe.
 */
.fst-galleri .fst-galleri__item:hover .fst-galleri__img,
.fst-galleri .fst-galleri__item:focus-visible .fst-galleri__img {
	transform: scale(1.7);
	transition-delay: 0.2s;
}

/* Respektér at nogle brugere har slået bevægelse fra i systemet. */
@media (prefers-reduced-motion: reduce) {
	.fst-galleri__img {
		transition: none;
	}

	.fst-galleri .fst-galleri__item:hover .fst-galleri__img {
		transform: none;
	}
}

/* ---------------------------------------------------------- Lightbox ----- */

.fst-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fst-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.92);
}

body.fst-lightbox-aaben {
	overflow: hidden;
}

.fst-lightbox__figur {
	position: relative;
	margin: 0;
	padding: 40px;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fst-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 80px);
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: 0;
}

/* Knapperne skal ikke arve kittets knapstil — derfor to klasser. */
.fst-lightbox .fst-lightbox__luk,
.fst-lightbox .fst-lightbox__nav {
	position: absolute;
	z-index: 2;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--fst-paper);
	cursor: pointer;
	padding: 12px;
	line-height: 1;
	transition: opacity var(--fst-overgang);
}

.fst-lightbox .fst-lightbox__luk:hover,
.fst-lightbox .fst-lightbox__nav:hover {
	background: none;
	opacity: 0.6;
}

.fst-lightbox .fst-lightbox__luk {
	top: 16px;
	right: 20px;
	font-size: 34px;
}

.fst-lightbox .fst-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 52px;
	padding: 24px;
}

.fst-lightbox .fst-lightbox__nav--forrige {
	left: 8px;
}

.fst-lightbox .fst-lightbox__nav--naeste {
	right: 8px;
}

.fst-lightbox__taeller {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	letter-spacing: var(--fst-track);
	color: var(--fst-paper);
	opacity: 0.7;
}

@media (max-width: 767px) {
	.fst-lightbox__figur {
		padding: 16px;
	}

	.fst-lightbox__img {
		max-height: calc(100vh - 32px);
	}

	.fst-lightbox .fst-lightbox__nav {
		font-size: 38px;
		padding: 12px;
	}
}

/*
 * Ingen lup på en skærm man rører ved.
 *
 * hover: none rammer telefoner og tablets uanset bredde — en tablet i
 * landskab er over 767px og ville ellers beholde et zoom der kun kan
 * udløses af en mus. Reglen står uden for mobil-blokken med vilje.
 *
 * Markøren nulstilles samme sted: det tegnede plus er et musesigte, og på en
 * berøringsskærm er der ingen markør at vise det for.
 */
@media (hover: none) {
	.fst-galleri .fst-galleri__item:hover .fst-galleri__img,
	.fst-galleri .fst-galleri__item:focus .fst-galleri__img,
	.fst-galleri .fst-galleri__item:focus-visible .fst-galleri__img {
		transform: none;
		transition-delay: 0s;
	}

	.fst-galleri .fst-galleri__item,
	.fst-galleri .fst-galleri__item:hover,
	.fst-galleri .fst-galleri__item:focus {
		cursor: pointer;
	}
}

@media (max-width: 767px) {
	/*
	 * Galleriet bliver en swipe-karrusel med ét billede ad gangen.
	 *
	 * Før lå billederne under hinanden, og på et produkt med fem fotos skulle
	 * man rulle forbi over 2800px før man nåede pris og "læg i kurv". Nu
	 * fylder ét billede skærmens bredde, og resten ligger et swipe væk.
	 *
	 * grid-auto-flow: column med grid-auto-columns: 100% — ikke flexbox.
	 * Beholderen er allerede et grid på desktop, og så er det de samme to
	 * egenskaber der ændrer sig i stedet for hele layoutmodellen.
	 */
	.fst-galleri {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

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

	.fst-galleri .fst-galleri__item {
		aspect-ratio: 2 / 3;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.fst-galleri__prikker {
		display: flex;
	}
}

/*
 * Prikkerne findes kun på mobil. På desktop ligger billederne i et grid,
 * hvor der ikke er noget at navigere i.
 */
.fst-galleri__prikker {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 7px;
	padding: 14px 0 2px;
}

.fst-galleri .fst-galleri__prik,
.fst-galleri__prikker .fst-galleri__prik,
.fst-galleri__prikker .fst-galleri__prik:hover,
.fst-galleri__prikker .fst-galleri__prik:focus {
	width: 6px;
	height: 6px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: var(--fst-ash);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--fst-overgang);
}

.fst-galleri__prikker .fst-galleri__prik--aktiv {
	background: var(--fst-ink);
}

/* ------------------------------------- Handpicked inde i højrekolonnen --- */

/*
 * Ingen border-top her.
 *
 * Accordionens sidste punkt har allerede en bundlinje, så en overkant på
 * denne sektion gav to streger med luft imellem. Afstanden alene adskiller
 * de to blokke fint.
 */
.fst-pdp__info .fst-handpicked {
	padding: 0;
	margin-top: 40px;
	grid-column: auto;
}

.fst-pdp__info .fst-handpicked .fst-sektionstitel {
	text-align: left;
	margin: 0 0 16px;
}

/* Tre kort på række, med luft imellem — modsat arkivet, hvor de støder op. */
.fst-pdp__info .fst-handpicked__grid.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.fst-pdp__info .fst-handpicked__grid.products li.product {
	padding: 0;
	min-width: 0;
}

/* Kortene i arkivet har gutter-padding på teksten — her er der ikke plads. */
.fst-pdp__info .fst-handpicked__grid.products li.product .woocommerce-loop-product__title,
.fst-pdp__info .fst-handpicked__grid.products li.product .price {
	padding: 0;
}

/*
 * Mindre letterspacing end resten af sitet.
 *
 * 0.14em er rigtigt på et bredt produktkort, men i en 170px kolonne bryder
 * en titel som "Kjole Test 2" i tre linjer. 0.05em holder den på to.
 */
.fst-pdp__info .fst-handpicked__grid.products li.product .woocommerce-loop-product__title {
	font-size: 10px;
	letter-spacing: 0.05em;
	line-height: 1.45;
	margin-bottom: 4px;
}

.fst-pdp__info .fst-handpicked__grid.products li.product .price {
	font-size: 11px;
	letter-spacing: 0.02em;
}

.fst-pdp__info .fst-handpicked__grid.products .fst-kort__media {
	margin-bottom: 10px;
}

.fst-pdp__info .fst-handpicked__grid.products .fst-swatches {
	display: none;
}

/* Ingen hover-billedskift på de små kort — de er for små til at man ser det. */
.fst-pdp__info .fst-handpicked__grid.products .fst-kort__media--hover:hover .fst-kort__img--sekundaer {
	opacity: 0;
}

/* ------------------------------------------------------------ Sektioner -- */

.fst-pdp__sektioner {
	display: block;
	clear: both;
}

.woocommerce div.product .product_title {
	font-family: var(--fst-font-ui);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	margin: 0 0 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--fst-font-ui);
	font-size: 15px;
	font-weight: 400;
	color: var(--fst-ink);
	margin: 0 0 32px;
}

.woocommerce div.product p.price ins {
	background: none;
	color: var(--fst-signal);
	text-decoration: none;
}

.woocommerce div.product p.price del {
	color: var(--fst-stone);
	opacity: 1;
	margin-right: 8px;
}

/* ---------------------------------------------------- Variationsvælger --- */

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
}

.woocommerce div.product form.cart .variations tr {
	display: block;
	margin-bottom: 16px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart .variations label {
	margin-bottom: 8px;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: 11px;
	color: var(--fst-stone);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------------------------------------------------- Variant-swatches --- */

/*
 * Dropdownen skjules, men bliver liggende.
 *
 * Den er stadig formularens felt — swatchene skriver ind i den og udløser
 * change, så WooCommerces eget JavaScript kan passe sit arbejde. Fjernede vi
 * den, skulle vi selv matche variationer, skifte pris og låse knappen op.
 *
 * display: none på en select forhindrer ikke at værdien sendes med.
 */
.fst-variant__felt {
	display: none;
}

/*
 * Modelgruppe-rækken ligger uden for variationsformularen.
 *
 * Farven er et selvstændigt produkt, så den tegnes af temaet før formularen
 * i stedet for som en række i WooCommerces variations-tabel. Luften under
 * skal derfor sættes her — tabellen giver den ikke.
 */
.fst-variant--gruppe {
	margin: 0 0 24px;
}

.fst-variant__etiket {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-stone);
	margin: 0 0 8px;
}

/*
 * Swatchen kan være et <a> eller en <button>.
 *
 * I en modelgruppe er hver farve et andet produkt, altså et link. Er farven
 * en variation, er den en knap der skriver i formularen. Reglerne herunder
 * gælder begge dele — bortset fra to ting et link slæber med sig:
 * understregning, og den generelle hover-dæmpning fra base.css.
 */
.fst-variant a.fst-variant__knap,
.fst-variant a.fst-variant__knap:hover,
.fst-variant a.fst-variant__knap:focus {
	text-decoration: none;
	opacity: 1;
}

/* Uden et valg er der intet navn at vise — og så heller ingen luft. */
.fst-variant__navn:empty {
	display: none;
}

.fst-variant__navn {
	display: block;
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--fst-stone);
	margin: 0 0 10px;
}

.fst-variant__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fst-variant__punkt {
	margin: 0;
	padding: 0;
}

/*
 * To klasser på hver regel, og alle tilstande gentaget.
 *
 * Elementors kit styler ethvert button-element med baggrund, padding, radius
 * og en egen hover-farve. En enkelt klasse taber til .elementor-kit-XXX button
 * — det er den samme faldgrube der før gjorde "Size guide" til en sort kasse.
 */
.fst-variant .fst-variant__knap,
.fst-variant .fst-variant__knap:hover,
.fst-variant .fst-variant__knap:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--fst-overgang), background var(--fst-overgang), color var(--fst-overgang);
}

/* Tekst-swatch: størrelser og alt andet der ikke er en farve. */
.fst-variant .fst-variant__knap--tekst,
.fst-variant .fst-variant__knap--tekst:hover,
.fst-variant .fst-variant__knap--tekst:focus {
	min-width: 48px;
	height: 40px;
	padding: 0 12px;
	background: var(--fst-paper);
	border: 1px solid var(--fst-ash);
	font-family: var(--fst-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
}

.fst-variant .fst-variant__knap--tekst:hover {
	border-color: var(--fst-ink);
}

.fst-variant .fst-variant__knap--tekst.fst-variant__knap--valgt,
.fst-variant .fst-variant__knap--tekst.fst-variant__knap--valgt:hover {
	background: var(--fst-onyx);
	border-color: var(--fst-onyx);
	color: var(--fst-paper);
}

/*
 * Farve-swatch: firkantet, ikke rund.
 *
 * border-radius: 0 gælder hele sitet, og en rund prik her ville være det
 * eneste afrundede element på produktsiden.
 *
 * Rammen er nødvendig: hvid og creme forsvinder ellers ned i papirbaggrunden.
 */
.fst-variant .fst-variant__knap--farve,
.fst-variant .fst-variant__knap--farve:hover,
.fst-variant .fst-variant__knap--farve:focus {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--fst-ash);
}

/*
 * Markeringen ligger uden på swatchen, ikke ovenpå.
 *
 * outline med offset æder ikke af farvefladen — en indvendig ramme ville
 * gøre en mørk farve mindre og en lys farve utydelig.
 */
.fst-variant .fst-variant__knap--farve.fst-variant__knap--valgt,
.fst-variant .fst-variant__knap--farve.fst-variant__knap--valgt:hover {
	outline: 1px solid var(--fst-ink);
	outline-offset: 3px;
}

/*
 * Udsolgt i den valgte kombination.
 *
 * WooCommerce fjerner værdien fra sin egen select, og JavaScript spejler det
 * herned. Værdien bliver stående — man skal kunne se at farven findes, bare
 * ikke i den størrelse man har valgt. Skjulte vi den, ville rækken hoppe.
 */
.fst-variant .fst-variant__knap--utilgaengelig,
.fst-variant .fst-variant__knap--utilgaengelig:hover {
	cursor: not-allowed;
	border-color: var(--fst-ash);
}

.fst-variant .fst-variant__knap--tekst.fst-variant__knap--utilgaengelig,
.fst-variant .fst-variant__knap--tekst.fst-variant__knap--utilgaengelig:hover {
	background: var(--fst-paper);
	color: var(--fst-stone);
	text-decoration: line-through;
}

/*
 * Farven markeres med gennemsigtighed, ikke med en streg henover.
 *
 * Farvekoden står i en inline style på knappen, og den er skrevet som
 * background-genvejen. Genvejen nulstiller background-image, så en diagonal
 * streg fra stylesheetet ville aldrig blive tegnet — inline vinder. Og en
 * streg i én fast farve virker alligevel kun på halvdelen af farverne:
 * grå på sort er usynlig, grå på creme er umulig at se.
 */
.fst-variant .fst-variant__knap--farve.fst-variant__knap--utilgaengelig,
.fst-variant .fst-variant__knap--farve.fst-variant__knap--utilgaengelig:hover {
	opacity: 0.3;
}

/* Fingeren rammer bredere end musen. */
@media (hover: none) {
	.fst-variant .fst-variant__knap--farve,
	.fst-variant .fst-variant__knap--farve:hover {
		width: 36px;
		height: 36px;
	}

	.fst-variant .fst-variant__knap--tekst,
	.fst-variant .fst-variant__knap--tekst:hover {
		height: 44px;
	}
}

/*
 * Antalsfelt skjules — modetøj købes stykvis, og feltet fylder kun.
 *
 * !important er nødvendigt her, og kun her.
 *
 * WooCommerces add-to-cart-variation.js kalder .show() på .quantity i det
 * øjeblik en variant vælges, og jQuery skriver da style="display: block"
 * direkte på elementet. En inline style slår ethvert stylesheet, så uden
 * !important dukkede feltet op igen så snart man valgte en størrelse — kun på
 * variantprodukter, hvilket er dem alle sammen.
 *
 * Feltet bliver liggende i formularen med value="1", så ordren er uændret.
 */
.woocommerce div.product form.cart div.quantity {
	display: none !important;
}

.woocommerce div.product form.cart .button {
	width: 100%;
	margin: 0;
	padding: 20px 32px;
}

/*
 * Knappen skal se ens ud på enkle produkter og variantprodukter.
 *
 * Før en variant er valgt sætter WooCommerce klasserne .disabled og
 * .wc-variation-selection-needed på knappen, og WooCommerces eget stylesheet
 * har en regel på .button.alt.disabled — (0,4,1) — med lilla baggrund og
 * opacity 0.5. Vores egen .woocommerce button.button.alt er kun (0,3,1) og
 * tabte, så knappen stod lilla og halvgennemsigtig indtil man valgte størrelse.
 *
 * Selektorerne herunder lander på (0,6,3) og vinder i alle tilstande. Knappen
 * er stadig spærret — WooCommerce fanger klikket og beder om et valg — men den
 * ser ud som den skal.
 */
html .woocommerce div.product form.cart button.button.alt.disabled,
html .woocommerce div.product form.cart button.button.alt.disabled:hover,
html .woocommerce div.product form.cart button.button.alt.wc-variation-selection-needed,
html .woocommerce div.product form.cart button.button.alt.wc-variation-selection-needed:hover {
	background: var(--fst-onyx);
	color: var(--fst-paper);
	opacity: 1;
	cursor: pointer;
}

/*
 * Prisen på den valgte variant.
 *
 * WooCommerce gentager prisen inde i .single_variation når et valg er truffet.
 * Den skal se ud som prisen i toppen, ikke som en ny sektion.
 */
.woocommerce div.product form.cart .single_variation .price {
	display: block;
	margin: 0 0 20px;
	font-family: var(--fst-font-ui);
	font-size: 15px;
	font-weight: 400;
	color: var(--fst-ink);
}

.woocommerce div.product form.cart .woocommerce-variation-availability {
	font-size: 12px;
	color: var(--fst-stone);
}

/* ------------------------------- Linjen over add-to-cart ----------------- */

.fst-pdp__linje {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 16px 0;
	margin: 0 0 24px;
	border-top: 1px solid var(--fst-ash);
	border-bottom: 1px solid var(--fst-ash);
}

.fst-pdp__fragt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--fst-ink);
}

.fst-pdp__fragt .woocommerce-Price-amount {
	font-weight: 400;
}

/*
 * Ikonet må ikke skaleres af flex, og skal flugte optisk med teksten.
 *
 * color: inherit, ikke var(--fst-ink).
 *
 * Ikonerne tegnes med stroke="currentColor", og currentColor slår op i
 * ELEMENTETS EGEN color — ikke i forælderens. Stod der en fast farve her,
 * var den stærkere end alt hvad linket omkring ikonet måtte sige, og
 * ikonerne i den gennemsigtige header blev derfor ved med at være sorte
 * mens logo og menupunkter skiftede til hvidt.
 */
.fst-ikon {
	flex: 0 0 auto;
	display: block;
	color: inherit;
}

/*
 * body.fst-shop .fst-pdp__linje foran — (0,3,1).
 *
 * .fst-link i base.css er scopet til body.fst-shop og lander på (0,2,1).
 * En selektor på .fst-shop .fst-stoerrelsesguide er kun (0,2,0) og taber til
 * den, så knappen blev ved med at være display: block og ikonet faldt ned
 * under teksten.
 */
body.fst-shop .fst-pdp__linje .fst-stoerrelsesguide,
body.fst-shop .fst-pdp__linje .fst-stoerrelsesguide:hover,
.fst-pdp__linje .fst-stoerrelsesguide {
	display: inline-flex;
	align-items: center;
	width: auto;
	gap: 8px;
	margin: 0;
	padding: 0;
	text-decoration: none;
	white-space: nowrap;
}

/* Kun teksten understreges — ikke ikonet. */
body.fst-shop .fst-pdp__linje .fst-stoerrelsesguide span,
.fst-pdp__linje .fst-stoerrelsesguide span {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

@media (max-width: 480px) {
	.fst-pdp__linje {
		gap: 10px;
	}

	.fst-pdp__fragt {
		font-size: 11px;
	}
}

/* --------------------------------------------------------- Accordionen --- */

.fst-accordion {
	margin-top: 40px;
	border-top: 1px solid var(--fst-ash);
}

.fst-accordion__punkt {
	border-bottom: 1px solid var(--fst-ash);
}

/*
 * To klasser, ikke én.
 *
 * Elementors kit styler ALLE button-elementer med baggrund, padding og
 * border-radius. En enkelt klasse taber til .elementor-kit-XXX button, og
 * resultatet blev sorte, afrundede piller med usynlig tekst. Vi vinder på
 * specificitet frem for !important, så knappen stadig kan tilpasses senere.
 */
.fst-accordion .fst-accordion__knap,
.fst-accordion .fst-accordion__knap:hover,
.fst-accordion .fst-accordion__knap:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 20px 0;
	margin: 0;
	font-family: var(--fst-font-ui);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--fst-track);
	color: var(--fst-ink);
	cursor: pointer;
	text-align: left;
}

/* Tynd plus/minus, ikke chevron. */
.fst-accordion__ikon {
	position: relative;
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
}

.fst-accordion__ikon::before,
.fst-accordion__ikon::after {
	content: '';
	position: absolute;
	background: var(--fst-ink);
	transition: transform var(--fst-overgang);
}

.fst-accordion__ikon::before {
	top: 5px;
	left: 0;
	width: 11px;
	height: 1px;
}

.fst-accordion__ikon::after {
	top: 0;
	left: 5px;
	width: 1px;
	height: 11px;
}

.fst-accordion__punkt--aaben .fst-accordion__ikon::after {
	transform: scaleY(0);
}

/*
 * Åbne- og lukkeanimation uden JavaScript-højdemåling.
 *
 * grid-template-rows animeres fra 0fr til 1fr. Fordelen frem for max-height er
 * at der ikke skal gættes en maksimumhøjde: griddet kender indholdets rigtige
 * højde, så overgangen er lige lang uanset om teksten fylder to eller tolv linjer.
 *
 * Den indre wrapper skal have overflow: hidden — det er den der klippes.
 */
.fst-accordion__indhold {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fst-accordion__punkt--aaben .fst-accordion__indhold {
	grid-template-rows: 1fr;
}

.fst-accordion__indre {
	overflow: hidden;
	min-height: 0;
	/* 14px, ikke sitets 16. Accordionen er detaljer man slår op i, ikke
	   brødtekst man læser i ét stræk — se DESIGN.md. */
	font-size: 14px;
	line-height: 1.7;
	color: var(--fst-ink);
	opacity: 0;
	transition: opacity 0.25s ease-out;
}

/* Teksten toner ind lidt efter, så den ikke ses klippet under udfoldningen. */
.fst-accordion__punkt--aaben .fst-accordion__indre {
	opacity: 1;
	transition-delay: 0.1s;
}

.fst-accordion__indre > *:first-child {
	margin-top: 0;
}

.fst-accordion__indre > *:last-child {
	margin-bottom: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.fst-accordion__indhold,
	.fst-accordion__indre {
		transition: none;
	}
}

/* ------------------------------------------- Handpicked og relaterede --- */

/*
 * Kun de relaterede produkter ligger i fuld bredde nedenunder.
 * Handpicked er flyttet ind i højrekolonnen — se afsnittet om
 * .fst-pdp__info .fst-handpicked længere oppe.
 */
.fst-relaterede {
	padding: var(--fst-sektion-y) 0;
	border-top: 1px solid var(--fst-ash);
}

.fst-relaterede .fst-sektionstitel {
	text-align: left;
	padding: 0 var(--fst-grid-gap);
	margin-bottom: 20px;
}

/*
 * .woocommerce foran er nødvendig.
 *
 * Basisreglen for produktgriddet er .woocommerce ul.products — to klasser OG
 * et element, altså (0,2,1). En selektor på kun .fst-relaterede__grid.products
 * er (0,2,0) og taber, uanset at den står længere nede i filen. Med
 * .woocommerce foran lander vi på (0,3,1) og vinder rent.
 */
.woocommerce ul.products.fst-relaterede__grid,
.woocommerce-page ul.products.fst-relaterede__grid {
	grid-template-columns: repeat(5, 1fr);
	gap: var(--fst-grid-gap);
}

.woocommerce ul.products.fst-relaterede__grid li.product {
	padding-bottom: 20px;
}

@media (max-width: 1024px) {
	.woocommerce ul.products.fst-relaterede__grid,
	.woocommerce-page ul.products.fst-relaterede__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products.fst-relaterede__grid,
	.woocommerce-page ul.products.fst-relaterede__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================== WOOCOMMERCE-OPRYDNING === */

/*
 * WooCommerce' beskeder er som standard grå kasser med en farvet venstrekant
 * og en indbygget knap. De laves om til en enkelt linje med hårfin ramme.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--fst-bone);
	border: 0;
	border-top: 1px solid var(--fst-ink);
	color: var(--fst-ink);
	font-size: 13px;
	padding: 18px var(--fst-gutter);
	margin: 0 0 24px;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error {
	border-top-color: var(--fst-signal);
	color: var(--fst-signal);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	padding: 10px 20px;
	font-size: 11px;
}

/* Sideinddeling */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 48px 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--fst-font-ui);
	font-size: 12px;
	letter-spacing: var(--fst-track);
	padding: 10px 14px;
	background: none;
	color: var(--fst-stone);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: none;
	color: var(--fst-ink);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ============================================================= SWATCHES == */

/*
 * Swatchene er knapper, ikke prikker.
 *
 * Et klik skifter kortets billede til den farve — se assets/js/kort.js. De er
 * derfor rigtige button-elementer med to klasser foran, så Elementors kit
 * ikke lægger sin knapstil på dem.
 */
.fst-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

/*
 * WooCommerces clearfix må ikke blive et flex-element.
 *
 * `.woocommerce .products ul::before` har `content: " "` og `display: table`,
 * og vores swatch-liste ER et ul inde i .products. Pseudo-elementet blev
 * derfor et flex-element med bredde nul — og listens `gap: 6px` skubbede så
 * den første farveprik 6px til højre for titlen og prisen. Målt: 73,34 mod
 * tekstens 67,34.
 *
 * Nøjagtig samme fejl som i kassen 11. sep., hvor de samme pseudo-elementer
 * skubbede overskriften "Delivery" ud i midten.
 *
 * Selektoren skal have TO klasser og TO elementer: WooCommerces egen er
 * (0,2,1), og `.fst-swatches::before` alene er (0,1,0) og taber.
 */
li.product ul.fst-swatches::before,
li.product ul.fst-swatches::after {
	content: none;
}

.fst-swatches__punkt {
	margin: 0;
	display: block;
	line-height: 0;
}

.fst-swatches .fst-swatch,
.fst-swatches .fst-swatch:hover,
.fst-swatches .fst-swatch:focus {
	display: block;
	width: 13px;
	height: 13px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--fst-ash);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	/* Overgangen ligger på box-shadow, ikke på border — en ændret
	   rammetykkelse ville flytte prikken et halvt pixel. */
	transition: box-shadow var(--fst-overgang);
}

.fst-swatches .fst-swatch:hover {
	box-shadow: 0 0 0 1px var(--fst-stone);
}

/* Den valgte farve markeres med en ring udenom, ikke med en tykkere kant. */
.fst-swatches .fst-swatch--valgt,
.fst-swatches .fst-swatch--valgt:hover {
	box-shadow: 0 0 0 1px var(--fst-paper) inset, 0 0 0 1px var(--fst-ink);
}

/*
 * 24px tryk-mål på touch.
 *
 * Prikken forbliver 13px, men ::after strækker det klikbare område ud. 13px
 * er umuligt at ramme præcist med en finger, og WCAG anbefaler 24px minimum.
 */
@media (hover: none) {
	.fst-swatches {
		gap: 10px;
	}

	.fst-swatches .fst-swatch {
		position: relative;
	}

	.fst-swatches .fst-swatch::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px;
		height: 24px;
		transform: translate(-50%, -50%);
	}
}