/* WallCatcher Winkel, onderdeel Header (proef)
 *
 * Alles hangt aan body.wcw-header. Die klasse zet de plugin alleen als het
 * onderdeel aan staat (in de proef: met ?header=nieuw). Zonder die klasse doet
 * dit bestand niets.
 *
 * Kleuren: menukoppen #444 (Inter 15px/600). GEEN terracotta (#C4622D): die
 * kleur is alleen voor in winkelmand, afrekenen en betalen (Dennis, 21 sept).
 * Het rondje op het tasje is daarom donkergrijs.
 */

:root {
	--wcw-tekst: #444;
	--wcw-tekst-donker: #111;
	--wcw-rondje: #2b2b2b;
	--wcw-lijn: #e6e6e6;
	--wcw-zacht: #f6f5f2;
	--wcw-salie: #9aa285;
}

/* ── De oude onderdelen weg ─────────────────────────────────────────── */

body.wcw-header .wc-topbar,
body.wcw-header #menu-hoofdmenu > li.is-menu,
body.wcw-header .logo-mark {
	display: none !important;
}

/* Het thema zet .is_stuck op de menurij zodra die de bovenkant raakt. Omdat de
   header 48px omhoog staat, is dat hier altijd zo, en dan verschijnen het
   kleine plak-logo (.logo-mark, hierboven weg) en een schaduwlijn onder de
   menurij. De header heeft zelf al een schaduw. */
body.wcw-header .col-full-nav.is_stuck {
	box-shadow: none !important;
}

/* De header zat onder de topbar (desktop 45px, telefoon 32px). Die ruimte
   komt uit Extra CSS (body padding-top) en uit vaste top-waarden van het
   thema. Gemeten 21 sept:
     desktop  #masthead fixed top 0, pt 20; .main-header (groen) 20-48;
              body padding-top 180px
     telefoon .main-header fixed top 32px (logo + hamburger, 57px hoog);
              #masthead fixed top 65px, 17px hoog, ligt eronder;
              body padding-top 80px */
@media (min-width: 993px) {
	body.wcw-header #masthead {
		top: -48px !important; /* ook de 3px groen van .main-header weg */
	}

	/* Header is 175 - 48 = 127px hoog. "html" ervoor, anders wint de regel
	   body.home { padding-top: 160px !important } uit Extra CSS (gelijke
	   specificiteit, staat later) en valt er een grijze strook onder de header. */
	html body.wcw-header {
		padding-top: 127px !important;
	}
}

@media (max-width: 992px) {
	body.wcw-header .main-header {
		top: 0 !important;
	}

	body.wcw-header #masthead {
		top: 40px !important;
	}

	body.wcw-header {
		padding-top: 57px !important;
	}
}

/* ── Iconen, gedeeld ────────────────────────────────────────────────── */

.wcw-iconen {
	display: none;
	align-items: center;
	gap: 6px;
}

.wcw-icoon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	margin: 0;
	border: 0;
	background: none;
	color: var(--wcw-tekst);
	font: 600 15px/1 Inter, "Open Sans", Arial, sans-serif;
	letter-spacing: -0.1px;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease;
}

.wcw-icoon:hover,
.wcw-icoon:focus-visible {
	color: var(--wcw-tekst-donker);
}

.wcw-icoon svg {
	width: 23px;
	height: 23px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wcw-aantal {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--wcw-rondje);
	color: #fff;
	font: 700 11px/17px Inter, Arial, sans-serif;
	text-align: center;
}

.wcw-aantal[hidden] {
	display: none !important;
}

/* ── Computer ───────────────────────────────────────────────────────── */

/* Gemeten op 21 sept (logo 272px, menu 731px zonder Ivory Search):
 *   1210+       alles past; het menu schuift zoveel op als de iconen breed zijn
 *   1100-1209   logo 170px
 *   1025-1099   logo 170px, HOME weg (het logo linkt al naar home), menu 14px
 *   993-1024    menu op een eigen regel onder het logo; iconen naast het logo
 *   993-1023    het thema toont hier GEEN menu en GEEN hamburger (al zo vóór de
 *               proef, apart oplossen); de iconen staan in het menu en dus ook weg
 * Onder 1366px zonder het woord "Zoeken". Schermen tussen 993 en 1210px zijn
 * 4,7% van de computerbezoeken (GA4, jun-sep 2026, zonder Direct).
 */
@media (min-width: 993px) {
	/* De menurij is een container van max. 1170px in het midden; het logo
	   staat op 20px van de schermrand. De iconen spiegelen dat: 20px van de
	   rechterrand. Het menu krijgt alleen zoveel ruimte rechts als nodig is
	   om niet tegen de iconen te lopen (op 1920px: geen). */
	/* Niet position: relative op dit blok zetten: het megamenu rekent zijn
	   breedte uit vanaf het dichtstbijzijnde element met een positie. Dat moet
	   de hele header blijven (#masthead), anders wordt het uitklapmenu zo breed
	   als het menu en valt de eerste kolom buiten het witte vlak. De iconen
	   hangen daarom aan #masthead (fixed). */
	body.wcw-header .shoptimizer-primary-navigation {
		--wcw-buiten: calc((100vw - 1170px) / 2);
		padding-right: max(0px, calc(var(--wcw-ruimte, 230px) - var(--wcw-buiten))) !important;
	}

	body.wcw-header .wcw-iconen--desktop {
		display: flex;
		position: absolute;
		/* #masthead begint op -48px; het midden van de menutekst ligt op 62px
		   in beeld, dus 110px binnen #masthead (gemeten 21 sept, 1440-2056px) */
		top: 110px;
		right: 20px;
		transform: translateY(-50%);
		z-index: 20;
	}
}

@media (min-width: 993px) and (max-width: 1365px) {
	body.wcw-header .shoptimizer-primary-navigation {
		--wcw-ruimte: 170px;
	}

	body.wcw-header .wcw-iconen--desktop .wcw-zoek-open span {
		display: none;
	}
}

@media (min-width: 993px) and (max-width: 1209px) {
	body.wcw-header .custom-logo-link img {
		max-width: 170px !important;
		height: auto !important;
	}

	/* Smaller dan de container van 1170px: de spiegelformule hierboven
	   geeft dan te veel ruimte en duwt het menu over het logo. Vast 150px. */
	body.wcw-header .shoptimizer-primary-navigation {
		padding-right: 150px !important;
	}
}

@media (min-width: 993px) and (max-width: 1099px) {
	body.wcw-header #menu-hoofdmenu > li:first-child {
		display: none !important;
	}

	body.wcw-header #menu-hoofdmenu > li > a {
		font-size: 14px !important;
	}
}

/* 993-1024 (iPad liggend): het thema zet het menu hier op een eigen regel
   onder het logo. De header stond op 65px maar de inhoud begon op 80px, zodat
   ruim 100px pagina onder de header viel (al zo vóór de proef). Nu: logo en
   iconen op de eerste rij, menu over de hele breedte eronder.
   .main-header (logo) op 0, #masthead (menu) 33px lager, zoals het thema het
   onderling had. */
@media (min-width: 993px) and (max-width: 1024px) {
	body.wcw-header .main-header {
		top: 0 !important;
	}

	body.wcw-header #masthead {
		top: 33px !important;
	}

	html body.wcw-header {
		padding-top: 140px !important;
	}

	body.wcw-header .shoptimizer-primary-navigation {
		padding-right: 0 !important;
	}

	/* ankerpunt is nu #masthead (fixed, op 33px); logo-rij midden ~y43 */
	body.wcw-header .wcw-iconen--desktop {
		top: -12px;
		transform: none;
	}
}

/* ── Telefoon en tablet ─────────────────────────────────────────────── */

@media (max-width: 992px) {
	/* .main-header is hier position: fixed en dient zo als ankerpunt. */
	body.wcw-header .wcw-iconen--mobiel {
		display: flex;
		position: absolute;
		top: 50%;
		right: 46px;
		transform: translateY(calc(-50% - 4px)); /* gelijk met de hamburger */
		gap: 0;
		z-index: 120; /* .site-branding heeft een witte achtergrond en z-index 110 */
	}

	body.wcw-header .wcw-iconen--mobiel .wcw-icoon {
		padding: 0;
	}

	/* Menu open: het thema schuift de header omhoog en de iconen half uit
	   beeld. Zoeken en winkelmand staan dan in het menu zelf (hieronder). */
	body.wcw-header.mobile-toggled .wcw-iconen--mobiel {
		display: none;
	}

	/* Menu open: het thema schuift #masthead 33px omhoog (transform). Wij
	   hadden hem op 40px gezet, dus bleef er 7px kier bovenin. */
	body.wcw-header.mobile-toggled #masthead {
		top: 33px !important;
	}

	body.wcw-header.mobile-toggled .wcw-menu-sluit {
		display: inline-flex;
	}
}

.wcw-menu-sluit {
	display: none;
	/* fixed: .main-header is 0px hoog als het menu open is; het logo-vlak
	   (.site-branding) staat vast op 0-57px, midden op 28,5px */
	position: fixed;
	top: 6px;
	right: 8px;
	z-index: 10000; /* boven de header (9997) en het menu */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none !important;
	color: #222;
	cursor: pointer;
}

.wcw-menu-sluit svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

/* ── In het uitklapmenu (alleen telefoon en tablet) ─────────────────── */

.wcw-menu-zoek,
.wcw-menu-extra {
	display: none;
}

@media (max-width: 992px) {
	body.wcw-header .wcw-menu-zoek {
		display: block;
		padding: 4px 20px 12px;
	}

	.wcw-menu-zoekveld {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 48px;
		padding: 0 16px;
		border: 1px solid var(--wcw-lijn);
		border-radius: 24px;
		background: var(--wcw-zacht);
		color: #777;
		font: 400 15px/1.2 Inter, "Open Sans", Arial, sans-serif;
		text-align: left;
		cursor: text;
	}

	.wcw-menu-zoekveld svg,
	.wcw-menu-extra svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	body.wcw-header .wcw-menu-extra {
		display: block;
		margin: 16px 0 0;
		padding: 8px 0 24px;
		list-style: none;
		border-top: 1px solid var(--wcw-lijn);
	}

	.wcw-menu-extra li {
		margin: 0;
		list-style: none;
	}

	.wcw-menu-extra a {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 48px;
		padding: 0 24px;
		color: #222;
		font: 400 16px/1.2 Inter, "Open Sans", Arial, sans-serif;
		text-decoration: none;
	}

	.wcw-aantal-tekst {
		margin-left: auto;
		min-width: 22px;
		height: 22px;
		padding: 0 7px;
		border-radius: 11px;
		background: var(--wcw-rondje);
		color: #fff;
		font: 700 12px/22px Inter, Arial, sans-serif;
		text-align: center;
	}

	.wcw-aantal-tekst[hidden] {
		display: none !important;
	}
}

/* ── Zoeken ─────────────────────────────────────────────────────────── */

/* Computer: de balk staat IN de header, van het einde van het menu tot aan
   het accounticoon; header.js zet --wcw-l, --wcw-b en --wcw-t (links, breedte,
   midden) en --wcw-kop (onderkant van de header). Het paneel met suggesties
   valt direct onder de header, de pagina daaronder wordt iets gedimd. Het
   menu blijft zichtbaar en bruikbaar. */

.wcw-zoeken {
	display: none;
	font-family: Inter, "Open Sans", Arial, sans-serif;
}

.wcw-zoeken.is-open {
	display: block;
}

.wcw-zoeken__form {
	display: flex;
	align-items: center;
	margin: 0;
}

.wcw-zoeken__form svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wcw-zoeken__knop,
.wcw-zoeken__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: none !important;
	color: var(--wcw-tekst);
	cursor: pointer;
	box-shadow: none !important;
}

.wcw-zoeken__knop:hover,
.wcw-zoeken__sluit:hover {
	color: var(--wcw-tekst-donker);
}

.wcw-zoeken__veld {
	flex: 1;
	min-width: 0;
	height: 44px;
	margin: 0 !important;
	padding: 0 4px !important; /* het thema zet links 45px voor een eigen icoon */
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wcw-tekst-donker);
	font: 400 16px/1.2 Inter, "Open Sans", Arial, sans-serif;
	-webkit-appearance: none;
	appearance: none;
}

.wcw-zoeken__veld:focus {
	outline: none;
}

.wcw-zoeken__veld::-webkit-search-cancel-button {
	display: none;
}

.wcw-zoeken__veld::placeholder {
	color: #8a8a8a;
	opacity: 1;
}

@media (min-width: 993px) {
	.wcw-zoeken__achter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--wcw-kop, 127px);
		z-index: 9990;
		background: rgba(20, 20, 20, .28);
	}

	.wcw-zoeken__form {
		position: fixed;
		z-index: 10001; /* boven #masthead (9997) */
		left: var(--wcw-l, 60%);
		top: var(--wcw-t, 62px);
		width: var(--wcw-b, 400px);
		height: 46px;
		transform: translateY(-50%);
		padding: 0 4px 0 2px;
		border: 1px solid #d9d8d2;
		border-radius: 23px;
		background: var(--wcw-zacht);
	}

	.wcw-zoeken__form:focus-within {
		border-color: var(--wcw-salie);
		background: #fff;
	}

	.wcw-zoeken__form .wcw-zoeken__knop,
	.wcw-zoeken__form .wcw-zoeken__sluit {
		width: 40px;
		height: 40px;
	}

	.wcw-zoeken__paneel {
		position: fixed;
		z-index: 9991;
		left: 0;
		right: 0;
		top: var(--wcw-kop, 127px);
		max-height: calc(100vh - var(--wcw-kop, 127px) - 24px);
		overflow-y: auto;
		background: #fff;
		border-top: 1px solid #eee;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
	}

	html.wcw-zoeken-open #menu-hoofdmenu > li.wcw-onder-balk {
		visibility: hidden;
	}

	/* De knop "Zoeken" valt onder de balk; zo blijft hij niet doorschemeren */
	html.wcw-zoeken-open .wcw-iconen--desktop .wcw-zoek-open {
		visibility: hidden;
	}
}

/* Telefoon en tablet: schermvullend, balk bovenaan, lijst eronder. */
@media (max-width: 992px) {
	.wcw-zoeken {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wcw-zoeken__achter {
		display: none;
	}

	.wcw-zoeken__form {
		position: sticky;
		top: 0;
		z-index: 2;
		gap: 4px;
		padding: 10px 8px 10px 12px;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.wcw-zoeken__form .wcw-zoeken__veld {
		height: 46px;
		padding: 0 14px !important;
		border: 1px solid #d9d8d2 !important;
		border-radius: 23px;
		background: var(--wcw-zacht) !important;
		font-size: 16px; /* 16px: anders zoomt iOS in */
	}

	.wcw-zoeken__form .wcw-zoeken__knop {
		order: 2;
	}

	.wcw-zoeken__form .wcw-zoeken__sluit {
		order: 3;
	}

	html.wcw-zoeken-open,
	html.wcw-zoeken-open body {
		overflow: hidden;
	}

	/* De chatknop (Click to Chat, z-index 99999999) ligt anders over de
	   zoekresultaten heen. */
	html.wcw-zoeken-open #ht-ctc-chat {
		display: none !important;
	}
}

/* ── Paneel met suggesties ──────────────────────────────────────────── */

.wcw-zp {
	max-width: 1170px;
	margin: 0 auto;
	padding: 26px 20px 30px;
	color: var(--wcw-tekst);
	font-size: 15px;
	line-height: 1.4;
}

.wcw-zp:empty {
	display: none;
}

.wcw-zp__raster {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 48px;
}

.wcw-zp__kop {
	margin: 0 0 10px;
	color: #888;
	font: 600 12px/1.3 Inter, Arial, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wcw-zp__blok + .wcw-zp__blok {
	margin-top: 24px;
}

.wcw-zp__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcw-zp__lijst li {
	margin: 0;
	list-style: none;
}

.wcw-zp a {
	color: inherit;
	text-decoration: none;
}

.wcw-zp__regel {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: 6px;
	color: #333 !important;
}

.wcw-zp__regel b {
	font-weight: 600;
	color: #111;
}

.wcw-zp__regel small {
	color: #999;
	font-size: 13px;
}

.wcw-optie.is-actief,
.wcw-zp__regel:hover {
	background: var(--wcw-zacht);
}

.wcw-zp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcw-zp__chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--wcw-lijn);
	border-radius: 20px;
	color: var(--wcw-tekst) !important;
	font-size: 14px;
	white-space: nowrap;
}

.wcw-zp__chip:hover,
.wcw-zp__chip.is-actief {
	border-color: var(--wcw-salie);
	background: #fff;
	color: var(--wcw-tekst-donker) !important;
}

.wcw-zp__producten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.wcw-zp__product {
	display: block;
	margin: -6px;
	padding: 6px;
	border-radius: 8px;
}

.wcw-zp__product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	background: var(--wcw-zacht);
}

.wcw-zp__naam {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #222;
	font-size: 14px;
	line-height: 1.35;
}

.wcw-zp__naam b {
	font-weight: 600;
}

.wcw-zp__prijs {
	display: block;
	margin-top: 3px;
	color: #666;
	font-size: 13px;
}

.wcw-zp__alles {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
	padding: 10px 18px;
	border: 1px solid #cfcfc8;
	border-radius: 22px;
	color: #222 !important;
	font-weight: 600;
	font-size: 14px;
}

.wcw-zp__alles:hover,
.wcw-zp__alles.is-actief {
	border-color: #222;
	background: #fff;
}

.wcw-zp__melding {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--wcw-zacht);
	color: #333;
}

.wcw-zp__leeg {
	color: #666;
}

@media (max-width: 992px) {
	.wcw-zp {
		padding: 18px 16px 40px;
	}

	.wcw-zp__raster {
		display: block;
	}

	.wcw-zp__raster > * + * {
		margin-top: 24px;
	}

	/* Telefoon: suggesties, dan producten, dan categorieën (Dennis, 22 sept).
	   Het toetsenbord laat maar een half scherm over; daar horen de producten
	   met foto, de categorieën zijn de uitwijk. De linkerkolom valt weg
	   (display: contents), zodat de blokken los te ordenen zijn. */
	.wcw-zp__raster--resultaat {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.wcw-zp__raster--resultaat > * + *,
	.wcw-zp__raster--resultaat .wcw-zp__blok + .wcw-zp__blok {
		margin-top: 0;
	}

	.wcw-zp__links {
		display: contents;
	}

	.wcw-zp__rechts {
		order: 2;
	}

	.wcw-zp__blok--cat {
		order: 3;
	}

	.wcw-zp__regel {
		padding: 11px 10px; /* tikvlak van 44px */
	}

	/* Knoppen (Populair, Laatst gezocht): drie op één regel, zodat de
	   producten hoger in beeld staan (Dennis, 21 sept). */
	.wcw-zp__chips {
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wcw-zp__chips::-webkit-scrollbar {
		display: none;
	}

	.wcw-zp__chip {
		padding: 6px 11px;
		font-size: 13px;
	}

	.wcw-zp__chip:nth-child(n+4) {
		display: none;
	}

	/* Producten als lijst: klein plaatje, naam, prijs */
	.wcw-zp__producten {
		display: block;
	}

	.wcw-zp__product {
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: center;
		margin: 0 -8px;
		padding: 8px;
	}

	.wcw-zp__product img {
		grid-row: 1 / 3;
		width: 64px;
	}

	.wcw-zp__naam {
		margin-top: 0;
		align-self: end;
		font-size: 15px;
	}

	.wcw-zp__prijs {
		align-self: start;
	}
}

/* ═════════════════════════════════════════════════════════════════════
   Resultatenpagina (zoekresultaten.php)

   De productkaarten, kop, aantal en sorteren komen van snippet 150
   (body.wcpr, deze pagina telt daar als is_shop). Hier alleen wat anders
   is: geen zijbalk dus volle breedte en 4 kolommen, de regel "Bekijk ook"
   met categorieën, de melding en de pagina bij geen resultaten.
   Alles onder body.wcw-zoekpagina, dus nergens anders effect.
   ═════════════════════════════════════════════════════════════════════ */

@media (min-width: 993px) {
	body.wcpr.wcw-zoekpagina #primary.content-area {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
	}
}

@media (min-width: 1100px) {
	body.wcpr.wcw-zoekpagina #main ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Het lijntje dat het thema op zoekpagina's naast de inhoud tekent */
body.wcw-zoekpagina #secondary,
body.wcw-zoekpagina .shoptimizer-mobile-toggle {
	display: none !important;
}

/* #main erin: snippet 150 zet `body.wcpr #main > *` op order 50, en een id
   weegt zwaarder dan klassen. Zonder #main stond "Bekijk ook" onderaan. */
body.wcpr.wcw-zoekpagina #main > .wcw-zoek-melding,
body.wcpr.wcw-zoekpagina #main > .wcw-zoek-cats {
	order: 6;
	flex: 0 0 100%;
	max-width: 100%;
}

body.wcw-zoekpagina .wcw-zoek-melding {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--wcw-zacht);
	font: 400 15px/1.5 Inter, Arial, sans-serif;
	color: #333;
}

body.wcw-zoekpagina .wcw-zoek-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -6px 0 26px;
	font: 400 14px/1.3 Inter, Arial, sans-serif;
}

body.wcw-zoekpagina .wcw-zoek-cats > span {
	margin-right: 4px;
	color: #6f6f6a;
}

body.wcw-zoekpagina .wcw-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--wcw-lijn);
	border-radius: 20px;
	background: #fff;
	color: var(--wcw-tekst) !important;
	font: 400 14px/1.3 Inter, Arial, sans-serif;
	text-decoration: none !important;
	white-space: nowrap;
	transition: border-color .15s;
}

body.wcw-zoekpagina .wcw-chip small {
	color: #8a8780;
	font-size: 12px;
}

body.wcw-zoekpagina .wcw-chip:hover,
body.wcw-zoekpagina .wcw-chip:focus-visible {
	border-color: var(--wcw-salie);
	color: var(--wcw-tekst-donker) !important;
}

/* Geen resultaten */
body.wcw-zoekpagina .wcw-geen,
body.wcpr.wcw-zoekpagina #main > .wcw-geen {
	order: 20;
	flex: 0 0 100%;
	max-width: 760px;
	font: 400 15px/1.6 Inter, Arial, sans-serif;
	color: var(--wcw-tekst);
}

body.wcw-zoekpagina .wcw-geen__kop {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 500;
	color: var(--wcw-tekst-donker);
}

body.wcw-zoekpagina .wcw-geen__tekst {
	margin: 0 0 14px;
}

body.wcw-zoekpagina .wcw-geen__tekst a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.wcw-zoekpagina .wcw-geen__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

body.wcw-zoekpagina .wcw-geen__sub {
	margin: 34px 0 14px;
	color: #888;
	font: 600 12px/1.3 Inter, Arial, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* De drie bestsellers: dezelfde kaarten, maar dit blok is smaller dan de pagina */
body.wcpr.wcw-zoekpagina .wcw-geen ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 992px) {
	/* Zonder "Filters" zou Sorteren alleen boven de kop staan. Nu: kop,
	   daaronder het aantal met rechts een kleine knop Sorteren. */
	body.wcpr.wcw-zoekpagina #main > h1.woocommerce-products-header__title {
		order: 1;
		margin: 6px 0 4px !important;
	}
	body.wcpr.wcw-zoekpagina #main > .shoptimizer-sorting > .woocommerce-result-count {
		order: 2;
		flex: 1 1 auto;
		align-self: center;
		margin: 0 0 18px !important;
	}
	body.wcpr.wcw-zoekpagina #main > .shoptimizer-sorting > .woocommerce-ordering {
		order: 3;
		flex: 0 0 auto !important;
		height: 38px;
		margin: 0 0 18px auto !important;
		padding: 0 14px !important;
	}
	body.wcw-zoekpagina .wcw-zoek-cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -16px 22px;
		padding: 0 16px 4px;
		scrollbar-width: none;
	}
	body.wcw-zoekpagina .wcw-zoek-cats::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 768px) {
	body.wcpr.wcw-zoekpagina .wcw-geen ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Link in een melding (bijvoorbeeld "Lees meer over WallCatcher") */
.wcw-zp__melding a,
body.wcw-zoekpagina .wcw-zoek-melding a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ── Knoppen hard terugzetten (0.3.4) ───────────────────────────────── */
/* De Extra CSS van het thema geeft op productpagina's elke knop een zwarte
   achtergrond en witte tekst ("body.single.single-product button", 0,2,2),
   en elke submit-knop en .button bij hover ook. Daardoor stond "Zoeken" als
   zwart blok in de header. Onze knoppen dus met !important, in elke toestand. */
body button.wcw-icoon,
body button.wcw-icoon:hover,
body button.wcw-icoon:focus,
body button.wcw-icoon:active,
body button.wcw-menu-sluit,
body button.wcw-menu-sluit:hover,
body button.wcw-menu-sluit:focus,
body button.wcw-menu-sluit:active,
body button.wcw-zoeken__knop,
body button.wcw-zoeken__knop:hover,
body button.wcw-zoeken__knop:focus,
body button.wcw-zoeken__knop:active,
body button.wcw-zoeken__sluit,
body button.wcw-zoeken__sluit:hover,
body button.wcw-zoeken__sluit:focus,
body button.wcw-zoeken__sluit:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}

body button.wcw-icoon,
body button.wcw-zoeken__knop,
body button.wcw-zoeken__sluit {
	color: var(--wcw-tekst) !important;
	line-height: 1 !important;
}

body button.wcw-icoon:hover,
body button.wcw-icoon:focus-visible,
body button.wcw-zoeken__knop:hover,
body button.wcw-zoeken__knop:focus-visible,
body button.wcw-zoeken__sluit:hover,
body button.wcw-zoeken__sluit:focus-visible {
	color: var(--wcw-tekst-donker) !important;
}

body button.wcw-menu-sluit,
body button.wcw-menu-sluit:hover {
	color: #222 !important;
}

body button.wcw-menu-zoekveld,
body button.wcw-menu-zoekveld:hover,
body button.wcw-menu-zoekveld:focus,
body button.wcw-menu-zoekveld:active {
	border: 1px solid var(--wcw-lijn) !important;
	background: var(--wcw-zacht) !important;
	color: #777 !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
}

/* ── Betaalmethodes op de mobiele productpagina (0.4.1) ─────────────── */
/* De rij iconen (Elementor-sjabloon 81053, widget d84cc00) stond met
   scale(1.2) aan beide kanten buiten beeld. De regel is in Elementor zelf
   aangepast (tools/zet_betaalrij.php), maar de Kinsta-edge-cache bleef het
   oude post-81053.css leveren en WP Rocket nam dat over in zijn used-CSS.
   Daarom hier nog eens, in een bestand met versienummer in de naam: precies
   zo breed als de rij winkelwagenknop + hartje (de afbeelding heeft 12 en 13
   px lege rand van 700; de knoppenrij is 10px smaller dan het vak). */
@media (max-width: 480px) {
	body .wc-payment-mobile img {
		transform: none !important;
		max-width: none !important;
		width: calc((100% - 10px) * 700 / 674) !important;
		margin-left: calc((100% - 10px) * -12 / 674) !important;
		display: block !important;
	}
}