/*
Theme Name: YVSPORT
Theme URI: https://www.yvsport.nl/
Author: YVSPORT
Description: Eigen thema voor de webshop van YVSPORT. Geen page builder, geen framework, geen buildstap. De opmaak komt uit de ontwerpexport in _project/ontwerp: layout- en kleurwaarden staan inline op de elementen, de gedeelde regels staan in assets/theme.css.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: yvsport
Tags: woocommerce
*/

/*
   Dit bestand bevat alleen wat NIET in assets/theme.css kan staan.
   assets/theme.css is de ontwerpexport en blijft ongewijzigd.
   Alles wat hier bij komt krijgt het voorvoegsel yv- zodat het te herkennen is.
*/

.yv-alleen-voorlezer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skiplink: alleen zichtbaar bij toetsenbordfocus. */
.yv-skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #101413;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

/* WooCommerce-meldingen (winkelwagen bijgewerkt, voorraadfout, enzovoort).
   WooCommerce zet een fout in een <ul>, en een mededeling of bevestiging in
   een <div>. Alle drie krijgen dezelfde vorm. Deze regels staan bewust niet
   onder .yv-meldingen: een melding kan ook buiten dat vak opduiken, zoals bij
   de betaalmethoden op de afrekenpagina. */
.woocommerce-error {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.woocommerce-error li,
.woocommerce-message,
.woocommerce-info {
	margin: 0 0 24px;
	padding: 14px 18px;
	font-size: 14px;
	border-left: 3px solid #009775;
	background: #F1F4F2;
	color: #101413;
}

.woocommerce-error li {
	margin: 0;
	border-left-color: #B3261E;
	background: #FBEDEC;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: #00755B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yv-meldingen:empty {
	display: none;
}

/* Onbeschikbare maat of onderdeel: niet aanklikbaar. */
.yv-uit[disabled] {
	cursor: not-allowed;
}

/* PhotoSwipe staat boven de sticky header. */
.pswp {
	z-index: 200;
}

/* Productvideo in een dialoogvenster. */
.yv-video {
	position: fixed;
	inset: 0;
	margin: auto;
	overflow: visible;
}

.yv-video::backdrop {
	background: rgba(8, 12, 11, .86);
}


/* Hoofdmenu: hover en actief, met de waarden uit de ontwerpexport
   (style-hover="color:#101413;border-bottom-color:#101413"). Hover kan niet
   inline, dus staat het hier. */
.navmain a:hover,
.navmain a:focus-visible {
	color: #101413 !important;
	border-bottom-color: #101413 !important;
}

.navmain a[aria-current="page"] {
	color: #101413 !important;
	border-bottom-color: #009775 !important;
}

.yv-uitklap:hover > a,
.yv-uitklap:focus-within > a {
	color: #101413 !important;
	border-bottom-color: #101413 !important;
}

/* Uitklapmenu: alleen het openen en sluiten en de hover staan hier; de rest
   van de opmaak staat inline, net als in de ontwerpexport. */
.yv-uitklap-paneel {
	display: none;
}

.yv-uitklap:hover .yv-uitklap-paneel,
.yv-uitklap:focus-within .yv-uitklap-paneel {
	display: block;
}

.yv-uitklap-paneel a:hover,
.yv-uitklap-paneel a:focus-visible {
	color: #101413 !important;
	background: #F1F4F2;
}

.yv-uitklap-paneel a[aria-current="page"] {
	color: #101413 !important;
	box-shadow: inset 3px 0 0 #009775;
}

/* De primaire knop, hover uit de export: background:#00755B. */
.yv-kopen:hover:not([disabled]),
.yv-beoordelingsform button[type="submit"]:hover {
	background: #00755B !important;
	border-color: #00755B !important;
}

/* Pijltjes bij de fotostrook. */
.yv-galpijl:hover {
	background: #fff;
	color: #101413;
}

.galt::-webkit-scrollbar {
	display: none;
}

/* Pasvorm kiezen in het beoordelingsformulier. */
.yv-pasvormkeuze input:checked + span {
	border-color: #009775;
	background: #E8F6F1;
	color: #00755B;
	font-weight: 600;
}

.yv-pasvormkeuze input:focus-visible + span {
	outline: 2px solid #009775;
	outline-offset: 3px;
}

/* Sterren kiezen in het beoordelingsformulier. */
.yv-sterkeuze label:hover .yv-ster,
.yv-sterkeuze input:focus-visible + .yv-ster {
	color: #B7BEBB;
}

.yv-sterkeuze .yv-ster.aan {
	color: #009775;
}

@media (max-width: 900px) {
	.yv-uitklap-paneel,
	.yv-galpijl {
		display: none !important;
	}

	/* De rij met producten schuift horizontaal. Zonder scroll-padding trekt
	   scroll-snap de eerste kaart tegen de schermrand aan, want dan valt het
	   begin van het snapvenster samen met de rand in plaats van met de
	   binnenmarge uit assets/theme.css. */
	.relrow {
		scroll-padding-inline: clamp(20px, 4.5vw, 56px);
	}

	.yv-rijpijlen {
		display: flex !important;
	}

	.yv-rijpijl:hover:not([disabled]) {
		border-color: #101413;
		color: #101413;
	}

	.yv-rijpijl[disabled] {
		opacity: .35;
		cursor: default;
	}

	/* Het mobiele menu dat assets/yvsport.js in het paneel van theme.js zet. */
	.mobnav .yv-mobmenu {
		display: block;
	}

	.mobnav details[open] > summary > .g::after {
		content: "−";
	}
}

/* ------------------------------------------------------------------
   Winkeloverzicht
   ------------------------------------------------------------------ */

/* Kop: titel links, omschrijving rechts. Op mobiel onder elkaar, met een
   lijn erboven in plaats van ernaast, en een maatje kleiner. */
.yv-cathead-leeg {
	grid-template-columns: minmax(0, 1fr) !important;
}

.yv-catintro p {
	/* De omschrijving staat in de database met text-align:center erin. In deze
	   kolom is links uitlijnen het enige dat leesbaar is. */
	text-align: left !important;
	margin: 0 0 14px;
}

.yv-catintro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.yv-cathead {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 22px !important;
	}

	.yv-catintro {
		border-left: 0 !important;
		border-top: 1px solid #E6E9E7;
		padding-left: 0 !important;
		padding-top: 22px;
		font-size: 14px !important;
		line-height: 1.7 !important;
	}
}

/* Prijsschuif: twee bereikvelden over elkaar, alleen de knopjes vangen de
   muis. Zo ontstaat een schuif met twee handvatten zonder extra bibliotheek. */
.yv-schuif input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 26px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Het handvat van de browser blijft staan om te kunnen slepen en om met het
   toetsenbord te werken, maar het is onzichtbaar. Het zichtbare bolletje is
   .yv-schuif-knop hieronder, en dat komt op precies dezelfde plek uit als het
   uiteinde van de groene lijn, omdat ze dezelfde rekensom gebruiken.
   box-sizing hoort erbij: zonder die regel telt de rand bij de breedte op —
   dan is het handvat twintig pixels breed in plaats van zestien en legt het
   een andere afstand af dan de lijn. */
.yv-schuif input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 0;
	background: transparent;
}

.yv-schuif input[type="range"]::-moz-range-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 0;
	background: transparent;
}

/* Slepen en klikken gaat over de hele balk, niet over het handvat van de
   browser. Zie assets/yvsport.js, sectie 11. touch-action houdt de pagina
   stil terwijl je op een telefoon sleept. */
.yv-schuif {
	cursor: grab;
	touch-action: none;
}

/* Het bolletje dat je ziet. De marge van min acht zet het middelpunt op de
   plek die in `left` staat. */
.yv-schuif-knop {
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid #009775;
	border-radius: 99px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 20, 19, .18);
	pointer-events: none;
}

/* De omlijning bij toetsenbordbediening staat op het bolletje, niet op het
   onzichtbare handvat erachter. */
.yv-schuif input[type="range"]:focus {
	outline: none;
}

.yv-schuif input[type="range"]:focus-visible + .yv-schuif-knop {
	outline: 2px solid #101413;
	outline-offset: 2px;
}

.yv-schuif input[type="range"]::-webkit-slider-runnable-track {
	background: none;
	height: 26px;
}

.yv-schuif input[type="range"]::-moz-range-track {
	background: none;
	height: 26px;
}

.yv-prijsfilter button[type="submit"]:hover {
	background: #101413;
	color: #fff;
}

/* Sorteermenu: hetzelfde uitklappatroon als de rest van de site. */
.yv-sorteer > summary::-webkit-details-marker {
	display: none;
}

.yv-sorteer-paneel a:hover,
.yv-sorteer-paneel a:focus-visible {
	background: #F1F4F2;
	color: #101413 !important;
}

.yv-sorteer-paneel a[aria-current="true"] {
	box-shadow: inset 3px 0 0 #009775;
}

/* Meer laden. */
.yv-meer-knop:hover {
	background: #101413;
	color: #fff;
}

.yv-meer[data-yv-bezig] .yv-meer-knop {
	opacity: .5;
	pointer-events: none;
}

/* Filterkolom: hover op een kleur. */
.yv-kleurfilter:hover {
	color: #101413 !important;
}

@media (max-width: 560px) {
	/* Op een smal scherm past het sorteermenu niet rechts uitgelijnd; dan over
	   de volle breedte. */
	.yv-sorteer {
		width: 100%;
	}

	.yv-sorteer > summary {
		justify-content: space-between;
	}

	.yv-sorteer-paneel {
		left: 0;
		right: 0;
		min-width: 0 !important;
	}
}

/* De filterkolom staat vastgeplakt terwijl je scrollt. Is hij hoger dan het
   scherm, dan is de onderkant onbereikbaar: je moet dan eerst de hele
   productlijst langs voordat de kolom meeschuift. Daarom krijgt hij een eigen
   schuifbalk als hij niet past. */
.filters {
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	/* Geen overscroll-behavior:contain — dan blijft de muis in dit vak hangen
	   zodra het einde bereikt is. De pagina moet gewoon verder scrollen. */
	scrollbar-width: thin;
	/* Ruimte tussen de filters en de schuifbalk, en die ruimte blijft staan
	   ook als er niets te schuiven valt — anders verspringt de kolom. */
	padding-right: 18px;
	scrollbar-gutter: stable;
}

@media (max-width: 900px) {
	/* Op mobiel klapt de kolom open onder een knop; daar hoeft niets
	   vastgeplakt of afgekapt te worden. */
	.filters {
		max-height: none;
		overflow: visible;
		padding-right: 0;
		scrollbar-gutter: auto;
	}
}

/* De kleurenlijst krijgt zelf een schuifbalk als er veel kleuren zijn, met een
   randje erboven en eronder zodat te zien is dat er meer staat. */
.yv-kleurlijst[data-yv-schuift] {
	scrollbar-width: thin;
	/* Geen lijntjes boven en onder: de scheidingen tussen de filterblokken
	   markeren het vak al. De schuifbalk laat zien dat er meer is. */
	/* Rechts ruimte tussen de aantallen en de schuifbalk. */
	padding: 4px 14px 4px 0;
	scrollbar-gutter: stable;
}

.yv-kleurlijst::-webkit-scrollbar,
.filters::-webkit-scrollbar {
	width: 6px;
}

.yv-kleurlijst::-webkit-scrollbar-thumb,
.filters::-webkit-scrollbar-thumb {
	background: #D8DCDA;
	border-radius: 99px;
}

/* ------------------------------------------------------------------
   Winkelwagen en afrekenen
   ------------------------------------------------------------------ */

/* Regels die plugins in de winkelwagentabel van WooCommerce hangen — PW Gift
   Cards zet er een invulveld voor een cadeaubon in. Die komen als tabelregel
   binnen; zie yv_haaktabel() in inc/kassa.php. */
.yv-haaktabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.yv-haaktabel th {
	padding: 9px 0;
	font-weight: 400;
	text-align: left;
}

.yv-haaktabel td {
	padding: 9px 0;
	text-align: right;
}

.yv-haaktabel td.actions {
	text-align: left;
}

.yv-haaktabel input[type="text"] {
	border: 1px solid #E6E9E7;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px;
	border-radius: 2px;
}

.yv-haaktabel .button,
.yv-haaktabel input[type="submit"] {
	border: 1px solid #E6E9E7;
	background: none;
	padding: 11px 18px;
	font: inherit;
	font-size: 14px;
	border-radius: 2px;
	cursor: pointer;
}

/* Verwijderen: in het ontwerp een tekstlink, geen kruisje. */
.yv-verwijder {
	font-size: 14px;
	color: #767E7B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* De aantalstapper. De pijltjes van de browser eruit; de knoppen ernaast doen
   hetzelfde werk. */
.yv-stapper input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.yv-stapper input::-webkit-outer-spin-button,
.yv-stapper input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Met JavaScript werkt het aantal zichzelf bij; dan is de knop overbodig.
   Zonder JavaScript blijft hij staan, anders is het aantal niet te wijzigen. */
.yv-js .yv-bijwerken {
	display: none;
}

/* De formuliervelden van WooCommerce in de vorm van het ontwerp. Het raster is
   zes koloms: een half veld beslaat er drie, een heel veld zes. */
.yv-velden {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

.yv-velden .form-row {
	grid-column: span 6;
	margin: 0;
	padding: 0;
}

.yv-velden .form-row-first,
.yv-velden .form-row-last {
	grid-column: span 3;
}

.yv-veldblok label,
.yv-velden label,
.woocommerce-form-login label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #101413;
}

/* Een aankruisvakje krijgt geen kapitalen: dat is een zin, geen veldnaam. */
.yv-veldblok .woocommerce-form__label-for-checkbox,
.yv-velden .woocommerce-form__label-for-checkbox,
.woocommerce-form-login .woocommerce-form__label-for-checkbox {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.yv-veldblok input[type="text"],
.yv-veldblok input[type="email"],
.yv-veldblok input[type="tel"],
.yv-veldblok input[type="password"],
.yv-veldblok select,
.yv-veldblok textarea,
.yv-velden input[type="text"],
.yv-velden input[type="email"],
.yv-velden input[type="tel"],
.yv-velden input[type="password"],
.yv-velden select,
.yv-velden textarea,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #D8DCDA;
	background: #fff;
	padding: 14px 15px;
	font: inherit;
	font-size: 15px;
	border-radius: 2px;
}

.yv-veldblok textarea,
.yv-velden textarea {
	min-height: 110px;
	resize: vertical;
}

.yv-veldblok input:focus,
.yv-veldblok select:focus,
.yv-veldblok textarea:focus,
.yv-velden input:focus,
.yv-velden select:focus,
.yv-velden textarea:focus {
	outline: 2px solid #009775;
	outline-offset: -2px;
	border-color: #009775;
}

.yv-velden .woocommerce-input-wrapper {
	display: block;
}

.yv-velden abbr.required,
.yv-veldblok abbr.required {
	border: 0;
	color: #009775;
	text-decoration: none;
}

.yv-velden .woocommerce-invalid input.input-text,
.yv-velden .woocommerce-invalid select {
	border-color: #B3261E;
}

.yv-velden .description,
.yv-veldblok .description {
	margin: 6px 0 0;
	font-size: 13px;
	color: #767E7B;
}

/* Het keuzemenu voor het land van WooCommerce (selectWoo) op dezelfde maat. */
.yv-velden .select2-container .select2-selection--single {
	height: 50px;
	border: 1px solid #D8DCDA;
	border-radius: 2px;
}

.yv-velden .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 13px 15px;
	font-size: 15px;
	line-height: 1.4;
	color: #101413;
}

.yv-velden .select2-container .select2-selection--single .select2-selection__arrow {
	height: 48px;
}

/* Het inlogformulier boven het afrekenen. */
.woocommerce-form-login {
	max-width: 460px;
	margin: 0 0 26px;
	border: 1px solid #E6E9E7;
	padding: 24px;
	display: grid;
	gap: 12px;
}

.woocommerce-form-login .button,
.woocommerce-form-login button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #009775;
	color: #fff;
	border: 1px solid #009775;
	padding: 14px 26px;
	border-radius: 2px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

/* Het uitklapvak van een betaalmethode. */
.payment_box p:first-child {
	margin-top: 0;
}

.payment_box p:last-child {
	margin-bottom: 0;
}

/* Het bezig-schermpje van WooCommerce tijdens het bijwerken. */
.blockUI.blockOverlay {
	background: #fff;
}

@media (max-width: 560px) {
	.yv-velden .form-row,
	.yv-velden .form-row-first,
	.yv-velden .form-row-last {
		grid-column: span 6;
	}
}

/* De privacyregel en de voorwaarden onder de knop: kleiner dan de rest. */
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper {
	font-size: 13px;
	color: #3F4644;
}

.woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 12px 0 0;
}

.woocommerce-terms-and-conditions-checkbox-text {
	font-size: 13px;
}

.woocommerce-terms-and-conditions-wrapper label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin-top: 3px;
	accent-color: #009775;
}

/* Het cadeaubonveld van PW Gift Cards, dat boven de afrekenknop komt. */
#pwgc-redeem-gift-card-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#pwgc-redeem-gift-card-form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #E6E9E7;
	padding: 13px 14px;
	font: inherit;
	font-size: 14px;
	border-radius: 2px;
}

#pwgc-redeem-gift-card-form input[type="submit"] {
	margin-top: 8px;
	border: 1px solid #E6E9E7;
	background: none;
	padding: 12px 18px;
	font: inherit;
	font-size: 14px;
	border-radius: 2px;
	cursor: pointer;
}

#pwgc-redeem-gift-card-container {
	margin-bottom: 18px;
}

/* ------------------------------------------------------------------
   Filterkolom: aanwijzen en gekozen
   ------------------------------------------------------------------ */

/* Een maat aanwijzen zet de rand donker; de gekozen maat blijft groen. */
.yv-maatknop:hover,
.yv-maatknop:focus-visible {
	border-color: #101413 !important;
	color: #101413 !important;
}

.yv-maatknop[aria-current="true"]:hover,
.yv-maatknop[aria-current="true"]:focus-visible {
	border-color: #00755B !important;
	color: #00755B !important;
}

/* Een kleur aanwijzen: naam onderstrepen, zodat het duidelijk een keuze is. */
.yv-kleurfilter:hover,
.yv-kleurfilter:focus-visible {
	color: #101413 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yv-kleurfilter[aria-current="true"]::after {
	content: "×";
	margin-left: 8px;
	font-size: 15px;
	color: #767E7B;
}

/* Sorteren en filters wissen krijgen dezelfde randreactie. */
.yv-sorteerknop:hover,
.yv-sorteerknop:focus-visible,
.yv-wisknop:hover,
.yv-wisknop:focus-visible {
	border-color: #101413 !important;
	color: #101413 !important;
}

.yv-sorteerknop::-webkit-details-marker {
	display: none;
}

/* Het opmerkingveld bij het afrekenen: het plusje wordt een min zodra het
   opengaat, zodat zichtbaar is dat het een uitklapper is. */
.yv-opmerking > summary::-webkit-details-marker {
	display: none;
}

.yv-opmerking > summary:hover,
.yv-opmerking > summary:focus-visible {
	border-color: #101413;
}

.yv-opmerking[open] > summary .yv-opmerking-teken {
	font-size: 22px;
}

.yv-opmerking[open] > summary .yv-opmerking-teken::before {
	content: "\2212";
}

.yv-opmerking[open] > summary .yv-opmerking-teken {
	font-size: 0;
}

.yv-opmerking[open] > summary .yv-opmerking-teken::before {
	font-size: 18px;
}

/* ------------------------------------------------------------------
   Knoppen: aanwijzen en toetsenbordfocus
   ------------------------------------------------------------------ */

/* De groene knop: winkelwagen, afrekenen, bestellen. */
.yv-knop:hover,
.yv-knop:focus-visible {
	background: #00755B !important;
	border-color: #00755B !important;
	color: #fff !important;
}

.yv-knop:active {
	background: #005E49 !important;
	border-color: #005E49 !important;
}

/* De omlijnde knop: toepassen, bijwerken. */
.yv-knop-licht:hover,
.yv-knop-licht:focus-visible {
	border-color: #101413 !important;
	color: #101413 !important;
}

.yv-knop:focus-visible,
.yv-knop-licht:focus-visible {
	outline: 2px solid #101413;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   De zwarte balk boven de kop
   ------------------------------------------------------------------ */

/* Vier beloftes passen alleen op een breed scherm. Daaronder valt er telkens
   eentje af, van rechts naar links, zodat er nooit iets half wordt afgekapt.
   theme.css haalt onder de 900 alleen het woord "Google-reviews" weg; dat is
   te weinig. */
@media (max-width: 1000px) {
	.uspstrip .yv-usp-service {
		display: none !important;
	}
}

@media (max-width: 720px) {
	.uspstrip .yv-usp-retour {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   "Ook interessant voor jou" op een smal scherm
   ------------------------------------------------------------------ */

/* theme.css geeft een schuivende rij kaarten van 60% breed. Dat is bedoeld
   voor de volle paginabreedte onder een product; in de winkelwagen worden de
   beelden daar onnodig groot van. Twee kaarten in beeld werkt hier beter. */
@media (max-width: 900px) {
	.cross-sells .relrow > a {
		flex: 0 0 min(45%, 220px) !important;
	}
}

/* De knop van PW Gift Cards. Die komt uit de plugin en heeft geen eigen
   aanwijsstijl; hij krijgt dezelfde als de omlijnde knoppen hierboven. */
#pwgc-redeem-gift-card-form input[type="submit"]:hover,
#pwgc-redeem-gift-card-form input[type="submit"]:focus-visible,
.yv-haaktabel .button:hover,
.yv-haaktabel input[type="submit"]:hover,
.yv-haaktabel .button:focus-visible,
.yv-haaktabel input[type="submit"]:focus-visible {
	border-color: #101413;
	color: #101413;
	cursor: pointer;
}

#pwgc-redeem-gift-card-form input[type="submit"]:focus-visible,
.yv-haaktabel input[type="submit"]:focus-visible {
	outline: 2px solid #101413;
	outline-offset: 2px;
}

/* De prijs van een winkelwagenregel.
   theme.css zet die op een smal scherm onder de aantalknoppen, links
   uitgelijnd. Dat haalt de prijs los van het product waar hij bij hoort en
   laat een gat vallen. Hij blijft nu rechtsboven staan, naast de productnaam,
   net als op een breed scherm. */
@media (max-width: 900px) {
	.cartline {
		grid-template-columns: 78px minmax(0, 1fr) auto !important;
	}

	.cartline .lprice {
		grid-column: 3 !important;
		margin-top: 0 !important;
		text-align: right !important;
	}
}

/* ------------------------------------------------------------------
   Contentpagina's
   ------------------------------------------------------------------ */

/* De tekst van een contentpagina komt uit de tekstverwerker van WordPress en
   heeft daar geen inline stijlen. Deze regels geven die tekst dezelfde maten
   en kleuren als de rest van de site. */
.yv-tekst {
	font-size: 17px;
	color: #3F4644;
}

.yv-tekst p {
	margin: 0 0 18px;
	line-height: 1.65;
}

.yv-tekst h2 {
	margin: clamp(30px, 3.4vw, 44px) 0 16px;
	font-size: 22px;
	color: #101413;
}

.yv-tekst h3 {
	margin: 28px 0 12px;
	font-size: 18px;
	color: #101413;
}

.yv-tekst b,
.yv-tekst strong {
	color: #101413;
	font-weight: 600;
}

.yv-tekst a {
	color: #00755B;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yv-tekst ul,
.yv-tekst ol {
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 16px;
}

.yv-tekst ul {
	list-style: none;
}

/* Een bolletje in de huisstijlkleur in plaats van het standaardteken. */
.yv-tekst ul > li {
	position: relative;
	padding-left: 18px;
}

.yv-tekst ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: #009775;
}

.yv-tekst ol {
	padding-left: 20px;
}

.yv-tekst img {
	max-width: 100%;
	height: auto;
}

.yv-tekst table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.yv-tekst th,
.yv-tekst td {
	border-bottom: 1px solid #F1F3F2;
	padding: 10px 0;
	text-align: left;
}

.yv-tekst blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid #009775;
	color: #101413;
}

/* De suggestieknopjes op de zoekpagina. */
.yv-chip:hover,
.yv-chip:focus-visible {
	border-color: #101413;
}

/* Bladeren onder de zoekresultaten. */
.pagination,
.navigation.pagination {
	margin-top: clamp(40px, 5vw, 64px);
	font-size: 15px;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin-right: 6px;
	border: 1px solid #E6E9E7;
	color: #101413;
}

.pagination .page-numbers.current {
	border-color: #101413;
	font-weight: 600;
}

.pagination a.page-numbers:hover {
	border-color: #101413;
}

/* De donkere knop met alleen een rand, zoals op de 404. */
.yv-knop-donker:hover,
.yv-knop-donker:focus-visible {
	background: #101413 !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------
   Mijn account
   ------------------------------------------------------------------ */

/* De formulieren van WooCommerce — accountgegevens, adres, wachtwoord
   vergeten — houden hun eigen opbouw; alleen de opmaak komt hiervandaan. Zo
   hoeft er van die sjablonen niets overgenomen te worden en blijft een
   toekomstige WooCommerce-versie gewoon werken. */
.woocommerce-MyAccount-content form .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-MyAccount-content form label,
.woocommerce-form-login label,
.woocommerce-form-register label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #101413;
}

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #D8DCDA;
	background: #fff;
	padding: 14px 15px;
	font: inherit;
	font-size: 15px;
	border-radius: 2px;
}

.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
	outline: 2px solid #009775;
	outline-offset: -2px;
	border-color: #009775;
}

/* Twee velden naast elkaar, zoals voornaam en achternaam. */
@media (min-width: 561px) {
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	.woocommerce-MyAccount-content form .form-row-first {
		margin-right: 12px;
	}
}

.woocommerce-MyAccount-content form fieldset {
	margin: clamp(24px, 3vw, 34px) 0 0;
	border: 0;
	border-top: 1px solid #E6E9E7;
	padding: clamp(20px, 2.6vw, 28px) 0 0;
}

.woocommerce-MyAccount-content form legend {
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	color: #101413;
}

.woocommerce-MyAccount-content form em,
.woocommerce-MyAccount-content form .description {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-style: normal;
	color: #767E7B;
}

.woocommerce-MyAccount-content .required,
.woocommerce-form-login .required,
.woocommerce-form-register .required {
	border: 0;
	color: #009775;
	text-decoration: none;
}

/* De opslaanknop van die formulieren. */
.woocommerce-MyAccount-content form button[type="submit"],
.woocommerce-MyAccount-content form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	background: #009775;
	color: #fff;
	border: 1px solid #009775;
	padding: 15px 28px;
	border-radius: 2px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.woocommerce-MyAccount-content form button[type="submit"]:hover,
.woocommerce-MyAccount-content form input[type="submit"]:hover {
	background: #00755B;
	border-color: #00755B;
}

.woocommerce-MyAccount-content h2 {
	font-size: 20px;
	color: #101413;
}

.woocommerce-MyAccount-content p {
	line-height: 1.65;
}

/* De kaarten op het beginscherm van het account. */
.yv-accountkaart:hover,
.yv-accountkaart:focus-visible {
	border-color: #101413;
}

/* De kolom naast een contentpagina en naast Mijn account.
   Niet de klasse `filters` gebruiken: theme.css verbergt die onder de 900
   pixels, omdat daar de uitklapknop van het winkeloverzicht bij hoort. Deze
   kolom heeft die knop niet en moet gewoon blijven staan — boven de tekst. */
.yv-zijkolom {
	position: sticky;
	top: 120px;
}

@media (max-width: 900px) {
	.yv-zijkolom {
		position: static;
		top: auto;
		margin-bottom: clamp(28px, 4vw, 40px);
		padding-bottom: clamp(20px, 3vw, 28px);
		border-bottom: 1px solid #E6E9E7;
	}
}

@media (max-width: 560px) {
	.yv-accountkaart {
		grid-column: span 2;
	}
}

/* Het adresblok onder een bestelling (bedankpagina en Mijn account). */
.woocommerce-customer-details {
	margin-top: clamp(28px, 3.4vw, 40px);
}

.woocommerce-customer-details h2,
.woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: #101413;
}

.woocommerce-customer-details address {
	font-style: normal;
	font-size: 15px;
	color: #3F4644;
	line-height: 1.7;
}

.woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 560px) {
	.woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Het oogje waarmee je je wachtwoord even zichtbaar maakt.
   WooCommerce zet daar een knop zonder tekst neer en tekent het pictogram met
   zijn eigen stylesheet. Die staat uit (zie functions.php), dus zonder deze
   regels is het een leeg vakje. */
.password-input {
	position: relative;
	display: block;
}

.show-password-input {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	padding: 0;
	background: none no-repeat center / 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E7B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	cursor: pointer;
}

/* Staat het wachtwoord open, dan een streep door het oog. */
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101413' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
}

.show-password-input:focus-visible {
	outline: 2px solid #101413;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Ruimte voor dat oogje, zodat het niet over de tekst valt. */
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 46px !important;
}

/* Een link met vetgedrukte tekst erin hield de zwarte kleur van die
   vetgedrukte tekst en zag er daardoor uit als gewone tekst. De link bepaalt
   de kleur, wat er ook in staat. */
.yv-tekst a b,
.yv-tekst a strong {
	color: inherit;
}

/* ------------------------------------------------------------------
   Startpagina
   ------------------------------------------------------------------ */

/* De twee knoppen over de fotostrook. */
.yv-heroknop:hover,
.yv-heroknop:focus-visible {
	background: #009775 !important;
	color: #fff !important;
}

.yv-heroknop-om:hover,
.yv-heroknop-om:focus-visible {
	background: #fff !important;
	border-color: #fff !important;
	color: #101413 !important;
}

.yv-heroknop:focus-visible,
.yv-heroknop-om:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* De knop op de Fitclub-kaart. De kaart is zelf de link, dus de knop kleurt
   mee zodra je de kaart aanwijst. `!important` omdat de kleur inline staat;
   zonder dat wint de inline waarde van deze regel. */
.yv-fitclubvlak:hover .yv-fitclub-knop,
.yv-fitclubvlak:focus-visible .yv-fitclub-knop {
	background: #00755B !important;
}

.yv-fitclubvlak:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* De vier tegels: aanwijzen laat de foto iets inzoomen. Meer dan dat hoeft
   niet, de tekst staat er al overheen. */
.tiles a img {
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.tiles a:hover img,
.tiles a:focus-visible img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.tiles a img {
		transition: none;
	}

	.tiles a:hover img,
	.tiles a:focus-visible img {
		transform: none;
	}
}

/* Het aanmeldformulier van MailPoet in de opmaak van het ontwerp: één regel
   met een veld en een groene knop ernaast. MailPoet zet zijn eigen breedtes
   inline, vandaar de !important. */
.yv-nieuwsbrief .mailpoet_form {
	padding: 0 !important;
	max-width: 420px;
}

.yv-nieuwsbrief .mailpoet_paragraph {
	margin-bottom: 10px !important;
}

.yv-nieuwsbrief .mailpoet_text,
.yv-nieuwsbrief .mailpoet_email {
	width: 100% !important;
	border: 1px solid #D8DCDA !important;
	background: #fff !important;
	padding: 16px !important;
	font: inherit !important;
	font-size: 15px !important;
	border-radius: 2px !important;
}

.yv-nieuwsbrief .mailpoet_submit {
	background: #009775 !important;
	border: 0 !important;
	color: #fff !important;
	padding: 16px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 2px !important;
	cursor: pointer;
}

.yv-nieuwsbrief .mailpoet_submit:hover,
.yv-nieuwsbrief .mailpoet_submit:focus-visible {
	background: #00755B !important;
}

/* Gestapeld op mobiel worden de twee liggende foto's op de startpagina anders
   bijna een heel scherm hoog. Een lagere verhouding houdt de tekst eronder in
   beeld. */
@media (max-width: 900px) {
	.aboutimg {
		aspect-ratio: 3 / 2 !important;
	}
}

/* Staande productkaarten, alleen op de startpagina.
   De productfoto's zijn vierkant. In een staand vak met `contain` blijft er
   een witte strook over die tegen de grijze sectieachtergrond een blok vormt;
   daarom vult de foto hier het vak (`cover`). Er valt links en rechts 12,5%
   weg, en dat is bij deze studiofoto's witruimte. Elders in de winkel blijft
   de kaart vierkant met `contain`, zie BESLISSINGEN.md. */
.yv-staand .imgbox {
	aspect-ratio: 3 / 4 !important;
}

.yv-staand .imgbox .baseimg,
.yv-staand .imgbox .hoverimg {
	object-fit: cover !important;
}

/* ------------------------------------------------------------------
   Blog
   ------------------------------------------------------------------ */

.yv-blogfilter:hover,
.yv-blogfilter:focus-visible {
	border-color: #101413 !important;
	color: #101413 !important;
}

.yv-blogfilter-aan:hover,
.yv-blogfilter-aan:focus-visible {
	background: #00755B !important;
	border-color: #00755B !important;
	color: #fff !important;
}

.yv-blogrooster .pcard h2 {
	transition: color .18s ease;
}

.yv-blogrooster .pcard:hover h2 {
	color: #00755B;
}

/* De paginering onder het overzicht, in dezelfde vorm als de knoppenrij. */
.pagination .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(40px, 5vw, 64px);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #E6E9E7;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	color: #3F4644;
	background: #fff;
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:focus-visible {
	border-color: #101413;
	color: #101413;
}

.navigation.pagination .page-numbers.current {
	background: #101413;
	border-color: #101413;
	color: #fff;
}

.navigation.pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.navigation.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.yv-blogrooster {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.yv-blogrooster {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* De gekozen kenmerken onder een winkelwagenregel: kleur, maat, en bij een
   bundel de onderdelen. WooCommerce levert een <dl>; zonder opmaak plakken de
   paren aan elkaar op één regel. */
.yv-kenmerken .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
	margin: 0;
}

.yv-kenmerken .variation dt {
	margin: 0;
	font-weight: 400;
}

.yv-kenmerken .variation dd {
	margin: 0;
	color: #101413;
}

.yv-kenmerken .variation dd p {
	margin: 0;
}

/* In de smalle kolom naast het afrekenformulier is een tweekolomsraster te
   krap: de naam breekt af en de maat komt los rechts te staan. Daar staat de
   waarde daarom direct achter het label, elk paar op een eigen regel. */
.yv-kenmerken-smal .variation {
	display: block;
}

.yv-kenmerken-smal .variation dt,
.yv-kenmerken-smal .variation dd {
	display: inline;
	margin: 0;
}

.yv-kenmerken-smal .variation dd {
	color: #767E7B;
}

.yv-kenmerken-smal .variation dd p {
	display: inline;
	margin: 0;
}

.yv-kenmerken-smal .variation dd::after {
	content: "";
	display: block;
}

/* ---------------------------------------------------------------------------
   Correcties na de oplevering van 26 augustus 2026.
   --------------------------------------------------------------------------- */

/* WooPayments zet via Stripe een "betaal later"-blok in de winkelwagen, klem
   tussen het kortingscodeveld en de cadeaubon. De tekst zit in een iframe van
   js.stripe.com, dus aan de inhoud valt niets te doen; we halen de houder weg.
   In de instellingen van WooPayments is dit blok niet uit te zetten. */
#payment-method-message {
	display: none;
}

/* MailPoet haakt zijn aanmeldvinkje achter het factuurformulier. Daardoor valt
   het buiten `.yv-velden` en krijgt het geen van onze marges mee: het plakte
   tegen het veld voor de plaatsnaam. Alleen de bovenmarge; de weergave komt
   uit de regel hierboven en moet flex blijven. */
.woocommerce-billing-fields > .woocommerce-form__label-for-checkbox {
	margin-top: 18px;
}

/* De express-knoppen (Apple Pay, Google Pay) van WooPayments boven het
   afrekenformulier. De knoppen zelf zitten in een StripeElement en zijn van
   Stripe; wij bepalen alleen de omlijsting, de breedte en de scheiding
   eronder. Die scheiding was een kale <p> zonder opmaak. */
.wcpay-express-checkout-wrapper {
	margin: 0 0 clamp(22px, 3vw, 30px);
}

.wcpay-express-checkout-wrapper .StripeElement {
	max-width: 420px;
}

#wcpay-express-checkout-button-separator {
	margin: clamp(18px, 2.4vw, 24px) 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #767E7B;
}

/* De knop "Toepassen" bij de cadeaubon. Op iOS tekent Safari een
   input[type=submit] met `background: none` met zijn eigen opmaak, en dan
   verdwijnt het opschrift. Daarom alles expliciet, inclusief het uitzetten van
   die standaardopmaak. Op smalle schermen over de volle breedte, net als het
   veld erboven. */
#pwgc-redeem-gift-card-form input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	color: #101413;
	background: #fff;
	line-height: 1.2;
}

@media (max-width: 760px) {
	#pwgc-redeem-gift-card-form input[type="submit"] {
		width: 100%;
	}
}

/* De WhatsApp-knop staat vast linksonder (z-index 9000) en de koopbalk op de
   productpagina ook onderaan (z-index 120), dus die liepen over elkaar heen.
   `theme.js` zet `yv-balk-zichtbaar` op <html> zodra de balk in beeld schuift;
   de knop gaat dan mee omhoog en zakt weer terug als de balk weg is. */
.yv-wa {
	transition: bottom .25s ease;
}

.yv-balk-zichtbaar .yv-wa {
	bottom: 96px;
}