/*
Theme Name:   Smulpost
Theme URI:    https://smulpost.nl
Description:  Child theme van Hello Elementor voor smulpost.nl. Draagt het
              ontwerpsysteem - tokens, typografie, componentstijlen - zodat de
              vormgeving niet langer in een Elementor-kit en losse widget-CSS
              verspreid zit. Functionaliteit hoort in de module 'smulpost' van
              de plugin udefine-core.
Author:       UDefine
Author URI:   https://udefine.nl
Template:     hello-elementor
Version:      1.1.1
Text Domain:  smulpost
*/

/* =========================================================================
   1. Lettertypes

   Stonden tot nu toe als TTF in uploads/2024/09/ en werden door een
   Elementor-kit ingeladen. Nu als WOFF2 in het thema: samen 324 KB in plaats
   van 1,34 MB, en ze gaan mee met de deploy - uploads/ doet dat niet.

   De paden zijn relatief aan dit bestand, dus ze blijven kloppen waar het
   thema ook staat.
   ========================================================================= */

@font-face {
	font-family: "Brevia";
	src: url("assets/fonts/brevia-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Brevia";
	src: url("assets/fonts/brevia-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "AmericanTypeWriter";
	src: url("assets/fonts/americantypewriter-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AmericanTypeWriter";
	src: url("assets/fonts/americantypewriter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AmericanTypeWriter";
	src: url("assets/fonts/americantypewriter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AmericanTypeWriter";
	src: url("assets/fonts/americantypewriter-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   2. Tokens

   Twee kleuren zijn bewust donkerder dan wat er in de Elementor-kit stond.
   De oude bodytekst #7A7A7A haalde op cr me 3,9:1 en zakte daarmee onder de
   4,5:1 die WCAG 2.2 AA voor gewone tekst vraagt; #6F6F6F haalt 4,81:1 op
   cr me en 5,02:1 op wit.

   Het roze accent #C56068 is een merkkleur en blijft, maar alleen voor grote
   en decoratieve vlakken - op cr me haalt het 3,4:1 en dus niet genoeg voor
   kleine tekst. Voor links, prijzen en knoppen is er --sp-accent-ui
   (#913F48): 6,68:1 op cr me en 4,53:1 op roze.
   ========================================================================= */

:root {
	/* Merkkleuren */
	--sp-bruin:      #5D3529; /* koppen, navigatie, focusring */
	--sp-creme:      #FBFAF5; /* paginaondergrond             */
	--sp-roze:       #F7C4C1; /* vlakken, hover               */
	--sp-zand:       #EAE3D4; /* secties, kaartranden         */
	--sp-karamel:    #C59A78; /* accentlijnen                 */
	--sp-wit:        #FFFFFF;

	/* Functionele kleuren */
	--sp-tekst:      #6F6F6F; /* lopende tekst                */
	--sp-accent:     #C56068; /* groot en decoratief          */
	--sp-accent-ui:  #913F48; /* links, prijzen, knoppen      */
	--sp-focus:      #5D3529; /* focusring                    */
	--sp-fout:       #8A1F2B;
	--sp-goed:       #2F6B4F;

	/* Lettertypes */
	--sp-kop:   "Brevia", Georgia, "Times New Roman", serif;
	--sp-lijf:  "AmericanTypeWriter", "American Typewriter", Georgia, serif;

	/* Typografische schaal. clamp() zodat er geen losse breakpoints nodig zijn. */
	--sp-text-sm:   clamp(.875rem, .84rem + .12vw, .95rem);
	--sp-text-base: clamp(1.0625rem, 1rem + .18vw, 1.125rem);
	--sp-h3:        clamp(1.45rem, 1.2rem + .8vw, 2rem);
	--sp-h2:        clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
	--sp-h1:        clamp(2.6rem, 1.8rem + 3.3vw, 5rem);

	--sp-regelhoogte:      1.6;
	--sp-regelhoogte-kop:  1.15;

	/* Ruimte, in stappen van 8. */
	--sp-ruimte-1: .5rem;
	--sp-ruimte-2: 1rem;
	--sp-ruimte-3: 1.5rem;
	--sp-ruimte-4: 2rem;
	--sp-ruimte-6: 3rem;
	--sp-ruimte-8: 4rem;
	--sp-sectie:   clamp(3rem, 7vw, 7rem);

	/* Maten */
	--sp-max:       1280px; /* buitencontainer: tekst, header, footer */
	--sp-max-breed: 1600px; /* rasters: shop, categorieoverzichten          */
	--sp-max-lezen: 68ch;   /* lopende tekst: 65-70 tekens per regel */
	--sp-radius:      14px;
	--sp-radius-knop: 999px;
	--sp-raak:        44px; /* minimaal klikgebied */
	--sp-knop-hoogte: 48px;

	/* Schaduw: zacht en schaars. */
	--sp-schaduw:    0 1px 2px rgba(93, 53, 41, .06), 0 8px 24px rgba(93, 53, 41, .07);
	--sp-schaduw-op: 0 2px 4px rgba(93, 53, 41, .08), 0 14px 32px rgba(93, 53, 41, .10);

	/* Beweging. Zie de animatierichtlijnen: transform en opacity, niets anders. */
	--sp-motion-fast: 160ms;
	--sp-motion-base: 240ms;
	--sp-motion-slow: 400ms;
	--sp-ease-out:    cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================================
   3. Basis
   ========================================================================= */

body {
	background-color: var(--sp-creme);
	color: var(--sp-tekst);
	font-family: var(--sp-lijf);
	font-size: var(--sp-text-base);
	line-height: var(--sp-regelhoogte);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-kop);
	font-weight: 700;
	line-height: var(--sp-regelhoogte-kop);
	color: var(--sp-bruin);
	text-wrap: balance;
}

h1 { font-size: var(--sp-h1); }
h2 { font-size: var(--sp-h2); }
h3 { font-size: var(--sp-h3); }

p, li {
	text-wrap: pretty;
}

/* Lopende tekst niet breder dan comfortabel leesbaar is. Alleen waar het
   echt om copy gaat - niet in grids, kaarten of navigatie. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--sp-max-lezen);
}

a {
	color: var(--sp-accent-ui);
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

a:hover {
	color: var(--sp-bruin);
}

/* -------------------------------------------------------------------------
   Focus

   Elementor en veel widgetpakketten zetten outline op none. Een
   toetsenbordgebruiker weet dan niet meer waar hij is. Deze regel wint van
   die resets en geldt alleen bij toetsenbordnavigatie, dus muisklikken
   krijgen geen ring.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	/* !important is hier geen luiheid. De Customizer-CSS van deze site zet op
	   meerdere plekken outline: none met een hogere specificiteit, en die wordt
	   later in de <head> uitgevoerd dan dit bestand. Zonder !important is er
	   voor een toetsenbordgebruiker geen zichtbare focus. */
	outline: 3px solid var(--sp-focus) !important;
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link:focus {
	background: var(--sp-wit);
	color: var(--sp-bruin);
	padding: var(--sp-ruimte-2);
	z-index: 100000;
}

/* Beeld reserveert zijn ruimte, anders springt de layout tijdens het laden. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   4. Componenten
   ========================================================================= */

/* -------------------------------------------------------------------------
   Knoppen

   Eén set states voor alle knoppen: Woo, Elementor en eigen markup. Minimaal
   48px hoog met 44px klikgebied, zoals WCAG 2.2 Target Size (Minimum) vraagt.
   ------------------------------------------------------------------------- */

/*
 * De browser geeft [hidden] alleen `display: none` in zijn eigen stylesheet, en
 * die verliest van elke regel die zelf een display zet. .sp-knop is
 * inline-flex, dus een knop met het hidden-attribuut bleef gewoon staan - de
 * knop "Volgende stap" stond ook op de laatste stap van het afrekenen.
 */
[hidden] {
	display: none !important;
}

.sp-knop,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-ruimte-1);
	min-height: var(--sp-knop-hoogte);
	min-width: var(--sp-raak);
	padding: .75rem 1.75rem;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
	font-family: var(--sp-lijf);
	font-size: var(--sp-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sp-motion-fast) var(--sp-ease-out),
	            transform var(--sp-motion-fast) var(--sp-ease-out);
}

.sp-knop:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--sp-bruin);
	color: var(--sp-wit);
	transform: translateY(-1px);
}

.sp-knop:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
}

.sp-knop[disabled],
.sp-knop[aria-disabled="true"],
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	background: var(--sp-zand);
	color: #6b6257;
	cursor: not-allowed;
	transform: none;
}

/* Bezig: de knop blijft leesbaar en behoudt zijn breedte, zodat de layout
   niet verspringt terwijl er gewacht wordt. */
.sp-knop[data-bezig="true"] {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.sp-knop[data-bezig="true"]::after {
	content: "";
	position: absolute;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: var(--sp-wit);
	border-radius: 50%;
	animation: sp-draai 700ms linear infinite;
}

@keyframes sp-draai {
	to { transform: rotate(360deg); }
}

.sp-knop--tweede {
	background: transparent;
	color: var(--sp-bruin);
	box-shadow: inset 0 0 0 2px var(--sp-bruin);
}

.sp-knop--tweede:hover {
	background: var(--sp-bruin);
	color: var(--sp-wit);
}

/* -------------------------------------------------------------------------
   Formulieren
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	min-height: var(--sp-knop-hoogte);
	padding: .7rem 1rem;
	border: 1px solid var(--sp-zand);
	border-radius: var(--sp-radius);
	background: var(--sp-wit);
	color: var(--sp-bruin);
	font-family: var(--sp-lijf);
	font-size: var(--sp-text-base);
}

input::placeholder,
textarea::placeholder {
	color: #8b8b8b;
	opacity: 1;
}

label {
	display: inline-block;
	margin-bottom: .35rem;
	color: var(--sp-bruin);
	font-weight: 600;
}

.sp-veld-fout,
.woocommerce-error {
	color: var(--sp-fout);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--sp-fout);
}

/* -------------------------------------------------------------------------
   Kaarten en productkaarten

   Vaste beeldverhouding: zonder gereserveerde ruimte springt een raster met
   twintig producten tijdens het laden, en dat telt mee in de CLS.
   ------------------------------------------------------------------------- */

.sp-kaart {
	border-radius: var(--sp-radius);
	background: var(--sp-wit);
	box-shadow: var(--sp-schaduw);
	overflow: hidden;
	transition: box-shadow var(--sp-motion-base) var(--sp-ease-out),
	            transform var(--sp-motion-base) var(--sp-ease-out);
}

.sp-kaart:hover {
	box-shadow: var(--sp-schaduw-op);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product img,
.sp-kaart__beeld img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.woocommerce ul.products li.product .price,
.sp-kaart__prijs {
	color: var(--sp-accent-ui);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	color: var(--sp-tekst);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   Nieuwsbrief

   De knop stond absoluut over het invoerveld. Op een smal scherm bedekte hij
   daarmee de helft van wat je intypt. Onder de 640px hoort hij gewoon in de
   flow, eronder.
   ------------------------------------------------------------------------- */

.sp-nieuwsbrief {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-ruimte-1);
	max-width: 32rem;
}

.sp-nieuwsbrief input[type="email"] {
	flex: 1 1 14rem;
}

.sp-nieuwsbrief .sp-knop {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.sp-nieuwsbrief .sp-knop {
		flex: 1 1 100%;
	}
}

.sp-nieuwsbrief__toestemming {
	flex: 1 1 100%;
	font-size: var(--sp-text-sm);
}

/* -------------------------------------------------------------------------
   Afrekenen: op mobiel één kolom, en de samenvatting bedekt niets.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.woocommerce-checkout .woocommerce form.checkout {
		display: block;
	}

	.woocommerce-checkout #order_review,
	.woocommerce-checkout #customer_details {
		width: 100%;
		float: none;
	}

	.woocommerce-checkout #order_review {
		position: static;
		margin-top: var(--sp-ruimte-4);
	}
}

/* -------------------------------------------------------------------------
   Statusmeldingen bij asynchrone acties. Rustig, en alleen wat betekenis heeft.
   ------------------------------------------------------------------------- */

.sp-status {
	display: flex;
	align-items: center;
	gap: var(--sp-ruimte-1);
	padding: var(--sp-ruimte-2);
	border-radius: var(--sp-radius);
	background: var(--sp-zand);
	color: var(--sp-bruin);
}

.sp-status--fout {
	background: #f6e3e5;
	color: var(--sp-fout);
}

/* Alleen zichtbaar voor schermlezers. */
.sp-alleen-schermlezer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   5. Beweging

   Geen 'transition: all', geen oneindige decoratieve animatie, en alles stopt
   zodra het besturingssysteem om minder beweging vraagt.
   ========================================================================= */

.sp-verschijn {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--sp-motion-slow) var(--sp-ease-out),
	            transform var(--sp-motion-slow) var(--sp-ease-out);
}

.sp-verschijn.is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.sp-verschijn {
		opacity: 1;
		transform: none;
	}

	.sp-knop:hover {
		transform: none;
	}
}

/* =========================================================================
   6. Header

   Eén balk, één menu. De vorige opzet had vier Elementor-headertemplates en
   twee overlappende menu's; desktop en mobiel toonden niet dezelfde links.
   ========================================================================= */

.sp-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--sp-creme);
	transition: box-shadow var(--sp-motion-base) var(--sp-ease-out);
}

/* Eén class, aangestuurd door één scrollhandler. Geen inline stijlen. */
.sp-header--vast {
	box-shadow: var(--sp-schaduw);
}

/*
 * Twee rijen, geen drie kolommen naast elkaar.
 *
 * De eerste opzet zette menu, logo en acties op één rij als `1fr auto 1fr`.
 * Dat kan niet werken: de buitencontainer is afgetopt op --sp-max, dus de
 * menukolom is bij elke schermbreedte (1280 - 134 logo - 48 gap/padding) / 2 =
 * 541px, terwijl de zeven menu-items er 622px nodig hebben. "Allergenen" viel
 * daardoor altijd naar een tweede regel en botste met de rest - niet alleen op
 * smalle schermen.
 *
 * Rij 1 draagt het logo, gecentreerd, met de acties rechts. Rij 2 draagt het
 * menu over de volle breedte. Het menu heeft nu 1248px in plaats van 541px, dus
 * er kan een menu-item bij zonder dat de header opnieuw breekt.
 */
.sp-header__binnen {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"knop logo acties"
		"nav  nav  nav";
	align-items: center;
	gap: var(--sp-ruimte-1) var(--sp-ruimte-2);
	max-width: var(--sp-max);
	margin: 0 auto;
	padding: var(--sp-ruimte-2);
}

.sp-header__logo {
	grid-area: logo;
	justify-self: center;
	color: var(--sp-bruin);
	font-family: var(--sp-kop);
	font-size: var(--sp-h3);
	text-decoration: none;
}

.sp-header__logo img {
	display: block;
	max-height: 64px;
	width: auto;
	transition: max-height var(--sp-motion-base) var(--sp-ease-out);
}

/*
 * Zodra er gescrold is mag de header krimpen. Twee rijen kosten 157px, en dat
 * is een zesde van een laptopscherm dat permanent bezet blijft. Alleen het logo
 * en de buitenruimte worden kleiner; er verdwijnt niets, dus de navigatie
 * verspringt niet onder de muis.
 */
.sp-header--vast .sp-header__binnen {
	padding-top: var(--sp-ruimte-1);
	padding-bottom: var(--sp-ruimte-1);
}

.sp-header--vast .sp-header__logo img {
	max-height: 44px;
}

.sp-header__nav {
	grid-area: nav;
	padding-top: var(--sp-ruimte-1);
	border-top: 1px solid var(--sp-zand);
}

.sp-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-ruimte-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sp-raak);
	color: var(--sp-bruin);
	font-weight: 600;
	text-decoration: none;
}

.sp-menu a:hover,
.sp-menu .current-menu-item > a {
	color: var(--sp-accent-ui);
	text-decoration: underline;
}

.sp-header__acties {
	grid-area: acties;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-ruimte-1);
}

.sp-zoek.sp-zoek--header {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.sp-zoek--header .sp-zoek__veld {
	width: clamp(8rem, 16vw, 11rem);
	min-width: 0;
	min-height: var(--sp-raak);
	padding: .4rem .75rem;
}

.sp-zoek--header .sp-zoek__knop,
.sp-header__actie {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: var(--sp-raak);
	min-height: var(--sp-raak);
	padding: 0 .5rem;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: transparent;
	color: var(--sp-bruin);
	font-size: 1.1rem;
	text-decoration: none;
	cursor: pointer;
}

.sp-zoek--header .sp-zoek__knop:hover,
.sp-header__actie:hover {
	background: var(--sp-roze);
	color: var(--sp-bruin);
}

/* Het aantal staat er als tekst, niet als kleur of stip alleen. */
.sp-cart-teller {
	font-size: var(--sp-text-sm);
	font-weight: 700;
	white-space: nowrap;
}

.sp-cart-teller:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Menuknop: alleen zichtbaar zolang het menu niet naast het logo past.
   ------------------------------------------------------------------------- */

.sp-header__menuknop {
	display: none;
	grid-area: knop;
	justify-self: start;
	align-items: center;
	gap: .5rem;
	min-width: var(--sp-raak);
	min-height: var(--sp-raak);
	padding: 0 .6rem;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: transparent;
	color: var(--sp-bruin);
	font-family: var(--sp-lijf);
	font-size: var(--sp-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.sp-header__hamburger,
.sp-header__hamburger::before,
.sp-header__hamburger::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.sp-header__hamburger {
	position: relative;
}

.sp-header__hamburger::before,
.sp-header__hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}

.sp-header__hamburger::before { top: -6px; }
.sp-header__hamburger::after  { top: 6px; }

@media (max-width: 1024px) {
	.sp-header__menuknop {
		display: inline-flex;
	}

	.sp-header__nav {
		display: none;
		border-top: 0;
	}

	.sp-header--menu-open .sp-header__nav {
		display: block;
		border-top: 1px solid var(--sp-zand);
	}

	.sp-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: var(--sp-ruimte-2);
	}

	.sp-menu a {
		width: 100%;
		padding: .5rem 0;
	}

}

/*
 * Op smalle schermen krijgt de hele actiebalk een eigen rij.
 *
 * Twee eerdere opzetten werkten niet. Het veld verbergen en de knop laten staan
 * leverde een knop op die een lege zoekopdracht verstuurde - een resultaatpagina
 * met alles erop. Het veld op een eigen regel binnen de actiebalk zetten hielp
 * ook niet: die balk staat in de rechterkolom van het raster en is op een
 * telefoon nog geen 120px breed, dus het veld werd een vierkantje.
 *
 * De balk moet dus uit die kolom. Rij 1 houdt de menuknop en het logo, rij 2 is
 * van de acties over de volle breedte, rij 3 blijft het menu.
 */
@media (max-width: 768px) {
	.sp-header__menuknop-tekst {
		display: none;
	}

	.sp-header__binnen {
		grid-template-areas:
			"knop   logo   ."
			"acties acties acties"
			"nav    nav    nav";
	}

	.sp-header__acties {
		justify-content: flex-start;
		gap: var(--sp-ruimte-1);
	}

	.sp-zoek.sp-zoek--header {
		flex: 1 1 auto;
		min-width: 0;
	}

	.sp-zoek--header .sp-zoek__veld {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Een vastgezette header mag geen ankerdoel afdekken. De gekrompen header is
   ongeveer 8rem hoog; een halve regel extra houdt de kop vrij. */
:target,
#content {
	scroll-margin-top: 9rem;
}

/* =========================================================================
   7. Footer
   ========================================================================= */

.sp-footer {
	margin-top: var(--sp-sectie);
	background: var(--sp-bruin);
	color: var(--sp-creme);
}

.sp-footer a {
	color: var(--sp-creme);
}

.sp-footer a:hover {
	color: var(--sp-roze);
}

.sp-footer__binnen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--sp-ruimte-4);
	max-width: var(--sp-max);
	margin: 0 auto;
	padding: var(--sp-sectie) var(--sp-ruimte-2);
}

.sp-footer__kop,
.sp-footer__naam {
	color: var(--sp-creme);
	font-family: var(--sp-kop);
	font-size: var(--sp-h3);
	margin: 0 0 var(--sp-ruimte-1);
}

.sp-footer__contact,
.sp-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-footer__contact li,
.sp-footer__menu li {
	margin-bottom: .25rem;
}

.sp-footer__menu a,
.sp-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sp-raak);
}

.sp-footer__klein {
	font-size: var(--sp-text-sm);
	margin-top: var(--sp-ruimte-1);
}

/* Op de donkere ondergrond is de omgekeerde knop de leesbare variant. */
.sp-footer .sp-knop--tweede {
	color: var(--sp-creme);
	box-shadow: inset 0 0 0 2px var(--sp-creme);
}

.sp-footer .sp-knop--tweede:hover {
	background: var(--sp-creme);
	color: var(--sp-bruin);
}

.sp-footer__onder {
	border-top: 1px solid rgba(251, 250, 245, .2);
}

.sp-footer__onder p {
	max-width: var(--sp-max);
	margin: 0 auto;
	padding: var(--sp-ruimte-2);
	font-size: var(--sp-text-sm);
}

/* =========================================================================
   8. Shoparchief

   Vervangt de JetSmartFilters-widgets en het JetWooBuilder-loop-item. De
   filterstatus staat in de URL, dus een gefilterde shop is te delen, de
   terugknop werkt en het gaat zonder muis en zonder JavaScript.
   ========================================================================= */

/*
 * De shop is breder dan de rest van de site. Lopende tekst wil je smal houden -
 * 65 tot 70 tekens per regel - maar een productraster niet: daar kost elke
 * ongebruikte pixel een product dat iemand anders had gezien. Met 1280px en een
 * filterkolom van 272px bleef er 804px over voor de producten, en daar passen er
 * maar twee of drie naast elkaar op een scherm dat er vier aankan.
 */
.sp-shop {
	max-width: var(--sp-max-breed);
	margin: 0 auto;
	padding: var(--sp-ruimte-2);
}

.sp-shop__titel {
	margin: 0 0 var(--sp-ruimte-3);
	font-size: var(--sp-h2);
}

/* Filters links, producten rechts. Onder de 900px wordt het één kolom en
   staan de filters gewoon boven het raster. */
.sp-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: var(--sp-ruimte-4);
	align-items: start;
}

@media (max-width: 900px) {
	.sp-shop__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-ruimte-3);
	}
}

.sp-shop__filters {
	display: grid;
	gap: var(--sp-ruimte-3);
	padding: var(--sp-ruimte-3);
	border-radius: var(--sp-radius);
	background: var(--sp-zand);
}

/* De filterkolom blijft in beeld bij het scrollen. top houdt rekening met de
   gekrompen header, anders schuift de bovenkant eronder. */
@media (min-width: 901px) {
	.sp-shop__filters {
		position: sticky;
		top: 9rem;
	}
}

.sp-shop__filterrij {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-ruimte-2);
}

.sp-shop__zoek,
.sp-shop__sorteer {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	flex: 1 1 14rem;
}

.sp-shop__categorieen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-ruimte-1);
	margin: 0;
	padding: 0;
	border: 0;
}

.sp-shop__categorieen legend {
	width: 100%;
	margin-bottom: .35rem;
	padding: 0;
	color: var(--sp-bruin);
	font-weight: 600;
}

/* Chip met een echt vinkje erin: klikken op het label werkt, en een
   schermlezer krijgt gewoon een checkbox met een naam. */
.sp-shop__chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: var(--sp-raak);
	margin: 0;
	padding: .35rem .9rem;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-wit);
	color: var(--sp-bruin);
	font-weight: 400;
	cursor: pointer;
}

.sp-shop__chip:hover {
	background: var(--sp-roze);
}

.sp-shop__chip:has(input:checked) {
	background: var(--sp-bruin);
	color: var(--sp-creme);
}

/* In de zijkolom is een verticale lijst leesbaarder dan chips die om de twee
   woorden afbreken. Op één kolom blijven het chips. */
@media (min-width: 901px) {
	.sp-shop__categorieen {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
	}

	.sp-shop__chip {
		justify-content: flex-start;
	}
}

.sp-shop__aantal {
	opacity: .7;
	font-size: var(--sp-text-sm);
}

.sp-shop__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-ruimte-2);
}

.sp-shop__telling {
	margin: 0;
	font-size: var(--sp-text-sm);
}

.sp-shop__wissen {
	min-height: var(--sp-raak);
	display: inline-flex;
	align-items: center;
}

/* -------------------------------------------------------------------------
   Raster
   ------------------------------------------------------------------------- */

/*
 * Een vast aantal kolommen, niet auto-fill. Met auto-fill bepaalt de kaartbreedte
 * hoeveel er passen, en die was op 16rem gezet - dus op een breed scherm kreeg je
 * drie brede kaarten waar er vier hadden gepast. Nu bepaalt het scherm het aantal
 * en past de kaart zich aan.
 */
.sp-shop__raster {
	display: grid;
	grid-template-columns: repeat(var(--sp-kolommen, 4), minmax(0, 1fr));
	gap: var(--sp-ruimte-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1400px) {
	.sp-shop__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (max-width: 480px) {
	.sp-shop__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sp-shop__kaart {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--sp-ruimte-2);
}

/*
 * De link zit in de kop, niet de kop in de link. De foto heeft zijn eigen link
 * met aria-hidden en tabindex="-1", zodat de muis er wel heen kan maar de
 * tabvolgorde en de schermlezer de kaart één keer aanbieden.
 */
.sp-kaart__beeldlink {
	display: block;
}

.sp-shop__kaartlink {
	color: inherit;
	text-decoration: none;
}

.sp-shop__kaartlink:hover,
.sp-shop__kaartlink:focus-visible {
	color: var(--sp-accent-ui);
	text-decoration: underline;
}

/*
 * Voorraad als tekst, niet als kleur alleen. De stip ernaast is decoratie en
 * staat op aria-hidden: wie hem niet ziet leest gewoon "Op voorraad".
 */
.sp-kaart__voorraad {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .35rem var(--sp-ruimte-2) var(--sp-ruimte-2);
	color: var(--sp-tekst);
	font-size: var(--sp-text-sm);
}

.sp-kaart__stip {
	flex: 0 0 auto;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: currentColor;
}

.sp-kaart__voorraad--aan {
	color: var(--sp-goed);
}

.sp-kaart__voorraad--bijna,
.sp-kaart__voorraad--later {
	color: var(--sp-accent-ui);
}

.sp-kaart__voorraad--uit {
	color: var(--sp-tekst);
}

/* De prijs mag dichter op de naam staan nu die kleiner is. */
.sp-shop__kaart .sp-kaart__prijs {
	margin: .3rem var(--sp-ruimte-2) 0;
	font-size: var(--sp-text-base);
}

.sp-kaart__beeld {
	position: relative;
}

/*
 * De tweede productfoto ligt over de eerste en verschijnt bij hover, zoals in
 * de oude shop. Twee afbeeldingen over elkaar in plaats van een src die
 * wisselt: dat laatste geeft een lege plek zolang de nieuwe foto laadt.
 *
 * :focus-within zit erbij zodat de tweede foto ook verschijnt voor wie met de
 * tabtoets door de kaarten loopt. Op een aanraakscherm bestaat hover niet, dus
 * daar blijft het gewoon bij de eerste foto - geen knop die je twee keer moet
 * aanraken.
 */
.sp-kaart__hoverfoto {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--sp-motion-base) var(--sp-ease-out);
}

@media (hover: hover) {
	.sp-kaart:hover .sp-kaart__hoverfoto,
	.sp-kaart:focus-within .sp-kaart__hoverfoto {
		opacity: 1;
	}
}

.sp-shop__badge {
	position: absolute;
	top: var(--sp-ruimte-1);
	left: var(--sp-ruimte-1);
	padding: .25rem .7rem;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
	font-size: var(--sp-text-sm);
	font-weight: 700;
}

.sp-shop__badge--uit {
	top: auto;
	bottom: var(--sp-ruimte-1);
	background: var(--sp-bruin);
}

/*
 * De productnaam op een kaart is geen paginakop. Hij stond op --sp-h3, wat op
 * een breed scherm 2rem wordt - groter dan de prijs eronder, en op een kaart van
 * 298px goed voor drie regels tekst. Een eigen, kleinere maat dus: groot genoeg
 * om als naam te lezen, klein genoeg om vier kaarten naast elkaar rustig te
 * houden.
 */
.sp-shop__naam {
	margin: var(--sp-ruimte-2) var(--sp-ruimte-2) 0;
	font-size: clamp(1.05rem, .95rem + .3vw, 1.3rem);
	line-height: 1.25;
}

.sp-shop__kaart .sp-kaart__prijs {
	margin: .35rem var(--sp-ruimte-2) var(--sp-ruimte-2);
}

.sp-shop__kaart .sp-knop,
.sp-shop__kaart .button {
	margin: auto var(--sp-ruimte-2) 0;
}

.sp-shop__leeg {
	padding: var(--sp-ruimte-6) 0;
	text-align: center;
}

.sp-shop__paginering {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-ruimte-1);
	margin-top: var(--sp-ruimte-4);
}

.sp-shop__pagina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sp-raak);
	min-height: var(--sp-raak);
	border-radius: var(--sp-radius-knop);
	background: var(--sp-wit);
	color: var(--sp-bruin);
	text-decoration: none;
}

.sp-shop__pagina.is-huidig {
	background: var(--sp-bruin);
	color: var(--sp-creme);
}

/* =========================================================================
   9. Verlanglijst

   Vervangt het hartje van jet-compare-wishlist. Dat was een link zonder tekst
   en zonder aria-label: voor een schermlezer een lege link, en op de
   winkelwagenpagina twaalf keer achter elkaar.

   Dit is een echte knop met aria-pressed. De tekst ernaast staat er altijd -
   alleen niet zichtbaar - zodat de knop een naam heeft en de staat gemeld wordt
   zonder dat er een tooltip aan te pas komt.
   ========================================================================= */

.sp-verlang {
	position: absolute;
	top: var(--sp-ruimte-1);
	right: var(--sp-ruimte-1);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sp-raak);
	height: var(--sp-raak);
	padding: 0;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: rgba( 255, 255, 255, .9 );
	color: var(--sp-bruin);
	box-shadow: var(--sp-schaduw);
	cursor: pointer;
	transition: background var(--sp-motion-fast) var(--sp-ease-out),
	            transform var(--sp-motion-fast) var(--sp-ease-out);
}

.sp-verlang:hover {
	background: var(--sp-wit);
	transform: scale( 1.06 );
}

.sp-verlang:focus-visible {
	outline: 3px solid var(--sp-focus);
	outline-offset: 2px;
}

/* Het hartje is één teken en geen plaatje: geen extra bestand, en het neemt
   vanzelf de kleur van de knop over. */
.sp-verlang__hart::before {
	content: "\2661"; /* leeg hartje */
	font-size: 1.35rem;
	line-height: 1;
}

.sp-verlang[aria-pressed="true"] {
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
}

.sp-verlang[aria-pressed="true"] .sp-verlang__hart::before {
	content: "\2665"; /* gevuld hartje */
}

/* De tekst draagt de naam van de knop. Hij is er voor wie luistert, niet voor
   wie kijkt - het hartje zegt het al. */
.sp-verlang__tekst {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* De kaart is het ankerpunt van de knop. */
.sp-kaart {
	position: relative;
}

.sp-verlanglijst__leeg {
	margin: 0 0 var(--sp-ruimte-3);
	font-size: var(--sp-text-base);
}

/* Teller naast het hartje in de header. */
.sp-verlangteller {
	min-width: 1.15rem;
	padding: 0 .3rem;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

.sp-verlangteller[hidden] {
	display: none !important;
}

/*
 * Op de productpagina staat het hartje niet op een foto maar los naast de
 * titel, dus daar hoort hij niet absoluut gepositioneerd te zijn.
 */
.sp-verlang-los {
	display: inline-flex;
}

.sp-verlang-los .sp-verlang {
	position: static;
	background: var(--sp-zand);
}

.sp-verlang-los .sp-verlang:hover {
	background: var(--sp-roze);
}

/* =========================================================================
   10. Zoeken met suggesties

   Vervangt jet-ajax-search. Het formulier werkt zonder JavaScript; de lijst
   eronder is een aanvulling.
   ========================================================================= */

.sp-zoek {
	position: relative;
	display: grid;
	gap: .35rem;
}

.sp-zoek__label {
	color: var(--sp-bruin);
	font-weight: 600;
}

.sp-zoek__rij {
	display: flex;
	gap: var(--sp-ruimte-1);
}

.sp-zoek__veld {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--sp-knop-hoogte);
}

.sp-zoek__knop {
	flex: 0 0 auto;
}

/* De lijst zweeft over de pagina en duwt niets weg: wat eronder staat blijft
   staan waar het stond, ook als de lijst verschijnt en weer verdwijnt. */
.sp-zoek__lijst {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 24rem;
	margin: .35rem 0 0;
	padding: .35rem;
	overflow-y: auto;
	list-style: none;
	border-radius: var(--sp-radius);
	background: var(--sp-wit);
	box-shadow: var(--sp-schaduw-op);
}

.sp-zoek__item {
	display: flex;
	align-items: center;
	gap: var(--sp-ruimte-2);
	padding: .5rem;
	border-radius: calc( var(--sp-radius) - 6px );
	cursor: pointer;
}

/* Zowel de muis als het toetsenbord komen hier uit: is-gekozen wordt door het
   script gezet bij de pijltjes. */
.sp-zoek__item:hover,
.sp-zoek__item.is-gekozen {
	background: var(--sp-zand);
}

.sp-zoek__foto {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: calc( var(--sp-radius) - 6px );
	object-fit: cover;
}

.sp-zoek__tekst {
	display: grid;
	gap: .1rem;
	min-width: 0;
}

.sp-zoek__naam {
	color: var(--sp-bruin);
	font-weight: 600;
	line-height: 1.25;
}

.sp-zoek__prijs {
	color: var(--sp-accent-ui);
	font-size: var(--sp-text-sm);
	font-weight: 700;
}

.sp-zoek__leeg {
	padding: .75rem;
	color: var(--sp-tekst);
	font-size: var(--sp-text-sm);
}

/* =========================================================================
   11. De header over de hero (alleen de homepagina)

   Geen achtergrond, witte letters, wit logo - zodat de balk deel wordt van de
   hero in plaats van een streep erboven.

   Zodra er gescrold is valt hij terug op de gewone balk. Dat is geen
   stijlkeuze maar noodzaak: onder de hero staat gewone content op creme, en
   witte tekst daarop is onleesbaar. sp-header--vast wordt door hetzelfde
   scriptje gezet dat de schaduw aanzet.
   ========================================================================= */

.sp-header--overhero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

/*
 * Een verloop achter de balk, niet een vlak.
 *
 * Zonder dit hangt witte tekst op een foto, en die van Smulpost is bovenin
 * juist licht: lichtgrijs tafelblad, wit doosje. "Home Shop Ons Verhaal" haalde
 * daar geen enkel contrastniveau. Een donker vlak zou de doorzichtigheid
 * wegnemen die het punt van de opzet is; een verloop dat naar niets uitloopt
 * lost het op zonder dat je het als balk ziet.
 *
 * Het staat op ::before en niet op background, zodat het bij het scrollen samen
 * met de rest kan verdwijnen.
 */
.sp-header--overhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba( 61, 34, 26, .55 ) 0%,
		rgba( 61, 34, 26, .35 ) 55%,
		rgba( 61, 34, 26, 0 ) 100%
	);
	pointer-events: none;
}

.sp-header--overhero.sp-header--vast::before {
	content: none;
}

.sp-header--overhero .sp-header__nav {
	border-top-color: rgba( 255, 255, 255, .35 );
}

.sp-header--overhero .sp-menu a,
.sp-header--overhero .sp-header__actie,
.sp-header--overhero .sp-zoek--header .sp-zoek__knop,
.sp-header--overhero .sp-header__menuknop {
	color: var(--sp-wit);
}

.sp-header--overhero .sp-menu a:hover,
.sp-header--overhero .sp-menu .current-menu-item > a {
	color: var(--sp-wit);
	text-decoration-thickness: 2px;
}

.sp-header--overhero .sp-header__actie:hover,
.sp-header--overhero .sp-zoek--header .sp-zoek__knop:hover {
	background: rgba( 255, 255, 255, .18 );
	color: var(--sp-wit);
}

/* Het zoekveld mag niet als wit blok in de hero hangen. */
.sp-header--overhero .sp-zoek--header .sp-zoek__veld {
	border: 1px solid rgba( 255, 255, 255, .5 );
	background: rgba( 255, 255, 255, .12 );
	color: var(--sp-wit);
}

.sp-header--overhero .sp-zoek--header .sp-zoek__veld::placeholder {
	color: rgba( 255, 255, 255, .8 );
}

/* Twee logo's over elkaar: het witte bovenop zolang de balk doorzichtig is. */
.sp-header--overhero .sp-header__logo {
	position: relative;
}

.sp-header__logo-wit {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	max-height: 64px;
	width: auto;
	transition: max-height var(--sp-motion-base) var(--sp-ease-out);
}

.sp-header--overhero .sp-header__logo-wit {
	display: block;
}

.sp-header--overhero .custom-logo {
	visibility: hidden;
}

/* Gescrold: gewone balk, gewoon logo. */
.sp-header--overhero.sp-header--vast {
	position: sticky;
	background: var(--sp-creme);
}

.sp-header--overhero.sp-header--vast .sp-header__logo-wit {
	display: none;
}

.sp-header--overhero.sp-header--vast .custom-logo {
	visibility: visible;
}

.sp-header--overhero.sp-header--vast .sp-menu a,
.sp-header--overhero.sp-header--vast .sp-header__actie,
.sp-header--overhero.sp-header--vast .sp-zoek--header .sp-zoek__knop,
.sp-header--overhero.sp-header--vast .sp-header__menuknop {
	color: var(--sp-bruin);
}

.sp-header--overhero.sp-header--vast .sp-zoek--header .sp-zoek__veld {
	border: 1px solid var(--sp-zand);
	background: var(--sp-wit);
	color: var(--sp-bruin);
}

.sp-header--overhero.sp-header--vast .sp-header__nav {
	border-top-color: var(--sp-zand);
}

/* Op mobiel klapt het menu open over de hero heen; dan is doorzichtig
   onleesbaar en hoort er wel een achtergrond onder. */
.sp-header--overhero.sp-header--menu-open {
	background: var(--sp-bruin);
}

/* Footer: wit logo en de maker. */
.sp-footer__logo {
	display: inline-block;
	margin-bottom: var(--sp-ruimte-2);
}

.sp-footer__logo img {
	display: block;
	max-height: 72px;
	width: auto;
}

.sp-footer__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-ruimte-2);
}

.sp-footer__maker {
	margin: 0;
	font-size: var(--sp-text-sm);
	opacity: .85;
}

.sp-footer__maker a {
	font-weight: 700;
}

/* =========================================================================
   12. Productgalerij

   De galerij is die van WooCommerce; alleen de vormgeving is van ons. Zonder
   flexslider: de foto's staan onder elkaar, allebei meteen zichtbaar. Zoom en
   lightbox komen van WooCommerce en hebben die slider niet nodig.
   ========================================================================= */

.sp-galerij,
.sp-galerij .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin: 0;
}

/*
 * Een raster in plaats van een stapel. Bij een foto neemt hij de volle breedte;
 * vanaf twee komen ze naast elkaar te staan, en dan is het geen lange kolom
 * meer waar je langs moet scrollen om bij de knop te komen.
 */
/*
 * Hoofdfoto groot, de rest klein eronder.
 *
 * Een vast raster van vier kolommen: de eerste foto pakt alle vier, elke
 * volgende krijgt er een. Dat geeft de vertrouwde indeling van een
 * productpagina - een grote foto met duimnagels eronder - zonder de
 * slidermachinerie die dit eerst deed.
 *
 * Bewust vaste kolommen en geen auto-fit. Auto-fit rekent met de breedte van de
 * kolom, en die wordt hier door Elementor bepaald; op de ene pagina viel het
 * dan om naar twee kolommen en op de andere naar vier, met duimnagels die per
 * pagina een andere maat hadden.
 */
.sp-galerij .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-ruimte-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.sp-galerij .woocommerce-product-gallery__image {
	margin: 0;
	border-radius: var(--sp-radius);
	overflow: hidden;
	background: var(--sp-zand);
}

/* Een duimnagel is een verwijzing naar een foto, geen foto. Kleinere hoeken en
   iets minder nadruk, zodat de hoofdfoto de hoofdfoto blijft. */
.sp-galerij .woocommerce-product-gallery__image:not( :first-child ) {
	border-radius: calc( var(--sp-radius) - 6px );
	cursor: zoom-in;
	transition: opacity var(--sp-motion-fast) var(--sp-ease-out);
}

.sp-galerij .woocommerce-product-gallery__image:not( :first-child ):hover {
	opacity: .85;
}

.sp-galerij .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* De vergrootknop van WooCommerce is standaard een klein icoontje in de hoek.
   Hier een echte knop met een klikgebied dat je met een vinger raakt. */
.sp-galerij .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--sp-ruimte-2);
	right: var(--sp-ruimte-2);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sp-raak);
	height: var(--sp-raak);
	border-radius: var(--sp-radius-knop);
	background: rgba( 255, 255, 255, .92 );
	color: var(--sp-bruin);
	font-size: 1.1rem;
	text-decoration: none;
	box-shadow: var(--sp-schaduw);
}

.sp-galerij .woocommerce-product-gallery__trigger:hover {
	background: var(--sp-wit);
}

.sp-galerij .woocommerce-product-gallery__trigger:focus-visible {
	outline: 3px solid var(--sp-focus);
	outline-offset: 2px;
}

/*
 * Twee regels van WooCommerce zelf die bij de slider horen en zonder slider
 * blijven staan.
 *
 * 1. `div.images` zweeft en krijgt een vaste breedte. Dat is de oude
 *    tweekolomsindeling van WooCommerce; hier zit de kolomindeling al in
 *    Elementor, en een zwevend element geeft zijn hoogte niet door - vandaar
 *    dat .sp-galerij op nul stond terwijl er twee foto's in hingen.
 *
 * 2. Elke foto vanaf de tweede staat absoluut, want in slidermodus liggen ze
 *    op elkaar. Zonder slider moeten ze gewoon in de flow staan, anders is er
 *    maar een zichtbaar en steekt de rest eronderuit op ware grootte - 1920px
 *    breed in een kolom van 600.
 */
.sp-galerij .woocommerce-product-gallery,
.woocommerce div.product .sp-galerij div.images {
	float: none;
	width: 100%;
}

.sp-galerij .woocommerce-product-gallery__image,
.sp-galerij .woocommerce-product-gallery__image:nth-child( n + 2 ) {
	position: relative;
	/* !important omdat WooCommerce deze breedte inline zet zodra zijn
	   galerijscript langs is geweest. */
	width: 100% !important;
	max-width: 100%;
	opacity: 1;
}

.sp-galerij .woocommerce-product-gallery__image img,
.sp-galerij .woocommerce-product-gallery__image a img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*
 * Twee laatste details van de galerij.
 *
 * De link om de foto is inline en krijgt dus de breedte van zijn inhoud - de
 * tweede foto stond daardoor op 73 pixels. En jquery.zoom legt bij het zweven
 * een kopie van de foto op ware grootte over de gewone heen (.zoomImg, hier
 * 1920px); die hoort binnen zijn kader te blijven, anders steekt hij over de
 * halve pagina uit.
 */
.sp-galerij .woocommerce-product-gallery__image {
	overflow: hidden;
}

.sp-galerij .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
}

/*
 * Elementor drukt in zijn inline-CSS `.woocommerce-product-gallery__image {
 * height: 700px }` af. Dat is een restant van de Jet-galerij, die alle slides
 * even hoog maakte omdat ze in een schuifstrook naast elkaar lagen. Zonder die
 * strook wordt het een leeg vak van 700px met een duimnagel van 138 bovenin.
 *
 * !important is hier nodig en niet lui: de regel komt uit een <style> in de
 * <head> die na deze stylesheet staat, en hij is even specifiek. Zonder
 * !important wint hij altijd.
 *
 * Dit hoort weg zodra die instelling uit de producttemplate is gehaald - dan
 * kan deze regel ook weg.
 */
.sp-galerij .woocommerce-product-gallery__image {
	height: auto !important;
}

/* =========================================================================
   De zoekbalk in de header
   =========================================================================

   Hij deelt nu zijn markup met het losse zoekformulier van udefine-core, want
   het zijn dezelfde zoekopdracht en dezelfde suggestielijst. De header is een
   variant daarvan: veld en knop naast elkaar, label alleen voor schermlezers,
   en de lijst hangt onder het veld.
   ========================================================================= */

.sp-zoek.sp-zoek--header {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	gap: 0;
}

.sp-zoek--header .sp-zoek__rij {
	align-items: center;
	gap: .25rem;
}

.sp-zoek--header .sp-zoek__veld {
	flex: 0 1 clamp(8rem, 16vw, 11rem);
	min-height: var(--sp-raak);
	padding: .4rem .75rem;
}

/* De suggestielijst hoort onder het veld, niet onder de knop erachter. */
.sp-zoek--header .sp-zoek__lijst {
	left: 0;
	right: auto;
	width: min(24rem, calc(100vw - 2 * var(--sp-ruimte-2)));
}

@media (max-width: 768px) {
	.sp-zoek.sp-zoek--header {
		flex: 1 1 auto;
	}

	.sp-zoek--header .sp-zoek__veld {
		flex: 1 1 auto;
	}

	/* Op een telefoon mag de lijst de volle breedte van het veld hebben. */
	.sp-zoek--header .sp-zoek__lijst {
		right: 0;
		width: auto;
	}
}

/* =========================================================================
   Het introblok boven de shop
   =========================================================================

   Hier stond een banner van 1479x587 zonder alt en zonder tekst. Nu staat er
   links tekst die uitlegt wat er verkocht wordt en rechts de foto van de
   zussen. De verhouding is 3:2 - de tekst is het onderwerp, de foto de
   illustratie, en op een telefoon staat de foto bovenaan omdat je daar eerst
   wilt zien waar je bent.
   ========================================================================= */

.sp-shopintro {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--sp-ruimte-4);
	align-items: start;
	margin: 0 0 var(--sp-ruimte-6);
}

@media (max-width: 900px) {
	.sp-shopintro {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-ruimte-3);
		margin-bottom: var(--sp-ruimte-4);
	}

	/* Foto eerst: op een smal scherm is het beeld de snelste uitleg. */
	.sp-shopintro__beeld {
		order: -1;
	}
}

.sp-shopintro__tekst {
	max-width: var(--sp-max-lezen);
}

.sp-shopintro__lead {
	margin: 0;
	color: var(--sp-bruin);
	font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
	line-height: 1.5;
}

/* -- Meer lezen ---------------------------------------------------------- */

.sp-shopintro__meer {
	margin-top: var(--sp-ruimte-2);
}

/*
 * Het driehoekje van de browser weg: er staat al een eigen pijl in, en het
 * standaardteken verschilt per browser. list-style voor Firefox, ::-webkit-
 * voor Safari - beide nodig, geen van beide alleen genoeg.
 */
.sp-shopintro__meerknop {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var(--sp-raak);
	color: var(--sp-accent-ui);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.sp-shopintro__meerknop::-webkit-details-marker {
	display: none;
}

.sp-shopintro__meerknop::after {
	content: "";
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--sp-motion-fast) var(--sp-ease-out);
}

.sp-shopintro__meer[open] > .sp-shopintro__meerknop::after {
	transform: translateY(2px) rotate(-135deg);
}

.sp-shopintro__meerknop:hover {
	text-decoration: underline;
}

.sp-shopintro__body > h2 {
	margin: var(--sp-ruimte-4) 0 var(--sp-ruimte-1);
	font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem);
}

.sp-shopintro__body > h2:first-child {
	margin-top: var(--sp-ruimte-2);
}

.sp-shopintro__body p {
	margin: 0;
}

/* -- De FAQ -------------------------------------------------------------- */

.sp-shopintro__faq {
	display: grid;
	margin-top: var(--sp-ruimte-1);
	border-top: 1px solid var(--sp-zand);
}

.sp-shopintro__vraag {
	border-bottom: 1px solid var(--sp-zand);
}

.sp-shopintro__vraag > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-ruimte-2);
	min-height: var(--sp-raak);
	padding: .6rem 0;
	list-style: none;
	cursor: pointer;
}

.sp-shopintro__vraag > summary::-webkit-details-marker {
	display: none;
}

/*
 * De h3 zit in de summary en niet ernaast: de kop moet de vraag zijn, anders
 * staat er in de koppenlijst van een schermlezer een lege of dubbele regel.
 * De <summary> zorgt zelf voor de knoprol.
 */
.sp-shopintro__vraag > summary h3 {
	margin: 0;
	color: var(--sp-bruin);
	font-size: 1.05rem;
	line-height: 1.35;
}

.sp-shopintro__vraag > summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--sp-accent-ui);
	font-size: 1.4rem;
	line-height: 1;
}

.sp-shopintro__vraag[open] > summary::after {
	content: "\2212"; /* echte min, geen streepje */
}

.sp-shopintro__vraag > p {
	margin: 0;
	padding: 0 0 var(--sp-ruimte-2);
}

/* -- De foto ------------------------------------------------------------- */

.sp-shopintro__beeld {
	margin: 0;
}

.sp-shopintro__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.sp-shopintro__beeld figcaption {
	margin-top: .5rem;
	font-size: var(--sp-text-sm);
	opacity: .75;
}

/* =========================================================================
   Het filterpaneel: open op desktop, ingeklapt op de telefoon
   =========================================================================

   Op een telefoon stond dit paneel 686 pixels hoog boven het eerste product.
   Nu zit het in een <details> die shop.js op smalle schermen dichtklapt. Op
   desktop is de samenvatting overbodig, dus daar verdwijnt hij.
   ========================================================================= */

.sp-shop__inklapinhoud {
	display: grid;
	gap: var(--sp-ruimte-3);
}

@media (min-width: 901px) {
	.sp-shop__inklapknop {
		display: none;
	}
}

@media (max-width: 900px) {
	.sp-shop__filters {
		padding: var(--sp-ruimte-2);
	}

	.sp-shop__inklapknop {
		display: flex;
		align-items: center;
		gap: .5rem;
		min-height: var(--sp-raak);
		color: var(--sp-bruin);
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.sp-shop__inklapknop::-webkit-details-marker {
		display: none;
	}

	.sp-shop__inklapknop::after {
		content: "";
		width: .5rem;
		height: .5rem;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform var(--sp-motion-fast) var(--sp-ease-out);
	}

	.sp-shop__inklap[open] > .sp-shop__inklapknop::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.sp-shop__inklapinhoud {
		padding-top: var(--sp-ruimte-2);
	}
}

/* Het aantal actieve filters, zodat je met een dicht paneel ziet dat er iets
   aan staat. */
.sp-shop__inklaptelling {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 .35rem;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
	font-size: var(--sp-text-sm);
	font-weight: 700;
}

/* De telling staat buiten de inklap en heeft daar zijn eigen ruimte nodig. */
.sp-shop__filters > .sp-shop__telling {
	margin-top: var(--sp-ruimte-2);
}

/* =========================================================================
   De telefoon
   =========================================================================

   Onder de 480px stond er één product per rij. Bij een kaart van 525 pixels
   hoog betekende dat: scrollen, product, scrollen, product. Je kunt niets
   vergelijken en je hebt geen idee hoeveel er nog komt. Twee naast elkaar is
   hier de juiste keuze - de foto's zijn vierkant en blijven bij 170 pixels
   breed prima leesbaar - en de kaart wordt compacter zodat er ook echt twee
   op een scherm passen.
   ========================================================================= */

@media (max-width: 480px) {
	.sp-shop__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-ruimte-2);
	}

	.sp-shop {
		padding: var(--sp-ruimte-2) var(--sp-ruimte-1);
	}

	.sp-shop__naam {
		font-size: 1rem;
		line-height: 1.25;
	}

	.sp-shop__kaart .sp-kaart__prijs {
		font-size: 1rem;
	}

	/* De knop mag over twee regels, maar niet over vier: op een smalle kaart
	   brak "Toevoegen aan winkelwagen" af in vier stukken. */
	.sp-shop__kaart .sp-knop,
	.sp-shop__kaart .button {
		padding-inline: .75rem;
		font-size: var(--sp-text-sm);
		hyphens: auto;
	}
}

/* -------------------------------------------------------------------------
   Het introblok op een telefoon
   -------------------------------------------------------------------------

   Op 375px werd dit blok 512 pixels hoog, en dan begon het eerste product pas
   op 1013 - ruim een schermhoogte onder de vouw. De tekst hoort er te staan,
   maar niet ten koste van de producten. Daarom is de foto hier een band in
   plaats van een staande foto: hij vertelt hetzelfde in de helft van de hoogte.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.sp-shopintro__foto {
		aspect-ratio: 16 / 9;
		max-height: 200px;
	}

	.sp-shopintro__beeld figcaption {
		margin-top: .35rem;
	}

	.sp-shopintro__lead {
		font-size: 1.0625rem;
	}
}

@media (max-width: 480px) {
	/* "Toevoegen aan winkelwagen" brak op een kaart van 153px in drie regels.
	   Met minder binnenruimte past het in twee. */
	.sp-shop__kaart .sp-knop,
	.sp-shop__kaart .button {
		padding-inline: .5rem;
		line-height: 1.2;
	}
}

/* -------------------------------------------------------------------------
   Het introblok: kleiner, en hoger op de pagina
   -------------------------------------------------------------------------

   De foto was 574 bij 430 en bepaalde daarmee de hoogte van de hele rij: naast
   de tekst stond een gat van tweehonderd pixels, en het eerste product begon
   pas op 814. De foto hoort de tekst te illustreren, niet de pagina in te
   delen. Vandaar een vaste maximumhoogte - de rij is dan zo hoog als de tekst.

   object-position iets boven het midden: bij een liggende uitsnede van een
   staande foto vallen anders precies de gezichten weg.
   ------------------------------------------------------------------------- */

.sp-shopintro {
	margin-bottom: var(--sp-ruimte-4);
}

/*
 * De klasse alleen is niet genoeg: Elementor zet in zijn frontend-CSS
 * `.elementor img { border-radius: 0 }`, en dat is een selector met een
 * element erin - specifieker dan een losse class, dus die wint altijd,
 * ongeacht de volgorde. Twee classes trekken hem terug zonder !important.
 */
.sp-shopintro__beeld .sp-shopintro__foto {
	max-height: 300px;
	border-radius: var(--sp-radius);
	object-position: center 32%;
}

.sp-shop__titel {
	margin-bottom: var(--sp-ruimte-2);
}

@media (max-width: 900px) {
	.sp-shopintro__beeld .sp-shopintro__foto {
		max-height: 170px;
	}

	.sp-shop__titel {
		margin-bottom: var(--sp-ruimte-1);
	}
}

/* Telefoon: elke pixel boven het eerste product telt hier dubbel, want er
   passen er maar twee op een rij. Kleinere foto, strakkere regelafstand en
   minder ruimte tussen de blokken - samen scheelt dat bijna honderd pixels
   zonder dat er iets verdwijnt. */
@media (max-width: 900px) {
	.sp-shopintro {
		gap: var(--sp-ruimte-2);
		margin-bottom: var(--sp-ruimte-3);
	}

	.sp-shopintro__beeld .sp-shopintro__foto {
		max-height: 150px;
	}

	.sp-shopintro__beeld figcaption {
		margin-top: .25rem;
		font-size: .8125rem;
	}

	.sp-shopintro__lead {
		font-size: 1rem;
		line-height: 1.45;
	}

	.sp-shopintro__meer {
		margin-top: var(--sp-ruimte-1);
	}

	.sp-shop__filters > .sp-shop__telling {
		margin-top: var(--sp-ruimte-1);
	}
}