/* WallCatcher Winkel, extra opties 0.1.8.
   Alles in @layer wallcatcher: een !important in een eigen laag wint van elke
   !important van het thema, ongeacht specificiteit (zie notitie "eigen CSS laten
   winnen"). Nodig na staging 4 okt: thema verschoof vinkje en icoon en gaf de
   uitleg een grote alinealetter.
   Zelfde taal als de materiaal- en maatkaarten van snippet 134: witte kaart,
   2 px rand #ececec, ronde hoek 14 px, salie #8f997a als hij gekozen is.
   !important waar Shoptimizer labels en invoervelden zelf stijlt.
   Staat via :has() én de klasse .is-aan (die zet het script), voor browsers
   zonder :has(). .wcw-* staat op de veilige lijst van WP Rocket.
   0.1.6: verbergen gaat met de klasse .wcw-weg (onderaan), niet met een inline
   display:none. Die verloor van de display-regels hieronder met !important,
   waardoor de zijgripregel bij plexiglas bleef staan (eigen foto, 5 okt). */

@layer wallcatcher {
.wcw-opties {
	flex: 0 0 100% !important; /* vangnet als hij toch in een flexrij belandt */
	width: 100% !important;
	/* boven: los van "Reset selectie"; onder: niets, daar volgt de
	   variatieprijs en de knop al met eigen ruimte (staging 4 okt) */
	margin: 20px 0 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

/* ---------- upsellregel ----------
   Subtiel zoals onder EPO (Dennis 4 okt): geen rand, geen achtergrond, alleen
   vinkje, tekst en prijs; een kleine grijze regel met de uitleg eronder. */
.wcw-opties .wcw-kaart {
	position: relative !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 2px 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* echt vinkje onzichtbaar maar bereikbaar met toetsenbord en schermlezer */
.wcw-opties .wcw-vak {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	clip: rect(0 0 0 0) !important;
	pointer-events: none !important;
}
.wcw-opties .wcw-kaart:has(.wcw-vak:focus-visible) {
	outline: 2px solid #8f997a !important;
	outline-offset: 2px !important;
}

.wcw-opties .wcw-check {
	flex: 0 0 auto !important;
	margin-top: 1px !important;
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid #c4c9b8 !important;
	border-radius: 5px !important;
	background: #ffffff no-repeat center / 11px 11px !important;
	transition: background-color .16s ease, border-color .16s ease !important;
	box-sizing: border-box !important;
}
.wcw-opties .wcw-kaart:has(.wcw-vak:checked) .wcw-check,
.wcw-opties .wcw-kaart.is-aan .wcw-check {
	border-color: #8f997a !important;
	background-color: #8f997a !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") !important;
}

.wcw-opties .wcw-icoon {
	flex: 0 0 auto !important;
	margin-top: 1px !important;
	display: flex !important;
	color: #8f997a !important;
}
.wcw-opties .wcw-icoon {
	width: 18px !important;
	height: 18px !important;
}
/* Het thema zet marges op svg's in het bestelformulier; daardoor zakte het
   icoon weg met een gat naar de tekst (tape, staging 4 okt). */
.wcw-opties .wcw-icoon svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	position: static !important;
	vertical-align: top !important;
}

.wcw-opties .wcw-kaart-tekst {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
}
.wcw-opties .wcw-kaart-sub {
	font-size: 11.5px !important;
	color: #6b7280 !important;
	line-height: 1.35 !important;
}
.wcw-opties .wcw-optie { display: block !important; margin: 0 !important; padding: 0 !important; }
.wcw-opties .wcw-kaart > span {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	float: none !important;
	line-height: 1.35 !important;
}

/* vraagteken en uitleg */
.wcw-opties .wcw-info-knop {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	min-height: 0 !important;
	margin: 0 0 0 6px !important;
	padding: 0 !important;
	vertical-align: 1px !important;
	border: 1px solid #8f997a !important;
	border-radius: 50% !important;
	background: #8f997a !important;
	color: #ffffff !important;
	font: 700 10px/1 inherit !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-transform: none !important;
}
.wcw-opties .wcw-info-knop:hover,
.wcw-opties .wcw-info-knop[aria-expanded="true"] {
	background: #7d8a6a !important;
	border-color: #7d8a6a !important;
}
.wcw-opties .wcw-info {
	margin: 8px 0 2px !important; /* 0.1.9: geen inspringing, even breed als knop + hart */
	padding: 10px 12px !important;
	background: rgba(176,146,106,.08) !important;
	border-radius: 10px !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	color: #374151 !important;
}
.wcw-opties .wcw-info strong {
	display: block !important;
	margin-bottom: 4px !important;
	font-weight: 600 !important;
	color: #111827 !important;
}
.wcw-opties .wcw-info ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wcw-opties .wcw-info li {
	position: relative !important;
	margin: 0 0 2px !important;
	padding-left: 16px !important;
}
.wcw-opties .wcw-info li::before {
	content: "\2713" !important;
	position: absolute !important;
	left: 0 !important;
	color: #8f997a !important;
	font-weight: 700 !important;
}
.wcw-opties .wcw-info p,
.wcw-opties .wcw-info li {
	font-size: 12px !important;
	line-height: 1.45 !important;
	font-weight: 400 !important;
}
.wcw-opties .wcw-info p {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	color: #6b7280 !important;
}

.wcw-opties .wcw-kaart-titel {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #2b2b2b !important;
}

.wcw-opties .wcw-kaart-prijs {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	white-space: nowrap !important;
}
.wcw-opties .wcw-prijs-nu {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #2b2b2b !important;
}
.wcw-opties .wcw-prijs-van {
	font-size: 12px !important;
	color: #9ca3af !important;
	text-decoration: line-through !important;
}

/* ---------- letters ---------- */
.wcw-opties .wcw-letters-blok {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}
.wcw-opties .wcw-kop {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}
.wcw-opties .wcw-kop-titel {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #111827 !important;
	line-height: 1.2 !important;
}
.wcw-opties .wcw-kop-hint {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #6b7280 !important;
}

.wcw-opties input.wcw-letters {
	width: 100% !important;
	height: 54px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border: 2px solid #ececec !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
	font-family: inherit !important;
	font-size: 18px !important; /* boven 16 px: iOS zoomt dan niet in */
	font-weight: 600 !important;
	letter-spacing: .12em !important;
	color: #111827 !important;
	outline: none !important;
	transition: border-color .16s ease, box-shadow .16s ease !important;
}
.wcw-opties input.wcw-letters::placeholder {
	font-weight: 400 !important;
	letter-spacing: .02em !important;
	color: #9ca3af !important;
	opacity: 1 !important;
}
.wcw-opties input.wcw-letters:hover { border-color: #cdd2c1 !important; }
.wcw-opties input.wcw-letters:focus {
	border-color: #8f997a !important;
	box-shadow: 0 0 0 3px rgba(143,153,122,.14) !important;
}

.wcw-opties .wcw-letters-status {
	display: flex !important;
	justify-content: space-between !important;
	gap: 8px !important;
	min-height: 18px !important;
	font-size: 13px !important;
	line-height: 18px !important;
}
.wcw-opties .wcw-teller { color: #6b7280 !important; }
.wcw-opties .wcw-meerprijs {
	color: #111827 !important;
	font-weight: 600 !important;
	text-align: right !important;
}

.wcw-opties .wcw-letters-uitleg {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	color: #6b7280 !important;
}
.wcw-opties .wcw-letters-uitleg a {
	color: #8f997a !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.wcw-opties .wcw-letters-uitleg a:hover { text-decoration: underline !important; }

/* fout: te weinig of te veel letters */
.wcw-opties .wcw-letters-blok.is-fout input.wcw-letters {
	border-color: #b3261e !important;
	box-shadow: 0 0 0 3px rgba(179,38,30,.12) !important;
}
.wcw-opties .wcw-letters-blok.is-fout .wcw-teller {
	color: #b3261e !important;
	font-weight: 600 !important;
}

@media (max-width: 480px) {
	.wcw-opties .wcw-kaart-titel { font-size: 12px !important; }
	.wcw-opties .wcw-prijs-nu { font-size: 12px !important; }
	.wcw-opties .wcw-prijs-van { font-size: 11px !important; }
}

/* Knop + hart even breed als de tegels erboven (0.1.8). De clearfix van het
   thema (::before/::after, display:table) telt in deze flexrij als twee lege
   items, en de gap van 10 px zette de knop links én rechts 10 px naar binnen.
   Onder EPO viel dat links niet op: het EPO-blok stond in dezelfde rij en duwde
   de knop naar een eigen regel. */
.single-product .woocommerce-variation-add-to-cart::before,
.single-product .woocommerce-variation-add-to-cart::after { content: none !important; display: none !important; }
/* Betaalmethoden onder de knop: de Elementor-kolom gaf 10 px binnenruimte. */
.single-product .product-widget .elementor-widget-wrap.elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }

/* Moet de laatste regel blijven: wint van display:block/flex hierboven
   (zelfde specificiteit, later in de laag). */
.wcw-opties .wcw-weg { display: none !important; }
}

/* 0.1.10 (6 okt): op mobiel ging "Buiten ophangen? Zijgriphouders ?" over twee
   regels omdat de prijs ernaast stond. Nu de prijs eronder, op één lijn met de
   titel (78 px = vinkvak + icoon + tussenruimte). Desktop blijft gelijk. */
@layer wallcatcher {
@media (max-width: 480px) {
	.wcw-opties .wcw-kaart { flex-wrap: wrap !important; row-gap: 2px !important; }
	.wcw-opties .wcw-kaart-tekst { flex: 1 1 0 !important; }
	.wcw-opties .wcw-kaart > .wcw-kaart-prijs { flex: 0 0 100% !important; padding-left: 78px !important; }
}
}