/**
 * Opmaak van de winkel, 1:1 met het ontwerpvoorstel dat Roy op 8 sep goedkeurde.
 * Bron van dat ontwerp: clients/finkers-hairdesign/ontwerpvoorstel-thema.html
 */

/* ---------- Koptekst ---------- */

.kop {
	border-bottom: 1px solid var(--lijn);
	background: var(--papier);
}

.kop-binnen {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.kop-logo img {
	height: 44px;
	width: auto;
}

.kop-nav {
	margin-left: auto;
}

.nav-lijst {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
}

.nav-lijst a {
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.nav-lijst a:hover,
.nav-lijst .current-menu-item > a {
	border-color: var(--magenta);
}

/* Zoeken. De winkel heeft ruim duizend artikelen waarvan het grootste deel nog
   geen categorie heeft, dus zonder zoekveld is een deel alleen via een directe
   link te vinden. */
.kop-zoek {
	display: flex;
	align-items: center;
	border: 1px solid var(--lijn);
	background: var(--papier);
	height: 40px;
	flex: 0 1 260px;
}

.kop-zoek-veld {
	border: 0;
	background: transparent;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	width: 100%;
	min-width: 0;
}

.kop-zoek-veld:focus {
	outline: 0;
}

.kop-zoek:focus-within {
	border-color: var(--magenta);
}

.kop-zoek-knop {
	border: 0;
	background: transparent;
	color: var(--inkt);
	padding: 0 12px;
	height: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.kop-zoek-knop:hover {
	color: var(--magenta);
}

.kop-acties {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 13.5px;
	font-weight: 600;
}

.kop-acties a {
	text-decoration: none;
}

.kop-mand {
	background: var(--magenta);
	color: var(--papier);
	padding: 11px 20px;
}

.mand-aantal {
	opacity: 0.75;
}

/* ---------- Inhoud ---------- */

.blok {
	padding-top: 44px;
	padding-bottom: 74px;
}

.pagina-tekst {
	max-width: 72ch;
}

.knop,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--magenta);
	color: var(--papier);
	border: 0;
	border-radius: 0;
	padding: 11px 20px;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none;
	line-height: 1.4;
}

.knop:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--inkt);
	color: var(--papier);
}

/* ---------- Productkaarten ---------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* De breedte moet met deze selectors, want woocommerce-layout.css zet
   .woocommerce ul.products.columns-3 li.product op 30.75 procent en
   woocommerce-smallscreen.css zet [class*="columns-"] op 48 procent. Allebei
   wegen zwaarder dan een selector zonder die klasse, dus een kortere regel
   staat er wel maar doet niets. Nagemeten op de bouwplek: kolom 380 breed,
   kaart 117. */
.woocommerce ul.products li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
	text-align: left;
}

/* Zo staan de knoppen van kaarten met een langere naam toch op een lijn. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

/* De verhouding uit het ontwerp. Staande haarwerkfoto's vallen anders boven en
   onder weg, en dat is juist het deel waar de klant naar kijkt. */
.kaart-beeld {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--mist);
	overflow: hidden;
	margin-bottom: 14px;
}

/* Ook hier telt de specificiteit. woocommerce.css zet
   .woocommerce ul.products li.product a img op height auto, en dat wint van een
   losse .kaart-beeld img. Met de hele keten ervoor wint de onze. */
.kaart-beeld img,
.woocommerce ul.products li.product a .kaart-beeld img,
.woocommerce ul.products li.product .kaart-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	padding: 0;
	margin: 0 0 4px;
}

.woocommerce ul.products li.product .price {
	color: var(--grafiet);
	font-size: 14px;
	margin: 0 0 12px;
}

/* ---------- De binnenwerktekening ---------- */

.finkers-heeft-binnenwerk::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--papier);
	background-image: var(--finkers-binnenwerk);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* Alleen waar echt aangewezen kan worden. Op een tablet blijft de tekening
   anders plakken na de eerste tik. */
@media (hover: hover) {
	.finkers-heeft-binnenwerk:hover::after {
		opacity: 1;
	}
}

/* Toetsenbord. De productlink zit in dezelfde kaart. */
li.product:focus-within .finkers-heeft-binnenwerk::after {
	opacity: 1;
}

/* Wordt gezet door binnenwerk.js op een aanraakscherm. */
.finkers-heeft-binnenwerk.finkers-toon::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.finkers-heeft-binnenwerk::after {
		transition: none;
	}
}

/* ---------- Voettekst ---------- */

.voet {
	border-top: 1px solid var(--lijn);
	background: var(--mist);
	padding-top: 56px;
	padding-bottom: 34px;
	margin-top: 74px;
}

.voet-binnen {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
}

.voet-merk img {
	height: 44px;
	width: auto;
	margin-bottom: 18px;
}

.voet h3 {
	font-size: 13px;
	margin-bottom: 12px;
}

.voet p,
.voet-lijst {
	font-size: 13px;
	color: var(--grafiet);
}

.voet-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.voet-lijst li {
	margin-bottom: 7px;
}

.voet-lijst a,
.voet-adres a {
	text-decoration: none;
}

.voet-lijst a:hover,
.voet-adres a:hover {
	color: var(--magenta);
}

.voet-onder {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	border-top: 1px solid var(--lijn);
	margin-top: 34px;
	padding-top: 22px;
	font-size: 12.5px;
	color: var(--grijs);
}

.voet-onder p {
	margin: 0;
}

.voet-credit a {
	color: var(--grijs);
}

/* ---------- Smallere schermen ---------- */

@media (max-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.voet-binnen {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Twee rijen: logo links met de acties rechts, daaronder het menu over de
	   volle breedte. Zonder de automatische marge op de acties plakten die
	   tegen het logo aan en viel het menu erbovenuit. Gezien op een telefoon,
	   9 sep 2026. */
	.kop-binnen {
		flex-wrap: wrap;
		gap: 14px 16px;
	}

	.kop-acties {
		margin-left: auto;
		gap: 14px;
	}

	.kop-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
		border-top: 1px solid var(--lijn);
		padding-top: 12px;
	}

	/* Op een telefoon een eigen rij onder het menu, anders duwt het zoekveld de
	   winkelwagen van het scherm. */
	.kop-zoek {
		order: 4;
		width: 100%;
		flex-basis: auto;
	}

	.nav-lijst {
		flex-wrap: wrap;
		gap: 14px 20px;
		font-size: 15px;
	}

	.kop-mand {
		padding: 10px 14px;
	}
}

/* Bewust TWEE kaarten naast elkaar op een telefoon. Bij een kaart per rij is
   elke kaart bijna schermvullend en moet je 104 keer scrollen om het assortiment
   te zien. Gezien op een echte telefoon, 9 sep 2026. */
@media (max-width: 560px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 12px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	.woocommerce ul.products li.product .button {
		font-size: 12.5px;
		padding: 9px 12px;
	}

	.voet-binnen {
		grid-template-columns: 1fr;
	}
}

/* ---------- Filterkolom ---------- */

.winkel-opzet {
	display: grid;
	grid-template-columns: 236px 1fr;
	gap: 34px;
	align-items: start;
}

.zijbalk {
	border-right: 1px solid var(--lijn);
	padding-right: 24px;
}

.zijbalk > h3 {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--grijs);
	margin-bottom: 20px;
}

.filter-wissen {
	font-size: 13px;
	margin: -8px 0 20px;
}

.filter-wissen a {
	color: var(--magenta);
}

.filtergroep {
	margin-bottom: 24px;
}

.filtergroep h4 {
	font-size: 13.5px;
	margin-bottom: 8px;
}

.optie {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--grafiet);
	padding: 3px 0;
	text-decoration: none;
}

.optie:hover {
	color: var(--inkt);
}

.vink {
	width: 14px;
	height: 14px;
	border: 1.5px solid #c4c4c4;
	background: var(--papier);
	flex: none;
	position: relative;
}

.optie.is-actief {
	color: var(--inkt);
	font-weight: 600;
}

.optie.is-actief .vink {
	background: var(--magenta);
	border-color: var(--magenta);
}

.optie.is-actief .vink::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.5px;
	width: 4px;
	height: 8px;
	border: solid var(--papier);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

.optie-naam {
	flex: 1;
}

.optie-aantal {
	color: var(--grijs);
	font-size: 12px;
}

/* Kleur heeft er meer dan honderd. Dichtgeklapt tot er op Alles tonen wordt geklikt. */
.optielijst.is-lang {
	max-height: 212px;
	overflow: hidden;
}

.optielijst.is-lang.is-open {
	max-height: none;
	overflow: visible;
}

.meer-knop {
	background: none;
	border: 0;
	padding: 6px 0 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--magenta);
	cursor: pointer;
}


/* De filterkolom op een smal scherm. Standaard is de schakelaar onzichtbaar,
   want op een breed scherm staan de filters gewoon open naast de producten. */
.zijbalk-schakelaar {
	display: none;
}

/* ---------- Productfoto's passend in plaats van bijgesneden ----------
   Een haarwerk is staand gefotografeerd en vult de 3:4 vanzelf, maar een clip
   of een velletje is van dichtbij op wit geschoten. Die werden bijgesneden tot
   een portret en uitvergroot, waardoor het product niet meer te zien was. */

.kaart-beeld {
	background: var(--papier);
	border: 1px solid var(--lijn);
}

.kaart-beeld img,
.woocommerce ul.products li.product a .kaart-beeld img,
.woocommerce ul.products li.product .kaart-beeld img {
	object-fit: contain;
	padding: 10%;
}

.finkers-heeft-binnenwerk::after {
	background-size: contain;
	background-position: center;
}

/* ---------- Homepage ---------- */

.hero {
	background: var(--inkt);
	color: var(--papier);
	padding: 74px 0 64px;
}

.hero .merkstreep {
	width: 52px;
	height: 5px;
	background: var(--magenta);
	margin-bottom: 28px;
}

.hero h1 {
	font-size: clamp(34px, 5vw, 60px);
	text-transform: uppercase;
	max-width: 16ch;
}

.hero h1 em {
	font-style: normal;
	color: var(--magenta);
}

.hero p {
	color: #b4b4b4;
	max-width: 58ch;
	font-size: 16px;
}

.hero-acties {
	margin-top: 30px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-knop {
	background: var(--magenta);
	color: var(--papier);
	padding: 13px 24px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.hero-knop.leeg {
	background: transparent;
	border: 1px solid #4a4a4a;
}

.hero-knop.leeg:hover {
	border-color: var(--magenta);
}

.ingangen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.ingang {
	border: 1px solid var(--lijn);
	padding: 24px 22px 22px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.ingang:hover {
	border-color: var(--magenta);
}

.ingang h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.ingang p {
	font-size: 13.5px;
	color: var(--grafiet);
	margin: 0 0 14px;
	/* Duwt Bekijken naar de onderkant, zodat de vier links op een lijn staan. */
	flex: 1 1 auto;
}

.ingang-pijl {
	font-size: 13px;
	font-weight: 600;
	color: var(--magenta);
}

.balk {
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
	border-top: 1px solid var(--lijn);
	margin-top: 44px;
	padding-top: 24px;
	font-size: 13.5px;
	color: var(--grafiet);
}

.balk b {
	color: var(--inkt);
}

.balk a {
	text-decoration: none;
}

.startpagina-tekst {
	margin-top: 44px;
}

@media (max-width: 900px) {
	.winkel-opzet {
		grid-template-columns: 1fr;
	}

	.zijbalk {
		border-right: 0;
		border-bottom: 1px solid var(--lijn);
		padding-right: 0;
		padding-bottom: 16px;
	}

	.zijbalk > h3 {
		display: none;
	}

	.zijbalk-schakelaar {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 12px 14px;
		background: var(--mist);
		border: 1px solid var(--lijn);
		font: inherit;
		font-size: 14px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

	.zijbalk-actief {
		background: var(--magenta);
		color: var(--papier);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 2px 8px;
	}

	.zijbalk-inhoud {
		display: none;
		padding-top: 18px;
	}

	.zijbalk.is-open .zijbalk-inhoud {
		display: block;
	}

	.ingangen {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ingangen {
		grid-template-columns: 1fr;
	}
}

/* Staat er geen prijs, dan een tekst in plaats van 0,00. */
.prijs-inlog {
	color: var(--grijs);
	font-size: 13px;
	font-style: normal;
}

/* ---------- Productpagina ---------- */

.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

.single-product div.product::before,
.single-product div.product::after {
	content: none;
}

.single-product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
	margin: 0;
}

.single-product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	height: auto !important;
	transform: none !important;
	width: auto !important;
}

.single-product .woocommerce-product-gallery__image {
	width: auto !important;
	border: 1px solid var(--lijn);
	background: var(--papier);
}

.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* Compact (Roy, 23 sep 2026): de eerste foto groot, de rest als kleine plaatjes
   eronder. galerij.js wisselt een aangeklikt plaatje met de grote foto. */
.single-product .woocommerce-product-gallery__wrapper {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.single-product .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

.single-product .woocommerce-product-gallery__image:not(:first-child) {
	cursor: pointer;
}

.single-product .woocommerce-product-gallery__image:not(:first-child) img {
	aspect-ratio: 1;
	object-fit: contain;
}

.single-product .product-beschrijving {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--lijn);
	font-size: 14px;
	line-height: 1.6;
}

.single-product .product-beschrijving h2 {
	font-size: 15px;
	margin: 0 0 10px;
}

/* De vergrootknop van WooCommerce hoort bij de zoom die we niet gebruiken. */
.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

.single-product .summary {
	width: auto !important;
	float: none !important;
	margin: 0;
}

.single-product .product_title {
	font-size: clamp(26px, 3vw, 36px);
	margin-bottom: 10px;
}

.single-product .summary .price {
	color: var(--inkt);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 22px;
	display: block;
}

.single-product .summary .prijs-inlog {
	font-size: 15px;
	font-weight: 400;
}

.single-product .variations th,
.single-product .variations td {
	padding: 6px 0;
	text-align: left;
	vertical-align: middle;
}

.single-product .variations label {
	font-weight: 600;
	font-size: 14px;
}

.single-product .variations select {
	min-width: 240px;
	padding: 9px 10px;
	border: 1px solid var(--lijn);
	background: var(--papier);
	font: inherit;
	font-size: 14px;
}

.single-product .quantity input {
	width: 68px;
	padding: 10px 8px;
	border: 1px solid var(--lijn);
	font: inherit;
	text-align: center;
}

.single-product .product_meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--lijn);
	font-size: 13px;
	color: var(--grijs);
}

.single-product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 34px;
	border-top: 1px solid var(--lijn);
	padding-top: 28px;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 26px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--lijn);
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--grijs);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--inkt);
	border-color: var(--magenta);
}

.single-product .woocommerce-tabs .panel > h2 {
	display: none;
}

.single-product .woocommerce-tabs .panel {
	max-width: 78ch;
}

@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ---------- Maatwerkconfigurator ----------
   De plugin heeft een eigen stylesheet die het zware werk al doet, met de
   kolommen en het meeschuivende prijsblok. Hij stelt twee variabelen
   beschikbaar, dus de huisstijl gaat er hier overheen zonder de plugin aan te
   raken. */

.fhd-configurator {
	--fhd-lijn: var(--lijn);
	--fhd-accent: var(--inkt);
}

.fhd-configurator fieldset {
	border-radius: 0;
	padding: 20px 22px 22px;
	margin-bottom: 22px;
}

.fhd-configurator legend {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grijs);
	font-weight: 700;
	padding: 0 8px;
}

.fhd-configurator label {
	font-size: 14px;
	font-weight: 500;
}

.fhd-configurator select,
.fhd-configurator input[type="number"],
.fhd-configurator input[type="text"],
.fhd-configurator textarea {
	border-radius: 0;
	padding: 9px 10px;
	font-size: 14px;
}

/* De plugin zet alleen select, number en textarea op volle breedte. Daardoor
   stond Kleurbepaling als enige veld smal naast zijn label. */
.fhd-configurator input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 4px;
}

.fhd-configurator select:focus,
.fhd-configurator input:focus,
.fhd-configurator textarea:focus {
	outline: 2px solid var(--magenta);
	outline-offset: -2px;
}

/* Het prijsblok, zoals in het goedgekeurde ontwerp. */
.fhd-prijs-vast {
	border-radius: 0;
	border-top: 3px solid var(--magenta);
	background: var(--mist);
	padding: 22px;
}

.fhd-prijs-label {
	color: var(--magenta);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.16em;
}

.fhd-bedrag {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 8px 0 14px;
}

.fhd-toelichting {
	font-size: 13px;
	color: var(--grafiet);
}

/* De knop heeft de klasse button maar staat buiten WooCommerce, dus die valt
   anders terug op de standaardknop van de browser. */
.fhd-configurator .button,
.fhd-verstuur,
.fhd-inlogknop {
	background: var(--magenta);
	color: var(--papier);
	border: 0;
	border-radius: 0;
	padding: 13px 20px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	display: inline-block;
}

.fhd-configurator .button:hover,
.fhd-verstuur:hover,
.fhd-inlogknop:hover {
	background: var(--inkt);
	color: var(--papier);
}

.fhd-verstuur[disabled],
.fhd-verstuur[disabled]:hover {
	background: var(--lijn);
	color: var(--grijs);
	cursor: default;
}

.fhd-fout {
	color: #a1301f;
	font-size: 13px;
}

.fhd-bevestiging {
	color: #1d6b3a;
	font-size: 13px;
}

/* De leesbreedte van 72 tekens is goed voor een lap tekst, maar knijpt de
   configurator af op 619 pixels terwijl er 1240 beschikbaar is. Nagemeten op de
   semi-maatwerkpagina, 9 sep 2026. Op een pagina met de configurator vervalt
   die beperking dus. */
.pagina-tekst:has(.fhd-configurator) {
	max-width: none;
}

/* Zelfde verhaal voor de winkelpagina's van WooCommerce. Mijn account, de
   winkelwagen en het afrekenen lopen via page.php en werden dus ook op 619
   pixels afgeknepen. */
.woocommerce-account .pagina-tekst,
.woocommerce-cart .pagina-tekst,
.woocommerce-checkout .pagina-tekst,
.pagina-tekst:has(.woocommerce) {
	max-width: none;
}

/* ---------- Meldingen van WooCommerce ----------
   Staan op elke winkelpagina, dus een keer goed zetten. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border: 1px solid var(--lijn);
	border-left: 3px solid var(--magenta);
	background: var(--mist);
	padding: 14px 18px;
	margin: 0 0 24px;
	list-style: none;
	font-size: 14px;
}

.woocommerce-error {
	border-left-color: #a1301f;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 18px;
}

/* ---------- Inloggen ----------
   Dit is het eerste scherm dat een salon ziet, want de prijzen zitten achter de
   inlog. */

.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 460px;
	margin: 0 auto;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--lijn);
	border-top: 3px solid var(--magenta);
	border-radius: 0;
	padding: 30px 28px 26px;
	margin: 0;
}

.woocommerce form.login h2 {
	font-size: 22px;
	margin-bottom: 6px;
}

.woocommerce .woocommerce-form-row {
	padding: 0;
	margin-bottom: 16px;
}

.woocommerce .woocommerce-form-row label,
.woocommerce form .form-row label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 5px;
}

.woocommerce .woocommerce-Input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--lijn);
	border-radius: 0;
	font: inherit;
	font-size: 14px;
	background: var(--papier);
}

.woocommerce .woocommerce-Input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--magenta);
	outline-offset: -2px;
}

.woocommerce form.login .button {
	width: 100%;
	margin-top: 6px;
}

.woocommerce form.login .woocommerce-form-login__rememberme {
	font-size: 13.5px;
	font-weight: 400;
	display: block;
	margin-bottom: 14px;
}

.woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 13.5px;
}

.woocommerce-LostPassword a {
	color: var(--magenta);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 236px;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

/* WooCommerce zet een leeg meldingenvak vóór de navigatie. Dat pakte de eerste
   cel van het raster, waardoor de navigatie in de rechterkolom belandde en de
   inhoud een rij lager. Nagemeten 9 sep 2026: navigatie op x 964, inhoud op
   x 688, verschillende rijen. Daarom staan de plekken hier expliciet. */
.logged-in.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
}

.logged-in.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lijn);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--lijn);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 2px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-left: 3px solid transparent;
	padding-left: 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--magenta);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-left-color: var(--magenta);
	font-weight: 700;
	background: var(--mist);
}

.woocommerce-account .woocommerce-MyAccount-content p {
	font-size: 14.5px;
}

/* ---------- Tabellen, bestellingen en adressen ---------- */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table {
	border: 1px solid var(--lijn);
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}

.woocommerce table.shop_table th {
	background: var(--mist);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grafiet);
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--lijn);
}

.woocommerce table.shop_table td {
	padding: 12px 14px;
	border-top: 1px solid var(--lijn);
}

.woocommerce .woocommerce-Address {
	border: 1px solid var(--lijn);
	padding: 20px 22px;
}

.woocommerce .woocommerce-Address-title h2,
.woocommerce .woocommerce-Address-title h3 {
	font-size: 17px;
}

@media (max-width: 900px) {
	.logged-in.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: auto;
	}
}

/* ---------- Foto's heel in de winkelwagen en bij het afrekenen ----------
   Het plaatje is sinds 15 sep niet meer vierkant bijgesneden (zie
   finkers_miniatuur_niet_bijsnijden). Hier alleen zorgen dat de blokken het ook
   in zijn eigen verhouding laten staan. */

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.woocommerce-mini-cart-item img {
	height: auto;
	object-fit: contain;
}

/* ---------- Kruimelpad ---------- */

.kruimelpad {
	font-size: 13px;
	color: var(--grijs);
	margin: -18px 0 22px;
}

.kruimelpad a {
	color: var(--grafiet);
	text-decoration: none;
}

.kruimelpad a:hover {
	color: var(--magenta);
}

.kruimel-scheiding {
	margin: 0 8px;
}

/* ---------- Tegels, de ingangen van de winkel ----------
   De drie hoofdgroepen op /winkel/ en de zeven onderdelen van Aanvullende
   producten. Zelfde taal als de productkaarten, zodat het een winkel blijft. */

.winkel-tegels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.winkel-tegel {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.winkel-tegel-beeld {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--papier);
	border: 1px solid var(--lijn);
	margin-bottom: 14px;
	overflow: hidden;
}

.winkel-tegel-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	margin: 0;
}

.winkel-tegel:hover .winkel-tegel-beeld {
	border-color: var(--magenta);
}

.winkel-tegel-titel {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
}

.winkel-tegel-tekst {
	font-size: 13.5px;
	color: var(--grafiet);
	margin-bottom: 12px;
	flex: 1 1 auto;
}

.winkel-tegel .ingang-pijl {
	margin-top: auto;
}

@media (max-width: 900px) {
	.winkel-tegels {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.winkel-tegels {
		gap: 18px 12px;
	}

	.winkel-tegel-titel {
		font-size: 15px;
	}
}

/* ---------- Kleur kiezen op de productpagina ----------
   Knoppen per kleur, daaronder de kleurplaatjes en dan de gewone keuzelijst van
   WooCommerce. Zie finkers_kleurkeuze_tonen en kleurkeuze.js. */

.kleurkeuze {
	margin: 0 0 18px;
}

.kleurkeuze-kleuren {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.kleurkeuze-label {
	font-weight: 600;
	font-size: 14px;
	margin-right: 6px;
}

.kleurknop {
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: 0;
	padding: 6px 12px;
	font: inherit;
	font-size: 13px;
	color: var(--grafiet);
	cursor: pointer;
}

.kleurknop:hover {
	border-color: var(--inkt);
}

.kleurknop.is-actief {
	background: var(--inkt);
	border-color: var(--inkt);
	color: var(--papier);
}

.kleurknop-aantal {
	opacity: 0.6;
	font-size: 11.5px;
	margin-left: 3px;
}

.kleurstalen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	max-height: 312px;
	overflow-y: auto;
	padding: 2px;
	margin-bottom: 10px;
}

.kleurstaal {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: var(--papier);
	border: 1px solid var(--lijn);
	border-radius: 0;
	padding: 3px;
	font: inherit;
	cursor: pointer;
	text-align: center;
}

/* display flex hierboven wint anders van het hidden-attribuut dat het script zet. */
.kleurstaal[hidden] {
	display: none;
}

.kleurstaal:hover,
.kleurstaal:focus-visible {
	border-color: var(--magenta);
}

.kleurstaal.is-actief {
	border-color: var(--magenta);
	box-shadow: 0 0 0 2px var(--magenta);
}

.kleurstaal-beeld {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--mist);
	overflow: hidden;
}

.kleurstaal-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.kleurstaal-code {
	font-size: 11.5px;
	line-height: 1.3;
	padding-top: 3px;
	color: var(--grafiet);
	word-break: break-word;
}

.kleurkeuze-ring {
	font-size: 12.5px;
	color: var(--grijs);
	margin: 0;
}

/* Adres alleen via Finkers (Roy, 23 sep 2026): geen knop Bewerken bij de adressen. */
.woocommerce-account .woocommerce-Address-title .edit {
	display: none;
}

.woocommerce-account .adres-via-finkers {
	margin-top: 18px;
	font-size: 14px;
}

/* Productpagina netjes uitgelijnd (Sander, 28 sep 2026). WooCommerce zelf zet de prijs
   olijfgroen, de bestelknop paars (klasse alt) en het label bij de keuzelijst bovenaan
   de regel, met regels die specifieker zijn dan de onze. Daarom hier met
   .woocommerce div.product ervoor. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--inkt);
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	vertical-align: middle;
	line-height: 1.3;
	padding: 6px 0;
}

.woocommerce div.product form.cart .variations th {
	padding-right: 24px;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 14px;
}

/* Aantal en bestelknop naast elkaar, even hoog, en de knop in de huisstijl. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
	display: flex;
}

.woocommerce div.product form.cart div.quantity input.qty {
	height: auto;
	padding: 0 8px;
	width: 68px;
}

.woocommerce div.product form.cart .button.alt,
.woocommerce div.product form.cart .button.alt:hover {
	float: none;
	margin: 0;
	padding: 13px 26px;
	background: var(--magenta);
	border: 1px solid var(--magenta);
	color: #fff;
}

.woocommerce div.product form.cart .button.alt.disabled,
.woocommerce div.product form.cart .button.alt:disabled {
	opacity: 0.45;
}

/* De beschrijving had ongelijke witruimte, doordat de tekst uit de oude shop soms met
   en soms zonder lege regel is ingevoerd. Nu overal dezelfde afstand. */
.single-product .product-beschrijving p {
	margin: 0 0 6px;
}

/* Beoordelingen onder het product, sinds 1.10.0 (functions.php sectie 13). */
.single-product .product-beoordelingen {
	clear: both;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--lijn);
	font-size: 14px;
	line-height: 1.6;
	max-width: 760px;
}
.single-product .product-beoordelingen h2,
.single-product .product-beoordelingen .comment-reply-title {
	font-size: 15px;
	margin: 0 0 12px;
}
.single-product .product-beoordelingen ol.commentlist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.single-product .product-beoordelingen ol.commentlist li {
	padding: 12px 0;
	border-bottom: 1px solid var(--lijn);
}
.single-product .product-beoordelingen img.avatar {
	display: none;
}
.single-product .product-beoordelingen textarea {
	width: 100%;
	min-height: 110px;
}
.single-product .product-beoordelingen .star-rating,
.single-product .product-beoordelingen p.stars a {
	color: var(--magenta);
}
.single-product .product-beoordelingen .form-submit input[type="submit"] {
	background: var(--magenta);
	color: var(--papier);
	border: 0;
	padding: 10px 22px;
	cursor: pointer;
}

/* Binnenzijde voorop bij een gekozen productlijn, de foto bij aanwijzen (sinds 1.10.1). */
.finkers-heeft-binnenwerk.finkers-binnenwerk-voorop::after {
	opacity: 1;
}
@media (hover: hover) {
	.finkers-heeft-binnenwerk.finkers-binnenwerk-voorop:hover::after {
		opacity: 0;
	}
}
li.product:focus-within .finkers-heeft-binnenwerk.finkers-binnenwerk-voorop::after,
.finkers-heeft-binnenwerk.finkers-binnenwerk-voorop.finkers-toon::after {
	opacity: 0;
}

/* Cursuspagina (plugin, [fhd_cursussen]) over de volle breedte, net als de
   configurator. De inleiding houdt de leesbreedte. Sinds 1.10.2. */
.pagina-tekst:has(.fhd-cursussen) {
	max-width: none;
}
.pagina-tekst:has(.fhd-cursussen) > p {
	max-width: 72ch;
}