/**
 * Site Search — header-overlay met live suggesties.
 *
 * Alle kleuren, spacing en maten staan als custom properties op .site-search,
 * zodat je ze op je eigen huisstijl kunt mappen. --header-offset kun je in je
 * theme op :root zetten; de default is 80px.
 */

.site-search {
	/* Kleuren */
	--ss-color-bg: #ffffff;
	--ss-color-text: #1c1c1c;
	--ss-color-muted: #6d6d6d;
	--ss-color-line: #d8d8d8;
	--ss-color-line-strong: #1c1c1c;
	--ss-color-chip-bg: #f4f4f4;
	--ss-color-chip-bg-hover: #e9e9e9;
	--ss-color-row-hover: #f7f7f7;
	--ss-color-focus: #1c1c1c;
	--ss-color-backdrop: rgba(0, 0, 0, 0.35);

	/* Spacing & maten.
	   --ss-space-xs/sm/md/lg stonden hier ook met eigen default-waarden,
	   maar style.css laadt na dit bestand en herdefinieert diezelfde vier
	   tokens nog eens op .site-search (sectie 34a) — gelijke specificiteit,
	   dus de latere regel wint altijd. Deze defaults hadden dus nooit
	   effect; wat er echt staat, staat in style.css. */
	--ss-thumb-size: 56px;
	--ss-chip-radius: 999px;
	--ss-panel-max-width: 64rem;

	/* Positionering */
	--ss-header-offset: var(--header-offset, 80px);
	/* dvh en niet vh: zolang het paneel open staat vergrendelt
	   `body.site-search-open` de paginascroll, dus de inklapbare toolbar
	   van een mobiele browser klapt nooit in. Met de grote viewport als
	   maat stak het paneel daar onder de toolbar door en bleven de
	   laatste rij en de link "Alle resultaten" onbereikbaar. */
	--ss-panel-max-height: calc(100vh - var(--ss-header-offset));
	--ss-panel-max-height: calc(100dvh - var(--ss-header-offset));
	--ss-z: 1000;

	/* Motion */
	--ss-duration: 220ms;
	--ss-ease: cubic-bezier(0.25, 0.7, 0.35, 1);

	position: relative;
	color: var(--ss-color-text);
}

/* ---------------------------------------------------------------------------
 * Screenreader-only (fallback als het theme deze class niet levert)
 * ------------------------------------------------------------------------- */

.site-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px; /* geen-schaal: randoverlap van het sr-only-patroon, geen ritmemaat */
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Toggle (summary)
 * ------------------------------------------------------------------------- */

.site-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	list-style: none;
	border-radius: 50%;
	color: currentColor;
	transition: background-color var(--ss-duration) var(--ss-ease);
}

.site-search__toggle::-webkit-details-marker {
	display: none;
}

.site-search__toggle::marker {
	content: "";
}

.site-search__toggle:hover {
	background-color: var(--ss-color-chip-bg);
}

.site-search__toggle:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--ss-color-focus));
	outline-offset: 2px;
}

.site-search__icon {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Backdrop
 * ------------------------------------------------------------------------- */

.site-search__backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--ss-z) - 1);
	background-color: var(--ss-color-backdrop);
	animation: site-search-fade-in var(--ss-duration) var(--ss-ease);
}

/* ---------------------------------------------------------------------------
 * Paneel
 * ------------------------------------------------------------------------- */

.site-search__panel {
	position: fixed;
	top: var(--ss-header-offset);
	left: 0;
	right: 0;
	z-index: var(--ss-z);
	max-height: var(--ss-panel-max-height);
	overflow-y: auto;
	background-color: var(--ss-color-bg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	padding: var(--ss-space-lg) var(--ss-space-md);
	animation: site-search-panel-in var(--ss-duration) var(--ss-ease);
}

.site-search__panel > * {
	max-width: var(--ss-panel-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* Soepel sluiten (class gezet door JS, wacht op transitionend) */

.site-search--closing .site-search__panel {
	transition: opacity var(--ss-duration) var(--ss-ease), transform var(--ss-duration) var(--ss-ease);
	opacity: 0;
	transform: translateY(-0.5rem);
}

.site-search--closing .site-search__backdrop {
	transition: opacity var(--ss-duration) var(--ss-ease);
	opacity: 0;
}

@keyframes site-search-panel-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes site-search-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Body-scroll-lock, class gezet door JS */

body.site-search-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Formulier
 * ------------------------------------------------------------------------- */

.site-search__field {
	display: flex;
	align-items: center;
	gap: var(--ss-space-sm);
	border-bottom: 1px solid var(--ss-color-line);
	transition: border-color var(--ss-duration) var(--ss-ease);
}

.site-search__field:focus-within {
	border-bottom-color: var(--ss-color-line-strong);
}

.site-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--ss-space-sm) 0;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--ss-color-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	appearance: none;
}

.site-search__input::placeholder {
	color: var(--ss-color-muted);
	opacity: 1;
}

.site-search__input:focus {
	outline: none; /* focus zichtbaar via de onderlijn van __field */
}

.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Deze twee knoppen staan binnen <header class="dg-header">, waar het
 * navigatiepakket een reset op button zet. Die reset staat daar sinds
 * de altitude-correctie op (0,1,0) — met :where() om het elementdeel
 * heen — dus een enkele klasse wint hier gewoon van. Eerder stond de
 * reset op (0,1,1) en moesten deze regels `button.`-selectors dragen om
 * er nog langs te komen; dat is niet meer nodig.
 */
.site-search__clear,
.site-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
	color: var(--ss-color-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	transition: color var(--ss-duration) var(--ss-ease), background-color var(--ss-duration) var(--ss-ease);
}

.site-search__clear {
	font-size: 1.5rem;
	line-height: 1;
}

/* search.js zet `hidden` op deze knop zolang het veld leeg is. Een
   auteur-`display` verslaat de regel `[hidden] { display: none }` van de
   browser, dus zonder deze guard bleef de wisknop zichtbaar, focusbaar
   en klikbaar terwijl er niets te wissen viel. cookies.css:51 vangt
   dezelfde valkuil al af. */
.site-search__clear[hidden] {
	display: none;
}

.site-search__clear:hover,
.site-search__submit:hover {
	color: var(--ss-color-text);
	background-color: var(--ss-color-chip-bg);
}

.site-search__clear:focus-visible,
.site-search__submit:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--ss-color-focus));
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Statusregel
 * ------------------------------------------------------------------------- */

.site-search__status {
	margin: var(--ss-space-sm) auto 0;
	font-size: 0.8125rem;
	color: var(--ss-color-muted);
	min-height: 1.25em;
}

/* ---------------------------------------------------------------------------
 * Populaire zoekopdrachten (chips)
 * ------------------------------------------------------------------------- */

.site-search__popular {
	margin-top: var(--ss-space-md);
}

.site-search__heading {
	margin: 0 0 var(--ss-space-sm);
	font-size: 0.75rem;
	/* 500 en niet 600: de merkgids zet 500 als plafond. De aftoplijst in
	   style.css somt de pakketkoppen op die dat moesten volgen, maar dit
	   blad print vóór style.css en die lijst staat op gelijke
	   specificiteit — hier stond dus 600 en daar bleef het bij. */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ss-color-muted);
}

.site-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ss-space-xs) var(--ss-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-search__chip {
	display: inline-block;
	padding: var(--ss-space-xs) var(--ss-space-md);
	font-size: 0.9375rem;
	color: var(--ss-color-text);
	text-decoration: none;
	background-color: var(--ss-color-chip-bg);
	border-radius: var(--ss-chip-radius);
	transition: background-color var(--ss-duration) var(--ss-ease);
}

.site-search__chip:hover {
	background-color: var(--ss-color-chip-bg-hover);
}

.site-search__chip:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--ss-color-focus));
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Resultaten (listbox)
 * ------------------------------------------------------------------------- */

.site-search__results {
	margin-top: var(--ss-space-md);
}

.site-search__results .site-search__heading {
	margin-top: var(--ss-space-md);
}

.site-search__option {
	display: flex;
	align-items: center;
	gap: var(--ss-space-sm);
	padding: var(--ss-space-xs) var(--ss-space-sm);
	margin: 0 calc(-1 * var(--ss-space-sm));
	color: var(--ss-color-text);
	text-decoration: none;
	border-radius: 0.25rem;
	transition: background-color var(--ss-duration) var(--ss-ease);
}

.site-search__option:hover,
.site-search__option.is-active {
	background-color: var(--ss-color-row-hover);
}

.site-search__option.is-active,
.site-search__option:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--ss-color-focus));
	outline-offset: -2px;
}

.site-search__option--category {
	padding-top: var(--ss-space-xs);
	padding-bottom: var(--ss-space-xs);
	font-size: 0.9375rem;
}

/* search.js bouwt de categorieregel met deze span; zelfde behandeling
   als de producttitel ernaast, anders oogt de rij vlakker. */
.site-search__category-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.site-search__option--product {
	padding-top: var(--ss-space-xs);
	padding-bottom: var(--ss-space-xs);
}

.site-search__thumb {
	flex: 0 0 auto;
	width: var(--ss-thumb-size);
	height: var(--ss-thumb-size);
	object-fit: cover;
	border-radius: 0.25rem;
	background-color: var(--ss-color-chip-bg);
}

.site-search__option-body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * display: block, anders doet de ellipsis hieronder niets.
 *
 * search.js print deze twee als <span> uit, en text-overflow geldt
 * alleen voor block containers. Op een inline doos werd de regel dus
 * genegeerd: een lange producttitel kapte niet af maar duwde het hele
 * zoekpaneel breder, met 107px horizontale overloop tot gevolg. De
 * ouder (.site-search__option-body) heeft al min-width: 0, dus zodra
 * deze twee blokken zijn kappen ze netjes af op de kolombreedte.
 */
.site-search__option-title {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-search__option-subtitle {
	display: block;
	font-size: 0.8125rem;
	color: var(--ss-color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-search__option-price {
	flex: 0 0 auto;
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* WooCommerce-prijs: doorgestreepte "van"-prijs iets dimmen */

.site-search__option-price del {
	color: var(--ss-color-muted);
	margin-right: 0.375em; /* geen-schaal: optische spatie, schaalt met de letter mee */
}

.site-search__option--all {
	justify-content: center;
	margin-top: var(--ss-space-sm);
	padding-top: var(--ss-space-sm);
	padding-bottom: var(--ss-space-sm);
	font-weight: 500;
	border-top: 1px solid var(--ss-color-line);
	/* Deze rij loopt met negatieve marges door tot de paneelrand, dus de
	   0.25rem van .site-search__option zou de uiteinden van de bovenlijn
	   en van de hovermarkering laten afbuigen. */
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Lege staat
 * ------------------------------------------------------------------------- */

.site-search__empty {
	padding: var(--ss-space-md) 0;
}

.site-search__empty-title {
	margin: 0 0 var(--ss-space-xs);
	font-weight: 500;
}

.site-search__empty-tip {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ss-color-muted);
}

/* ---------------------------------------------------------------------------
 * Mobiel: full-screen paneel
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.site-search__panel {
		top: 0;
		/* 100vh eerst: een browser zonder dvh laat de tweede regel vallen
		   en houdt de eerste. Zonder die terugval verviel `height` naar
		   auto en werd het paneel inhoudshoog. */
		height: 100vh;
		height: 100dvh;
		max-height: none;
		padding: var(--ss-space-md);
	}

	.site-search__input {
		font-size: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */

/* Geen eigen prefers-reduced-motion-blok meer: style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }` en dekt alles hier al. De kopieën liepen bovendien uit
   elkaar — sommige zetten `none`, andere 0.01ms — en omdat een gescopede
   selector met !important van de universele wint, vuurde transitionend
   binnen het ene pakket wél en binnen het andere niet. Scripts die op
   dat event wachten gedroegen zich daardoor per pagina anders. */