/**
 * Lokerse productzoek — shortcode [lokerse_search]
 */

/* Forceer parent menu-<li> om mee te groeien — de zoekbalk wordt door
   walker_nav_menu_start_el in een nav <li> geïnjecteerd, en de meeste
   thema's geven die <li> een vaste/krappe breedte. */
li:has(> form.lts-search),
li:has(> .lts-search),
.menu-item:has(.lts-search),
.nav-item:has(.lts-search) {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 320px !important;
}
@media (min-width: 1024px) {
	li:has(> form.lts-search),
	li:has(> .lts-search),
	.menu-item:has(.lts-search),
	.nav-item:has(.lts-search) {
		min-width: 520px !important;
	}
}

.lts-search {
	position: relative;
	display: block;
	width: 100% !important;
	max-width: none !important;
	min-width: 320px !important;
	font-family: inherit;
	direction: ltr !important;
	flex: 1 1 auto !important;
	box-sizing: border-box !important;
}
@media (min-width: 1024px) {
	.lts-search { min-width: 520px !important; }
}
@media (max-width: 720px) {
	.lts-search {
		max-width: 100% !important;
		min-width: 0 !important;
	}
	/* Mobiel menu: zoekbalk volle breedte, scherp (geen afgeronde hoeken),
	   en boven het assortiment-kopje (order: -1 als parent een flex/grid is). */
	li:has(> form.lts-search),
	li:has(> .lts-search),
	.menu-item:has(.lts-search),
	.nav-item:has(.lts-search) {
		min-width: 0 !important;
		width: 100% !important;
		order: -1 !important;
		padding: 12px 16px !important;
		margin: 0 0 8px 0 !important;
		box-sizing: border-box !important;
	}
	.lts-search .lts-search__inner,
	.lts-search__inner {
		border-radius: 0 !important;
		height: 44px !important;
	}
	.lts-search .lts-search__input,
	.lts-search__input {
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		line-height: 42px !important;
	}
}

.lts-search .lts-search__inner,
.lts-search__inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	background: #fff !important;
	border: 1px solid #d0d5dd !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	height: 38px !important;
	padding: 0 !important;
	direction: ltr !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lts-search__inner:focus-within {
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.lts-search .lts-search__input,
.lts-search__input {
	order: 1 !important;
	flex: 1 1 auto !important;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 8px 0 18px !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #222 !important;
	min-width: 0 !important;
	width: auto !important;
	height: 36px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	line-height: 36px !important;
	box-sizing: border-box !important;
}

.lts-search .lts-search__submit,
.lts-search__submit {
	order: 99 !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	background: transparent !important;
	border: 0 !important;
	color: #5f6368 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 6px 0 auto !important;
}
.lts-search__submit:hover { color: #1a73e8; }
.lts-search__submit svg { width: 18px; height: 18px; }

/* Dropdown — breder dan input zodat alle info goed past. */
.lts-search__results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 560px;
	max-width: 92vw;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0,0,0,.12);
	max-height: 480px;
	overflow-y: auto;
	z-index: 10000;
	padding: 8px;
}

.lts-search__results[hidden] { display: none; }

.lts-search .lts-search__item,
.lts-search__item {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 12px 16px !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: inherit !important;
	cursor: pointer !important;
	text-align: left !important;
}
.lts-search__item:hover,
.lts-search__item--active {
	background: #f5f7fb;
}

.lts-search__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: #f5f5f5;
	border-radius: 6px;
	object-fit: contain;
	display: inline-block;
}

.lts-search .lts-search__meta,
.lts-search__meta {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	text-align: left !important;
	align-items: flex-start !important;
	padding: 0 !important;
	margin: 0 !important;
}
.lts-search .lts-search__title,
.lts-search__title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
	line-height: 1.3 !important;
	overflow: hidden !important;
	word-break: break-word !important;
	text-align: left !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.lts-search .lts-search__sub,
.lts-search__sub {
	display: block !important;
	width: 100% !important;
	font-size: 12px !important;
	color: #9ca3af !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	text-transform: uppercase !important;
	letter-spacing: .4px !important;
	text-align: left !important;
	align-self: flex-start !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lts-search__price {
	flex-shrink: 0;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #1f2937;
	white-space: nowrap;
	margin-left: auto;
	padding-left: 16px;
	min-width: 110px;
	text-align: right;
	align-self: center;
}

/* Forceer dat ALLE genest-elementen (bdi, ins, span van WC) de container-
   font-size erven — zonder dit blaast WC of de theme de prijs op tot 36px+. */
.lts-search__price ins,
.lts-search__price bdi,
.lts-search__price span {
	text-decoration: none;
	background: transparent;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

/* Excl-prijs op één regel, vet, 16px (matcht container). */
.lts-search__price .lts-price-wrap { display: block; }
.lts-search__price .lts-price-excl {
	display: block;
	font-weight: 700;
	color: #1f2937;
}

/* Excl-suffix ("excl. btw") klein naast het bedrag. */
.lts-search__price .lts-price-excl__label,
.lts-search__price .woocommerce-price-suffix {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #6b7280 !important;
	margin-left: 4px;
}

/* Incl-blok klein eronder. Override de inheritance van hierboven. */
.lts-search__price .lts-price-incl {
	display: block;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	line-height: 1.35 !important;
	margin-top: 1px;
}
.lts-search__price .lts-price-incl .woocommerce-Price-amount,
.lts-search__price .lts-price-incl .woocommerce-Price-amount bdi,
.lts-search__price .lts-price-incl .woocommerce-Price-currencySymbol,
.lts-search__price .lts-price-incl .lts-price-incl__label {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
}
.lts-search__price del,
.lts-search__price del bdi {
	color: #9ca3af !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	margin-right: 6px;
	text-decoration: line-through;
}

.lts-search__empty,
.lts-search__loading {
	padding: 14px;
	font-size: 13px;
	color: #6b7280;
	text-align: center;
}

.lts-search__footer {
	border-top: 1px solid #eef0f3;
	padding: 10px 12px;
	font-size: 12px;
	color: #1a73e8;
	cursor: pointer;
	text-align: center;
	border-radius: 0 0 10px 10px;
	margin-top: 4px;
}
.lts-search__footer:hover { background: #f1f5fb; }

/* Mobile: dropdown gaat over de volle viewport-breedte minus marge en
   wordt fixed gepositioneerd zodat hij niet uit de header valt. */
@media (max-width: 720px) {
	.lts-search__results {
		position: fixed;
		top: auto;
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
		max-height: 70vh;
	}
	/* Mobiele opmaak via GRID (deterministisch): foto links over 2 rijen,
	   titel rechtsboven ernaast, prijs eronder in dezelfde kolom — links
	   uitgelijnd en kleiner.
	   LET OP: selectors MOETEN met `.lts-search`-prefix (specificiteit 0,2,0)
	   anders winnen de basis-regels `.lts-search .lts-search__item` van de
	   desktop-flex-layout (zelfde !important, maar specifieker). */
	.lts-search .lts-search__item,
	.lts-search__item {
		display: grid !important;
		grid-template-columns: 48px 1fr !important;
		grid-template-areas: "thumb meta" "thumb price" !important;
		column-gap: 12px !important;
		row-gap: 3px !important;
		align-items: start !important;
		padding: 10px 12px !important;
	}
	.lts-search .lts-search__thumb,
	.lts-search__thumb {
		grid-area: thumb !important;
		width: 48px !important;
		height: 48px !important;
		align-self: start !important;
		margin: 0 !important;
	}
	.lts-search .lts-search__meta,
	.lts-search__meta {
		grid-area: meta !important;
		min-width: 0 !important;
	}
	.lts-search .lts-search__title,
	.lts-search__title {
		font-size: 14px !important;
		-webkit-line-clamp: 2 !important;
	}
	.lts-search .lts-search__price,
	.lts-search__price {
		grid-area: price !important;
		margin: 0 !important;
		padding: 0 !important;
		min-width: 0 !important;
		width: auto !important;
		text-align: left !important;
		align-self: start !important;
		font-size: 12px !important;
		white-space: normal !important;
	}
	/* Het excl. € bedrag expliciet klein (12px) — anders blijft het de
	   prominente, grote regel. Inclusief alle WC-genest (bdi/span/amount). */
	.lts-search .lts-search__price .lts-price-excl,
	.lts-search .lts-search__price .lts-price-excl .woocommerce-Price-amount,
	.lts-search .lts-search__price .lts-price-excl .woocommerce-Price-amount bdi,
	.lts-search__price .lts-price-excl,
	.lts-search__price .lts-price-excl .woocommerce-Price-amount {
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
	}
	/* incl. nog kleiner eronder. */
	.lts-search .lts-search__price .lts-price-incl,
	.lts-search .lts-search__price .lts-price-incl .woocommerce-Price-amount,
	.lts-search__price .lts-price-incl,
	.lts-search__price .lts-price-incl .woocommerce-Price-amount {
		font-size: 10px !important;
		font-weight: 400 !important;
	}
	/* excl. + incl. compact naast elkaar op de prijs-regel. */
	.lts-search .lts-search__price .lts-price-wrap,
	.lts-search__price .lts-price-wrap {
		display: flex !important;
		align-items: baseline !important;
		gap: 8px !important;
		flex-wrap: wrap !important;
	}
	.lts-search .lts-search__price .lts-price-incl,
	.lts-search__price .lts-price-incl { margin-top: 0 !important; }
}