/*
 * Zoekresultaat-rij in de live dropdown van de Elementor Search-widget.
 * Markup komt uit haarmarkt-zoeken.php ([hm_zoekresultaat]), niet uit Elementor.
 * Kleuren volgen de Elementor-kit via var(), met hex-fallback voor als RUCSS
 * de kit-variabelen op een URL toch zou strippen.
 */

/* Elementor-wrappers rond de shortcode platslaan, anders houd je hun padding/gap. */
.e-search-results-list .e-loop-item > .e-con,
.e-search-results-list .e-loop-item > .e-con > .e-con-inner {
	padding: 0;
	gap: 0;
	border: 0;
}
.e-search-results-list .elementor-widget-shortcode,
.e-search-results-list .elementor-widget-shortcode > .elementor-widget-container,
.e-search-results-list .elementor-shortcode {
	margin: 0;
	padding: 0;
}
/* Subtiele scheiding tussen rijen, zonder met de hover-radius te vechten. */
.e-search-results-list > .e-loop-item + .e-loop-item {
	border-top: 1px solid #f1f1f1;
}

.e-search-results-list .hm-zr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}
.e-search-results-list .hm-zr:hover,
.e-search-results-list .hm-zr:focus-visible {
	background: rgba( 218, 176, 174, 0.18 );
	text-decoration: none;
}

.hm-zr__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
}
.hm-zr__thumb img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hm-zr__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* zonder dit knipt de titel niet af in een flex-rij */
}

.hm-zr__merk {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --e-global-color-accent, #777777 );
}

.hm-zr__naam {
	font-size: 14px;
	line-height: 1.3;
	color: var( --e-global-color-text, #464646 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hm-zr__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}
.hm-zr__prijs {
	font-size: 14px;
	font-weight: 700;
	color: var( --e-global-color-secondary, #0a0a0a );
}
.hm-zr__vanaf {
	font-size: 12px;
	font-weight: 400;
	color: var( --e-global-color-accent, #777777 );
}
.hm-zr__was {
	font-size: 12px;
	text-decoration: line-through;
	color: var( --e-global-color-accent, #777777 );
}
.hm-zr__uitverkocht {
	font-size: 11px;
	color: #b3261e;
}

@media (max-width: 767px) {
	.hm-zr { gap: 10px; padding: 8px 10px; }
	.hm-zr__thumb { flex-basis: 48px; width: 48px; height: 48px; }
	.hm-zr__naam { font-size: 13px; }
}

/* -------------------------------------------------------------------------
 * Breedte van de zoekbalk in de header (desktop + laptop).
 *
 * In Elementor staat de widget op "Size: none" (`--flex-grow:0; --flex-shrink:0`)
 * en is er GEEN breedte-regel, dus de balk krijgt de inhoudsbreedte van de input
 * (browser-default, ca. 220px). De `_element_custom_width` van 20,497% in de
 * template is een dood restant van een muis-resize in de editor: die control werkt
 * alleen als `_element_width` op "Custom" staat, en dat staat er niet.
 *
 * Waarom hier en niet in Elementor: de `condition` op `_element_custom_width` is
 * niet device-aware. Zet je desktop op "Custom", dan wordt de al aanwezige
 * `_element_custom_width_mobile: 60%` ineens ook actief en verandert mobiel mee.
 * Deze media query raakt tablet en mobiel gegarandeerd niet.
 *
 * TWEAKEN: alleen de max-width hieronder. `width:100%` zorgt dat de balk nooit
 * breder wordt dan zijn container (a909edf, 50% van de rechtergroep), dus hij
 * duwt de account/winkelwagen-iconen niet weg en krimpt netjes mee op laptops.
 * ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/*
	 * De container van de widget (a909edf) stond op 50% van de rechtergroep en dat
	 * was het echte plafond: `width:100%` op de widget kan nooit breder worden dan
	 * zijn container. Daarom verruimen we die eerst. Getarget via :has() in plaats
	 * van het element-id, zodat dit niet breekt als de header wordt gedupliceerd.
	 * `body` erbij voor specificiteit: Elementor's eigen regel is (0,3,0).
	 * 66% + de 33% van de iconen-container = 99%, dus de account/winkelwagen-iconen
	 * blijven staan waar ze staan.
	 */
	body .elementor-location-header .e-con:has( > .elementor-widget-search ) {
		--width: 66%;
	}
	.elementor-location-header .elementor-widget-search {
		width: 100%;
		max-width: 640px;
	}
}

/* -------------------------------------------------------------------------
 * "Bekijk alle resultaten"-knop onder de live resultaten.
 * Markup uit hm_zoek_alle_knop() in haarmarkt-zoeken.php. De knop is een grid-item
 * in .e-search-results-list (1 kolom), dus hij vult automatisch de volle breedte.
 * LET OP de selector-scope: de Elementor-kit zet
 * `.elementor-kit-53251 a{color:var(--e-global-color-primary)}` = (0,1,1). Een kale
 * `.hm-zr-alle` is (0,1,0) en verliest daarvan, en omdat die linkkleur TOEVALLIG ook
 * #DAB0AE is werd de tekst roze-op-roze. Vandaar het voorvoegsel
 * `.e-search-results-list` = (0,2,0), dat wint op aantal classes. Haal dat niet weg.
 *
 * Vlak = primary uit de kit (#DAB0AE), tekst wit op verzoek. Let op: wit op #DAB0AE
 * geeft een contrast van 1,96:1 — onder de WCAG-norm van 4,5:1. Wil je wit houden én
 * leesbaar zijn, dan moet het vlak donkerder (bv. secondary #0A0A0A, of een diepere
 * tint van de huisstijlkleur). Hover is al donker met witte tekst.
 * ---------------------------------------------------------------------- */
.e-search-results-list .hm-zr-alle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var( --e-global-color-primary, #dab0ae );
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.e-search-results-list .hm-zr-alle:hover,
.e-search-results-list .hm-zr-alle:focus-visible {
	background: var( --e-global-color-secondary, #0a0a0a );
	color: #ffffff;
	text-decoration: none;
}
.e-search-results-list .hm-zr-alle svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Twee weeffouten in de Elementor Search-widget rechtzetten.
 *
 * Oorzaak van beide: de widget heeft `--e-search-input-padding-inline-end: 0px`
 * (de Padding-control van het invoerveld in Elementor).
 *
 * 1. De clear-X staat op `position:absolute; inset-inline-end:
 *    var(--e-search-input-padding-inline-end)`. Met 0px plakt hij tegen de
 *    rechterrand en dus bovenop de vergrootglas-knop ernaast.
 *
 * 2. De rechter-padding van de input is
 *    `calc(padding-inline-end + --e-search-icon-clear-absolute-width + gap)`.
 *    Die middelste variabele zet het script INLINE op de gemeten breedte van de
 *    X (search.<hash>.bundle.js, updateInputStyle): 0px als het veld leeg is,
 *    ca. 12px zodra de X verschijnt. De padding sprong dus van 0 naar 16px zodra
 *    je begon te typen — het veld leek te groeien terwijl de knop ernaast bleef
 *    staan. Door de padding hier vast te zetten voor beide toestanden (met en
 *    zonder de class `no-icon-clear`) springt er niets meer.
 *
 * Specificiteit: de plugin gebruikt `.elementor-widget-search .e-search-input`
 * (0,2,0) en `....e-search-input.no-icon-clear` (0,3,0). Vandaar de extra
 * `.elementor-location-header` ervoor; de variabele zelf overschrijven zou niet
 * werken, want die staat in de Elementor-post-CSS op (0,3,0).
 * ---------------------------------------------------------------------- */
.elementor-location-header .elementor-widget-search .e-search-input-wrapper > svg {
	inset-inline-end: 12px;
}
.elementor-location-header .elementor-widget-search .e-search-input,
.elementor-location-header .elementor-widget-search .e-search-input.no-icon-clear {
	padding-inline-end: 32px;
}

/* -------------------------------------------------------------------------
 * Hoogte van de zoekbalk hard vastzetten.
 *
 * In rust is de balk 34px: de input heeft
 * `min-height: calc(padding-block-start + padding-block-end +
 * max(--e-search-icon-clear-size, --e-search-icon-label-size))` = 5 + 5 + max(12, 24).
 * Bij het aanklikken werd een element in de balk hoger terwijl de knop niet meebewoog.
 *
 * De oorzaak is NIET gevonden, en dat is onderzocht:
 *  - `.e-focus`, de enige class die het script bij focus toevoegt, komt in geen enkele
 *    frontend-CSS voor (65 gelinkte stylesheets + 17 inline <style>-blokken gescand;
 *    in Elementor's eigen bestanden staat hij alleen in de editor-CSS).
 *  - `updateInputStyle()`, het enige JS dat maten van het veld zet, draait alleen bij
 *    `onInit` en na `document.fonts.ready` — niet bij focus of typen.
 *  - Er is geen `height`/`min-height` met `!important` die de widget raakt.
 *  - `height: 34px` op de input alleen was niet genoeg, dus het groeiende element is
 *    de input niet.
 *
 * Daarom een grendel op ALLE onderdelen in plaats van een fix op de oorzaak. Met een
 * definitieve `height` + `max-height` (en box-sizing:border-box, dat geldt globaal)
 * kan geen padding- of min-height-berekening de balk nog oprekken, welk element het
 * ook probeert.
 *
 * BELANGRIJK: hier nooit `overflow: hidden` bij zetten. Het resultatenpaneel is een
 * absoluut gepositioneerd kind van .e-search-input-wrapper; zonder overflow-clipping
 * valt het gewoon buiten deze 34px en blijft de dropdown zichtbaar.
 *
 * TWEAKEN: één getal, --hm-zoekbalk-hoogte.
 * ---------------------------------------------------------------------- */
.elementor-location-header .elementor-widget-search {
	--hm-zoekbalk-hoogte: 34px;
}
.elementor-location-header .elementor-widget-search .e-search,
.elementor-location-header .elementor-widget-search .e-search-form,
.elementor-location-header .elementor-widget-search .e-search-input-wrapper,
.elementor-location-header .elementor-widget-search .e-search-label,
.elementor-location-header .elementor-widget-search .e-search-input,
.elementor-location-header .elementor-widget-search .e-search-submit {
	height: var( --hm-zoekbalk-hoogte );
	min-height: var( --hm-zoekbalk-hoogte );
	max-height: var( --hm-zoekbalk-hoogte );
}
.elementor-location-header .elementor-widget-search .e-search-form {
	align-items: stretch;
}
.elementor-location-header .elementor-widget-search .e-search-input,
.elementor-location-header .elementor-widget-search .e-search-submit {
	align-self: stretch;
}

/* -------------------------------------------------------------------------
 * De animatie bij het aanklikken van de zoekbalk uitzetten.
 *
 * Bug in de widget-CSS: `--e-search-input-transition` is `0.3s`, een kale duur
 * zonder property-naam. In de transition-shorthand betekent dat
 * `transition-property: all`. Gevolg:
 *
 *   .e-search-input        { transition: padding-inline 0s }              <- in rust
 *   .e-search-input:focus  { transition: var(--e-search-input-transition) } <- all 0.3s
 *
 * In rust onderdrukt Elementor dus bewust het animeren van de padding-sprong,
 * maar zodra je klikt wordt die regel vervangen door `all 0.3s` en animeert
 * precies datgene wat ze wilden onderdrukken — 0,3 seconde lang, terwijl de
 * vergrootglas-knop ernaast stil blijft staan. `.e-search-input-wrapper` heeft
 * dezelfde `all 0.3s`, daar zelfs permanent.
 *
 * Oplossing: de transition beperken tot eigenschappen die de layout niet raken.
 * Kleurovergangen blijven dus werken, maar afmetingen springen direct.
 * ---------------------------------------------------------------------- */
.elementor-location-header .elementor-widget-search .e-search-input,
.elementor-location-header .elementor-widget-search .e-search-input:focus,
.elementor-location-header .elementor-widget-search .e-search-input-wrapper {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}