/*
Theme Name: Goolse Planken
Template: storefront
Author: Goolse Planken
Description: Child-thema van Storefront met een warme, ambachtelijke uitstraling (crème/hout-tinten, stoere hoofdletter-koppen), geïnspireerd op de vormgeving van leatherheadsports.com.
Version: 0.1.0
Text Domain: goolseplanken
*/

/* ==========================================================================
   Zelf-gehoste lettertypen (geen externe Google Fonts-aanroep i.v.m. privacy)
   ========================================================================== */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('fonts/oswald-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/sourcesans3-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('fonts/playfair-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/playfair-italic-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Nadia Script';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/chocolate-covered-raindrops.ttf') format('truetype');
}
@font-face {
	font-family: 'Nadia Script';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/chocolate-covered-raindrops-bold.ttf') format('truetype');
}

/* ==========================================================================
   Kleur- en typografie-tokens
   ========================================================================== */
:root {
	--gp-bg:            #F2F2F0;
	--gp-surface:       #FFFFFF;
	--gp-wood-deep:     #4A2E1E;
	--gp-wood-accent:   #8B5A2B;
	--gp-wood-accent-dark: #714623;
	--gp-ink:           #1C1B19;
	--gp-border:        #E6E2DB;
	--gp-black:         #0A0A0A;
	/* oude namen als alias behouden zodat niets breekt */
	--gp-cream:         var(--gp-bg);
	--gp-cream-alt:     var(--gp-surface);
}

body {
	background-color: var(--gp-bg);
	color: var(--gp-ink);
	font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-title a {
	font-family: 'Nadia Script', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--gp-wood-deep);
}

a { color: var(--gp-wood-accent); }
a:hover, a:focus { color: var(--gp-wood-accent-dark); }

/* ==========================================================================
   Header / navigatie
   ========================================================================== */
.site-header {
	position: relative;
	background-color: var(--gp-wood-deep);
	border-bottom: none;
	min-height: 190px;
	/* Bewust GEEN overflow:hidden: dat knipt position:fixed-kinderen (mandje,
	   hamburger-knop) weg zodra de header zelf uit beeld scrolt. De foto-
	   overlay hieronder gebruikt inset:0 en heeft de clip toch niet nodig. */
}
.site-header::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	inset: 0;
	background-image: url('images/header-banner-v2.jpg');
	background-size: cover;
	background-position: center 30%;
	z-index: 0;
}
.site-header::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,14,8,0.35) 0%, rgba(20,14,8,0.15) 45%, rgba(20,14,8,0.65) 100%);
	z-index: 0;
}
.site-header > * {
	position: relative;
	/* Hoog genoeg zodat alles hierbinnen (o.a. het winkelmandje en de
	   hamburger-knop, die daar met position:fixed in zitten) altijd boven de
	   pagina-inhoud blijft i.p.v. er tijdens het scrollen achter te schuiven -
	   een lage waarde hier "vangt" geneste fixed-elementen in een lage
	   stapellaag, ongeacht hun eigen z-index. */
	z-index: 9999;
	width: 100%;
}
/* Logo krijgt een zachte witte gloed zodat het zwarte beeldmerk leesbaar
   blijft, ongeacht wat er op de onderliggende foto staat. */
.site-branding .custom-logo {
	filter: drop-shadow(0 0 10px rgba(255,255,255,0.85)) drop-shadow(0 0 4px rgba(255,255,255,0.7));
}
@media (max-width: 768px) {
	.site-header {
		min-height: 120px;
	}
}
/* Logo altijd zichtbaar en met een vaste, nette hoogte - op elk schermformaat. */
.site-branding .gp-logo-title {
	display: flex;
	align-items: center;
	gap: 0.8em;
}
.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}
.site-branding .custom-logo {
	max-height: 95px;
	width: auto;
	flex-shrink: 0;
}
.main-navigation ul li a,
.main-navigation ul li a:visited,
.main-navigation ul li a:active,
.main-navigation ul li a:focus {
	font-family: 'Nadia Script', 'Playfair Display', cursive, serif;
	font-weight: 500;
	letter-spacing: 0.01em;
	font-size: 1.7em;
	color: #FFF8EC;
	text-shadow: 0 1px 6px rgba(0,0,0,0.5);
	text-decoration: none;
	outline: none;
	background: none;
}
/* Storefronts eigen verticale padding (1.618em boven/onder) op elk
   menu-item is de bron van de ruimte tussen items zodra het menu over 2
   regels valt (desktop) én tussen items in het uitklapbare hamburgermenu
   (mobiel, waar dit boven op de flex-gap hieronder komt) - twee keer
   gehalveerd (1.618em -> 0.809em -> 0.4045em). */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	padding-top: 0.4045em;
	padding-bottom: 0.4045em;
}
.main-navigation ul li a:hover { color: #F0C68A; }
/* Actief menu-item: onderstreept i.p.v. de standaard blauwe focus-rand/grijze
   :active-kleur van de browser. */
.main-navigation ul li a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	color: #FFF8EC !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.main-navigation .menu-toggle {
	color: #FFF8EC;
	border-color: rgba(255,255,255,0.6);
}
/* Winkelmandje: vast rechtsboven in beeld i.p.v. in de header-navigatie, zodat
   het altijd zichtbaar en bereikbaar blijft, ook los van de foto-banner. */
#site-header-cart {
	position: fixed;
	top: 16px;
	right: 20px;
	z-index: 999;
	margin: 0 !important;
}
#site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 0.4em;
	background-color: var(--gp-wood-deep);
	color: #FFF8EC !important;
	text-shadow: none !important;
	padding: 0.55em 1em;
	border-radius: 999px;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.85em;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	transition: background-color 0.2s ease;
}
#site-header-cart .cart-contents:hover {
	background-color: var(--gp-wood-accent);
}
#site-header-cart .cart-contents .woocommerce-Price-amount,
#site-header-cart .cart-contents .count {
	color: #FFF8EC;
}
/* De vorige poging (Storefronts eigen ::after-icoon herstellen met float:none)
   gaf geen verschil - dus i.p.v. dat icoon proberen uit te lijnen, hier
   volledig uitgeschakeld en vervangen door een eigen SVG-icoontje vóór de
   tekst, dat als normaal flex-kind meedoet in de al bestaande
   align-items:center - dus per definitie gelijk met de tekst. */
#site-header-cart .cart-contents::after {
	content: none;
}
#site-header-cart .cart-contents::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
@media (max-width: 480px) {
	#site-header-cart .cart-contents .count { display: none; }
}

/* WhatsApp-knop: zelfde pil-stijl als het winkelmandje, direct eronder. */
.gp-whatsapp-button {
	position: fixed;
	top: 64px;
	right: 20px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	background-color: var(--gp-wood-deep);
	color: #FFF8EC;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	transition: background-color 0.2s ease;
}
.gp-whatsapp-button:hover {
	background-color: #25D366;
	color: #fff;
}

/* Logo bovenin, menu onderin de foto-banner - alléén vanaf tablet/desktop-
   breedte. Op mobiel laten we Storefront's eigen, beproefde gedrag intact
   (logo links, hamburger-knop rechts via float, menu-lijst verborgen tot je
   op het hamburger-icoon tikt) i.p.v. dat zelf met flex te overschrijven. */
@media (min-width: 769px) {
	#masthead {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 190px;
		padding: 0.8em 0;
		box-sizing: border-box;
	}
	#masthead > .col-full:first-child {
		display: flex;
		align-items: center;
		width: auto;
		max-width: none;
		padding: 0 1em;
		margin: 0;
	}
	.site-branding .custom-logo {
		max-height: 100px;
	}
	#masthead .storefront-primary-navigation {
		border: none;
		margin: 0;
		background: transparent;
	}
	#masthead .storefront-primary-navigation .col-full {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		max-width: none;
		padding: 0 1em;
	}
	#masthead .storefront-primary-navigation nav#site-navigation {
		width: auto;
	}
}

/* Op mobiel: gewone, simpele stapeling (logo-rij, daaronder de menu-rij) i.p.v.
   flex-gebaseerde pinning - dat veroorzaakte eerder dat het logo naar de
   onderkant "sprong" zodra het uitgeklapte hamburgermenu de header opblies. */
@media (max-width: 768px) {
	#masthead {
		display: block;
		padding: 0.6em 0;
	}
	#masthead > .col-full:first-child {
		padding: 0 1em;
	}
	/* Pull-out zijmenu, zelfde patroon als de "bottom-nav"/pullout-nav in het
	   dashboard (web/app-energy-core.js + web/style.css): een paneel dat
	   verticaal gecentreerd, grotendeels buiten beeld links hangt, met een
	   handgreep die zichtbaar blijft steken en het geheel naar binnen schuift
	   bij een tik. Storefront's eigen JS zet de klasse "toggled" al op
	   .main-navigation zodra op de knop getikt wordt - dat hoeven we dus niet
	   zelf te bouwen, enkel de schuifbeweging op basis van die klasse. */
	#masthead .storefront-primary-navigation {
		background: none;
		box-shadow: none;
	}
	#masthead .storefront-primary-navigation .col-full {
		padding: 0;
	}
	.main-navigation {
		position: fixed;
		top: 50%;
		left: 0;
		transform: translate(-100%, -50%);
		background-color: var(--gp-wood-deep);
		border-radius: 0 16px 16px 0;
		box-shadow: 0 10px 30px rgba(0,0,0,0.35);
		z-index: 999;
		padding: 1.3em 1.1em;
		max-width: 210px;
		transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
	}
	.main-navigation.toggled {
		transform: translate(0, -50%);
	}
	.main-navigation ul {
		display: flex;
		flex-direction: column;
		gap: 0.175em;
	}
	.main-navigation ul li a {
		font-size: 1.3em;
	}
	/* Storefront animeert ".handheld-navigation" (de echte wrapper in onze
	   markup - niet ".menu > ul", dat matchte hier niet) zelf óók met een
	   eigen, tragere max-height-animatie (0.8s) los van onze schuifbeweging
	   (0.3s) - dat gaf het "eerst uitschuiven, dan pas hoger worden"-effect.
	   Inhoud altijd op volle hoogte, alleen het paneel zelf animeert nog. */
	.main-navigation .handheld-navigation {
		max-height: none !important;
		overflow: visible !important;
		transition: none !important;
	}
	.main-navigation .primary-navigation {
		display: none !important;
	}
	/* De knop is de "handgreep": blijft als klein lipje zichtbaar aan de
	   rechterkant van het paneel, ook wanneer het paneel zelf buiten beeld
	   staat, precies zoals .nav-handle in het dashboard. */
	.main-navigation .menu-toggle {
		position: absolute;
		top: 50%;
		right: -2.3em;
		transform: translateY(-50%);
		width: 2.3em;
		height: 3.4em;
		padding: 0;
		background-color: var(--gp-wood-deep);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23FFF8EC' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='2' y1='5' x2='18' y2='5'/%3E%3Cline x1='2' y1='10' x2='18' y2='10'/%3E%3Cline x1='2' y1='15' x2='18' y2='15'/%3E%3C/g%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		border: none;
		border-radius: 0 10px 10px 0;
		box-shadow: 4px 0 10px rgba(0,0,0,0.25);
	}
	.main-navigation .menu-toggle span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
	}
}

/* ==========================================================================
   Knoppen / CTA's - strak en minimaal, geen schaduw/verloop
   ========================================================================== */
.button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce-page .button,
input[type="submit"] {
	background-color: var(--gp-wood-deep);
	border: none;
	border-radius: 2px;
	color: var(--gp-surface);
	font-family: 'Source Sans 3', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 600;
	font-size: 0.85em;
	padding: 0.55em 1.2em;
	box-shadow: none;
	transition: background-color 0.2s ease;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce-page .button:hover {
	background-color: var(--gp-wood-accent);
	color: #fff;
}
.button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background-color: var(--gp-wood-accent);
}
.button.alt:hover { background-color: var(--gp-wood-accent-dark); }

/* ==========================================================================
   Formuliervelden (Mijn account, Contact, Afrekenen) - duidelijk zichtbare
   vakjes i.p.v. de nauwelijks zichtbare browserstandaard.
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
	background-color: var(--gp-surface);
	border: 1px solid var(--gp-border);
	border-radius: 3px;
	padding: 0.65em 0.9em;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1em;
	color: var(--gp-ink);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea {
	min-height: 8em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	border-color: var(--gp-wood-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(139,90,43,0.15);
}
.woocommerce form .form-row label,
.wpcf7-form label {
	color: var(--gp-ink);
}

/* ==========================================================================
   Meldingsbalken (bv. "Je winkelwagen is momenteel leeg") - compacter en in
   de huisstijl i.p.v. de forse WooCommerce-standaard.
   ========================================================================== */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
	padding: 0.7em 1.1em 0.7em 2.6em;
	margin: 0 0 1.2em;
	font-size: 0.92em;
	background-color: var(--gp-surface);
	color: var(--gp-ink);
	border: 1px solid var(--gp-border);
	border-top: 3px solid var(--gp-wood-accent);
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
	top: 0.7em;
	left: 1em;
	font-size: 0.95em;
	color: var(--gp-wood-accent);
}
.woocommerce-info { border-top-color: var(--gp-wood-accent); }
.woocommerce-info::before { color: var(--gp-wood-accent); }
.woocommerce-error { border-top-color: #b3452f; }
.woocommerce-error::before { color: #b3452f; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
	font-size: 0.9em;
	padding: 0.45em 1em;
}

/* Meldingen (winkelmandje leeggemaakt, kortingscode toegepast, etc.) schuiven
   als los "toastje" rechtsboven in beeld i.p.v. als brede balk in de pagina
   te blijven staan - zie web/younik voor hetzelfde patroon. */
#gp-toast-container {
	position: fixed;
	top: 80px;
	right: 20px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	width: min(380px, calc(100vw - 40px));
}
#gp-toast-container .gp-toast {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 10px 30px rgba(0,0,0,0.22);
	cursor: pointer;
	opacity: 0;
	transform: translateX(120%);
}
#gp-toast-container .gp-toast.gp-toast--in {
	animation: gpToastIn 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
#gp-toast-container .gp-toast.gp-toast--out {
	animation: gpToastOut 0.35s ease forwards;
}
@keyframes gpToastIn {
	from { transform: translateX(120%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes gpToastOut {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 480px) {
	#gp-toast-container { top: 70px; right: 10px; left: 10px; width: auto; }
}

/* ==========================================================================
   Hero (front-page.php)
   ========================================================================== */
.gp-hero {
	position: relative;
	background: linear-gradient(135deg, var(--gp-wood-deep) 0%, #6b4226 55%, var(--gp-wood-accent) 100%);
	color: var(--gp-cream-alt);
	padding: 6em 1.5em;
	text-align: center;
	overflow: hidden;
}
.gp-hero--slider {
	min-height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gp-hero__slides {
	position: absolute;
	inset: 0;
}
.gp-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 2.2s ease-in-out;
}
.gp-hero__slide.is-active {
	opacity: 1;
}
.gp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36,26,18,0.45) 0%, rgba(36,26,18,0.6) 100%);
}
.gp-hero__content {
	position: relative;
	z-index: 1;
}
.gp-hero h1 {
	color: var(--gp-cream-alt);
	font-size: 2.6em;
	margin-bottom: 0.3em;
	text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.gp-hero p {
	max-width: 46em;
	margin: 0 auto 1.6em;
	font-size: 1.15em;
	color: #F0E6D6;
	text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.gp-hero .button {
	background-color: var(--gp-cream-alt);
	color: var(--gp-wood-deep);
}
.gp-hero .button:hover {
	background-color: #fff;
}

.gp-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4em 1.5em;
}
.gp-section--tight-bottom {
	padding-bottom: 1em;
}
.gp-section h2 {
	text-align: center;
	margin-bottom: 0.3em;
}
.gp-section .gp-subtitle {
	text-align: center;
	color: #6b5e4c;
	margin-bottom: 2.5em;
	font-size: 1.05em;
}
.gp-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2em;
	text-align: center;
}
.gp-values h3 { font-size: 1.1em; margin-bottom: 0.4em; }
.gp-values p { color: #5a4e3e; font-size: 0.95em; }

/* ==========================================================================
   Klantenbalk - doorlopende, automatisch scrollende rij logo's op de
   homepage. De lijst wordt in front-page.php dubbel gerenderd (twee keer
   dezelfde reeks achter elkaar) zodat de CSS-animatie naadloos kan lussen:
   bij -50% transform staat de tweede reeks exact op de plek waar de eerste
   begon.
   ========================================================================== */
.gp-klanten {
	max-width: 100%;
	margin: 0 auto;
	padding: 1em 0 4em;
}
.gp-klanten h2 {
	text-align: center;
	margin: 0 0 1.5em;
}
.gp-klanten__track {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.gp-klanten__row {
	display: flex;
	align-items: center;
	width: max-content;
	animation: gp-klanten-scroll 40s linear infinite;
}
.gp-klanten__track:hover .gp-klanten__row {
	animation-play-state: paused;
}
.gp-klanten__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 110px;
	margin: 0 1.8em;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.gp-klanten__logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.gp-klanten__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
@keyframes gp-klanten-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.gp-klanten__row { animation: none; }
	.gp-klanten__track { overflow-x: auto; }
}

/* ==========================================================================
   Sorteerbalk en resultatentelling boven de productgrids verbergen. Storefront
   rendert de sorteer-dropdown via een eigen wrapper (storefront-sorting) los
   van de gewone WooCommerce-hook, dus PHP-verwijdering alleen was niet
   genoeg - vandaar ook deze CSS-vangnet. Let op: de wrapper zelf NIET
   verbergen, want de paginanummers (volgende pagina's) zitten in dezelfde
   wrapper - alleen de sorteer-dropdown/resultatentelling zelf verbergen.
   ========================================================================== */
.woocommerce-result-count,
.woocommerce-ordering {
	display: none;
}

/* ==========================================================================
   Productgrid - flat-card stijl, subtiele randen i.p.v. schaduwen.
   ul.products staat standaard (Storefront) op float, waardoor kaarten met
   een langere titel niet even hoog worden als de rest. Door de rij zelf op
   flex te zetten (align-items:stretch is de default) krijgen alle li's in
   dezelfde rij automatisch dezelfde hoogte; de linkwrapper binnenin krijgt
   flex:1 zodat de "Bekijk"/"Start je ontwerp"-knop bij elke kaart onderaan
   uitlijnt, ongeacht het aantal titelregels.
   ========================================================================== */
.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	background-color: var(--gp-cream-alt);
	border: 1px solid var(--gp-border);
	border-radius: 2px;
	padding: 1.2em 1.2em 1.6em;
	transition: border-color 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--gp-wood-accent);
}
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woocommerce ul.products li.product > a.button {
	margin-top: 0.8em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 1.1em;
}
/* Categorietegels op de shop-pagina: het sierlijke script-font heeft een
   groter formaat nodig om goed leesbaar te blijven. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-size: 2.1em;
	line-height: 1.25;
	margin: 0.5em 0 0.2em;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.45em;
	font-weight: 600;
	color: var(--gp-wood-accent-dark);
}
.woocommerce ul.products li.product .price {
	color: var(--gp-wood-accent-dark);
	font-weight: 600;
}
.woocommerce span.onsale {
	background-color: var(--gp-wood-accent);
	font-family: 'Source Sans 3', sans-serif;
	text-transform: uppercase;
	border-radius: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background-color: var(--gp-black);
	color: #D8D5CF;
}
.site-footer a { color: #F2F0EB; }
/* Storefronts customizer-CSS (.site-footer a:not(...):not(...)) is
   specifieker en zet deze link anders op donkergrijs i.p.v. wit. */
.site-footer a.privacy-policy-link {
	color: #fff !important;
}
.site-footer .widget-title {
	color: #fff;
	font-family: 'Playfair Display', Georgia, serif;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   Ingelogd-indicator op mobiel (handheld footer bar)
   WordPress zet zelf al de class "logged-in" op <body> zodra een klant is
   ingelogd - geen extra PHP nodig, alleen deze kleur-override op het
   account-icoontje in de onderbalk. Zelfde groen als de WhatsApp-knop.
   ========================================================================== */
/* !important nodig: Storefronts customizer zet zelf al een specifiekere
   regel (.site-footer .storefront-handheld-footer-bar a:not(...):not(...))
   met een eigen kleur, die anders altijd wint. */
.storefront-handheld-footer-bar ul li.my-account > a {
	color: #ADB0B6 !important;
	transition: color 0.2s ease;
}
body.logged-in .storefront-handheld-footer-bar ul li.my-account > a {
	color: #25D366 !important;
}

/* ==========================================================================
   Reviews-pagina (echte, opgehaalde Google-reviews) - zelfde kaartstijl als
   de rest van de site (var(--gp-*), Playfair Display voor namen).
   ========================================================================== */
.gp-reviews {
	max-width: 900px;
	margin: 0 auto;
	padding: 1em 1.5em 4em;
}
.gp-reviews__summary {
	text-align: center;
	margin-bottom: 2.5em;
}
.gp-reviews__stars {
	display: flex;
	justify-content: center;
	gap: 0.2em;
	color: var(--gp-wood-accent);
	margin-bottom: 0.4em;
}
.gp-reviews__score {
	font-size: 1.3em;
	font-weight: 600;
	color: var(--gp-ink);
	margin: 0 0 1em;
}
.gp-reviews__score span {
	font-weight: 400;
	font-size: 0.7em;
	color: #6b5e4c;
	display: block;
}
.gp-reviews__cta {
	display: inline-block;
}
.gp-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5em;
}
.gp-review-card {
	background-color: var(--gp-surface);
	border: 1px solid var(--gp-border);
	border-radius: 6px;
	padding: 1.4em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gp-review-card__head {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 0.8em;
}
.gp-review-card__avatar {
	border-radius: 50%;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}
.gp-review-card__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: var(--gp-ink);
	margin: 0 0 0.15em;
}
.gp-review-card__stars {
	color: var(--gp-wood-accent);
	font-size: 0.9em;
	letter-spacing: 0.1em;
}
.gp-review-card__text {
	color: #5a4e3e;
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0;
}