/**
 * HydroFyn Search
 *
 * Panelet daekker skaermens oeverste halvdel i fuld bredde. Det skal foeles
 * som en del af butikken, ikke som et fremmed lag: sitets egne farver, blaa
 * #436987 og groen #2b7553, og produktkort der ligner dem i kataloget.
 */

.hf-soeg-taeppe {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background-color: rgba(15, 23, 32, .45);
	animation: hf-soeg-ind .12s ease;
}

.hf-soeg {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99991;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #e2e8ee;
	background-color: #fff;
	box-shadow: 0 18px 48px rgba(31, 45, 58, .22);
	font-size: 14px;
	line-height: 1.35;
	color: #1f2d3a;
	animation: hf-soeg-ned .16s ease;
}

@keyframes hf-soeg-ned {
	from { transform: translateY(-12px); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

@keyframes hf-soeg-ind {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Kun det indre ruller. Uden overscroll-behavior ville en rulning i bunden
   fortsaette ned i siden bagved. */
.hf-soeg__indre {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 20px 18px;
	-webkit-overflow-scrolling: touch;
}

.hf-soeg__luk {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #7d8b99;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.hf-soeg__luk:hover,
.hf-soeg__luk:focus {
	background-color: #f1f5f8;
	color: #1f2d3a;
}

/* ---- Chips ---- */

.hf-soeg__chipsRaekke {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}

.hf-soeg__chipsTitel {
	flex: 0 0 auto;
	padding-top: 6px;
	min-width: 78px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8b98a5;
}

.hf-soeg__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.hf-soeg__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border: 1px solid #d9e2ea;
	border-radius: 999px;
	background-color: #fff;
	color: #436987 !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}

.hf-soeg__chip:hover,
.hf-soeg__chip:focus,
.hf-soeg__chip.is-valgt {
	border-color: #436987;
	background-color: #436987;
	color: #fff !important;
}

.hf-soeg__chipAntal {
	font-weight: 400;
	opacity: .65;
}

/* ---- Produktgitter ---- */

.hf-soeg__gitter {
	display: block;
}

.hf-soeg__overskrift {
	margin: 12px 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8b98a5;
}

.hf-soeg__kortBoks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.hf-soeg__kort {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px;
	border: 1px solid #eef2f6;
	border-radius: 10px;
	background-color: #fff;
	color: #1f2d3a !important;
	text-decoration: none !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.hf-soeg__kort:hover,
.hf-soeg__kort:focus,
.hf-soeg__kort.is-valgt {
	border-color: #cfdae4;
	box-shadow: 0 4px 14px rgba(31, 45, 58, .1);
	color: #1f2d3a !important;
}

/* 3:4 frem for kvadratisk. Det er samme staaende format som produktkortene i
   kataloget (302 x 400 px), og sortsbillederne er staaende motiver, der blev
   beskaaret haardt i en kvadratisk ramme. */
/* Baggrunden er hvid, ikke graa.
   Maalt 2026-09-10: en tredjedel af produktbillederne er PNG med
   gennemsigtighed. Med en graa ramme skinnede den igennem alt det
   gennemsigtige og lignede en graa kasse under motivet. Hvid smelter sammen
   med kortet, saa der ikke er nogen kant at se. */
.hf-soeg__billedramme {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	margin-bottom: 5px;
	border-radius: 7px;
	background-color: #fff;
	overflow: hidden;
}

/* Kilderne er overvejende kvadratiske (1024 x 1024, 272 x 272) med motivet
   centreret og luft omkring. cover fylder rammen, men luften foelger med;
   et let zoom spiser den uden at klippe motivet. */
.hf-soeg .hf-soeg__billede {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.08);
}

.hf-soeg__udsolgt {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background-color: rgba(154, 59, 59, .92);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.hf-soeg__maerke {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8b98a5;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* To linjer og saa punktum: et langt sortsnavn maa ikke goere kortene
   forskellige i hoejden. */
.hf-soeg__navn {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.hf-soeg__pris {
	margin-top: auto;
	padding-top: 3px;
	font-size: 12px;
	font-weight: 700;
	color: #2b7553;
}

/* ---- Fod ---- */

.hf-soeg__fod:empty {
	display: none;
}

.hf-soeg__alle {
	display: block;
	margin-top: 14px;
	padding: 12px 10px;
	border-radius: 9px;
	background-color: #436987;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
}

.hf-soeg__alle:hover,
.hf-soeg__alle:focus,
.hf-soeg__alle.is-valgt {
	background-color: #375a75;
	color: #fff !important;
}

/* ---- Tomme tilstande ---- */

.hf-soeg__tom {
	padding: 26px 8px 30px;
	text-align: center;
}

.hf-soeg__tomTitel {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 600;
}

.hf-soeg__tomHjaelp {
	margin: 0;
	font-size: 12px;
	color: #7d8b99;
}

.hf-soeg__henter {
	margin: 0;
	padding: 30px 8px;
	text-align: center;
	font-size: 12px;
	color: #8b98a5;
}

/* ---- Mobil ----
   Smallere kort, saa der stadig er to i bredden paa en 375 px skaerm, og
   chip-titlerne over deres raekke frem for ved siden af. */
@media (max-width: 600px) {
	/* Laas siden bagved, mens panelet er aabent. Kun paa mobil: paa desktop
	   ville rullebjaelken forsvinde og hele layoutet hoppe 15 px. */
	body.hf-soeg-aaben {
		overflow: hidden;
	}

	.hf-soeg__indre {
		padding: 12px 14px 16px;
	}

	.hf-soeg__chipsRaekke {
		flex-direction: column;
		gap: 4px;
	}

	.hf-soeg__chipsTitel {
		padding-top: 0;
		min-width: 0;
	}

	.hf-soeg__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.hf-soeg__chips::-webkit-scrollbar {
		display: none;
	}

	.hf-soeg__kortBoks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-soeg,
	.hf-soeg-taeppe {
		animation: none;
	}

	.hf-soeg__kort {
		transition: none;
	}
}