/* ==========================================================================
   Mercy – opmaak
   ========================================================================== */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-3-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/lora-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/lora-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/lora-latin-600-normal.woff2) format("woff2"); }

:root {
	/* Basiskleuren: allemaal aan te passen via Weergave → Customizer → Kleuren (Mercy). */
	--primair: #E45D00;
	--accent: #008751;
	--papier: #FBF8F3;
	--wit: #FFFFFF;
	--vlak: #F4EEE5;
	--inkt: #1C1A17;
	--tekst: #2E2A25;
	--kop-bg: #FFFFFF;
	--voet-bg: #F1E8DC;
	--voet-tekst: #2E2A25;
	--missie-bg: #E4F2EA;
	--missie-tekst: #1C1A17;
	--op-primair: #FFFFFF;
	--op-accent: #FFFFFF;
	/* Afgeleide kleuren: rekenen vanzelf mee. */
	--primair-donker: color-mix(in srgb, var(--primair) 80%, #000);
	--primair-zacht: color-mix(in srgb, var(--primair) 9%, var(--wit));
	--accent-donker: color-mix(in srgb, var(--accent) 80%, #000);
	--accent-zacht: color-mix(in srgb, var(--accent) 11%, var(--wit));
	--zacht: color-mix(in srgb, var(--tekst) 68%, var(--papier));
	--lijn: color-mix(in srgb, var(--inkt) 10%, var(--papier));
	--lijn-sterk: color-mix(in srgb, var(--inkt) 20%, var(--papier));
	--voet-zacht: color-mix(in srgb, var(--voet-tekst) 70%, var(--voet-bg));
	--voet-lijn: color-mix(in srgb, var(--voet-tekst) 14%, var(--voet-bg));
	--missie-zacht: color-mix(in srgb, var(--missie-tekst) 75%, var(--missie-bg));
	--radius: 12px;
	--radius-klein: 8px;
	--schaduw: 0 1px 2px rgba(28, 26, 23, .05), 0 6px 20px rgba(28, 26, 23, .06);
	--schaduw-hoog: 0 2px 4px rgba(28, 26, 23, .06), 0 16px 40px rgba(28, 26, 23, .12);
	--kop-font: "Lora", Georgia, "Times New Roman", serif;
	--tekst-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--breed: 1280px;
	--goot: 20px;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
	margin: 0;
	background: var(--papier);
	color: var(--tekst);
	font: 400 17px/1.6 var(--tekst-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--primair-donker); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primair); }
h1, h2, h3, h4 { font-family: var(--kop-font); font-weight: 600; color: var(--inkt); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 3.2vw, 38px); }
h2 { font-size: clamp(22px, 2.3vw, 28px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primair) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
.icoon { width: 22px; height: 22px; flex: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.naar-inhoud { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--inkt); color: var(--papier); padding: 10px 16px; border-radius: 8px; }
.naar-inhoud:focus { top: 12px; }
.container { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 var(--goot); }
.site-inhoud { min-height: 50vh; padding-bottom: 72px; }
[hidden] { display: none !important; }

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

.knop, .button, button.button, input[type="submit"], .wp-element-button,
.woocommerce a.button, .woocommerce button.button, .single_add_to_cart_button, .checkout-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 22px;
	background: var(--primair); color: var(--op-primair); border: 1px solid var(--primair);
	border-radius: var(--radius-klein); font-weight: 600; font-size: 16px; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.knop:hover, .button:hover, input[type="submit"]:hover, .single_add_to_cart_button:hover, .checkout-button:hover, .wp-element-button:hover {
	background: var(--primair-donker); border-color: var(--primair-donker); color: var(--op-primair);
}
.knop:active { transform: translateY(1px); }
.knop-rand, .button.alt-rand { background: var(--wit); color: var(--inkt); border-color: var(--lijn-sterk); }
.knop-rand:hover { background: var(--wit); color: var(--primair-donker); border-color: var(--primair); }
.knop-licht { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.knop-licht:hover { background: var(--primair-zacht); color: var(--inkt); border-color: var(--primair-zacht); }
.knop-klein { min-height: 38px; padding: 6px 14px; font-size: 15px; }
.knop-blok { width: 100%; }
.button.disabled, .button:disabled, button:disabled { opacity: .5; cursor: not-allowed; }

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

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], select, textarea, .input-text {
	width: 100%; min-height: 46px; padding: 10px 14px;
	background: var(--wit); border: 1px solid var(--lijn-sterk); border-radius: var(--radius-klein);
	transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primair); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primair) 18%, transparent); }
select { appearance: none; padding-right: 40px; background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B6359' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
label { font-weight: 600; }

/* ---------- Actiebalk ---------- */

.actiebalk { background: var(--ab-bg); color: var(--ab-tekst); font-size: 15.5px; line-height: 1.4; }
.actiebalk-binnen { position: relative; max-width: var(--breed); margin: 0 auto; padding: 9px 52px; display: flex; justify-content: center; }
.actiebalk-tekst { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; text-align: center; }
.ab-tekst { font-weight: 600; }
.actiebalk-aftellen { font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); }
.actiebalk-code { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1.5px dashed currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font-size: 14.5px; }
.actiebalk-code strong { letter-spacing: .06em; }
.actiebalk-code .icoon { width: 16px; height: 16px; }
.actiebalk-code.is-gekopieerd { border-style: solid; }
.actiebalk-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.actiebalk-link:hover { color: inherit; opacity: .85; }
.actiebalk-link .icoon { width: 17px; height: 17px; }
.actiebalk-sluit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.actiebalk-sluit:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.actiebalk-sluit .icoon { width: 18px; height: 18px; }

/* ---------- Kop ---------- */

.site-kop { background: var(--kop-bg); border-bottom: 1px solid var(--lijn); position: relative; z-index: 50; }
.kop { display: flex; align-items: center; gap: 28px; min-height: 88px; }
.kop-logo { flex: none; }
.kop-logo img, .kop-logo .custom-logo { height: 58px; width: auto; }
.kop-zoek { flex: 1; max-width: 620px; margin: 0 auto; position: relative; }
.kop-zoek input { min-height: 48px; padding: 10px 52px 10px 20px; border-radius: 999px; background: var(--vlak); border-color: transparent; font-size: 16px; }
.kop-zoek input:focus { background: var(--wit); border-color: var(--primair); }
.kop-zoek button { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--primair); color: var(--op-primair); cursor: pointer; }
.kop-zoek button:hover { background: var(--primair-donker); }
.kop-zoek button .icoon { width: 19px; height: 19px; }
.kop-acties { display: flex; align-items: center; gap: 6px; flex: none; }
.kop-knop { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--radius-klein); background: transparent; color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.kop-knop:hover { background: var(--vlak); color: var(--inkt); }
.mand-teller { position: absolute; top: 2px; left: 24px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--primair); color: var(--op-primair); font-size: 12px; font-weight: 700; line-height: 1; border: 2px solid var(--wit); }
.mand-teller.is-leeg { display: none; }
.menu-open { display: none; }

.hoofdnav { border-top: 1px solid var(--lijn); }
.hoofdnav .menu { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hoofdnav .menu > li { position: relative; display: flex; align-items: center; }
.hoofdnav .menu > li > a { display: block; padding: 13px 14px; color: var(--inkt); font-weight: 600; font-size: 15.5px; text-decoration: none; position: relative; }
.hoofdnav .menu > li.heeft-sub > a, .hoofdnav .menu > li.menu-item-has-children > a { padding-right: 4px; }
.hoofdnav .menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primair); transform: scaleX(0); transition: transform .2s; }
.hoofdnav .menu > li:hover > a::after, .hoofdnav .menu > li.current-menu-item > a::after { transform: scaleX(1); }
.hoofdnav .menu > li > a:hover { color: var(--primair-donker); }
.hoofdnav .menu-accent > a { color: var(--primair-donker) !important; }
.sub-knop { display: grid; place-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: none; color: var(--zacht); cursor: pointer; }
.sub-knop .icoon { width: 16px; height: 16px; transition: transform .2s; }
.hoofdnav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 8px; list-style: none; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-hoog); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.hoofdnav .menu > li:hover > .sub-menu, .hoofdnav .menu > li:focus-within > .sub-menu, .hoofdnav .menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hoofdnav .sub-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--tekst); text-decoration: none; font-size: 15.5px; }
.hoofdnav .sub-menu a:hover { background: var(--vlak); color: var(--inkt); }
.hoofdnav .sub-menu li:first-child a { font-weight: 600; color: var(--inkt); }

/* Mobiel menu */
.mobiel-menu { position: fixed; inset: 0; z-index: 200; background: rgba(28, 26, 23, .45); }
.mobiel-menu-paneel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--wit); overflow-y: auto; padding: 12px 16px 32px; box-shadow: var(--schaduw-hoog); animation: inschuiven .22s ease-out; }
@keyframes inschuiven { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mobiel-menu-kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--lijn); }
.mobiel-menu-kop img { height: 44px; width: auto; }
.mobiel-menu .menu { list-style: none; margin: 0; padding: 0; }
.mobiel-menu .menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--lijn); }
.mobiel-menu .menu > li > a { flex: 1; padding: 14px 4px; color: var(--inkt); font-weight: 600; text-decoration: none; font-size: 17px; }
.mobiel-menu .sub-knop { width: 44px; height: 44px; }
.mobiel-menu .sub-menu { display: none; width: 100%; list-style: none; margin: 0 0 10px; padding: 0 0 0 12px; }
.mobiel-menu li.is-open > .sub-menu { display: block; }
.mobiel-menu li.is-open > .sub-knop .icoon { transform: rotate(180deg); }
.mobiel-menu .sub-menu a { display: block; padding: 9px 4px; color: var(--tekst); text-decoration: none; }
.mobiel-extra { margin-top: 20px !important; }
.mobiel-extra li { border: 0 !important; }
.mobiel-extra a { font-weight: 400 !important; color: var(--zacht) !important; padding: 8px 4px !important; }

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

.kruimelpad { padding: 18px 0 6px; font-size: 14.5px; color: var(--zacht); }
.kruimelpad a { color: var(--zacht); text-decoration: none; }
.kruimelpad a:hover { color: var(--primair-donker); text-decoration: underline; }
.kruimel-scheiding { margin: 0 8px; color: var(--lijn-sterk); }

/* ---------- Voorpagina ---------- */

.held { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; margin: 28px 0 8px; padding: 56px 56px 56px 60px; border-radius: 20px; background: var(--wit); border: 1px solid var(--lijn); position: relative; overflow: hidden; }
.held::before { content: ""; position: absolute; right: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--primair-zacht) 0%, transparent 70%); pointer-events: none; }
.held-tekst { position: relative; }
.bovenkop { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--accent-donker); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.bovenkop .icoon { width: 18px; height: 18px; color: var(--primair); fill: var(--primair); }
.held h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; margin-bottom: 16px; max-width: 14em; }
.held-intro { font-size: 19px; color: var(--zacht); max-width: 34em; margin-bottom: 26px; }
.zoek-groot { position: relative; display: flex; align-items: center; gap: 8px; max-width: 560px; padding: 6px 6px 6px 18px; background: var(--wit); border: 1px solid var(--lijn-sterk); border-radius: 999px; box-shadow: var(--schaduw); }
.zoek-groot:focus-within { border-color: var(--primair); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primair) 14%, transparent), var(--schaduw); }
.zoek-groot > .icoon { color: var(--zacht); }
.zoek-groot input { border: 0; box-shadow: none !important; background: transparent; min-height: 46px; padding: 8px 4px; font-size: 17px; }
.zoek-groot .knop { border-radius: 999px; padding: 10px 24px; }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.held-knoppen .knop { min-height: 40px; padding: 7px 16px; border-radius: 999px; font-size: 15px; }
.held-feit { margin: 22px 0 0; font-size: 15px; color: var(--zacht); }
.held-feit strong { color: var(--inkt); }
.held-boeken { position: relative; height: 380px; }
.held-boek { position: absolute; bottom: 10px; width: 44%; transition: translate .25s ease; }
.held-boek img { display: block; width: 100%; height: auto; border-radius: 3px 6px 6px 3px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 18px 34px rgba(28,26,23,.22); }
.held-boek-0 { left: 28%; z-index: 3; width: 48%; }
.held-boek-1 { left: 2%; rotate: -8deg; z-index: 1; bottom: 28px; }
.held-boek-2 { right: 0; rotate: 7deg; z-index: 2; bottom: 24px; }
.held-boek:hover { translate: 0 -8px; }

.rij-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rij-kop h2 { margin: 0; }
.rij-meer { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rij-meer .icoon { width: 18px; height: 18px; transition: transform .15s; }
.rij-meer:hover .icoon { transform: translateX(3px); }

.afdelingen { margin: 48px 0; }
.tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tegel { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--inkt); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tegel:hover { border-color: var(--lijn-sterk); box-shadow: var(--schaduw); transform: translateY(-2px); color: var(--inkt); }
.tegel-beeld { flex: none; display: grid; place-items: center; width: 52px; height: 64px; border-radius: 6px; background: var(--vlak); overflow: hidden; color: var(--zacht); }
.tegel-beeld img { width: auto; height: auto; max-width: calc(100% - 8px); max-height: calc(100% - 8px); box-shadow: 0 1px 3px rgba(0,0,0,.18); border-radius: 1px; }
.tegel-naam { flex: 1; font-weight: 600; line-height: 1.3; }
.tegel-tel { font-size: 14px; color: var(--zacht); background: var(--vlak); padding: 2px 9px; border-radius: 99px; }

.product-rij { margin: 52px 0; }
.rij-schuif .kaarten-rij { display: grid; grid-auto-flow: column dense; grid-auto-columns: calc((100% - 4 * 20px) / 5); grid-template-columns: none; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--lijn-sterk) transparent; }
.rij-schuif .kaart { scroll-snap-align: start; }
.rij-actie { padding: 28px 28px 16px; background: var(--primair-zacht); border-radius: 20px; }

.missie { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 64px 0; background: var(--missie-bg); color: var(--missie-zacht); border-radius: 20px; overflow: hidden; }
.missie-beeld img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.missie-tekst { padding: 56px; align-self: center; }
.missie:not(:has(.missie-beeld)) { grid-template-columns: 1fr; }
.missie:not(:has(.missie-beeld)) .missie-tekst { max-width: 760px; }
.missie h2 { color: var(--missie-tekst); }
.missie .bovenkop { color: var(--missie-tekst); opacity: .8; }
.missie p { font-size: 18px; }

/* ---------- Winkel ---------- */

.winkel-indeling { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 18px; }
.winkel-resultaten { min-width: 0; transition: opacity .2s; }
.is-laden .winkel-resultaten { opacity: .45; pointer-events: none; }
.winkel-kop { margin-bottom: 22px; }
.winkel-titel h1, .winkel-titel h2 { margin-bottom: 6px; }
.winkel-titel .term-description { color: var(--zacht); max-width: 60em; }
.winkel-titel .term-description p:last-child { margin-bottom: 0; }
.winkel-balk { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.woocommerce-result-count { margin: 0; color: var(--zacht); font-size: 15px; }
.woocommerce-ordering { margin: 0 0 0 auto; }
.woocommerce-ordering select { min-height: 40px; padding: 6px 38px 6px 12px; font-size: 15px; width: auto; border-color: var(--lijn); }
.filter-open { display: none; min-height: 40px; padding: 6px 14px; font-size: 15px; }
.filter-open .icoon { width: 18px; height: 18px; }
.filter-aantal { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--primair); color: var(--op-primair); font-size: 12px; font-weight: 700; line-height: 1; }

.actieve-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 13px; background: var(--wit); border: 1px solid var(--lijn-sterk); border-radius: 99px; color: var(--inkt); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.chip .icoon { width: 15px; height: 15px; color: var(--zacht); }
.chip:hover { border-color: var(--primair); color: var(--primair-donker); }
.chip:hover .icoon { color: var(--primair); }
.chip-wis { align-self: center; margin-left: 4px; font-size: 14.5px; color: var(--zacht); }

/* Filterpaneel */
.filterpaneel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lijn-sterk) transparent; padding-right: 4px; }
.filter-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.filter-kop h2 { font-family: var(--tekst-font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); margin: 0; }
.filter-wis { font-size: 14.5px; }
.filter-sluit { display: none; }
.filter-blok { border-top: 1px solid var(--lijn); padding: 4px 0; }
.filter-blok summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; font-weight: 700; color: var(--inkt); font-size: 16px; }
.filter-blok summary::-webkit-details-marker { display: none; }
.filter-blok summary .icoon { width: 18px; height: 18px; margin-left: auto; color: var(--zacht); transition: transform .2s; }
.filter-blok[open] summary .icoon { transform: rotate(180deg); }
.filter-inhoud { padding-bottom: 12px; }
.filter-lijst, .cat-lijst { list-style: none; margin: 0; padding: 0; }
.filter-optie, .cat-lijst a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; color: var(--tekst); text-decoration: none; font-size: 15.5px; line-height: 1.3; }
.filter-optie:hover, .cat-lijst a:hover { background: var(--vlak); color: var(--inkt); }
.vakje { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--lijn-sterk); border-radius: 5px; background: var(--wit); transition: background .15s, border-color .15s; }
.vakje .icoon { width: 14px; height: 14px; color: var(--op-accent); stroke-width: 3; opacity: 0; }
.filter-optie:hover .vakje { border-color: var(--zacht); }
.filter-optie.is-actief { color: var(--inkt); font-weight: 600; }
.filter-optie.is-actief .vakje { background: var(--accent); border-color: var(--accent); }
.filter-optie.is-actief .vakje .icoon { opacity: 1; }
.filter-optie.is-leeg { opacity: .45; }
.optie-naam { flex: 1; min-width: 0; }
.optie-tel { flex: none; font-size: 13.5px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.filter-zoek { min-height: 38px !important; margin-bottom: 8px; padding: 6px 12px !important; font-size: 15px; }
.filter-lijst.is-lang:not(.toon-alles) li.extra { display: none; }
.filter-lijst.is-zoekend li { display: none; }
.filter-lijst.is-zoekend li.past { display: block; }
.filter-meer { margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--primair-donker); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cat-lijst .cat-terug a { color: var(--zacht); font-size: 14.5px; }
.cat-lijst .cat-huidig { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 700; color: var(--inkt); }
.cat-lijst .cat-sub a { padding-left: 18px; }

.prijs-schuif { position: relative; height: 28px; margin: 4px 2px 10px; }
.prijs-schuif::before, .prijs-schuif::after { content: ""; position: absolute; top: 12px; height: 4px; border-radius: 4px; }
.prijs-schuif::before { left: 0; right: 0; background: var(--lijn); }
.prijs-schuif::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--primair); }
.prijs-schuif input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; z-index: 2; }
.prijs-schuif input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); border: 2px solid var(--primair); box-shadow: var(--schaduw); cursor: grab; }
.prijs-schuif input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--wit); border: 2px solid var(--primair); cursor: grab; }
.prijs-schuif input[type="range"]::-webkit-slider-runnable-track { background: none; }
.prijs-velden { display: flex; align-items: flex-end; gap: 8px; }
.prijs-velden label { position: relative; flex: 1; font-weight: 400; font-size: 13px; color: var(--zacht); }
.prijs-velden label > span:first-child { display: block; margin-bottom: 2px; }
.prijs-velden .euro { position: absolute; left: 10px; bottom: 9px; color: var(--zacht); font-size: 15px; }
.prijs-velden input { min-height: 40px; padding: 6px 6px 6px 24px; font-size: 15px; }
.prijs-velden > span[aria-hidden] { padding-bottom: 9px; color: var(--zacht); }
.prijs-velden .knop { min-height: 40px; padding: 6px 12px; }

.filter-schakel { padding: 12px 0; }
.schakel { font-weight: 600; }
.schakelaar { flex: none; position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--lijn-sterk); transition: background .15s; }
.schakelaar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.schakel.is-actief .schakelaar { background: var(--accent); }
.schakel.is-actief .schakelaar::after { transform: translateX(16px); }
.filter-voet { display: none; }
.filter-achtergrond { display: none; }

/* Productraster */
.kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 36px 24px; align-items: start; }
.product-rij .kaarten { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kaart { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Boeken (staand) en andere spullen (vierkant) in één rij: foto's onderaan uitlijnen, teksten op één lijn. */
@supports (grid-template-rows: subgrid) {
	.kaarten { grid-auto-rows: auto; row-gap: 0; }
	.kaart { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 36px; }
	.kaart-beeld { align-self: end; }
	.rij-schuif .kaarten-rij { grid-template-rows: auto auto; }
	.rij-schuif .kaart { padding-bottom: 0; }
}
.kaart-beeld { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: var(--ratio, 2/3); background: var(--vlak); border-radius: var(--radius); overflow: hidden; }
.kaart-beeld img { width: 100%; height: 100%; transition: transform .25s ease; }
.is-boek .kaart-beeld { padding: 9% 10% 8%; }
/* Boek: het img-vak is precies de omslag, zodat een gewone schaduw volstaat (geen CSS-filter: dat gaf beeldfouten in Chrome). */
.is-boek .kaart-beeld img { width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 18px -4px rgba(28,26,23,.28); border-radius: 2px; }
.is-overig .kaart-beeld img { object-fit: cover; }
.kaart:hover .kaart-beeld img { transform: translateY(-4px); }
.is-overig:hover .kaart-beeld img { transform: scale(1.03); }
.kaart-geen-foto { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; color: var(--lijn-sterk); font-size: 14px; }
.kaart-geen-foto .icoon { width: 40px; height: 40px; }
.kaart-labels { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.label { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 1.35; background: var(--inkt); color: var(--papier); }
.label-actie { background: var(--primair); color: var(--op-primair); }
.label-op { background: var(--zacht); }
.kaart-tekst { display: flex; flex-direction: column; flex: 1; padding: 14px 2px 0; }
.staat { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 7px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.5; background: var(--vlak); color: var(--zacht); }
.staat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.staat-nieuw { background: var(--accent-zacht); color: var(--accent-donker); }
.staat-zgan { background: #E7F0F8; color: #1F5F8B; }
.staat-gebruikt { background: #F3EBDD; color: #7A5A2A; }
.kaart-titel { font-family: var(--kop-font); font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kaart-titel a { color: var(--inkt); text-decoration: none; }
.kaart-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kaart-titel a:hover { color: var(--primair-donker); }
.kaart-auteur { margin: 0; font-size: 15px; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaart-voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.prijs, .price { font-weight: 700; font-size: 18px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.price del, .prijs del { color: var(--zacht); font-weight: 400; font-size: .85em; margin-right: 4px; }
.price ins, .prijs ins { text-decoration: none; color: var(--primair-donker); }
.knop-mand { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--lijn-sterk); border-radius: 50%; background: var(--wit); color: var(--inkt); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.knop-mand .icoon { width: 20px; height: 20px; }
.knop-mand:hover { background: var(--primair); border-color: var(--primair); color: var(--op-primair); }
.knop-mand-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.knop-mand.loading { opacity: .6; }
.knop-mand.added { background: var(--accent); border-color: var(--accent); color: var(--op-accent); }
.kaart .added_to_cart { position: relative; z-index: 2; display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }

.woocommerce-pagination { margin-top: 44px; }
.woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.page-numbers a, .page-numbers span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--radius-klein); border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); text-decoration: none; font-weight: 600; }
.page-numbers a:hover { border-color: var(--primair); color: var(--primair-donker); }
.page-numbers .current { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }

.leeg-staat { text-align: center; padding: 56px 20px; }
.leeg-icoon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--vlak); color: var(--zacht); }
.leeg-staat .zoek-groot { margin: 20px auto; }

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

.single-product .site-inhoud > .container { padding-top: 4px; }
div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-top: 14px; }
div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1 / span 2; position: relative; }
div.product > .summary { grid-column: 2; grid-row: 1; }
div.product > .woocommerce-tabs, div.product > .product-rij { grid-column: 1 / -1; }
.woocommerce-product-gallery { margin: 0; opacity: 1 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { border-radius: 16px; background: var(--vlak); }
.foto-boek .woocommerce-product-gallery__image { padding: 0; }
.foto-boek .woocommerce-product-gallery__image > a { padding: 44px 12%; }
.foto-boek .woocommerce-product-gallery__image { text-align: center; }
.foto-boek .woocommerce-product-gallery__image a { display: block; text-align: center; }
.foto-boek .woocommerce-product-gallery__image img { display: inline-block; vertical-align: bottom; width: auto !important; height: auto; max-width: 100%; max-height: 620px; box-shadow: 0 2px 3px rgba(0,0,0,.10), 0 22px 36px -8px rgba(28,26,23,.32); border-radius: 3px; }
.foto-overig .woocommerce-product-gallery__image a { display: block; aspect-ratio: 1 / 1; }
.foto-overig .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 9; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wit); box-shadow: var(--schaduw); font-size: 0; text-decoration: none; }
.woocommerce-product-gallery__trigger::before { content: ""; width: 18px; height: 18px; background: currentColor; color: var(--inkt); -webkit-mask: 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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat; mask: 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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat; }
.woocommerce-product-gallery__trigger img { display: none !important; }
.flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.flex-control-thumbs li { aspect-ratio: 1; background: var(--vlak); border-radius: 8px; overflow: hidden; cursor: pointer; }
.flex-control-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; opacity: .65; transition: opacity .15s; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }

.summary { position: static; }
.product-kop .staat-groot { font-size: 13.5px; padding: 3px 11px; margin-bottom: 12px; }
.product_title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 6px; }
.product-ondertitel { font-family: var(--kop-font); font-style: italic; font-weight: 500; font-size: 19px; color: var(--zacht); margin-bottom: 10px; }
.product-auteur { font-size: 17px; color: var(--zacht); margin-bottom: 18px; }
.product-auteur a { font-weight: 600; }
.summary > .price { display: block; font-size: 30px; margin: 4px 0 16px; }
.product-infoblok { margin: 0 0 20px; padding: 12px 16px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); }
.product-info { display: flex; gap: 10px; margin: 6px 0; font-size: 15.5px; }
.product-info .icoon { width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.product-info-actie .icoon { color: var(--primair); }
.summary .woocommerce-product-details__short-description { color: var(--tekst); margin-bottom: 18px; }
form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
form.cart .quantity:has(input[type="hidden"]) { display: none; }
form.cart .quantity input { width: 84px; min-height: 52px; text-align: center; }
.single_add_to_cart_button { min-height: 54px; padding: 12px 34px; font-size: 17px; flex: 1; max-width: 360px; }
.stock { font-weight: 600; margin: 0 0 12px; }
.stock.in-stock { color: var(--accent-donker); }
.stock.out-of-stock { color: var(--zacht); }
.product-beloftes { list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--lijn); }
.product-beloftes li { display: flex; gap: 12px; margin: 0 0 10px; font-size: 15.5px; color: var(--tekst); }
.product-beloftes .icoon { width: 21px; height: 21px; color: var(--zacht); margin-top: 1px; }
.product-cats { font-size: 14.5px; color: var(--zacht); margin: 0; }
.product-cats a { color: var(--zacht); }

.woocommerce-tabs { margin-top: 36px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lijn); overflow-x: auto; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 12px 16px; color: var(--zacht); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.woocommerce-tabs ul.tabs li.active a { color: var(--inkt); border-color: var(--primair); }
.woocommerce-Tabs-panel { padding: 24px 0 0; max-width: 760px; }
.woocommerce-product-attributes { width: 100%; max-width: 620px; border-collapse: collapse; }
.woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--lijn); font-size: 16px; vertical-align: top; }
.woocommerce-product-attributes th { width: 38%; color: var(--zacht); font-weight: 600; }
.woocommerce-product-attributes td p { margin: 0; }
.woocommerce-product-attributes tr:nth-child(odd) { background: color-mix(in srgb, var(--vlak) 55%, transparent); }

/* ---------- Meldingen ---------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style: none;
	margin: 16px 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--lijn); border-left: 4px solid var(--accent); background: var(--wit);
}
.woocommerce-info { border-left-color: #2F7BB5; }
.woocommerce-error { border-left-color: #C0392B; flex-direction: column; align-items: flex-start; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; min-height: 38px; padding: 6px 14px; font-size: 15px; }

/* ---------- Winkelwagen, afrekenen, account ---------- */

.pagina-wc { padding-top: 24px; }
.pagina-wc .pagina-kop h1 { margin-bottom: 20px; }
table.shop_table { width: 100%; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
table.shop_table th, table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: middle; }
table.shop_table thead th { background: var(--vlak); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
table.shop_table img { width: 56px; border-radius: 4px; }
.cart-collaterals .cart_totals { max-width: 440px; margin: 28px 0 0 auto; }
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); overflow: hidden; }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--vlak); color: var(--inkt); font-weight: 700; }
.form-row { margin: 0 0 16px; }
.form-row label { display: block; margin-bottom: 6px; }
.wc-block-components-button:not(.is-link) { border-radius: var(--radius-klein) !important; }
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { font-family: var(--tekst-font); }

/* ---------- Pagina's en berichten ---------- */

.pagina-smal { max-width: 800px; padding-top: 36px; }
.pagina-kop { margin-bottom: 24px; }
.pagina-intro { font-size: 20px; color: var(--zacht); }
.inhoud-tekst { font-size: 18px; }
.inhoud-tekst h2 { margin-top: 1.6em; }
.inhoud-tekst img { border-radius: var(--radius); }
.meta { color: var(--zacht); font-size: 15px; }
.berichten { display: grid; gap: 28px; }
.bericht-kaart { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--lijn); }
.bericht-kaart:not(:has(.bericht-beeld)) { grid-template-columns: 1fr; }
.bericht-beeld img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; }
.bericht-kaart h2 a { color: var(--inkt); text-decoration: none; }
.over-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 32px auto; }
.over-fotos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.over-fotos figcaption { font-size: 14.5px; color: var(--zacht); margin-top: 6px; }
.over-gegevens { margin-top: 24px; padding: 20px 24px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); }
.over-gegevens p { margin: 0 0 4px; }
.anbi-label { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--accent); color: var(--op-accent); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }

/* ---------- Voet ---------- */

.voet-missie { background: var(--voet-bg); border-top: 1px solid var(--voet-lijn); }
.voet-missie .container { display: flex; align-items: center; gap: 20px; padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--voet-lijn); }
.voet-missie p { flex: 1; margin: 0; font-family: var(--kop-font); font-size: 19px; color: var(--voet-tekst); }
.voet-missie-icoon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--voet-tekst) 7%, var(--voet-bg)); color: var(--primair); flex: none; }
.voet-missie-icoon .icoon { fill: var(--primair); }
.voet-missie .knop-licht { border-color: var(--voet-lijn); }
.site-voet { background: var(--voet-bg); color: var(--voet-zacht); font-size: 15.5px; border-top: 1px solid var(--voet-lijn); }
.voet { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 56px; padding-bottom: 44px; }
.voet-merk .logo img { height: 62px; width: auto; }
.voet-naam { margin: 16px 0 6px; color: var(--voet-tekst); font-weight: 600; }
.voet-anbi { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.voet-kop { font-family: var(--tekst-font); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--voet-tekst); margin: 6px 0 14px; }
.site-voet ul { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin: 0 0 9px; }
.site-voet a { color: var(--voet-tekst); text-decoration: none; }
.site-voet a:hover { color: var(--primair); text-decoration: underline; }
.voet-contact li { display: flex; gap: 10px; }
.voet-contact .icoon { width: 19px; height: 19px; margin-top: 2px; color: var(--voet-zacht); }
.voet-onder { border-top: 1px solid var(--voet-lijn); }
.voet-onder .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: var(--voet-zacht); }
.voet-onder p { margin: 0; }
.voet-hart { display: inline-flex; align-items: center; gap: 6px; }
.voet-hart .icoon { width: 16px; height: 16px; color: var(--primair); fill: var(--primair); }

/* ---------- Opbrengstregel op de voorpagina ---------- */

.held-opbrengst { display: inline-block; margin: -4px 0 20px; padding: 8px 14px; border-radius: 10px; background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600; font-size: 16.5px; line-height: 1.4; }

/* ---------- Setje, gift en kassakoopjes ---------- */

.mercy-setje { grid-column: 1 / -1; margin-top: 28px; padding: 24px 26px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; }
.mercy-setje-kop h2 { margin-bottom: 4px; font-size: 24px; }
.mercy-setje-kop p { color: var(--zacht); margin-bottom: 16px; }
.mercy-setje-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mercy-setje-lijst label { display: grid; grid-template-columns: auto 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border: 1px solid var(--lijn); border-radius: 10px; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.mercy-setje-lijst label:hover { border-color: var(--lijn-sterk); }
.mercy-setje-lijst label:has(input:checked) { border-color: var(--accent); background: var(--accent-zacht); }
.mercy-setje-lijst input { width: 18px; height: 18px; accent-color: var(--accent); }
.mercy-setje-foto img { width: 44px; height: 58px; object-fit: contain; }
.mercy-setje-titel { font-size: 15px; line-height: 1.3; color: var(--inkt); }
.mercy-setje-titel em { color: var(--zacht); font-style: normal; font-size: 13.5px; }
.mercy-setje-prijs { font-weight: 700; font-size: 15px; white-space: nowrap; }
.mercy-setje-prijs del { font-weight: 400; color: var(--zacht); font-size: 13px; }
.mercy-setje-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.mercy-setje-totaal { margin: 0; font-size: 17px; }
.mercy-setje-totaal del { color: var(--zacht); margin-right: 4px; }
.mercy-setje-totaal span { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--primair); color: var(--op-primair); font-size: 13px; font-weight: 700; }

.mercy-extra { display: grid; gap: 20px; margin-top: 28px; }
.mercy-extra h2, .mercy-setje h2 { font-size: 22px; margin: 0 0 4px; }
.mercy-extra section > p { color: var(--zacht); margin-bottom: 14px; }
.mercy-extra-melding { margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--vlak); font-size: 15.5px; }
.mercy-extra-melding.mercy-ok { background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600; }
.mercy-gift, .mercy-koopjes { padding: 22px 24px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; }
.mercy-gift { border-color: color-mix(in srgb, var(--primair) 30%, var(--lijn)); background: var(--primair-zacht); }
.mercy-gift-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mercy-gift-knop { min-height: 44px; padding: 8px 18px; border: 1px solid var(--lijn-sterk); border-radius: 999px; background: var(--wit); color: var(--inkt); font-weight: 700; font-size: 16px; cursor: pointer; }
.mercy-gift-knop:hover { border-color: var(--primair); color: var(--primair-donker); }
.mercy-gift-knop.is-actief, .mercy-gift-ok { background: var(--primair); border-color: var(--primair); color: var(--op-primair); }
.mercy-gift-ok:hover { background: var(--primair-donker); color: var(--op-primair); }
.mercy-gift-eigen { position: relative; display: inline-flex; align-items: center; font-weight: 400; }
.mercy-gift-eigen > span[aria-hidden] { position: absolute; left: 14px; color: var(--zacht); }
.mercy-gift-eigen input { width: 150px; min-height: 44px; padding-left: 28px; border-radius: 999px; }
.mercy-gift-status { margin: 12px 0 0; font-weight: 600; color: var(--accent-donker); }
.mercy-link { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-weight: 400; }
.mercy-koopjes-lijst { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 14px; overflow-x: auto; scrollbar-width: thin; }
.mercy-koopjes-lijst li { display: flex; flex-direction: column; gap: 4px; }
.mercy-koopje-foto { display: grid; place-items: center; aspect-ratio: 1; background: var(--vlak); border-radius: 10px; overflow: hidden; padding: 10px; }
.mercy-koopje-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 2px 6px rgba(28,26,23,.18); }
.mercy-koopje-titel { color: var(--inkt); font-size: 14.5px; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mercy-koopje-prijs { font-weight: 700; }
.mercy-koopje-knop { align-self: flex-start; margin-top: 2px; padding: 5px 12px; border-radius: 999px; background: var(--primair); color: var(--op-primair); font-weight: 700; font-size: 14px; text-decoration: none; }
.mercy-koopje-knop:hover { background: var(--primair-donker); color: var(--op-primair); }
.pagina-wc .inhoud-tekst { max-width: none; }

/* ---------- Responsief ---------- */

@media (max-width: 1180px) {
	.kop-label { display: none; }
	.rij-schuif .kaarten-rij { grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}

@media (max-width: 1024px) {
	.held { grid-template-columns: 1fr; padding: 40px 32px; }
	.held-boeken { display: none; }
	.winkel-indeling { grid-template-columns: minmax(0, 1fr); }
	.filter-open { display: inline-flex; }
	.filterpaneel { position: fixed; inset: 0 auto 0 0; z-index: 210; width: min(90vw, 380px); max-height: none; padding: 16px 20px 0; background: var(--wit); box-shadow: var(--schaduw-hoog); transform: translateX(-105%); transition: transform .25s ease; display: flex; flex-direction: column; }
	.filterpaneel.is-open { transform: none; }
	.filterpaneel-binnen { flex: 1; overflow-y: auto; }
	.filter-achtergrond { display: block; position: fixed; inset: 0; z-index: 205; background: rgba(28, 26, 23, .45); }
	.filter-sluit { display: inline-grid; place-items: center; margin-left: auto; }
	.filter-kop { align-items: center; position: sticky; top: 0; background: var(--wit); z-index: 2; padding-bottom: 6px; }
	.filter-voet { display: block; position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--wit); border-top: 1px solid var(--lijn); }
	div.product { grid-template-columns: 1fr; gap: 24px; }
	div.product > .woocommerce-product-gallery, div.product > .summary { grid-column: 1; grid-row: auto; }
	.summary { position: static; }
	.voet { grid-template-columns: 1fr 1fr; }
	.missie { grid-template-columns: 1fr; }
	.missie-tekst { padding: 36px 28px; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	:root { --goot: 16px; }
	body { font-size: 16.5px; }
	.kop { flex-wrap: wrap; gap: 4px 8px; min-height: 0; padding-top: 8px; padding-bottom: 10px; }
	.menu-open { display: inline-flex; padding: 8px; }
	.kop-logo { margin-right: auto; }
	.kop-logo img, .kop-logo .custom-logo { height: 44px; }
	.kop-zoek { order: 5; flex-basis: 100%; max-width: none; margin: 4px 0 0; }
	.kop-zoek input { min-height: 44px; }
	.kop-zoek button { width: 36px; height: 36px; }
	.kop-knop { padding: 8px; }
	.mand-teller { left: 22px; top: 0; }
	.hoofdnav { display: none; }
	.held { padding: 32px 22px; margin-top: 16px; border-radius: 16px; }
	.held-intro { font-size: 17.5px; }
	.zoek-groot .knop { padding: 10px 16px; }
	.kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
	.product-rij .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rij-schuif .kaarten-rij { grid-template-columns: none; grid-auto-columns: 42%; gap: 14px; }
	.rij-actie { padding: 20px 16px 8px; margin-left: -6px; margin-right: -6px; }
	.kaart-titel { font-size: 16px; }
	.prijs, .price { font-size: 17px; }
	.knop-mand { width: 38px; height: 38px; }
	.winkel-balk { flex-wrap: wrap; gap: 10px; }
	.woocommerce-result-count { order: 3; flex-basis: 100%; font-size: 14px; }
	.tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tegel { padding: 8px 10px 8px 8px; gap: 10px; }
	.tegel-beeld { width: 40px; height: 52px; }
	.tegel-naam { font-size: 15px; }
	.tegel-tel { display: none; }
	.foto-boek .woocommerce-product-gallery__image > a { padding: 28px 14%; }
	.voet { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
	.voet-missie .container { flex-wrap: wrap; }
	.actiebalk { font-size: 14.5px; }
	.actiebalk-binnen { padding: 8px 44px 8px 14px; justify-content: flex-start; }
	.actiebalk-tekst { justify-content: flex-start; text-align: left; gap: 2px 10px; }
	.actiebalk-code { display: none; }
	.actiebalk-aftellen { font-size: 12.5px; padding: 1px 8px; }
	.bericht-kaart { grid-template-columns: 1fr; }
	table.shop_table_responsive thead { display: none; }
	table.shop_table_responsive tr td { display: flex; justify-content: space-between; gap: 12px; }
	table.shop_table_responsive tr td::before { content: attr(data-title); font-weight: 600; }
}

@supports (grid-template-rows: subgrid) {
	@media (max-width: 860px) {
		.kaarten { row-gap: 0; }
		.kaart { padding-bottom: 28px; }
		.rij-schuif .kaart { padding-bottom: 0; }
	}
}

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

@media print {
	.site-kop, .site-voet, .actiebalk, .filterpaneel, .winkel-balk { display: none !important; }
}
.mercy-koopje-prijs ins, .mercy-setje-prijs ins { text-decoration: none; }

/* Gift */
.missie-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.missie-knoppen .knop svg, .voet-missie .knop svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.voet-missie .container { gap: 12px 16px; }
.knop-gift { color: var(--primair); border-color: var(--primair); }
.knop-gift svg { width: 18px; height: 18px; }

/* ---------- Nieuwsbrief in de voet ---------- */
.voet-nb { background: var(--voet-bg); border-top: 1px solid var(--voet-lijn); }
.voet-nb .container { display: flex; align-items: center; gap: 20px; padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--voet-lijn); }
.voet-nb .mercy-nb { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.voet-nb .mercy-nb-kop { font-family: var(--kop-font); font-size: 19px; font-weight: 600; color: var(--voet-tekst); margin: 0; }
.voet-nb .mercy-nb-tekst { flex: 1 1 260px; margin: 0; color: var(--voet-zacht); }
.voet-nb .mercy-nb-form { flex: 1 1 320px; margin: 0; }
.voet-nb .mercy-nb-form .knop { min-height: 44px; }
@media (max-width: 700px) {
	.voet-nb .container { align-items: flex-start; }
	.voet-nb .voet-missie-icoon { display: none; }
}

/* ---------- Deelknoppen op de productpagina ---------- */
.product-delen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 6px; }
.product-delen-kop { font-size: 14px; color: var(--zacht); margin-right: 2px; }
.deel-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--lijn, #e6ddd2); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.deel-knop:hover, .deel-knop:focus-visible { border-color: var(--primair, #E45D00); color: var(--primair, #E45D00); }
.deel-knop .icoon { width: 18px; height: 18px; }
.deel-knop[hidden] { display: none; }
.voet-nb .voet-missie-icoon .icoon { fill: none; stroke: var(--primair); }