/**
 * HydroFyn Swatches
 *
 * Udseendet er bevidst holdt taet op ad de swatches, sitet har i dag, saa
 * skiftet fra Variation Swatches ikke bliver en visuel overraskelse for
 * kunderne. Farverne er sitets egne: blaa #436987 og groen #2b7553.
 */

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

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

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

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

.hf-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid #c9d3dc;
	border-radius: 6px;
	background-color: #fff;
	color: #1f2d3a;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* Uden en eksplicit farve arver knappen Elementor-kittets globale
   link-hover-farve, som paa dette site er pink/roed. !important er
   noedvendigt: kittet saetter farven med hoejere specificitet og indlaeses
   efter pluginets stylesheet. */
.hf-swatch:hover,
.hf-swatch:focus {
	border-color: #436987;
	background-color: #eef3f7;
	color: #1f2d3a !important;
}

.hf-swatch:focus-visible {
	outline: 2px solid #436987;
	outline-offset: 2px;
}

.hf-swatch.is-selected {
	border-color: #436987;
	background-color: #436987;
	color: #fff !important;
}

.hf-swatch.is-selected:hover,
.hf-swatch.is-selected:focus {
	border-color: #375a75;
	background-color: #375a75;
	color: #fff !important;
}

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

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

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

/* Vandret luft, saa chipsene ikke gaar helt ud til kortets kant. Maalt foer:
   blokken spaendte 0 til 302 px paa et 302 px bredt kort. */
/* Maalt: med 20 px padding var der kun 262 px tilbage paa et 302 px kort,
   og fire chips plus "+2"-knappen fylder ~278 px. De wrappede derfor stadig
   til to raekker, og kortet blev hoejere i stedet for lavere. 16 px giver
   stadig tydelig luft til kanten og plads til raekken. */
.hf-loop-swatches {
	margin: 6px 0 4px;
	padding: 0 14px;
}

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

.hf-swatches--few .hf-swatches__item {
	flex: 1 1 0;
	min-width: 72px;
}

.hf-swatches--loop .hf-swatch--block {
	width: 100%;
	flex-direction: column;
	gap: 1px;
	min-height: 46px;
	padding: 6px 6px;
	font-size: 13px;
	font-weight: 600;
}

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

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

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

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

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

.hf-loop-swatches__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #2b7553;
}

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

.hf-swatches--loop .hf-swatch {
	min-width: 38px;
	min-height: 28px;
	padding: 3px 8px;
	font-size: 13px;
}

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

/* Kompakt, saa den kan staa paa samme raekke som de fire chips. */
.hf-swatch--more {
	min-width: 30px;
	padding: 3px 6px;
	border-style: dashed;
	color: #436987;
	font-weight: 600;
}

.hf-swatch--more:hover,
.hf-swatch--more:focus {
	border-style: solid;
	background-color: #436987;
	color: #fff !important;
}

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

/* Kortet er kun 174 px bredt paa mobil, saa der er plads til tre. */
@media (max-width: 767px) {
	.hf-loop-swatches {
		padding: 0 12px;
	}

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

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

	.hf-swatches--few .hf-swatches__item {
		min-width: 58px;
	}

	.hf-swatches--loop .hf-swatch--block {
		min-height: 40px;
		padding: 4px 4px;
		font-size: 12px;
	}

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

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

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

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

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

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

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