/* HRW Maatwerk, onderdeel Zoeken: suggestielijst en uitwegen bij nul resultaten, in de huisstijl van hetrotterdamswarenhuis.nl */

.hrw-zk,
.hrw-zk-niks {
	--hrw-zk-green: var(--color-primary, #02922b);
	--hrw-zk-green-tint: #f1f9f3;
	--hrw-zk-grey: var(--color-quaternary, #e8eceb);
	--hrw-zk-line: #d4d4d4;
	--hrw-zk-muted: #5f6662;
	--hrw-zk-ink: var(--color-dark, #000);
	--hrw-zk-paper: var(--color-light, #fff);
	--hrw-zk-error: #b3261e;
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--hrw-zk-ink);
	box-sizing: border-box;
}

.hrw-zk *,
.hrw-zk-niks * {
	box-sizing: border-box;
}

/* ---------- zoekveld ----------
 * Naar het voorbeeld van Omoda (Wouter, 27 oktober 2026): een ronde, lichtgrijs gevulde balk zonder
 * zwarte rand, het vergrootglas links, rustige letter. SearchWP zet zijn opmaak (zwarte rand, 5px) op
 * het id van het formulier (`#searchwp-form-1 .swp-input`); `:is(#hrw-zk-veld, *)` geeft deze regels
 * het gewicht van een id zonder dat er een id hoeft te bestaan. 16px houdt iOS van inzoomen af.
 */

form:is(#hrw-zk-veld, *) input.hrw-zk-veld {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px 0 46px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #f1f3f2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px 50%;
	background-size: 20px 20px;
	box-shadow: none;
	outline: none;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: 0;
	color: #000;
	text-overflow: ellipsis;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

form:is(#hrw-zk-veld, *) input.hrw-zk-veld::placeholder {
	color: #5f6662;
	font-weight: 400;
	opacity: 1;
}

form:is(#hrw-zk-veld, *) input.hrw-zk-veld:hover {
	background-color: #e8eceb;
}

form:is(#hrw-zk-veld, *) input.hrw-zk-veld:focus {
	background-color: #fff;
	border-color: #000;
}

form:is(#hrw-zk-veld, *) input.hrw-zk-veld:focus-visible {
	box-shadow: 0 0 0 3px rgba(2, 146, 43, 0.25);
}

form:is(#hrw-zk-veld, *) input.hrw-zk-veld::-webkit-search-decoration,
form:is(#hrw-zk-veld, *) input.hrw-zk-veld::-webkit-search-cancel-button {
	/* Het kruisje van Chrome houdt ruimte vrij, ook bij een leeg veld: dan past de tekst niet op een telefoon. */
	-webkit-appearance: none;
	display: none;
}

@media (min-width: 1024px) {
	/* In de kop naast het logo: iets lager, gelijk met de iconen. */
	form:is(#hrw-zk-veld, *) input.hrw-zk-veld {
		height: 44px;
		line-height: 44px;
	}
}

/* ---------- suggestielijst ---------- */

.hrw-zk {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: min(100vw - 32px, 360px);
	/* Boven de gedimde laag en de navigatie van het thema. */
	z-index: 9999990;
	max-height: min(72vh, 600px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--hrw-zk-paper);
	border: 1px solid var(--hrw-zk-line);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	text-align: left;
	font-size: 14px;
	line-height: 1.35;
}

.hrw-zk[hidden] {
	display: none;
}

.hrw-zk__lijst {
	padding: 4px 0;
}

.hrw-zk__kop {
	padding: 10px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hrw-zk-muted);
}

.hrw-zk__melding {
	padding: 8px 14px;
	font-size: 13px;
	color: var(--hrw-zk-muted);
}

.hrw-zk__optie {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	color: var(--hrw-zk-ink);
	text-decoration: none;
	cursor: pointer;
}

.hrw-zk__optie:hover,
.hrw-zk__optie.is-actief {
	background: var(--hrw-zk-green-tint);
	color: var(--hrw-zk-ink);
	text-decoration: none;
}

.hrw-zk__optie.is-actief {
	box-shadow: inset 3px 0 0 var(--hrw-zk-green);
}

.hrw-zk__product {
	grid-template-columns: 48px minmax(0, 1fr) auto;
}

.hrw-zk__foto {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 6px;
	background: var(--hrw-zk-grey);
}

.hrw-zk__naam {
	min-width: 0;
	overflow-wrap: anywhere;
}

.hrw-zk__naam mark {
	background: none;
	color: var(--hrw-zk-green);
	font-weight: 700;
	padding: 0;
}

.hrw-zk__uitverkocht {
	display: block;
	font-size: 12px;
	color: var(--hrw-zk-error);
}

.hrw-zk__prijs {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hrw-zk__prijs s {
	font-weight: 400;
	color: var(--hrw-zk-muted);
}

.hrw-zk__aantal {
	font-size: 12px;
	color: var(--hrw-zk-muted);
	white-space: nowrap;
}

.hrw-zk__categorie .hrw-zk__naam,
.hrw-zk__service .hrw-zk__naam {
	font-weight: 600;
}

.hrw-zk__service .hrw-zk__naam {
	color: var(--hrw-zk-green);
}

.hrw-zk__alles {
	display: block;
	margin-top: 4px;
	border-top: 1px solid var(--hrw-zk-grey);
	padding: 12px 14px;
	font-weight: 600;
	color: var(--hrw-zk-green);
}

.hrw-zk__voet:empty {
	display: none;
}

.hrw-zk__voet {
	padding: 6px 14px;
	border-top: 1px solid var(--hrw-zk-grey);
	font-size: 11px;
	color: var(--hrw-zk-muted);
	font-variant-numeric: tabular-nums;
}

.hrw-zk__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.hrw-zk {
		max-height: 65vh;
		font-size: 15px;
	}
}

/* ---------- uitwegen bij nul resultaten ---------- */

.hrw-zk-niks {
	max-width: 960px;
	margin: 8px auto 32px;
	padding: 24px;
	background: var(--hrw-zk-green-tint);
	border-radius: 12px;
	text-align: left;
}

.hrw-zk-niks__kop {
	margin: 0 0 6px;
	font-size: 1.35rem;
	line-height: 1.25;
}

.hrw-zk-niks__uitleg {
	margin: 0 0 16px;
}

.hrw-zk-niks__producten {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 720px) {
	.hrw-zk-niks__producten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hrw-zk-niks__producten a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 10px;
	background: var(--hrw-zk-paper);
	border-radius: 8px;
	color: var(--hrw-zk-ink);
	text-decoration: none;
}

.hrw-zk-niks__producten img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.hrw-zk-niks__naam {
	font-weight: 600;
	font-size: 14px;
}

.hrw-zk-niks__prijs {
	font-size: 14px;
}

.hrw-zk-niks__service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.hrw-zk-niks__service a {
	padding: 4px 12px;
	border: 1px solid var(--hrw-zk-green);
	border-radius: 999px;
	color: var(--hrw-zk-green);
	text-decoration: none;
	font-size: 14px;
}

.hrw-zk-niks__alles {
	margin: 0;
}

.hrw-zk-niks__knop {
	display: inline-block;
	padding: 10px 18px;
	background: var(--hrw-zk-green);
	color: var(--hrw-zk-paper);
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.hrw-zk-niks__knop:hover,
.hrw-zk-niks__knop:focus-visible {
	color: var(--hrw-zk-paper);
	filter: brightness(1.08);
}

/* ---------- geintjes ("ajax") ---------- */

.hrw-zk__geintje,
.hrw-zk-geintje {
	--hrw-zk-rood: #d6001c;
	background: var(--hrw-zk-rood);
	color: #fff;
	font-weight: 700;
	transform-origin: left center;
	animation: hrw-zk-geintje 0.6s ease-out 1;
}

.hrw-zk__geintje {
	margin: 6px 10px 4px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
}

.hrw-zk-geintje {
	max-width: 960px;
	margin: 8px auto 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 1.05rem;
	line-height: 1.35;
}

@keyframes hrw-zk-geintje {
	0% { transform: rotate(0deg) scale(0.96); }
	25% { transform: rotate(-1.5deg) scale(1.02); }
	50% { transform: rotate(1.2deg); }
	75% { transform: rotate(-0.6deg); }
	100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hrw-zk__geintje,
	.hrw-zk-geintje {
		animation: none;
	}
}

/* Afwijzend vingertje in het zoekveld (geintje met een vervangende zoekterm). */
.hrw-zk-vinger {
	position: absolute;
	z-index: 9999991;
	width: 44px;
	height: 44px;
	font-size: 32px;
	line-height: 44px;
	text-align: center;
	pointer-events: none;
	transform-origin: 50% 90%;
	animation: hrw-zk-vinger-in 0.2s ease-out 1, hrw-zk-nee 0.28s ease-in-out 0.2s 6 alternate;
	transition: opacity 0.35s ease;
}

.hrw-zk-vinger::before {
	content: "\261D\FE0F";
}

.hrw-zk-vinger.is-weg {
	opacity: 0;
}

@keyframes hrw-zk-vinger-in {
	from { transform: scale(0.2); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

@keyframes hrw-zk-nee {
	from { transform: rotate(-24deg); }
	to { transform: rotate(24deg); }
}

/* ---------- eigen resultatenpagina ---------- */

.hrw-zk-pagina.is-laden {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

/* Aantal en sorteren van het thema horen bij de oude resultaten (ook het WordPress-blok Totaal, "29 resultaten gevonden"). */
.hrw-zk-eigen-resultaten .wp-block-query-total,
.hrw-zk-eigen-resultaten .wp-block-woocommerce-product-results-count,
.hrw-zk-eigen-resultaten .woocommerce-result-count,
.hrw-zk-eigen-resultaten .wp-block-woocommerce-catalog-sorting,
.hrw-zk-eigen-resultaten .woocommerce-ordering {
	display: none;
}

.hrw-zk-r {
	--hrw-zk-green: var(--color-primary, #02922b);
	--hrw-zk-green-tint: #f1f9f3;
	--hrw-zk-grey: var(--color-quaternary, #e8eceb);
	--hrw-zk-line: #d4d4d4;
	--hrw-zk-muted: #5f6662;
	--hrw-zk-ink: var(--color-dark, #000);
	--hrw-zk-paper: var(--color-light, #fff);
	--hrw-zk-error: #b3261e;
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--hrw-zk-ink);
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 4px 0 32px;
}

.hrw-zk-r * {
	box-sizing: border-box;
}

.hrw-zk-r__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.hrw-zk-r__aantal {
	margin: 0;
	font-weight: 600;
}

.hrw-zk-r__sorteer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.hrw-zk-r__sorteer select {
	font: inherit;
	padding: 6px 28px 6px 10px;
	border: 1px solid var(--hrw-zk-line);
	border-radius: 6px;
	background-color: var(--hrw-zk-paper);
}

.hrw-zk-r__filters {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	background: var(--hrw-zk-green-tint);
	border-radius: 10px;
}

.hrw-zk-r__groep {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.hrw-zk-r__groepkop {
	min-width: 74px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hrw-zk-muted);
}

.hrw-zk-r__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

@media (max-width: 600px) {
	.hrw-zk-r__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		max-width: 100%;
		padding-bottom: 4px;
	}
}

.hrw-zk-r__chip,
.hrw-zk-r__weg,
.hrw-zk-r__wis {
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	padding: 6px 12px;
	border: 1px solid var(--hrw-zk-line);
	border-radius: 999px;
	background: var(--hrw-zk-paper);
	color: var(--hrw-zk-ink);
	cursor: pointer;
	white-space: nowrap;
}

.hrw-zk-r__chip:hover {
	border-color: var(--hrw-zk-green);
}

.hrw-zk-r__chip.is-aan,
.hrw-zk-r__weg {
	background: var(--hrw-zk-green);
	border-color: var(--hrw-zk-green);
	color: var(--hrw-zk-paper);
}

.hrw-zk-r__wis {
	border-color: transparent;
	background: none;
	text-decoration: underline;
}

.hrw-zk-r__chip:focus-visible,
.hrw-zk-r__weg:focus-visible,
.hrw-zk-r__wis:focus-visible,
.hrw-zk-r__link:focus-visible,
.hrw-zk-r__knop:focus-visible {
	outline: 3px solid var(--hrw-zk-green);
	outline-offset: 2px;
}

.hrw-zk-r__vinkje {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}

.hrw-zk-r__actief {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.hrw-zk-r__melding {
	margin: 0;
	font-size: 14px;
	color: var(--hrw-zk-muted);
}

/* Raster en kaart komen van het thema (klassen in zoeken.js, THEMA). Hier alleen wat
   het thema niet kent: de gemarkeerde zoekwoorden in de naam. */
.hrw-zk-r__naam mark {
	background: none;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--hrw-zk-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	padding: 0;
}

.hrw-zk-r .hrw-zk-r__meerknop {
	display: inline-block;
	padding: 8px 16px;
	background: var(--hrw-zk-green);
	color: var(--hrw-zk-paper);
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.hrw-zk-r__meer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.hrw-zk-r__meer p {
	margin: 0;
	font-size: 14px;
	color: var(--hrw-zk-muted);
}

.hrw-zk-r__niks-kop {
	margin: 0;
	font-size: 1.35rem;
}

.hrw-zk-r__niks-uitleg {
	margin: 0;
}

.hrw-zk-r__service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.hrw-zk-r__service a {
	padding: 4px 12px;
	border: 1px solid var(--hrw-zk-green);
	border-radius: 999px;
	color: var(--hrw-zk-green);
	text-decoration: none;
	font-size: 14px;
}

/*
 * Het vervangende zoekformulier als SearchWP uit staat (1.35.1). De breedte kwam uit
 * het stijlbestand van SearchWP (search-forms.css), dat dan ook weg is: dezelfde regels,
 * alleen voor dit formulier. De breedte van het formulier zelf zet het thema (`.searchwp-form`).
 */
form.hrw-zk-formulier .swp-flex--col {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

form.hrw-zk-formulier .swp-flex--row {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: nowrap;
	align-items: stretch;
}

form.hrw-zk-formulier .searchwp-form-input-container {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: nowrap;
}

form.hrw-zk-formulier .searchwp-form-input-container .swp-input {
	width: 100%;
	margin: 0;
}