/**
 * reve-pages.css -- pagina-opbouw: header/footer-chrome, hero's, grids, banden, responsive.
 * Regel: komt iets op meer dan één pagina voor, dan hoort het hier, niet in een per-pagina
 * <style>.
 */

/* ============================================================
 * Header -- element 1.1, designs/header-prototype.html
 * ============================================================ */
header.site {
	position: sticky; top: 0; z-index: 120;
	background: var(--c-white); border-bottom: 1px solid var(--c-grey-line);
	transition: box-shadow .2s ease, transform .3s ease;
}
header.site.scrolled { box-shadow: 0 6px 22px rgba(10, 10, 10, .07); }
/* mobiel: bovenbalk (logo + Sale) schuift weg bij naar beneden scrollen -- de onderbalk blijft. */
@media (max-width: 900px) { header.site.nav-verborgen { transform: translateY(-100%); } }
.site-inner {
	max-width: var(--wrap); margin: 0 auto; padding: 18px 24px;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}

.nav-left { display: flex; align-items: center; gap: 26px; }
.nav-right { display: flex; align-items: center; gap: 24px; justify-self: end; }
.nav-left a, .nav-right a, .nav-left button {
	font: 400 14.5px/1 var(--f-body); color: var(--c-primary); text-decoration: none;
	background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
}
.nav-left a:hover, .nav-right a:hover, .nav-left button:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-left .shop-trigger { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.nav-left .shop-trigger svg { transition: transform .2s ease; }
.nav-left .shop-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sale { color: var(--c-error) !important; font-weight: 600; }
.nav-phone { font: 400 14px/1 var(--f-body); color: var(--c-label); text-decoration: none; }
.nav-phone:hover { color: var(--c-primary); }
@media (max-width: 1240px) { .nav-phone { display: none; } }

.logo { display: flex; align-items: center; text-decoration: none; justify-self: center; min-width: 0; }
.logo img { height: 24px; width: auto; max-width: 100%; display: block; filter: brightness(0); }
@media (max-width: 1080px) { .logo img { height: 20px; } }
@media (max-width: 600px) { .logo img { height: 17px; } }
@media (max-width: 430px) { .logo img { height: 15px; } }

.icons { display: flex; gap: 17px; align-items: center; }
.icons a, .icons button {
	color: var(--c-primary); display: flex; align-items: center; justify-content: flex-start;
	position: relative; padding: 13px 8px; margin: -13px -8px;
	background: none; border: 0; cursor: pointer; font: inherit;
}
.cart-count {
	position: absolute; top: 6px; right: 0px; min-width: 16px; height: 16px; padding: 0 4px;
	background: var(--c-primary); color: #fff; border-radius: 8px;
	font: 600 10px/16px var(--f-body); text-align: center;
}
.cart-count:empty { display: none; }

.burger { display: none; background: none; border: 0; padding: 10px; margin-left: -10px; cursor: pointer; color: var(--c-primary); }
.burger svg { display: block; }

/* ---------- mega-menu ---------- */
.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--c-white); border-bottom: 1px solid var(--c-grey-line);
	box-shadow: 0 18px 34px rgba(10, 10, 10, .09);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
	max-width: var(--wrap); margin: 0 auto; padding: 36px 24px 40px;
	display: grid; grid-template-columns: 2.4fr 1fr 1fr; gap: 48px;
}
.mega h3 { font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); margin: 0 0 20px; }
.mega-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; list-style: none; margin: 0; padding: 0; }
.mega-cats a { display: block; text-decoration: none; color: var(--c-primary); }
.mega-cats .ph { aspect-ratio: 1; background: var(--c-grey-bg); overflow: hidden; margin-bottom: 9px; display: block; }
.mega-cats .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mega-cats a:hover .ph img { transform: scale(1.06); }
.mega-cats span { font: 400 15px/1.3 var(--f-head); }
.mega-cats a.alle span:last-child { border-bottom: 1px solid var(--c-primary); padding-bottom: 4px; display: inline-block; }
.mega-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; align-content: start; }
.mega-brands a { display: block; text-decoration: none; }
.mega-brands .lg { height: 26px; display: flex; align-items: center; }
.mega-brands img {
	max-height: 100%; max-width: 128px; width: auto; height: auto; object-fit: contain;
	filter: brightness(0); opacity: .8; transition: opacity .15s;
}
.mega-brands a:hover img { opacity: 1; }
.mega-brands .d { display: block; font: 400 13.5px/1.45 var(--f-body); color: var(--c-label); margin-top: 8px; }
.mega-brands a:hover .d { color: var(--c-primary); }
.mega-promo { align-self: start; }
.mega-promo a { display: block; text-decoration: none; color: #fff; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--c-black); }
.mega-promo img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .4s ease; }
.mega-promo a:hover img { transform: scale(1.05); }
.mega-promo .ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, .75) 100%); }
.mega-promo b { font: 400 20px/1.2 var(--f-head); display: block; }
.mega-promo small { font: 400 13px/1.4 var(--f-body); color: #e6e4e0; margin-top: 5px; display: block; }
.mega-foot { border-top: 1px solid var(--c-grey-line); background: var(--c-grey-bg); }
.mega-foot div { max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; display: flex; gap: 26px; flex-wrap: wrap; font: 400 14px/1 var(--f-body); }
.mega-foot a { color: var(--c-primary); text-decoration: none; }
.mega-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1080px) { .mega-inner { grid-template-columns: 2fr 1fr; } .mega-promo { display: none; } }
@media (max-width: 900px) {
	.nav-left, .nav-right .desk-only { display: none; }
	/* burger + header-iconen (zoek/account/mandje) verhuizen naar .mobile-nav */
	.burger, .icons { display: none; }
	/* bovenbalk mobiel = alleen het logo, gecentreerd. Sale zit nu in de onderbalk. */
	.site-inner { display: flex; justify-content: center; gap: 12px; }
	.logo { justify-self: auto; }
	.mega { display: none; }
	.nav-right { display: none; }
}
.mobile-sale { display: none; font: 600 13.5px/1 var(--f-body); color: var(--c-error); text-decoration: none; white-space: nowrap; }

/* ---------- mobiele onderbalk (app-stijl), element 1.6 ---------- */
.mobile-nav { display: none; }
@media (max-width: 900px) {
	.mobile-nav {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
		display: flex; align-items: stretch;
		background: var(--c-white);
		border-top: 1px solid var(--c-grey-line);
		box-shadow: 0 -4px 18px rgba(10, 10, 10, .06);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mnav-item {
		flex: 1 1 0; min-width: 0;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 4px; padding: 9px 2px 8px;
		position: relative;
		background: none; border: 0; cursor: pointer;
		font: 500 10px/1 var(--f-body); letter-spacing: .01em;
		color: var(--c-label); text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.mnav-item svg { width: 23px; height: 23px; display: block; }
	.mnav-item span:not(.cart-count) { white-space: nowrap; }
	.mnav-item.is-current { color: var(--c-primary); }
	.mnav-item:active { color: var(--c-primary); }
	.mnav-sale { color: var(--c-error); }

	/* "Menu" springt eruit: opgetild rond icoon in de merkkleur (midden van de vijf). */
	.mnav-menu { color: var(--c-primary); font-weight: 600; }
	.mnav-menu .mnav-menu-ico {
		display: flex; align-items: center; justify-content: center;
		width: 46px; height: 46px; margin-top: -24px;
		border-radius: 50%;
		background: #000; color: #fff;
		box-shadow: 0 6px 16px rgba(10, 10, 10, .26);
	}
	.mnav-menu .mnav-menu-ico svg { width: 25px; height: 25px; }
	.mnav-menu[aria-expanded="true"] .mnav-menu-ico { background: #333; }
	.mnav-cart .mnav-ico { position: relative; display: block; line-height: 0; }
	.mnav-cart .cart-count {
		position: absolute; top: -6px; left: 100%; margin-left: -10px;
		min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
		background: var(--c-primary); color: #fff;
		border: 1.5px solid var(--c-white); border-radius: 999px;
		font: 600 9.5px/12px var(--f-body); text-align: center;
	}
	.mnav-cart .cart-count:empty { display: none; }

	/* content niet onder de vaste balk. `html body` = specificiteit boven Gravity Forms'
	   ongescope'te `body { padding: 0 }` in gravity-forms-theme-foundation.min.css. */
	html body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
}

/* ---------- zoek-overlay ---------- */
/* Volle-viewport popup. z-index 125 > header.site's 120: het paneel dekt de header af zodra
   het open is. Flex-column met het invoerveld vast bovenaan (flex:0 0 auto) en enkel
   .search-results scrollend (flex:1 1 auto + eigen overflow) -- anders vecht de scroll van
   de hele popup met de resultatenlijst en spring je terug naar boven zodra die ververst. */
.search-overlay {
	position: fixed; inset: 0; height: 100vh; z-index: 125;
	background: var(--c-white); overflow: hidden;
	display: flex; flex-direction: column;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.search-overlay.open { opacity: 1; visibility: visible; transform: translateY(0); }
.search-overlay-inner {
	width: 100%; max-width: 900px; margin: 0 auto; padding: 100px 24px 0; position: relative;
	display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
}
@media (max-width: 900px) { .search-overlay-inner { padding-top: 90px; } }
.search-overlay-close {
	position: absolute; top: 20px; right: 24px; background: none; border: 0;
	font-size: 30px; line-height: 1; cursor: pointer; color: var(--c-primary); padding: 8px;
}

.reve-search-form { flex: 0 0 auto; }
.reve-search-form input[type="search"] {
	width: 100%; border: 0; border-bottom: 1px solid var(--c-grey-line); border-radius: 0;
	background: transparent; font: 400 26px/1.3 var(--f-head); color: var(--c-primary);
	padding: 0 0 14px; outline: none; -webkit-appearance: none; appearance: none;
}
.reve-search-form input[type="search"]::placeholder { color: var(--c-grey-mid); }

.search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 16px 48px 0; }
.search-results h3 {
	font: 500 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
	color: var(--c-label); margin: 24px 0 12px;
}
.search-results h3:first-child { margin-top: 0; }
.search-cats, .search-products { list-style: none; margin: 0; padding: 0; }
.search-cats li a {
	display: block; padding: 10px 0; border-bottom: 1px solid #f0efec;
	text-decoration: none; color: var(--c-primary); font: 400 16px/1.3 var(--f-head);
}
.search-cats .in { color: var(--c-label); font: 400 13px/1 var(--f-body); }
.search-products li a {
	display: flex; align-items: center; gap: 16px; padding: 12px 0;
	border-bottom: 1px solid #f0efec; text-decoration: none; color: var(--c-primary);
}
.search-products img { width: 56px; height: 56px; object-fit: cover; background: var(--c-grey-bg); flex-shrink: 0; }
.search-products .nm { flex: 1; font: 400 15px/1.3 var(--f-head); }
.search-products .sku { color: var(--c-label); font: 400 13px/1 var(--f-body); }
.search-products .pr { font: 600 14px/1 var(--f-body); color: var(--c-primary); white-space: nowrap; }
.search-products .pr del { color: var(--c-label); font-weight: 400; text-decoration: line-through; margin-right: 6px; }
.search-products .pr ins { text-decoration: none; }
.search-no-results { color: var(--c-label); font: 400 15px/1.5 var(--f-body); }
.search-view-all {
	display: inline-block; margin-top: 20px; padding-bottom: 2px;
	border-bottom: 1px solid var(--c-primary); text-decoration: none;
	color: var(--c-primary); font: 500 14px/1 var(--f-body);
}

/* ---------- mobiele lade ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 10, .45); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); background: #fff; z-index: 151;
	transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column;
	box-shadow: -10px 0 34px rgba(0, 0, 0, .16); visibility: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--c-grey-line); }
.drawer-head span { font-family: var(--f-display); font-size: 20px; }
.drawer-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-primary); padding: 6px; }
.drawer-body { padding: 6px 26px 34px; overflow-y: auto; }
.drawer-kick { font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); margin: 26px 0 12px; }
.drawer-list { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer-list a { display: flex; align-items: center; gap: 14px; padding: 11px 0; text-decoration: none; color: var(--c-primary); font: 400 17px/1.2 var(--f-head); border-bottom: 1px solid #f0efec; }
.drawer-list img { width: 42px; height: 42px; object-fit: cover; background: var(--c-grey-bg); }
.drawer-list a.sale { color: var(--c-error); font-weight: 600; }
body.drawer-open, body.search-open { overflow: hidden; }

/* ============================================================
 * Footer -- element 1.2, designs/homepage-redesign.html
 * ============================================================ */
footer.pg { background: #000; color: #fff; padding: var(--sec) 24px 26px; }

/* grid-template-columns: auto auto (niet 1fr) zodat de tweede kolom niet de rest van de
   footer opvult -- de rijbreedte (en dus de onderlijn) volgt de breedste rij logo's i.p.v.
   de volledige containerbreedte. Beide rijen krijgen daardoor automatisch dezelfde lengte:
   grid-items strekken standaard naar de trackbreedte, die zelf op de breedste rij past. */
.footbrand { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); max-width: var(--wrap); margin: 0 auto; padding-bottom: 36px; }
.footbrand .gr { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.footbrand .gr img { height: clamp(20px, 2.2vw, 34px); width: auto; object-fit: contain; transition: transform .3s ease; }
.footbrand .gr:hover img { transform: scale(1.15); }
/* Zelfde nesting als de live site: .footbrand-rows is een flex-column met de twee rijen
   EN een eigen divider-element als broers/zussen (niet als border op rij 1). Als flex-item
   van .footbrand (flex-row) krijgt deze kolom van nature shrink-to-fit-breedte (geen grow/
   shrink gezet), en align-items:stretch (default voor een flex-column) rekt rij 1, de
   divider en rij 2 alle drie naar diezelfde breedte -- dus geen los border-bottom-trucje
   nodig om ze gelijk te trekken. */
/* align-items: center i.p.v. flex-start -- de twee rijen even breed maken door de smalste te
   stretchen zou logo's vervormen, dus rij 1 (breedste, car brands) bepaalt de kolombreedte en
   rij 2 (partnerlogo's) centreert daarbinnen. Rij 2's "natuurlijke breedte via de hoogtes
   afstemmen" (het idee vóór 2026-09-08) hield niet stand zodra Camerich's hoogte moest
   krimpen (klantfeedback, te zwaar/groot) -- rij 2 werd toen smaller dan rij 1 en stond
   scheef links. De divider krijgt zijn eigen align-self:stretch, los van de rijen. */
.footbrand-rows { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.5vw, 20px); border-left: 1px solid #262626; padding-left: clamp(16px, 3vw, 40px); }
/* flex-wrap: nowrap -- de logo's schalen mee met clamp() i.p.v. naar een tweede regel te
   springen zodra de balk te smal wordt. */
.footbrand-row { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 32px); flex-wrap: nowrap; }
.footbrand-divider { align-self: stretch; height: 1px; background: #262626; }
/* Rij 1 gebruikt sinds de "Rêve by Gregoir"-logo-verwijdering uit rij 2 dezelfde schaal als
   rij 2 -- rij 2 is nu de kortste rij, en beide rijen moeten even lang aanvoelen. */
.footbrand-row img {
	height: clamp(16px, 1.8vw, 31px); width: auto; object-fit: contain; opacity: .95;
	transition: transform .3s ease, opacity .3s ease;
}
.footbrand-row--sub img { height: clamp(16px, 1.8vw, 31px); }
.footbrand-row--sub img.castle { height: clamp(26px, 3vw, 50px); }
/* Camerich-Logo-White.png is edge-tot-edge gecropt (geen lucht rond de letters), GR Collection
   en Geodesis hebben dat wél -- op dezelfde box-hoogte oogde Camerich daardoor fors zwaarder/
   groter (klantfeedback 2026-09-08). Zelfde bestand, enkel de hoogte gecorrigeerd (width: auto
   houdt de eigen beeldverhouding intact -- geen vervorming). */
.footbrand-row--sub img[alt="Camerich"] { height: clamp(10px, 1.1vw, 19px); }
/* transform i.p.v. de hoogte zelf aanpassen -- dat schaalt visueel op zonder de rest van de
   rij te verschuiven (transform beïnvloedt geen document-flow). */
.footbrand-row a:hover img { transform: scale(1.15); opacity: 1; }
.footbrand-row .div { width: 1px; align-self: stretch; background: #262626; }
@media (max-width: 760px) { .footbrand { flex-direction: column; align-items: flex-start; } .footbrand-rows { border-left: 0; padding-left: 0; width: 100%; } }

.footlower { display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap; max-width: var(--wrap); margin: 0 auto; padding: 6px 0 40px; }
.footsocial { display: flex; gap: 11px; }
.footsocial a {
	width: 36px; height: 36px; border: 1px solid #3a3a3a; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.footsocial a:hover { border-color: #fff; }
.footcols { display: flex; gap: 64px; flex-wrap: wrap; }
.footcols b { display: block; color: #fff; font-weight: 600; margin-bottom: 14px; font-size: 14px; }
.footcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.footcols a { text-decoration: none; color: #cfccc6; }
.footcols a:hover { color: #fff; }
.footlang { display: flex; gap: 14px; margin-top: 18px; font-size: 13.5px; }
.footlang a { color: #cfccc6; text-decoration: none; }
.footlang a:hover { color: #fff; }
.footlang a[aria-current="true"] { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.footbottom {
	max-width: var(--wrap); margin: 0 auto; padding-top: 22px; border-top: 1px solid #262626;
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #a9a7a2;
}
.footbottom a { color: #a9a7a2; text-decoration: none; }
.footbottom a[href^="tel:"],
.footbottom .nowrap { white-space: nowrap; }
.footbottom .legal a,
.footbottom .legal .legal-link { margin-right: 16px; }
/* Cookie-voorkeuren-knop leest als de tekstlinks ernaast, geen knop-chrome. */
.footbottom .legal .cookie-prefs {
	background: none; border: 0; padding: 0; margin-right: 0;
	font: inherit; color: #a9a7a2; cursor: pointer;
}
.footbottom .legal .cookie-prefs:hover { color: #fff; }

/* ---------- mini-cart popup (header) ---------- */
/* .icons a/button (header-icoontjes) zetten margin:-13px -8px voor de klik-hitbox. Dat lekte
   naar de mini-cart-links BINNEN .icons -- VIEW CART/CHECKOUT overlapten op paginas waar
   WooCommerce's eigen a.button-CSS die margin niet toevallig terugzette (home, /cart/). */
/* .icons a/button (header-icoontjes) zetten margin:-13px -8px én position:relative voor de
   klik-hitbox. Beide lekten naar de mini-cart-links BINNEN .icons: de marge liet VIEW CART/
   CHECKOUT overlappen, en position:relative maakte de product-<a> (later in de DOM dan .remove)
   het bovenste positioned-element -> het remove-kruisje was niet meer klikbaar. */
.reve-mini-cart a, .reve-mini-cart button { margin: 0; position: static; }
.cart-wrap { position: relative; }
.cart-popup {
	position: absolute; top: calc(100% + 13px); right: -8px; z-index: 130;
	width: min(360px, 90vw); background: var(--c-white); color: var(--c-text);
	box-shadow: 0 18px 34px rgba(10, 10, 10, .15); border: 1px solid var(--c-grey-line);
	padding: 24px;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.cart-popup.open { opacity: 1; visibility: visible; transform: translateY(0); }
/* .icons button (specificiteit 0,0,1,1) won van .cart-popup-close (0,0,1,0) en zette
   position:relative -> knop belandde linksboven i.p.v. absoluut rechtsboven. .cart-popup ervoor
   tilt de specificiteit boven .icons button. */
.cart-popup .cart-popup-close { position: absolute; top: 8px; right: 0; left: auto; margin: 0; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--c-grey-bg); border: 0; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-primary); transition: background .15s; }
.cart-popup .cart-popup-close:hover { background: var(--c-grey-line); }

.cart-popup .reve-mini-cart .woocommerce-mini-cart { list-style: none; margin: 0 0 16px; padding: 0; max-height: 340px; overflow-y: auto; overflow-x: hidden; }
/* Item: image links, titel (wrapt) + hoeveelheid rechts, remove-kruisje in de vrije rechterhoek.
   Prefix .cart-popup + de WC-eigen classes zodat dit WC's `ul.cart_list li ...` overal verslaat --
   die regels laden alleen op WooCommerce-pagina's en zorgden anders voor een andere layout per pagina. */
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; row-gap: 3px; align-items: start; padding: 12px 26px 12px 0; border-bottom: 1px solid #f0efec; }
/* De product-<a> omvat image + titel-span; display:contents laat die twee rechtstreeks in het
   item-grid vallen zodat de titel en de hoeveelheid onder elkaar in kolom 2 komen. */
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item > a:not(.remove) { display: contents !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item > a:not(.remove) img { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 56px !important; height: 56px !important; max-width: 56px !important; object-fit: cover !important; float: none !important; margin: 0 !important; box-shadow: none !important; background: var(--c-grey-bg); }
.cart-popup .reve-mini-cart .reve-mini-cart-title { grid-column: 2; grid-row: 1; min-width: 0; display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; color: var(--c-primary); font: 400 14px/1.4 var(--f-body); font-weight: 400 !important; text-decoration: none; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item .quantity { grid-column: 2; grid-row: 2; align-self: start; font: 400 13px/1.3 var(--f-body); color: var(--c-label); }
/* remove: eigen ruimte in de 26px rechter-padding, boven alles. */
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item a.remove { position: absolute !important; top: 10px !important; right: 0 !important; left: auto !important; bottom: auto !important; z-index: 5; width: 20px !important; height: 20px !important; display: flex !important; align-items: center; justify-content: center; font-size: 17px !important; line-height: 1 !important; border-radius: 0 !important; font-weight: 400 !important; background: none !important; color: var(--c-label) !important; text-decoration: none !important; opacity: 1 !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart-item a.remove:hover { color: var(--c-black) !important; background: none !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__total { display: flex !important; justify-content: space-between; gap: 10px; font: 600 14px/1 var(--f-body) !important; border: none !important; border-top: 1px solid var(--c-grey-line) !important; padding: 12px 0 0 !important; margin: 0 0 16px !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__buttons { display: grid !important; gap: 10px; margin: 0 !important; padding: 0 !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__buttons a { display: block !important; text-align: center; padding: 12px !important; text-decoration: none; font: 600 13px/1 var(--f-body) !important; letter-spacing: .04em; text-transform: uppercase; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) { border: 1px solid var(--c-black) !important; background: transparent !important; color: var(--c-black) !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__buttons a.checkout { background: var(--c-black) !important; border: 1px solid var(--c-black) !important; color: #fff !important; }
.cart-popup .reve-mini-cart .woocommerce-mini-cart__empty-message { color: var(--c-label); font: 400 14px/1.5 var(--f-body); text-align: center; margin: 20px 0; }

/* ---------- cart page (2.1) -- Elementor eraf, klassieke WooCommerce shortcode + eigen CSS ---------- */
.woocommerce-cart .woocommerce {
	max-width: var(--wrap); margin: 0 auto; padding: var(--sec) 24px;
	display: grid; grid-template-columns: 1fr 340px; column-gap: var(--gap); row-gap: 0; align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woo-page-title { grid-column: 1 / -1; margin: 0 0 32px; font: 400 clamp(32px, 3.6vw, 46px)/1.15 var(--f-display); }
.woocommerce-cart table.shop_table { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--f-body); }
.woocommerce-cart table.shop_table th {
	text-align: left; padding: 12px 10px; font: 600 12px/1 var(--f-body); letter-spacing: .05em;
	text-transform: uppercase; color: var(--c-label); border-bottom: 1px solid var(--c-grey-line);
}
.woocommerce-cart table.shop_table td { padding: 18px 10px; border-bottom: 1px solid var(--c-grey-line); vertical-align: middle; }
.woocommerce-cart .product-thumbnail img { width: 84px; height: 84px; object-fit: cover; background: var(--c-grey-bg); }
.woocommerce-cart .product-name a { color: var(--c-primary); text-decoration: none; font: 400 15px/1.4 var(--f-head); }
.woocommerce-cart td.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border-radius: 50%; background: none !important; color: var(--c-label) !important; font-size: 20px; text-decoration: none;
}
.woocommerce-cart td.product-remove a.remove:hover { color: var(--c-black) !important; background: var(--c-grey-bg) !important; }
.woocommerce-cart .quantity .qty { width: 64px; padding: 10px; border: 1px solid var(--c-grey-line); font: 400 14px/1 var(--f-body); }
.woocommerce-cart tr.actions .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.woocommerce-cart tr.actions .coupon .input-text { padding: 12px 14px; border: 1px solid var(--c-grey-line); font: 400 14px/1 var(--f-body); }
.woocommerce-cart tr.actions .button {
	display: inline-block; padding: 14px 24px; font: 600 12.5px/1 var(--f-body); letter-spacing: .05em;
	text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid var(--c-black);
	background: transparent; color: var(--c-black);
}
.woocommerce-cart tr.actions .button:hover { background: var(--c-grey-bg); }
.woocommerce-cart .cart-collaterals { grid-column: 2; }
/* WooCommerce's kern-CSS floate .cart_totals naar rechts op 100% breedte (bedoeld voor de oude
   niet-grid layout) -- botst met onze grid-plaatsing, dus expliciet neutraliseren. Geen kader
   rondom: alleen een lijn boven en onder het hele blok, en per rij een lichte scheiding zoals de
   hoofdtabel, i.p.v. één dichtgeplakt grijs vlak. */
.woocommerce-cart .cart_totals { float: none !important; width: auto !important; background: none; }
.woocommerce-cart .cart_totals h2 { margin: 0 0 18px; font: 400 22px/1.2 var(--f-head); }
/* table/tbody/tr volledig uit tabel-layout gehaald (block/flex i.p.v. table-row) -- een
   geblokkeerde <tr> binnen een nog tabel-layout <tbody> heeft geen betrouwbare breedtebasis voor
   width:100%, vandaar de hele keten omgezet zodat percentages overal normaal resolven. */
/* WooCommerce's .shop_table zet standaard een volledig kader + border-radius + een border-top op
   elke td -- allebei expliciet neutraliseren, anders blijft er een dubbele/omkaderde rand hangen
   naast onze eigen per-rij lijn. Enkel border-top per rij, verder nergens een rand. */
.woocommerce-cart .cart_totals table { display: block; width: 100%; font: 400 14px/1.5 var(--f-body); border: none; border-radius: 0; margin: 0; }
.woocommerce-cart .cart_totals table tbody { display: block; width: 100%; }
.woocommerce-cart .cart_totals table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; border: none; border-top: 1px solid var(--c-grey-line); }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { border: none !important; }
.woocommerce-cart .cart_totals table th { text-align: left; padding: 14px 0; font-weight: 400; color: var(--c-label); }
.woocommerce-cart .cart_totals table td { padding: 14px 0; text-align: right; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td { font-weight: 600; display: grid; }
.woocommerce table.shop_table td small { font-size: 9px; }
/* Verzendrij heeft te veel inhoud (radioknoppen, tekst, calculator-formulier) om naast een
   labelkolom te persen -- label boven, inhoud op 100% breedte eronder i.p.v. naast elkaar. */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals { display: block; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { display: block; width: 100%; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th { padding-bottom: 8px; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { padding-top: 0; text-align: left; }
.woocommerce-cart .woocommerce-shipping-methods { list-style: none; margin: 0 0 10px; padding: 0; }
.woocommerce-cart .woocommerce-shipping-methods li { margin-bottom: 8px; }
.woocommerce-cart .shipping-calculator-button { color: var(--c-primary); font: 400 13px/1 var(--f-body); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 16px; padding: 0; }
/* WooCommerce's klassieke a.button.alt (het checkout-button draagt die class óók) heeft een hogere
   specificiteit (bevat de a-tag) dan een class-only selector -- vandaar hier expliciet de a-tag
   meenemen én !important, anders wint hun paarse #7f54b3 alsnog. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 16px 24px !important;
	font: 600 13px/1 var(--f-body) !important; letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none; border: 1px solid var(--c-black); background: var(--c-black) !important; color: #fff !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #000 !important; }
.woocommerce-cart .woocommerce-cart-form__cart-item .woocommerce-Price-amount { color: var(--c-primary); }

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .cart-collaterals { grid-column: 1; }
}

/* ---------- checkout page (2.2) -- Elementor eraf, klassieke WooCommerce shortcode + eigen CSS ----------
   DOM: .woocommerce > [notices] [coupon-toggle] form.checkout > #customer_details(.col-1/.col-2)
        + #order_review_heading + #order_review. De grid staat op form.checkout, niet op
        .woocommerce: de coupon-toggle en de notices staan buiten het formulier en moeten
        volle breedte houden. */
.woocommerce-checkout .woocommerce { max-width: var(--wrap); margin: 0 auto; padding: var(--sec) 24px; }
.woocommerce-checkout .woo-page-title { margin: 0 0 32px; font: 400 clamp(32px, 3.6vw, 46px)/1.15 var(--f-display); }

.woocommerce-checkout form.checkout {
	display: grid; grid-template-columns: 1fr 380px; column-gap: var(--gap); row-gap: 0; align-items: start;
}
/* col2-set is bij WooCommerce standaard twee kolommen naast elkaar (facturatie | verzending).
   In een tweekoloms-checkout is dat te smal -- hier onder elkaar in de linkerkolom.
   grid-row: 1 / span 2 -- zonder dit valt #customer_details automatisch in rij 1 (dezelfde rij
   als #order_review_heading rechts), waardoor rij 1 zo hoog wordt als de hele facturatie-form en
   #order_review (rij 2) pas ná die volledige hoogte begint. Door hier dezelfde 2 rijen te
   overspannen als de rechterkolom, blijft rij 1 klein (bepaald door de titel) en start rij 2
   meteen erna. */
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: auto; float: none; margin-bottom: 40px; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 18px; font: 400 22px/1.2 var(--f-head); }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }

/* ---------- formuliervelden ---------- */
.woocommerce-checkout h3 { margin: 0 0 20px; font: 400 22px/1.2 var(--f-head); }
.woocommerce-checkout .form-row { display: flex; flex-direction: column; margin: 0 0 18px; padding: 0; }
.woocommerce-checkout .form-row label {
	margin-bottom: 7px; font: 600 12px/1.2 var(--f-body); letter-spacing: .05em;
	text-transform: uppercase; color: var(--c-label);
}
.woocommerce-checkout .form-row .required { color: var(--c-error); text-decoration: none; border: 0; }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%; padding: 13px 14px; border: 1px solid var(--c-grey-line); border-radius: 0;
	background: var(--c-white); font: 400 15px/1.4 var(--f-body); color: var(--c-text);
}
.woocommerce-checkout .form-row textarea.input-text { min-height: 110px; resize: vertical; }
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--c-primary); }
/* WooCommerce eigen float-based two-column (form-row-first/last) omgezet naar grid: float
   binnen een flex-kolom levert overlappende velden op. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px;
}
/* WooCommerce's eigen .form-row-first/-last zet width:47% (float-based 2-koloms, hogere
   specificiteit door de form-tag) -- zonder deze !important vult het veld zijn grid-kolom niet
   volledig. */
.woocommerce-checkout .form-row-first { grid-column: 1; width: 100% !important; }
.woocommerce-checkout .form-row-last { grid-column: 2; width: 100% !important; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }
.woocommerce-checkout .woocommerce-invalid .input-text { border-color: var(--c-error); }

/* ---------- ordertabel rechts ---------- */
/* Zelfde behandeling als .cart_totals bij 2.1: WooCommerce .shop_table zet een volledig kader
   + border-radius; hier alleen een lijn per rij. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	display: block; width: 100%; border: none; border-radius: 0; margin: 0;
	font: 400 14px/1.5 var(--f-body); border-collapse: collapse;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	width: 100%; border: none; border-top: 1px solid var(--c-grey-line);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	border: none !important; padding: 14px 0; background: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c-label);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { text-align: left; font-family: var(--f-head); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity { color: var(--c-label); }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td { font-weight: 600; }
/* Verzendrij: zelfde reden als op de cart-pagina -- radioknoppen passen niet naast een labelkolom. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: block; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	display: block; width: 100%; text-align: left; padding-top: 8px;
}
.woocommerce-checkout .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout .woocommerce-shipping-methods li { margin-bottom: 8px; }

/* ---------- betaalblok ---------- */
.woocommerce-checkout #payment { background: none; border-radius: 0; margin-top: 20px; }
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none; margin: 0; padding: 0 0 18px; border-bottom: 1px solid var(--c-grey-line);
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment ul.payment_methods label { font: 400 15px/1.4 var(--f-body); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--c-grey-bg); margin: 10px 0 0; padding: 14px 16px;
	font: 400 13.5px/1.5 var(--f-body); color: var(--c-label);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* Zelfde reden als bij 2.1: a.button.alt / #place_order dragen WooCommerce paarse #7f54b3 met
   hogere specificiteit dan een class-only selector. */
.woocommerce-checkout #payment .form-row.place-order { margin: 18px 0 0; padding: 0; }
.woocommerce-checkout #place_order {
	display: block; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer;
	padding: 16px 24px !important; font: 600 13px/1 var(--f-body) !important; letter-spacing: .05em;
	text-transform: uppercase; border: 1px solid var(--c-black);
	background: var(--c-black) !important; color: #fff !important; border-radius: 0 !important;
}
.woocommerce-checkout #place_order:hover { background: #000 !important; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; font: 400 13px/1.5 var(--f-body); }

/* ---------- coupon / login bovenaan ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login { max-width: var(--wrap); margin: 0 0 24px; }
.woocommerce-checkout form.checkout_coupon { border: 1px solid var(--c-grey-line); border-radius: 0; padding: 20px; }
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	background: var(--c-grey-bg); border-top: 2px solid var(--c-primary); border-radius: 0;
	padding: 14px 18px; font: 400 14px/1.5 var(--f-body); color: var(--c-text);
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before { display: none; }
.woocommerce-checkout .woocommerce-error { border-top-color: var(--c-error); }

/* ---------- my-account (2.3) ---------- */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message { border-top-color: var(--c-info); }
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before { color: var(--c-info); }
.woocommerce-account .woocommerce-info:hover::before,
.woocommerce-account .woocommerce-message:hover::before { color: var(--c-info-hover); }

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #customer_details { grid-row: auto; }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
	.woocommerce-checkout #order_review_heading { margin-top: 32px; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { grid-column: 1; }
}

/* ---------- my account (2.3) -- Elementor eraf, klassieke WooCommerce shortcode + eigen CSS ----------
   Twee toestanden, allebei binnen dezelfde .woocommerce-wrapper:
     uitgelogd -> form-login.php (login, en register als registratie aanstaat)
     ingelogd  -> navigation.php (<nav>) + .woocommerce-MyAccount-content
   De titel komt uit mb_reve_woo_pagina_titel() en spant in beide gevallen de volle breedte. */
.woocommerce-account .woocommerce {
	max-width: var(--wrap); margin: 0 auto; padding: var(--sec) 24px;
	display: grid; grid-template-columns: 240px 1fr; column-gap: var(--gap); align-items: start;
}
.woocommerce-account .woo-page-title { grid-column: 1 / -1; margin: 0 0 32px; font: 400 clamp(32px, 3.6vw, 46px)/1.15 var(--f-display); }
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* ---------- ingelogd: navigatie + inhoud ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--c-grey-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 14px 0; text-decoration: none; color: var(--c-label);
	font: 400 14px/1.3 var(--f-body);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--c-black); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--c-black); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; float: none; width: auto; font: 400 15px/1.6 var(--f-body); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { margin: 0 0 18px; font: 400 22px/1.2 var(--f-head); }
.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 16px; }

/* Ordertabel in het account: zelfde behandeling als de cart-totalen -- geen kader, lijn per rij. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%; border: none; border-radius: 0; border-collapse: collapse; font: 400 14px/1.5 var(--f-body);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	text-align: left; padding: 12px 10px 12px 0; border: none; border-bottom: 1px solid var(--c-grey-line);
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c-label);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 16px 10px 16px 0; border: none; border-bottom: 1px solid var(--c-grey-line);
}

/* ---------- uitgelogd: login (+ register wanneer die aanstaat) ---------- */
/* #customer_login is WooCommerce col2-set; staat registratie uit, dan rendert alleen .col-1.
   grid-column 1/-1 zodat het formulier niet in de smalle navigatiekolom belandt. */
.woocommerce-account #customer_login,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register { grid-column: 1 / -1; }
.woocommerce-account #customer_login { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 { width: auto; float: none; }
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
	max-width: 460px; border: 1px solid var(--c-grey-line); border-radius: 0; padding: 28px; margin: 0;
}
.woocommerce-account .woocommerce-form-row,
.woocommerce-account form.woocommerce-form .form-row { display: flex; flex-direction: column; margin: 0 0 18px; padding: 0; }
.woocommerce-account form.woocommerce-form label {
	margin-bottom: 7px; font: 600 12px/1.2 var(--f-body); letter-spacing: .05em;
	text-transform: uppercase; color: var(--c-label);
}
.woocommerce-account form.woocommerce-form .input-text {
	width: 100%; padding: 13px 14px; border: 1px solid var(--c-grey-line); border-radius: 0;
	background: var(--c-white); font: 400 15px/1.4 var(--f-body); color: var(--c-text);
}
.woocommerce-account form.woocommerce-form .input-text:focus { outline: none; border-color: var(--c-primary); }
/* Het checkbox-label mag niet de kolom-layout van de gewone velden erven: label en vinkje
   horen op één regel, niet onder elkaar. */
.woocommerce-account form.woocommerce-form label.woocommerce-form__label-for-checkbox {
	flex-direction: row; align-items: center; gap: 8px; margin: 0 0 16px;
	text-transform: none; letter-spacing: 0; font: 400 13.5px/1.4 var(--f-body); color: var(--c-text);
}
/* Zelfde reden als bij 2.1 en 2.2: WooCommerce eigen .button draagt #7f54b3 met hogere specificiteit. */
.woocommerce-account form.woocommerce-form .button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-block; cursor: pointer; padding: 15px 26px !important;
	font: 600 13px/1 var(--f-body) !important; letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none; border: 1px solid var(--c-black); border-radius: 0 !important;
	background: var(--c-black) !important; color: #fff !important;
}
.woocommerce-account form.woocommerce-form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: #000 !important; }
.woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font: 400 13px/1.4 var(--f-body); }

@media (max-width: 900px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
	.woocommerce-account .woocommerce-MyAccount-content { margin-top: 28px; }
	.woocommerce-account #customer_login { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- order received / thank you (2.4) ----------
   Deze pagina IS de checkout-pagina (ID 7): de body draagt zowel .woocommerce-checkout als
   .woocommerce-order-received, dus de wrapper-breedte uit 2.2 geldt hier al. Bewust GEEN
   woo-page-title: die zou "Checkout" tonen terwijl WooCommerce eigen bevestigingsboodschap
   de kop van deze pagina is. */
.woocommerce-order-received .woocommerce-order { font: 400 15px/1.6 var(--f-body); }
.woocommerce-order-received .woocommerce-thankyou-order-received {
	margin: 0 0 36px; padding: 0; background: none; border: none;
	font: 400 clamp(28px, 3.2vw, 40px)/1.2 var(--f-display); color: var(--c-text);
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before { display: none; }

/* Overzichtsbalk (ordernummer, datum, e-mail, totaal): van WooCommerce eigen <ul> met bullets
   naar een rij kolommen met een lijn erboven en eronder. */
.woocommerce-order-received ul.order_details {
	display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; margin: 0 0 44px; padding: 22px 0;
	border-top: 1px solid var(--c-grey-line); border-bottom: 1px solid var(--c-grey-line);
}
.woocommerce-order-received ul.order_details li {
	margin: 0; padding: 0; border: none; float: none; text-transform: none;
	font: 600 12px/1.2 var(--f-body); letter-spacing: .05em; color: var(--c-label);
}
.woocommerce-order-received ul.order_details li strong {
	display: block; margin-top: 7px; font: 400 17px/1.3 var(--f-head); letter-spacing: 0; color: var(--c-text);
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title { margin: 0 0 18px; font: 400 22px/1.2 var(--f-head); }
.woocommerce-order-received .woocommerce-order-details { margin-bottom: 44px; }

/* Ordertabel: zelfde behandeling als de cart-totalen en de checkout-review -- geen kader,
   alleen een lijn per rij. */
.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%; border: none; border-radius: 0; border-collapse: collapse; font: 400 14px/1.5 var(--f-body);
}
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
	border: none !important; border-bottom: 1px solid var(--c-grey-line) !important;
	padding: 14px 10px 14px 0; background: none; text-align: left;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--c-label);
}
.woocommerce-order-received table.woocommerce-table--order-details td.product-total,
.woocommerce-order-received table.woocommerce-table--order-details th.product-total,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td { text-align: right; padding-right: 0; }
.woocommerce-order-received table.woocommerce-table--order-details .product-name a { color: inherit; text-decoration: none; font-family: var(--f-head); }
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td { font-weight: 600; }

/* Klantgegevens onderaan: twee kolommen (facturatie / verzending) i.p.v. WooCommerce floats. */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns {
	display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap);
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column { width: auto; float: none; }
.woocommerce-order-received .woocommerce-customer-details address {
	border: 1px solid var(--c-grey-line); border-radius: 0; padding: 20px; font-style: normal; line-height: 1.7;
}

@media (max-width: 900px) {
	.woocommerce-order-received ul.order_details { gap: 20px 32px; }
	.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; row-gap: 24px; }
}

/* ---------- homepage (3.1): generieke sectie-shell + shop-by-category ---------- */
section.blk { padding: var(--sec) 0; }
/* overflow: hidden -- de favourites-slider/knop duwden de sectie horizontaal breder dan de
   viewport (zichtbare horizontale scrollbar/shift op de homepage), zonder dit klemt het af. */
section.blk.grey { background: var(--c-grey-bg); overflow: hidden; }
section.blk.dark { background: #000; color: #fff; }
.section-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-hd .kick { font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); margin: 0 0 10px; }
.section-hd .lnk { font: 500 14px/1 var(--f-body); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; color: var(--c-primary); }
.dark .section-hd .kick { color: var(--c-secondary); }

.catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.catcard { position: relative; aspect-ratio: 3/4.3; overflow: hidden; text-decoration: none; display: block; background: var(--c-grey-bg); }
.catcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.catcard:hover img { transform: scale(1.045); }
.catcard .tag { position: absolute; left: 14px; bottom: 14px; background: #fff; color: var(--c-primary); padding: 9px 16px; font: 500 13.5px/1 var(--f-body); }
@media (max-width: 1040px) { .catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- homepage (3.1): favourites-slider + productkaart ---------- */
.favourites { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 54px; align-items: center; }
.favourites-intro .kick { font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); margin: 0 0 10px; }
.favourites-intro h2 { margin-bottom: 16px; }
.favourites-intro .desc { font: 400 16px/1.6 var(--f-body); color: #3a3a3a; max-width: 32ch; margin: 0 0 26px; }
.favourites-slider-wrap { position: relative; min-width: 0; }
.favourites-slider { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.favourites-slider::-webkit-scrollbar { display: none; }
.favourites-slider .prodcard { flex: 0 0 auto; width: calc((100% - 2*22px)/3.15); scroll-snap-align: start; }
.favourites-arrow { position: absolute; top: 38%; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--c-grey-line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; z-index: 3; padding: 0; }
.favourites-arrow.next { right: -4px; }
.favourites-arrow.prev { left: -4px; }
.favourites-arrow[hidden] { display: none; }
.favourites-arrow:hover { background: var(--c-grey-bg); }
@media (max-width: 1040px) {
	.favourites { grid-template-columns: minmax(0, 1fr); }
	.favourites-slider .prodcard { width: calc((100% - 22px)/2.15); }
}

.prodcard { text-decoration: none; display: block; }
.prodcard .ph { aspect-ratio: 4/5; background: var(--c-white); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 18px; }
.prodcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prodcard:hover .ph img { transform: scale(1.045); }
.prodcard .brand { font: 500 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); margin-top: 14px; }
.prodcard .nm { font: 400 16px/1.35 var(--f-head); margin-top: 6px; color: var(--c-primary); }
.prodcard .pr { font: 400 14.5px/1 var(--f-body); color: var(--c-label); margin-top: 7px; }

/* ---------- homepage (3.1): story-editorial (foto + donker paneel) ---------- */
.story-shell { background: var(--c-black); }
.story { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; min-height: 74vh; padding-right: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); }
.story-media { position: relative; overflow: hidden; background: var(--c-black); }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-panel { background: var(--c-black); color: #fff; padding: var(--sec) 0; display: flex; flex-direction: column; justify-content: center; gap: 34px; }
.story-panel .kick { font: 500 12.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-secondary); margin: 0; }
.story-panel h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; margin: 14px 0 0; }
.story-panel p.lead { font: 400 16px/1.6 var(--f-body); color: #d8d6d1; max-width: 38ch; margin: 0; }

.brandrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 26px; border-top: 1px solid #2c2c2c; }
.brandrow a { display: flex; align-items: center; opacity: .88; transition: opacity .15s; }
.brandrow a:hover { opacity: 1; }
.brandrow img { height: 22px; width: auto; display: block; }
.brandrow img.tall { height: 30px; }
/* Zelfde correctie als .footbrand-row--sub -- zie het commentaar daar. */
.brandrow img[alt="Camerich"] { height: 18px; }
.brandrow img.gr-collection { height: 40px; }

.usps-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; list-style: none; margin: 0; padding: 8px 0 0 0; border-top: 1px solid #2c2c2c; }
.usps-edit li { padding-top: 22px; }
.usps-edit b { display: block; font: 400 16px/1.3 var(--f-head); margin-bottom: 6px; }
.usps-edit small { display: block; color: #b9b7b2; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) {
	.story { grid-template-columns: 1fr; padding-right: 0; }
	.story-panel { padding: var(--sec) 24px; }
	.story-media { min-height: 52vh; }
	.usps-edit { grid-template-columns: 1fr; }
}

/* ---------- homepage (3.1): GR Collection & Geodesis (secundaire merken) ---------- */
.section-hd h2.hd-small { font-family: var(--f-head); font-size: clamp(22px, 2.4vw, 28px); }
.brandpair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.brandcard { position: relative; aspect-ratio: 5/4; overflow: hidden; text-decoration: none; display: block; color: #fff; }
.brandcard img { width: 100%; height: 100%; object-fit: cover; }
.brandcard .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 45%, rgba(20, 20, 20, .72) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.brandcard h3 { font-family: var(--f-head); font-size: 24px; font-weight: 400; margin-bottom: 6px; }
.brandcard span.line { font: 400 14px/1.4 var(--f-body); max-width: 36ch; color: #f0efec; }
.brandcard .go { margin-top: 14px; font: 600 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .brandpair { grid-template-columns: 1fr; } }

/* ---------- homepage (3.1): pinterest-slider ---------- */
.pin { text-align: center; padding: var(--sec) 0; }
.pin .kick { font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); margin-bottom: 14px; }
.pin h2 { max-width: 20ch; margin: 0 auto; }
.pinslider-wrap { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.pinslider { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 40px 0; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.pinslider::-webkit-scrollbar { display: none; }
.pinslider div { flex: 0 0 auto; width: calc((100% - 4*14px)/5); aspect-ratio: 1; background: var(--c-grey-bg); overflow: hidden; scroll-snap-align: start; }
.pinslider img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pinslider div:hover img { transform: scale(1.04); }
.pinarrow { position: absolute; top: calc(50% - 5px); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--c-grey-line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; z-index: 3; padding: 0; }
.pinarrow:hover { background: var(--c-grey-bg); }
.pinarrow.prev { left: 2px; }
.pinarrow.next { right: 2px; }
@media (max-width: 720px) { .pinslider div { width: calc((100% - 2*14px)/3); } }
.pin-cta { margin-top: 8px; }

/* ---------- homepage (3.1): editorial video-sectie ---------- */
.editorial { padding-top: var(--sec); background: #fff; }
.editorial-media { position: relative; width: 100%; aspect-ratio: 21/8; overflow: hidden; background: #000; display: block; }
.editorial-media video, .editorial-media img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); display: block; }
/* De 21:8-uitsnede op desktop sneed Hervé's hoofd anders af -- object-position: center top
   houdt het bovenaan in beeld i.p.v. het beeldmidden te centreren (klantfeedback 2026-09-08). */
.editorial-media img { object-position: center top; }
.editorial-row { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.3fr; gap: 60px; padding: var(--sec) 24px; align-items: start; }
.editorial-row h2 { font-size: clamp(30px, 3.4vw, 44px); }
.editorial-row .desc { font: 400 18px/1.6 var(--f-body); color: #2b2b2b; max-width: 54ch; margin: 0 0 18px; }
.editorial-row .go { font: 500 15px/1 var(--f-body); color: var(--c-primary); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) {
	.editorial-media { aspect-ratio: 4/3; }
	.editorial-row { grid-template-columns: 1fr; }
}

/* ---------- homepage (3.1): newsletter ---------- */
.news { background: var(--c-secondary); padding: var(--sec) 24px; text-align: center; }
.news h2 { max-width: 18ch; margin: 0 auto 12px; }
.news p { max-width: 52ch; margin: 0 auto 28px; color: #3a352d; }
/* Bestaand Gravity Forms-formulier #1 ("newsletter") -- herstyled, niet herbouwd. GF's
   Orbital-theme leest zijn eigen kleuren uit CSS-variabelen op de wrapper (gegenereerd per
   render), dus die overschrijven i.p.v. tegen GF's class-namen op te boksen. */
#gform_wrapper_1.gform-theme {
	--gf-color-primary: var(--c-black);
	--gf-color-primary-contrast: #fff;
	--gf-color-in-ctrl-primary: var(--c-black);
	--gf-ctrl-border-color: var(--c-black);
}
#gform_wrapper_1 { max-width: 620px; margin: 0 auto; }
/* Desktop: e-mail (groeit) + B2B/B2C naast elkaar op één rij, submit eronder over de volle breedte.
   Mobiel (< 601px): alles onder elkaar -- zie de media query onderaan dit blok. */
#gform_wrapper_1 .gform_fields { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
#gform_wrapper_1 .gfield--type-hidden { display: none; }
#gform_wrapper_1 #field_1_1 { flex: 1 1 220px; min-width: 0; }
/* `<fieldset>`-defaults uit -- anders staat B2B ~10px van de e-mailrand. GF's `gfield--width-half`
   ook overrulen. */
#gform_wrapper_1 #field_1_4 { flex: 0 0 auto; max-width: 100%; padding: 0; border: 0; margin: 0; }
#gform_wrapper_1 .ginput_container_email input { width: 100%; border: 1.4px solid var(--c-black); border-radius: 0; padding: 15px 16px; font: 400 15px/1 var(--f-body); background: #fff; box-shadow: none; text-align: left; }
/* B2B/B2C als toggle-knoppen i.p.v. radiobolletjes: de input blijft functioneel (klik via het
   gekoppelde label werkt native) maar visueel verborgen; het label wordt de knop. GF zet
   `gfield--choice-align-vertical` -> kolom; wij forceren rij zodat ze naast elkaar staan. */
#gform_wrapper_1 #field_1_4 .gfield_radio { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; }
#gform_wrapper_1 .gchoice { position: relative; display: block; }
#gform_wrapper_1 .gfield-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
/* Keuze-toggle, geen ingevulde knop -- anders leest de gekozen optie als een tweede
   submit-knop (allebei egaal zwart). Niet gekozen = flauwe grijze omtrek; gekozen = stevige
   dubbele zwarte omtrek + vette tekst, witte vulling in beide. */
#gform_wrapper_1 .gchoice label {
	display: flex; align-items: center; justify-content: center;
	min-width: 92px; margin: 0; padding: 13px 20px;
	border: 1.4px solid var(--c-grey-mid); background: #fff;
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
	color: var(--c-label); cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s;
}
#gform_wrapper_1 .gchoice label:hover { border-color: var(--c-primary); color: var(--c-primary); }
#gform_wrapper_1 .gfield-choice-input:checked + label {
	border-color: var(--c-black); color: var(--c-black); font-weight: 700;
	box-shadow: inset 0 0 0 1.4px var(--c-black);
}
#gform_wrapper_1 .gfield-choice-input:focus-visible + label { outline: 2px solid var(--c-black); outline-offset: 2px; }
#gform_wrapper_1 .gform-footer,
#gform_wrapper_1 .gform_footer { margin: 16px 0 0; padding: 0; width: 100%; }
#gform_wrapper_1 #gform_submit_button_1 { width: 100%; background: var(--c-black); color: #fff; border: 1.4px solid var(--c-black); border-radius: 0; padding: 15px 24px; font: 600 13px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; box-shadow: none; }
#gform_wrapper_1 #gform_submit_button_1:hover { background: #000; }

/* Mobiel: e-mail over de volle breedte, B2B/B2C er 50/50 onder, submit over de volle breedte. */
@media (max-width: 600px) {
	#gform_wrapper_1 .gform_fields { flex-direction: column; align-items: stretch; gap: 12px; }
	#gform_wrapper_1 #field_1_1,
	#gform_wrapper_1 #field_1_4 { flex: 0 0 auto; width: 100%; }
	#gform_wrapper_1 #field_1_4 .gfield_radio { gap: 12px; }
	#gform_wrapper_1 .gchoice { flex: 1 1 0; min-width: 0; }
	#gform_wrapper_1 .gchoice label { min-width: 0; width: 100%; }
}

/* ---------- Gravity Forms -- generieke huisstijl ---------------------------------------------
   GF's Orbital-theme leest kleuren/maten uit --gf-*-variabelen. GF print per formulier een
   inline <style> met `#gform_wrapper_N[data-form-index="0"].gform-theme { ... }` -- (1,2,0)
   specificiteit + later in de DOM dan onze <link>. Vandaar `!important` op de var-overrides:
   dit is een merk-rebrand van een third-party inline-blok, geen specificiteitshack in eigen CSS.
   Geldt voor contact (2), "Get an offer" op /request-a-quote/ (3), retailer (4), afspraak (6/7).
   #1 (newsletter) heeft eigen expliciete layoutregels met #id-specificiteit en blijft ongemoeid. */
.gform_wrapper.gform-theme {
	--gf-color-primary: var(--c-black) !important;
	--gf-color-primary-darker: #000 !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-color-in-ctrl-primary: var(--c-black) !important;

	--gf-ctrl-border-color: var(--c-black) !important;
	--gf-ctrl-border-color-hover: var(--c-black) !important;
	--gf-ctrl-border-color-focus: var(--c-black) !important;
	--gf-ctrl-border-width: 1.4px !important;
	--gf-ctrl-radius: 0 !important;
	--gf-ctrl-textarea-radius: 0 !important;
	--gf-ctrl-select-dropdown-radius: 0 !important;
	--gf-ctrl-multiselect-radius: 0 !important;
	--gf-ctrl-bg-color: #fff !important;
	--gf-ctrl-color: var(--c-text) !important;
	--gf-ctrl-font-family: var(--f-body) !important;
	--gf-ctrl-font-size: 15px !important;
	--gf-ctrl-padding-x: 15px !important;
	--gf-ctrl-padding-y: 13px !important;

	--gf-ctrl-label-color-primary: var(--c-label) !important;
	--gf-ctrl-label-color-secondary: var(--c-label) !important;
	--gf-ctrl-label-font-family-primary: var(--f-body) !important;
	--gf-ctrl-label-font-size-primary: 12px !important;
	--gf-ctrl-label-font-weight-primary: 500 !important;
	--gf-ctrl-label-letter-spacing-primary: .04em !important;
	--gf-ctrl-label-color-req: var(--c-error) !important;
	--gf-ctrl-label-font-size-req: 11px !important;
	--gf-ctrl-label-font-weight-req: 400 !important;

	--gf-ctrl-btn-bg-color-primary: var(--c-black) !important;
	--gf-ctrl-btn-bg-color-hover-primary: #000 !important;
	--gf-ctrl-btn-bg-color-focus-primary: #000 !important;
	--gf-ctrl-btn-border-color-primary: var(--c-black) !important;
	--gf-ctrl-btn-border-color-hover-primary: #000 !important;
	--gf-ctrl-btn-border-color-focus-primary: #000 !important;
	--gf-ctrl-btn-radius: 0 !important;
	--gf-ctrl-btn-font-family: var(--f-body) !important;
	--gf-ctrl-btn-font-size: 13px !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-ctrl-btn-letter-spacing: .05em !important;
	--gf-ctrl-btn-text-transform: uppercase !important;
	--gf-ctrl-btn-padding-x: 34px !important;
	--gf-ctrl-btn-padding-y: 16px !important;

	--gf-form-validation-radius: 0 !important;
}

/* Een formulier in een tekstpagina staat niet full-bleed. */
.gro-below .gform_wrapper,
.site-main .gform_wrapper:where(:not(#gform_wrapper_1)) { max-width: 760px; }

/* Klein-kapitaal labels zoals elders op de site (geen --gf-var voor text-transform). */
.gform_wrapper.gform-theme .gform_fields .gfield_label { text-transform: uppercase; }
/* Readonly weergavevelden ("Order", "Total") -- geen invoerkader, platte tekst. */
.gform_wrapper.gform-theme .gform-text-input-reset { padding-left: 0; padding-right: 0; }

/* ---------- team-contactblok (template-parts/team.php) -- komt op meerdere pagina's terug ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.team-photo { aspect-ratio: 1/1.05; overflow: hidden; background: var(--c-grey-bg); margin-bottom: 20px; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-family: var(--f-head); font-size: 24px; font-weight: 400; margin: 0 0 6px; }
.team-card .role { font: 400 15px/1.4 var(--f-body); color: var(--c-label); margin: 0 0 14px; }
.team-links { display: flex; flex-direction: column; gap: 4px; }
.team-links a { color: var(--c-primary); text-decoration: underline; font: 400 15px/1.5 var(--f-body); }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- kaart -- volle breedte, komt terug bij Store Locator/store-location (fase 7) ---------- */
.map-section { width: 100%; height: 480px; }
.map-section #reveMap, .map-section iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- knop met pijl-cirkel -- Castle Diependael (3.7), nu ook Rêve Stores (3.8) ---------- */
.btn-arrow { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; font: 600 14px/1 var(--f-body); color: var(--c-black); }
.btn-arrow .arrow-circle { width: 35px; height: 35px; border-radius: 50%; border: 1.7px solid #cbcbcb; display: flex; align-items: center; justify-content: center; transition: border-color .2s; flex-shrink: 0; }
.btn-arrow:hover .arrow-circle { border-color: var(--c-black); }
/* variant voor op een donkere achtergrond -- store-location single (7.1), "Join us as a
   retailer" op de zwarte story-panel. */
.btn-arrow.white { color: #fff; }
.btn-arrow.white .arrow-circle { border-color: rgba(255, 255, 255, .5); }
.btn-arrow.white:hover .arrow-circle { border-color: #fff; }

/* ---------- gesplitste layout (tekst + widget) -- Contact 3.3, Make An Appointment 3.6, ... ---------- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.split-grid h1 { font-family: var(--f-display); font-size: clamp(38px, 4.8vw, 58px); line-height: 1.05; font-weight: 400; margin: 0 0 22px; }
.split-grid .lede { font: 400 17px/1.6 var(--f-body); color: #3a3a3a; max-width: 46ch; margin: 0 0 28px; }
@media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-info { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; font: 400 15.5px/1.7 var(--f-body); }
.contact-info b { font-weight: 600; margin-bottom: 4px; }
.contact-info a, .contact-info span { color: var(--c-primary); text-decoration: none; }
.contact-info a.u { text-decoration: underline; }

.social-circles { display: flex; gap: 10px; margin-top: 24px; }
.social-circles a { width: 40px; height: 40px; border-radius: 50%; background: var(--c-black); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.social-circles a:hover { background: #000; }

/* ---------- simpele leescolonne -- lopende-tekstpagina's (3.4, 3.5, ...) ---------- */
.simple-text { max-width: 760px; }
.simple-text h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; margin: 0 0 22px; }
.simple-text h2 { font: 700 15px/1.4 var(--f-body); letter-spacing: .02em; margin: 0 0 34px; }
.body-content h3 { font-family: var(--f-head); font-weight: 400; font-size: 22px; margin: 36px 0 14px; }
.body-content h3:first-child { margin-top: 0; }
.body-content p, .body-content li { font: 400 16px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 16px; }
.body-content ul { padding-left: 20px; margin: 0 0 16px; }
.body-content a { color: var(--c-primary); text-decoration: underline; }

/* ---------- Journal-grid -- 12-koloms raster van designs/journal-overview.html (3.9 News),
   nu ook Projects (3.10). Gepromoot uit page-news.php's page-scoped <style> zodra een 2e
   pagina 'm nodig had (CLAUDE.md, CSS-architectuur). ---------- */
.jr { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 24px); }
.jr > * { grid-column: 4 / 9; min-width: 0; }

.jo-kop { padding: clamp(34px, 5vw, 72px) 0 clamp(26px, 3vw, 40px); }
.jo-kop h1 { grid-column: 4 / 11; grid-row: 1; font-family: var(--f-display); font-weight: 400; line-height: 1.02; font-size: clamp(40px, 7vw, 86px); margin: 0; letter-spacing: -.01em; }
.jo-kop .label { grid-column: 1 / 4; grid-row: 1; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0; }
.jo-kop p { grid-column: 4 / 9; font: 400 clamp(16px, 1.3vw, 18px)/1.65 var(--f-body); color: #3a3a3a; margin: 22px 0 0; max-width: 44ch; }

.jo-filter { padding: 0 0 clamp(30px, 3.5vw, 50px); }
.jo-filter div { grid-column: 4 / 13; display: flex; gap: 0 28px; flex-wrap: wrap; border-bottom: 1px solid var(--c-grey-line); padding-bottom: 16px; }
.jo-filter a { font: 400 14.5px/1 var(--f-body); color: var(--c-label); text-decoration: none; padding-bottom: 14px; margin-bottom: -17px; border-bottom: 1px solid transparent; }
.jo-filter a:hover { color: var(--c-primary); }
.jo-filter a[aria-current="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.jo-uit { padding: 0 0 clamp(44px, 5vw, 72px); }
.jo-uit a { grid-column: 1 / 13; text-decoration: none; color: inherit; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 24px); align-items: center; }
.jo-uit .ph { grid-column: 1 / 8; display: block; overflow: hidden; background: var(--c-grey-bg); aspect-ratio: 2/1; }
.jo-uit .ph img { width: 100%; height: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.jo-uit a:hover .ph img { transform: scale(1.03); }
.jo-uit .tekst { grid-column: 9 / 13; display: block; }
.jo-uit .cat { display: block; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0 0 14px; }
.jo-uit h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; font-size: clamp(24px, 2.4vw, 34px); margin: 0; text-wrap: pretty; }
.jo-uit p { font: 400 15.5px/1.7 var(--f-body); color: #3a3a3a; margin: 14px 0 0; }
.jo-uit .lees { display: inline-block; margin-top: 18px; font: 400 13.5px/1 var(--f-body); color: var(--c-primary); border-bottom: 1px solid var(--c-grey-line); padding-bottom: 5px; }
.jo-uit a:hover .lees { border-bottom-color: var(--c-primary); }

.jo-rij { padding: 0 0 clamp(40px, 4.5vw, 64px); }
.jo-rij .label { grid-column: 1 / 4; grid-row: 1; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0; }
.jo-rij .grid { grid-column: 4 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.4vw, 30px); }

.jr-kaart { text-decoration: none; color: inherit; display: block; }
.jr-kaart .ph { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--c-grey-bg); }
.jr-kaart .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jr-kaart:hover .ph img { transform: scale(1.045); }
.jr-kaart .cat { display: block; font: 500 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); margin: 18px 0 9px; }
.jr-kaart h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.2; font-size: clamp(18px, 1.6vw, 22px); margin: 0; text-wrap: pretty; }
.jr-kaart p { font: 400 14.5px/1.65 var(--f-body); color: #3a3a3a; margin: 10px 0 0; }
.jr-kaart .lees { display: inline-block; margin-top: 14px; font: 400 13.5px/1 var(--f-body); color: var(--c-primary); border-bottom: 1px solid var(--c-grey-line); padding-bottom: 5px; }
.jr-kaart:hover .lees { border-bottom-color: var(--c-primary); }

/* overlay-variant -- titel op het beeld i.p.v. eronder, Projects (3.10): geen categorie/
   excerpt per project, enkel beeld + naam. */
.jr-kaart--overlay { position: relative; }
.jr-kaart--overlay .ph { aspect-ratio: 4/3; position: relative; }
.jr-kaart--overlay .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65)); }
.jr-kaart--overlay .titel { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; color: #fff; font: 400 17px/1.3 var(--f-display); text-wrap: pretty; }

.jo-pag { padding: 0 0 var(--sec); }
.jo-pag div { grid-column: 4 / 13; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--c-grey-line); padding-top: 26px; }
.jo-pag .page-numbers { font: 400 14.5px/1 var(--f-body); color: var(--c-label); text-decoration: none; padding: 10px 13px; }
.jo-pag a.page-numbers:hover { color: var(--c-primary); }
.jo-pag span.page-numbers.current { color: var(--c-primary); border: 1px solid var(--c-grey-line); }
.jo-pag a.next.page-numbers, .jo-pag a.prev.page-numbers { color: var(--c-primary); border-bottom: 1px solid var(--c-primary); padding: 0 0 5px; }
.jo-pag a.next.page-numbers { margin-left: auto; }

@media (max-width: 1080px) {
	.jo-kop h1, .jo-kop p, .jo-kop .label, .jo-filter div, .jo-uit a, .jo-rij .grid, .jo-rij .label, .jo-pag div { grid-column: 1 / 13; grid-row: auto; }
	.jo-kop .label, .jo-rij .label { margin-bottom: 14px; }
	.jo-uit a { grid-template-columns: 1fr; }
	.jo-uit .ph, .jo-uit .tekst { grid-column: 1 / 2; }
	.jo-uit .tekst { margin-top: 22px; }
	.jo-rij .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .jo-rij .grid { grid-template-columns: 1fr; } }

/* zelfde valkuil als elders in dit project: elk blok zet zijn eigen verticale padding met
   "padding: X 0", wat .jr's horizontale 24px zou wissen als een block-regel dat na deze regel
   laadt -- hier bewust als laatste regel zodat .jr wint zonder !important. */
.jr { padding-left: 24px; padding-right: 24px; }

/* ---------- productarchieven: shop, categorie, merk, outlet (4.1) ----------
   Bron: designs/category-redesign.html. De kaart- en filterregels komen daar 1-op-1 uit;
   de layout eromheen is nieuw omdat het ontwerp geen aparte shop-pagina had. */
.shop-kop { padding-top: var(--sec); }
.shop-kop h1 { font: 400 clamp(32px, 3.6vw, 46px)/1.15 var(--f-display); margin: 0; }
.shop-kop-intro { margin-top: 14px; max-width: 70ch; font: 400 16px/1.7 var(--f-body); color: var(--c-label); }

.shop-layout {
	display: grid; grid-template-columns: 280px minmax(0, 1fr);
	column-gap: var(--gap); align-items: start;
	padding-top: 40px; padding-bottom: var(--sec);
}

/* ---------- filtersidebar ---------- */
/* De sticky zit op de wrapper (`.filter-drawer`), niet op `.filters` zelf -- die wordt door
   reve-shop-filters.js vervangen bij elke filterklik en zou z'n sticky-context verliezen. */
.filter-drawer { position: sticky; top: 24px; }
.filter-drawer__close,
.filter-backdrop { display: none; }
.filter-toggle { display: none; }
.filters-clear { margin: 0 0 14px; font: 400 13px/1 var(--f-body); }
.filters-clear a { color: var(--c-label); }
.filters details { border-bottom: 1px solid var(--c-grey-line); padding: 16px 0; }
.filters details[open] summary svg { transform: rotate(180deg); }
.filters summary {
	display: flex; align-items: center; justify-content: space-between; cursor: pointer;
	list-style: none; font: 500 12.5px/1 var(--f-body); letter-spacing: .1em;
	text-transform: uppercase; color: var(--c-primary);
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary svg { transition: transform .2s ease; }
.filters .body { padding-top: 16px; }

/* Eén <a> per term i.p.v. een checkbox in een formulier -- zie inc/product-filters.php.
   Het vierkantje is puur visueel; de aria-pressed op de link draagt de echte toestand. */
.filters .opt {
	display: flex; align-items: center; gap: 10px; padding: 6px 0;
	font: 400 14.5px/1.3 var(--f-body); color: var(--c-primary); text-decoration: none;
}
.filters .opt:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.filters .opt .box {
	flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid var(--c-grey-mid);
	background: var(--c-white); position: relative;
}
.filters .opt.aan .box { background: var(--c-primary); border-color: var(--c-primary); }
.filters .opt.aan .box::after {
	content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.filters .opt .n { margin-left: auto; color: var(--c-label); font-size: 13px; }
.filter-apply { display: none; }

/* ---------- productraster ---------- */
.shop-resultaat .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.card { text-decoration: none; display: flex; flex-direction: column; }
/* ⚠️ Het beeld vult het kader met object-fit: cover. Dat werkt alleen netjes als de foto's in
   dezelfde verhouding staan -- op deze site staan ze in acht verhoudingen (0,56 tot 1,53), dus
   sommige kaarten snijden meer weg dan andere. Zie de noot in het ontwerp. */
.card .ph { aspect-ratio: 4/3; background: var(--c-grey-bg); overflow: hidden; display: block; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .ph img { transform: scale(1.045); }
.card .brand { font: 500 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); margin-top: 13px; }
.card .nm { font: 400 16.5px/1.3 var(--f-head); color: var(--c-primary); margin-top: 5px; }
.card .dim { font: 400 13px/1.3 var(--f-body); color: var(--c-label); margin-top: 4px; }
.card .pr { margin-top: 8px; font: 600 16px/1.2 var(--f-body); color: var(--c-primary); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.card .pr del { color: var(--c-error); font-weight: 400; font-size: 14.5px; text-decoration: line-through; }
.card .pr ins { text-decoration: none; }
.card .pr .vat { font-weight: 400; font-size: 12.5px; color: var(--c-label); }
.card .cols { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.card .cols .sw {
	width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .16);
	padding: 0; position: relative;
}
.card .cols .sw::after {
	content: attr(data-name); position: absolute; bottom: calc(100% + 7px); left: 50%;
	transform: translateX(-50%); background: var(--c-black); color: #fff;
	font: 400 11px/1 var(--f-body); padding: 5px 8px; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5;
}
.card .cols .sw:hover::after { opacity: 1; }
.card .cols .more { font: 400 12.5px/1 var(--f-body); color: var(--c-label); }
.card .cta {
	margin-top: 12px; display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 16px; border: 1px solid var(--c-black); background: #fff; color: var(--c-black);
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
	transition: background .15s, color .15s;
}
.card:hover .cta { background: var(--c-black); color: #fff; }

.shop-leeg { font: 400 16px/1.6 var(--f-body); color: var(--c-label); }
.shop-leeg a { color: var(--c-primary); }

/* ---------- paginering ---------- */
.shop-resultaat .page-numbers { display: flex; gap: 6px; list-style: none; margin: 40px 0 0; padding: 0; }
.shop-resultaat .page-numbers a,
.shop-resultaat .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	padding: 0 12px; border: 1px solid var(--c-grey-line); text-decoration: none;
	font: 400 14px/1 var(--f-body); color: var(--c-primary);
}
.shop-resultaat .page-numbers .current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- teller + toolbar ----------
   Basisregels staan hier, vóór de mobiele `@media`-blokken -- media queries voegen geen
   specificiteit toe, dus een niet-media-regel later in het bestand zou de mobiele override
   verslaan. De teller staat los van `.shop-toolbar` zodat hij op mobiel niet meescrollt. */
.shop-telling { margin: 0 0 16px; font: 400 14px/1.4 var(--f-body); color: var(--c-label); }
.shop-telling strong { color: var(--c-primary); font-weight: 600; }
.shop-toolbar {
	display: flex; align-items: center; justify-content: flex-end; gap: 12px;
	flex-wrap: wrap; margin: 0 0 24px;
}
.shop-toolbar form.woocommerce-ordering { margin: 0; display: flex; align-items: center; gap: 10px; }
.shop-toolbar form.woocommerce-ordering::before {
	content: "Sort by"; font: 400 14px/1 var(--f-body); color: var(--c-label);
}
.shop-toolbar form.woocommerce-ordering select {
	padding: 10px 32px 10px 12px; border: 1px solid var(--c-grey-line); border-radius: 0;
	background: var(--c-white); font: 400 14px/1.2 var(--f-body); color: var(--c-primary);
}

@media (max-width: 1100px) {
	.shop-resultaat .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	/* Mobiel: filters in een schuiflade, geopend via de "Filter"-knop in de (sticky) toolbar.
	   Vroeger stonden ze `order: 2` onder de lijst -- te ver scrollen (klantvraag 2026-09-02). */
	.shop-layout { display: block; padding-top: 24px; }
	.shop-resultaat .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }

	.shop-telling { margin: 0 0 12px; font-size: 13px; }

	/* De toolbar (Filter-knop + sorteren) plakt mee bovenaan zodra hij in beeld is; de teller
	   erboven scrollt gewoon weg. Schaduw enkel onder + full-bleed. */
	.shop-toolbar {
		position: sticky; top: 0; z-index: 60;
		flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 10px;
		margin: 0 -24px 20px; padding: 10px 24px;
		background: var(--c-white);
		box-shadow: 0 9px 10px -8px rgba(10, 10, 10, .3);
	}
	.shop-toolbar .filter-toggle {
		display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
		padding: 10px 16px; border: 1px solid var(--c-black); background: var(--c-white);
		font: 500 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
		color: var(--c-black); cursor: pointer;
	}
	.shop-toolbar .filter-toggle__n {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
		background: var(--c-black); color: #fff; font: 600 10px/1 var(--f-body);
	}
	/* "Sort by"-label weg op mobiel -- de keuzelijst spreekt voor zich en de rij is smal. */
	.shop-toolbar form.woocommerce-ordering { flex: 1 1 auto; min-width: 0; gap: 0; }
	.shop-toolbar form.woocommerce-ordering::before { display: none; }
	.shop-toolbar form.woocommerce-ordering select { flex: 1 1 auto; width: 100%; min-width: 0; }

	/* de lade zelf */
	.filter-drawer {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
		width: min(86vw, 360px); margin: 0; padding: 56px 22px 22px;
		background: var(--c-white); overflow-y: auto;
		transform: translateX(-100%); transition: transform .28s ease;
		box-shadow: 0 0 40px rgba(10, 10, 10, .2);
	}
	.filter-drawer.reve-open { transform: translateX(0); }
	.filter-drawer__close {
		display: block; position: absolute; top: 8px; right: 10px;
		width: 40px; height: 40px; border: 0; background: none;
		font: 400 28px/1 var(--f-body); color: var(--c-primary); cursor: pointer;
	}
	.filter-backdrop {
		display: block; position: fixed; inset: 0; z-index: 199;
		background: var(--c-veil, rgba(10, 10, 10, .4));
		opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
	}
	.filter-backdrop.reve-open { opacity: 1; visibility: visible; }
	body.reve-filters-open { overflow: hidden; }

	/* "Show results" onderaan de lade -- volle breedte, sluit de lade (JS) */
	.filter-apply { display: block; margin: 22px 0 0; }
	.filter-apply .go {
		display: flex; align-items: center; justify-content: center; width: 100%;
		padding: 14px 20px; border: 1px solid var(--c-black); background: var(--c-black);
		color: #fff; text-decoration: none; font: 600 12.5px/1 var(--f-body);
		letter-spacing: .05em; text-transform: uppercase;
	}
}

/* ---------- correcties 4.1 na visuele vergelijking met het ontwerp (2026-08-28) ----------
   ⚠️ .shop-kop en .shop-layout droegen eerst ook de class .jr. Dat is het 12-koloms
   Journal-grid uit 3.9, met `.jr > * { grid-column: 4 / 9 }` -- daardoor werden de sidebar
   en het productraster allebei in dezelfde vijf kolommen geduwd en stond alles onder elkaar
   i.p.v. naast elkaar. Eigen wrapper dus, met dezelfde breedte en padding als .jr. */
.shop-kop,
.shop-layout { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.shop-kop { padding-top: var(--sec); }

/* De basisregels voor `.shop-telling` en `.shop-toolbar` staan hierboven, vóór de mobiele
   `@media`-blokken -- anders wint deze niet-media-regel op bronvolgorde van de mobiele override. */

/* WooCommerce zet zijn eigen "incl. VAT" achter de prijs (woocommerce_price_display_suffix).
   Die stylen i.p.v. er een tweede naast te zetten -- dat gaf twee keer dezelfde tekst. */
.card .pr .woocommerce-price-suffix { font-weight: 400; font-size: 12.5px; color: var(--c-label); }
.card .pr .woocommerce-Price-amount { white-space: nowrap; }
.card .pr del .woocommerce-price-suffix { display: none; }

/* Filterkoppen in het ontwerp staan in kapitalen met ruime letterafstand. */
.filters summary { letter-spacing: .12em; }
.filters details:first-of-type { padding-top: 0; }

/* ---------- categorie-hero (4.2) -- designs/chairs-category-redesign.html ----------
   Structuur rendert ALTIJD. Alleen de introtekst en de levertijd hangen aan een ACF-veld:
   0 van de 26 categorieën heeft vandaag copy, en een categoriepagina zonder titel, beeld en
   subcategorieën is onbruikbaar. Zie de kop van inc/categorie-hero.php. */
.cat-hero { padding: 28px 0 0; }
.cat-hero .seopress-breadcrumbs,
.cat-hero #seopress-breadcrumbs { font: 400 13.5px/1.4 var(--f-body); color: var(--c-label); margin-bottom: 26px; }
.cat-hero #seopress-breadcrumbs a { color: var(--c-label); text-decoration: none; }
.cat-hero #seopress-breadcrumbs a:hover { color: var(--c-primary); }

.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cat-hero-beeld img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; }
.cat-hero-tekst.vol { grid-column: 1 / -1; max-width: 70ch; }
.cat-hero-tekst .eyebrow {
	margin: 0 0 14px; font: 500 11.5px/1 var(--f-body); letter-spacing: .18em;
	text-transform: uppercase; color: var(--c-label);
}
.cat-hero-tekst h1 {
	margin: 0; font-family: var(--f-display); font-weight: 400; line-height: 1.02;
	font-size: clamp(38px, 5.4vw, 68px); letter-spacing: -.01em;
}
.cat-hero-intro { margin-top: 22px; font: 400 clamp(16px, 1.25vw, 18px)/1.65 var(--f-body); color: #3a3a3a; }
.cat-hero-intro p { margin: 0 0 16px; }
.cat-hero-intro p:last-child { margin-bottom: 0; }

.cat-cijfers {
	display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 52px); margin: 30px 0 0;
	padding-top: 26px; border-top: 1px solid var(--c-grey-line);
}
.cat-cijfers div { margin: 0; }
.cat-cijfers dt { font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--f-head); color: var(--c-primary); }
.cat-cijfers dd { margin: 6px 0 0; font: 400 13.5px/1.3 var(--f-body); color: var(--c-label); }
.cat-cijfers .cat-cijfer-levertijd dt { font-size: clamp(16px, 1.5vw, 20px); }

/* Subcategorie-tegels: kale kaders met naam + aantal, zoals het ontwerp. */
.cat-subs { padding: clamp(40px, 5vw, 68px) 0 0; }
.cat-subs h2 { font: 400 clamp(20px, 2vw, 26px)/1.3 var(--f-head); margin: 0 0 20px; }
.cat-subs-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cat-sub {
	display: block; padding: 18px 20px; border: 1px solid var(--c-grey-line);
	text-decoration: none; color: var(--c-primary); transition: border-color .15s, background .15s;
}
.cat-sub:hover { border-color: var(--c-primary); background: var(--c-grey-bg); }
.cat-sub .nm { display: block; font: 400 16px/1.3 var(--f-head); }
.cat-sub .n { display: block; margin-top: 5px; font: 400 13.5px/1.3 var(--f-body); color: var(--c-label); }

@media (max-width: 900px) {
	.cat-hero-grid { grid-template-columns: 1fr; gap: 24px; }
	.cat-hero-beeld { order: 2; }
}

/* ---------- correcties ronde 2 (2026-08-28) ---------- */

/* Prijs en kleurstalen op één regel: stonden ze onder elkaar, dan kreeg een product zonder
   stalen een regel minder en liepen de knoppen van de kaarten niet gelijk. De .cta duwt zich
   met margin-top:auto naar beneden, zodat alle kaarten in een rij even hoog eindigen. */
.card { height: 100%; }
.shop-resultaat .grid > .card { align-items: stretch; }
.card .pr-rij {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-top: 8px; min-height: 26px;
}
.card .pr { margin-top: 0; }
.card .cols { margin-top: 0; }
.card .cta { margin-top: auto; }
/* De ruimte tussen de prijsregel en de knop blijft gelijk, ook zonder stalen. */
.card .pr-rij + .cta { margin-top: 12px; }

/* Mobiel: geen "See this piece"-knop op de kaarten -- de hele <a class="card"> is al de link.
   Zonder knop is er niets om naar de bodem te duwen, dus kaarten worden natuurlijke hoogte
   (geen stretch) en de prijs sluit gewoon aan op de productinfo. */
@media (max-width: 900px) {
	.card .cta { display: none; }
	.card .pr-rij { margin-top: 8px; }
	.card { height: auto; }
	.shop-resultaat .grid { align-items: start; }
}

/* Filterkoppen: kapitaal met ruime letterafstand (ontwerp), termen in gewone schrijfwijze. */
.filters summary { letter-spacing: .12em; }

/* Breadcrumbs: subtieler dan SEOPress' standaard, met een chevron als scheidingsteken.
   SEOPress print zijn eigen inline CSS met `.breadcrumb li::after { content:' > ' }` --
   die overschrijven we hier. Vorm uit designs/chairs-category-redesign.html (.crumbs). */
.cat-hero .breadcrumb,
.cat-hero #seopress-breadcrumbs { font: 400 13.5px/1 var(--f-body); color: var(--c-label); margin: 0 0 26px; }
.cat-hero .breadcrumb li { color: var(--c-label); }
.cat-hero .breadcrumb a { color: var(--c-label); text-decoration: none; }
.cat-hero .breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.cat-hero .breadcrumb li::after {
	content: "\203A"; margin: 0 9px; color: var(--c-grey-line);
}
.cat-hero .breadcrumb li:last-child::after { display: none; }
.cat-hero .breadcrumb li:last-child { color: var(--c-primary); }

/* Laadtoestand tijdens het filteren (element 4.1, AJAX-laag). Alleen een lichte dimming en
   een wachtcursor: het raster blijft staan i.p.v. weg te springen, zodat de pagina niet
   verschiet. Zonder JavaScript bestaat deze class nooit. */
body.reve-filtert .shop-resultaat { opacity: .45; transition: opacity .12s ease; pointer-events: none; }
body.reve-filtert .filters { pointer-events: none; }
body.reve-filtert { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
	body.reve-filtert .shop-resultaat { transition: none; }
}

/* ---------- hero-correcties (2026-08-28) ----------
   Beeld bovenaan uitlijnen i.p.v. gecentreerd: bij een lange merktekst zakte de foto naar het
   midden van de kolom en ontstond er een groot gat boven de foto. */
.cat-hero-grid { align-items: start; }

/* "Read more" zonder JavaScript. <details> kan niet half open staan -- dat zou de tekst
   helemaal verbergen i.p.v. inkorten -- dus een checkbox die de line-clamp opheft.
   De checkbox blijft bereikbaar met het toetsenbord (niet display:none). */
.cat-hero-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cat-hero-intro.inkort {
	display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-hero-toggle:checked ~ .cat-hero-intro.inkort {
	display: block; -webkit-line-clamp: none; overflow: visible;
}
.cat-hero-meer {
	display: inline-block; margin-top: 10px; cursor: pointer;
	font: 400 14px/1.4 var(--f-body); color: var(--c-primary);
	border-bottom: 1px solid var(--c-grey-line); padding-bottom: 3px;
}
.cat-hero-meer:hover { border-bottom-color: var(--c-primary); }
.cat-hero-toggle:focus-visible ~ .cat-hero-meer { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.cat-hero-meer .minder { display: none; }
.cat-hero-toggle:checked ~ .cat-hero-meer .meer { display: none; }
.cat-hero-toggle:checked ~ .cat-hero-meer .minder { display: inline; }

/* ---------- single product (5.1) -- designs/product-page-redesign-v2.html ---------- */
.single-product-pagina .wrap > .crumbs { margin: 20px 0 0; }
.prod {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(30px, 4vw, 64px); align-items: start; padding-top: 26px; padding-bottom: var(--sec);
}
/* galerij: hoofdbeeld met een rij miniaturen, geen stapel van volle-hoogte foto's */
.gal-main { aspect-ratio: 3/2; background: var(--c-grey-bg); overflow: hidden; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.gal-thumbs a {
	display: block; padding: 0; border: 1px solid transparent; background: var(--c-grey-bg);
	aspect-ratio: 3/2; overflow: hidden; transition: border-color .15s;
}
.gal-thumbs a[aria-current="true"] { border-color: var(--c-primary); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* aankoopkolom */
.buy .kick { font: 500 11.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); margin: 0; }
.buy h1 { font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; line-height: 1.12; margin: 10px 0 14px; }
.buy .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 600 26px/1 var(--f-body); color: var(--c-primary); margin: 0; }
.buy .price .woocommerce-price-suffix { font: 400 13.5px/1 var(--f-body); color: var(--c-label); }
.buy .price del { color: var(--c-error); font-weight: 400; font-size: 19px; }
.buy .price ins { text-decoration: none; }
.buy .stock { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 400 14px/1 var(--f-body); color: var(--c-label); }
.buy .stock i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--c-grey-mid); }
.buy .stock.op-voorraad i { background: var(--c-success); }

/* maten leesbaar in plaats van 178x56x116 */
.dims { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-grey-line); }
.dims div { font: 400 13px/1.4 var(--f-body); color: var(--c-label); }
.dims b { display: block; font: 400 19px/1 var(--f-head); color: var(--c-primary); margin-bottom: 4px; }

/* WooCommerce' eigen add-to-cart-formulier in de vorm van het ontwerp gezet. */
.actions { margin-top: 24px; }
.actions form.cart { display: grid; gap: 10px; margin: 0; }
.actions .quantity { display: flex; align-items: center; gap: 10px; }
.actions .quantity .qty { width: 78px; padding: 13px 10px; border: 1px solid var(--c-grey-line); font: 400 15px/1 var(--f-body); }
/* WooCommerce' .single_add_to_cart_button draagt hun paarse #7f54b3 met hogere specificiteit
   (element+class), vandaar hier de tag mee én !important -- zelfde patroon als bij 2.1. */
.actions button.single_add_to_cart_button {
	display: flex; align-items: center; justify-content: center; width: 100%;
	padding: 17px 22px !important; border: 1px solid var(--c-black); border-radius: 0 !important;
	background: var(--c-black) !important; color: #fff !important; cursor: pointer;
	font: 600 13px/1 var(--f-body) !important; letter-spacing: .05em; text-transform: uppercase;
}
.actions button.single_add_to_cart_button:hover { background: #262626 !important; }
.actions .stock { display: none; } /* staat al bovenaan de kolom */

/* beschrijving en specificaties */
.detail { padding: var(--sec) 0; border-top: 1px solid var(--c-grey-line); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 68px); align-items: start; }
.detail h2 { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; margin: 0 0 14px; }
.detail p { font: 400 16.5px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 14px; max-width: 62ch; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--c-grey-line); font: 400 15px/1.5 var(--f-body); vertical-align: top; }
.specs th { color: var(--c-label); font-weight: 400; width: 44%; }

/* gerelateerde rijen -- dezelfde kaart als op de archieven */
.related { padding: var(--sec) 0 0; }
.related h2 { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; margin: 0 0 26px; }
.related .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; }

@media (max-width: 1100px) {
	.related .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.prod { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.detail-grid { grid-template-columns: 1fr; gap: 30px; }
	.related .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}

/* ---------- productpagina: CTA's, geruststellingen, breadcrumbs (2026-08-28) ---------- */

/* Breadcrumbs overal hetzelfde: subtiel, met een chevron. Stond eerder alleen op .cat-hero;
   #main dekt nu ook de productpagina en elk toekomstig sjabloon. SEOPress print zijn eigen
   inline CSS met `.breadcrumb li::after { content:' > ' }` -- die overschrijven we hier. */
#main .breadcrumb { font: 400 13.5px/1.6 var(--f-body); color: var(--c-label); margin: 22px 0 0; padding: 0; }
#main .breadcrumb li { color: var(--c-label); }
#main .breadcrumb a { color: var(--c-label); text-decoration: none; }
#main .breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
#main .breadcrumb li::after { content: "\203A"; margin: 0 9px; color: var(--c-grey-line); }
#main .breadcrumb li:last-child::after { display: none; }
#main .breadcrumb li:last-child { color: var(--c-primary); }

/* Twee secundaire knoppen naast elkaar onder "Add to cart". */
.actions .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-2nd {
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 15px 18px; border: 1px solid var(--c-black); background: #fff; color: var(--c-black);
	text-decoration: none; font: 600 12.5px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
	transition: background .15s;
}
.btn-2nd:hover { background: var(--c-grey-bg); }

/* Levertijd, levering en "kom kijken" -- vlak bij de knop, waar de twijfel zit. */
.reassure { margin-top: 20px; border-top: 1px solid var(--c-grey-line); padding-top: 16px; display: grid; gap: 11px; }
.reassure div { display: flex; gap: 10px; font: 400 14px/1.5 var(--f-body); color: #3a3a3a; }
.reassure div::before {
	content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px; background: var(--c-label);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
}
/* Inline SVG als mask: geen extra bestand, en de kleur volgt het token. */
.reassure .reassure-levertijd::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.reassure .reassure-levering::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 7h11v10H2zM13 10h5l3 3v4h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 7h11v10H2zM13 10h5l3 3v4h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
}
.reassure .reassure-bekijken::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	.actions .pair { grid-template-columns: 1fr; }
}

/* Samenvatting van de korte omschrijving in de aankoopkolom (optie b, 2026-08-28).
   Twee regels plus een sprong naar de volledige tekst -- de volledige 627 tekens hier zetten
   duwt "Add to cart" van het scherm. */
.buy .kort { margin: 14px 0 0; font: 400 15px/1.6 var(--f-body); color: #3a3a3a; max-width: 46ch; }
.buy .kort a {
	color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px;
	white-space: nowrap; margin-left: 4px;
}
/* Zonder scroll-margin verdwijnt de kop onder de vaste header na het klikken op "Read more". */
#about { scroll-margin-top: 100px; }

/* Vaste koopbalk onderaan de productpagina (5.1). Alleen zichtbaar met JavaScript: het
   `hidden`-attribuut gaat er pas af als het script draait, zodat er nooit een balk staat
   waarvan de knop niets doet. */
.stickybuy {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; background: #fff;
	border-top: 1px solid var(--c-grey-line); box-shadow: 0 -6px 20px rgba(10, 10, 10, .07);
	transform: translateY(100%); transition: transform .25s ease;
}
.stickybuy.on { transform: translateY(0); }
.stickybuy .in {
	max-width: var(--wrap); margin: 0 auto; padding: 12px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.stickybuy .nm { font: 400 15px/1.3 var(--f-head); color: var(--c-primary); }
.stickybuy .pr { font: 600 15px/1 var(--f-body); color: var(--c-primary); margin-left: auto; }
.stickybuy .pr .woocommerce-price-suffix { font-weight: 400; font-size: 12.5px; color: var(--c-label); }
.stickybuy .pr del { font-weight: 400; font-size: 13px; color: var(--c-error); }
.stickybuy .pr ins { text-decoration: none; }
.stickybuy .btn-buy {
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	padding: 13px 24px; border: 1px solid var(--c-black); background: var(--c-black); color: #fff;
	font: 600 13px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
}
.stickybuy .btn-buy:hover { background: #262626; }

@media (max-width: 700px) {
	.stickybuy .nm { display: none; }
	.stickybuy .in { padding: 10px 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.stickybuy { transition: none; }
}
/* Boven de mobiele onderbalk (element 1.6) i.p.v. erachter -- staat na de basisregel
   zodat de cascade wint zonder specificiteitstruc. */
@media (max-width: 900px) {
	.stickybuy.on { transform: translateY( calc( -57px - env(safe-area-inset-bottom) ) ); }
}

/* Site-brede vragen onderaan de productpagina (5.8, generieke helft). Native <details>,
   zelfde patroon als de FAQ-pagina (3.16). Geen vragen ingevuld = geen sectie. */
.prod-faq { padding: var(--sec) 0 0; }
.prod-faq h2 { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; margin: 0 0 22px; }
.prod-faq details { border-bottom: 1px solid var(--c-grey-line); }
.prod-faq details[open] summary svg { transform: rotate(180deg); }
.prod-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	cursor: pointer; list-style: none; padding: 18px 0;
	font: 400 17px/1.4 var(--f-head); color: var(--c-primary);
}
.prod-faq summary::-webkit-details-marker { display: none; }
.prod-faq summary svg { flex: 0 0 auto; transition: transform .2s ease; color: var(--c-label); }
.prod-faq .a { padding: 0 0 20px; max-width: 68ch; font: 400 15.5px/1.7 var(--f-body); color: #3a3a3a; }
.prod-faq .a p { margin: 0 0 12px; }
.prod-faq .a p:last-child { margin-bottom: 0; }

/* De productrijen onderaan de productpagina hadden alleen padding bovenaan, waardoor de laatste
   rij tegen de nieuwsbriefband plakte. Nu boven én onder; twee rijen op elkaar krijgen geen
   dubbele ruimte doordat de tweede zijn bovenpadding laat vallen. */
.single-product-pagina .related { padding: var(--sec) 0; }
.single-product-pagina .related + .related { padding-top: 0; }

/* ---------- juridische pagina's (3.14 Privacy, 3.15 Terms) ----------
   Lange lopende tekst. .simple-text (uit 7.2) geeft de breedte en de koppen; hier alleen wat
   die pagina's extra nodig hebben: lijsten, tabellen en genoeg lucht tussen de artikelen. */
.juridisch .blk { padding: var(--sec) 0; }
.juridisch-tekst { font: 400 16px/1.75 var(--f-body); color: #2b2b2b; }
/* .simple-text zet h2 op 700/15px met een grote ondermarge -- bedoeld als ondertitel onder de
   h1. In een juridische tekst is h2 een artikelkop, dus die hier terugzetten. */
.juridisch-tekst h2 {
	font: 400 clamp(20px, 2vw, 26px)/1.3 var(--f-head); letter-spacing: 0;
	margin: 40px 0 14px; color: var(--c-primary);
}
.juridisch-tekst h3 { font: 600 16px/1.4 var(--f-body); margin: 26px 0 10px; }
.juridisch-tekst p { margin: 0 0 16px; }
.juridisch-tekst ul,
.juridisch-tekst ol { margin: 0 0 18px; padding-left: 22px; }
.juridisch-tekst li { margin-bottom: 8px; }
.juridisch-tekst li > ol,
.juridisch-tekst li > ul { margin-top: 8px; }
.juridisch-tekst a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.juridisch-tekst em { color: var(--c-label); }
.juridisch-tekst table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.juridisch-tekst th,
.juridisch-tekst td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--c-grey-line); vertical-align: top; }
.juridisch-tekst th { color: var(--c-label); font-weight: 400; }
/* Lange tabellen mogen scrollen i.p.v. de pagina breed te duwen. */
.juridisch-tekst table { display: block; overflow-x: auto; }


/* ============================================================
   JOURNAL — single blogpost, fase 6 (element 6.7)
   De .jr-* blok-regels. Bron: designs/blogs/jr-blokken.css + designs/blog-post-redesign.html.
   De .jr-basis (12-koloms grid, `.jr > *` op kolom 4/9) staat hierboven al bij het
   journal-overzicht (3.9). Dit zijn alleen de artikel-blokken.
   Tokens (--c-*, --f-*, --wrap) komen uit reve-base.css; --hdr = sticky-header-hoogte.
   ============================================================ */

:root { --hdr: 70px; }

.jr-artikel { position: relative; }

/* ---------- opener ---------- */
.jr-hero { padding: clamp(34px,5vw,72px) 0 0; text-align: center; }
.jr-hero h1 { grid-column: 2 / 12; font-family: var(--f-display); font-weight: 400; line-height: 1.03; font-size: clamp(32px,4.4vw,60px); margin: 0; text-wrap: balance; }
.jr-meta { grid-column: 2 / 12; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; font: 400 13px/1.5 var(--f-body); color: var(--c-label); }
.jr-meta .punt { width: 3px; height: 3px; border-radius: 50%; background: var(--c-grey-line); }
.jr-meta .cat { color: var(--c-primary); text-decoration: none; border-bottom: 1px solid var(--c-grey-line); padding-bottom: 2px; }
.jr-meta .cat:hover { border-bottom-color: var(--c-primary); }
.jr-lead { grid-column: 3 / 11; font: 400 clamp(17px,1.45vw,20px)/1.6 var(--f-body); color: var(--c-primary); margin: 22px auto 0; }

.jr-hero.split { text-align: left; align-items: center; padding: clamp(30px,4vw,58px) 0 clamp(10px,1.5vw,20px); }
.jr-hero.split .beeld { grid-column: 1 / 7; grid-row: 1; margin: 0; }
.jr-hero.split .beeld img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.jr-hero.split .kop { grid-column: 8 / 13; grid-row: 1; position: sticky; top: calc(var(--hdr,70px) + 28px); align-self: start; }
.jr-hero.split h1 { grid-column: auto; margin: 0; }
.jr-hero.split .jr-meta { grid-column: auto; justify-content: flex-start; }
.jr-hero.split .jr-lead { grid-column: auto; margin-left: 0; margin-right: 0; }

.jr-hero.vol { padding: 0; text-align: left; position: relative; display: block; max-width: none; margin: 0; }
.jr-hero.vol .beeld { margin: 0; position: relative; }
.jr-hero.vol .beeld img { width: 100%; height: clamp(420px,62vh,660px); object-fit: cover; display: block; }
.jr-hero.vol .kop { position: absolute; inset: auto 0 0 0; color: var(--c-white); background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.72) 72%); padding: clamp(60px,10vh,120px) 24px clamp(30px,4vw,52px); }
.jr-hero.vol .kop > div { max-width: var(--wrap); margin: 0 auto; }
.jr-hero.vol h1 { color: var(--c-white); max-width: 18ch; }
.jr-hero.vol .jr-meta { color: #d8d4cd; justify-content: flex-start; }
.jr-hero.vol .jr-meta .punt { background: rgba(255,255,255,.45); }
.jr-hero.vol .jr-lead { color: #e8e4dd; margin-left: 0; }

/* ---------- tekstblok ---------- */
.jr-blok { padding: clamp(34px,4.5vw,64px) 0; }
.jr-blok > * { grid-column: 4 / 9; }
.jr-blok p, .jr-blok li, .jr-naast .tekst p, .jr-split .tekst p, .jr-lead { max-width: 33em; }
.jr-blok p { font: 400 16.5px/1.78 var(--f-body); color: #3a3a3a; margin: 0 0 20px; }
.jr-blok p:last-child { margin-bottom: 0; }
.jr-blok h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; font-size: clamp(23px,2.3vw,32px); margin: 0 0 20px; text-wrap: pretty; }
.jr-blok h3 { font: 400 19px/1.35 var(--f-head); margin: 34px 0 12px; }
.jr-blok a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(48,48,48,.36); }
.jr-blok a:hover { text-decoration-color: var(--c-primary); }
.jr-blok ul { margin: 0 0 20px; padding-left: 20px; }
.jr-blok li { font: 400 16.5px/1.7 var(--f-body); color: #3a3a3a; margin: 0 0 9px; }
.jr-blok[id] { scroll-margin-top: 104px; }
/* Klein label in de kantlijn, op ooghoogte met de kop ernaast (zelfde stijl als .jr-shop .label). */
.jr-blok .label { grid-column: 1 / 4; grid-row: 1; align-self: start; margin: 0; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); }
.jr-blok .label + h2 { grid-row: 1; }
/* twee kolommen: columns op een wrapper zodat losse <p>'s meestromen (was één <p> met <br>'s). */
.jr-blok.tweekolom .kolommen { grid-column: 4 / 13; columns: 2; column-gap: clamp(26px,3vw,48px); }
.jr-blok.tweekolom .kolommen > :first-child { margin-top: 0; }
.jr-blok.tweekolom .kolommen p { max-width: none; margin: 0 0 18px; break-inside: avoid; }
.jr-blok.tweekolom .kolommen p:last-child { margin-bottom: 0; }
/* Een Gutenberg-beeld dat als ruwe HTML in een tekstblok terechtkwam (migratie van een post
   met een ontbrekende bijlage): op de beeldkolom i.p.v. de smalle tekstkolom. */
.jr-blok > .wp-block-image { grid-column: 4 / 13; margin: 0 0 clamp(16px,2vw,26px); }
.jr-blok > .wp-block-image img { width: 100%; height: auto; }
.jr-blok > .wp-block-image figcaption { font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 10px 0 0; }
@media (max-width: 1080px) { .jr-blok > .wp-block-image { grid-column: 1 / 13; } }

/* Terugval-tekstblok van een niet-gemigreerde post: gecentreerd onder de opener, geen kantlijn.
   Alleen dit blok -- de flexible-content blokken houden de redactionele links-uitlijning.
   Selectors met .jr-blok.jr-blok--midden zodat ze de .jr-blok p/h2/... regels hierboven
   overrulen (die zetten margin/text-align en wegen zwaarder dan één losse class). */
.jr-blok.jr-blok--midden { padding-top: clamp(18px,2.5vw,32px); }
.jr-blok.jr-blok--midden > * { grid-column: 3 / 11; text-align: center; margin-left: auto; margin-right: auto; }
.jr-blok.jr-blok--midden > p,
.jr-blok.jr-blok--midden > ul,
.jr-blok.jr-blok--midden > ol { max-width: 40em; }
.jr-blok.jr-blok--midden > ul,
.jr-blok.jr-blok--midden > ol { width: max-content; max-width: min(40em, 100%); text-align: left; padding-left: 22px; }
@media (max-width: 1080px) { .jr-blok.jr-blok--midden > * { grid-column: 1 / 13; } }

/* ---------- beeld ---------- */
.jr-beeld { padding: clamp(16px,2.5vw,34px) 0; }
.jr-beeld figure { margin: 0; grid-column: 4 / 13; grid-row: 1; }
.jr-beeld.vol figure { grid-column: 1 / 13; }
.jr-beeld img { width: 100%; height: auto; display: block; object-fit: cover; }
.jr-beeld figcaption { grid-column: 4 / 13; grid-row: 2; font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; max-width: 56ch; }
.jr-beeld.hoog img { aspect-ratio: 3/2; }
.jr-beeld.laag img { aspect-ratio: 21/9; }
/* Opeenvolgende beeldblokken (portfolio-posts): geen dubbele tussenruimte. */
.jr-beeld + .jr-beeld, .jr-beeld + .jr-duo2, .jr-duo2 + .jr-beeld, .jr-duo2 + .jr-duo2 { padding-top: 0; }

/* beeld + tekst, gesplitst (tekst blijft staan) */
.jr-split { padding-top: clamp(30px,4vw,56px); padding-bottom: clamp(30px,4vw,56px); align-items: start; }
.jr-split figure { grid-column: 1 / 7; grid-row: 1; margin: 0; }
.jr-split figure img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; display: block; }
.jr-split figcaption { font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; }
.jr-split .tekst { grid-column: 8 / 13; grid-row: 1; position: sticky; top: calc(var(--hdr,70px) + 48px); align-self: start; }
.jr-split .tekst > *:first-child { margin-top: 0; }
.jr-split .tekst p { font: 400 16.5px/1.78 var(--f-body); color: #3a3a3a; margin: 0 0 20px; }
.jr-split .tekst p:last-child { margin-bottom: 0; }
.jr-split .tekst h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; font-size: clamp(23px,2.3vw,32px); margin: 0 0 20px; text-wrap: pretty; }
.jr-split .tekst a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-grey-line); }
.jr-split .tekst a:hover { text-decoration-color: var(--c-primary); }
.jr-split.om figure { grid-column: 7 / 13; }
.jr-split.om .tekst { grid-column: 1 / 6; }

/* klein beeld naast tekst (beeld rechts, in de kantlijn-zone) */
.jr-naast { padding: clamp(20px,3vw,40px) 0; align-items: start; }
.jr-naast figure { grid-column: 9 / 13; grid-row: 1; margin: 0; }
.jr-naast figure img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; }
.jr-naast figcaption { font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin-top: 10px; }
.jr-naast .tekst { grid-column: 4 / 9; grid-row: 1; }
.jr-naast .tekst p { font: 400 16.5px/1.78 var(--f-body); color: #3a3a3a; margin: 0 0 20px; }
.jr-naast .tekst p:last-child { margin-bottom: 0; }

/* twee gelijke beelden op de tekstlijn */
.jr-duo2 { padding: clamp(16px,2.5vw,34px) 0; }
.jr-duo2 figure { margin: 0; grid-row: 1; }
.jr-duo2 figure:first-of-type { grid-column: 4 / 9; }
.jr-duo2 figure:last-of-type { grid-column: 9 / 13; }
.jr-duo2 img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; }
.jr-duo2 figcaption { grid-column: 4 / 13; grid-row: 2; font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; max-width: 56ch; }

/* twee beelden, rand tot rand, 7 op 5 -- verschil met jr-duo2: dat paar staat op de tekstlijn
   en is staand, dit loopt van rand tot rand en is liggend. Bovenranden gelijk, hoogtes niet
   (align-items:start), dus de smallere helft is korter -- dat maakt het paar asymmetrisch. */
.jr-paar { padding: clamp(16px,2.5vw,34px) 0; align-items: start; }
.jr-paar figure { margin: 0; grid-row: 1; }
.jr-paar figure:first-of-type { grid-column: 1 / 8; }
.jr-paar figure:last-of-type { grid-column: 8 / 13; }
.jr-paar img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.jr-paar figcaption { grid-column: 4 / 13; grid-row: 2; font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; max-width: 56ch; }

/* breed beeld op de tekstlijn, staand beeld ernaast, bovenranden gelijk */
.jr-paar-hoog { padding: clamp(16px,2.5vw,34px) 0; align-items: start; }
.jr-paar-hoog figure { margin: 0; grid-row: 1; }
.jr-paar-hoog figure:first-of-type { grid-column: 4 / 10; }
.jr-paar-hoog figure:first-of-type img { aspect-ratio: 3/2; }
.jr-paar-hoog figure:last-of-type { grid-column: 10 / 13; }
.jr-paar-hoog figure:last-of-type img { aspect-ratio: 2/3; }
.jr-paar-hoog img { width: 100%; height: auto; object-fit: cover; display: block; }
.jr-paar-hoog figcaption { grid-column: 4 / 13; grid-row: 2; font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; max-width: 56ch; }

/* één staand beeld op de tekstlijn, ruimte ernaast bewust leeg -- geeft een portret lucht */
.jr-smal { padding: clamp(24px,3.5vw,48px) 0; }
.jr-smal figure { margin: 0; grid-column: 4 / 8; grid-row: 1; }
.jr-smal img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; display: block; }
.jr-smal figcaption { grid-column: 4 / 8; grid-row: 2; font: 400 13px/1.6 var(--f-body); color: var(--c-label); margin: 12px 0 0; }

/* ---------- uitspraak (grote pull-tekst, geen kop) ---------- */
.jr-uitspraak { padding: clamp(30px,4vw,58px) 0; }
.jr-uitspraak p { grid-column: 4 / 13; margin: 0; font-family: var(--f-display); font-weight: 400; line-height: 1.08; font-size: clamp(28px,4.8vw,66px); color: var(--c-primary); text-wrap: pretty; letter-spacing: -.005em; }

/* ---------- citaat ---------- */
.jr-citaat { padding: clamp(46px,6vw,90px) 0; position: relative; isolation: isolate; }
.jr-citaat::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(1180px,94vw); height: min(860px,110%); background: radial-gradient(closest-side at 50% 50%, rgba(202,195,180,.42) 0%, rgba(202,195,180,.18) 45%, rgba(202,195,180,0) 78%); }
.jr-citaat blockquote { grid-column: 4 / 13; margin: 0; border-top: 1px solid var(--c-grey-line); border-bottom: 1px solid var(--c-grey-line); padding: clamp(34px,4.2vw,60px) 0; }
.jr-citaat q { quotes: none; font-family: var(--f-display); font-weight: 400; line-height: 1.1; font-size: clamp(30px,5.4vw,74px); color: var(--c-primary); display: block; text-wrap: pretty; letter-spacing: -.005em; }
.jr-citaat cite { display: block; font: 400 13px/1.5 var(--f-body); font-style: normal; color: var(--c-label); margin-top: 20px; letter-spacing: .02em; }

/* ---------- producten uit dit verhaal ---------- */
.jr-shop { padding: clamp(48px,5.5vw,80px) 0 clamp(30px,3.5vw,48px); background: var(--c-grey-bg); margin-top: clamp(44px,5vw,76px); box-shadow: 0 0 0 100vmax var(--c-grey-bg); clip-path: inset(0 -100vmax); }
.jr-shop .kop { grid-column: 4 / 13; grid-row: 1; margin: 0 0 clamp(24px,3vw,38px); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.jr-shop .label { grid-column: 1 / 4; grid-row: 1; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0; }
.jr-shop h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px,2.2vw,29px); margin: 0; }
.jr-shop .alles { font: 500 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); text-decoration: none; border-bottom: 1px solid var(--c-primary); padding-bottom: 6px; }
.jr-shop .alles:hover { opacity: .62; }
.jr-shop .rij { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,2vw,24px); }
.jr-shop a.kaart { text-decoration: none; color: inherit; display: block; }
.jr-shop .ph { display: block; background: var(--c-white); aspect-ratio: 3/2; overflow: hidden; }
.jr-shop .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jr-shop a.kaart:hover .ph img { transform: scale(1.04); }
.jr-shop .mrk { display: block; font: 500 10.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); margin: 16px 0 7px; }
.jr-shop .nm { display: block; font: 400 15px/1.35 var(--f-head); color: var(--c-primary); }
.jr-shop .pr { display: block; font: 400 14px/1.4 var(--f-body); color: var(--c-primary); margin-top: 6px; }
.jr-shop .pr small { color: var(--c-label); font-size: 12px; }

/* ---------- voet (tags/auteur/share) ---------- */
.jr-voet { padding: clamp(30px,3.5vw,50px) 0 clamp(44px,5vw,72px); background: var(--c-grey-bg); box-shadow: 0 0 0 100vmax var(--c-grey-bg); clip-path: inset(0 -100vmax); }
.jr-voet .tags { grid-column: 4 / 13; display: flex; align-items: baseline; gap: 0 4px; flex-wrap: wrap; margin: 0 0 clamp(26px,3vw,40px); padding-bottom: clamp(24px,2.8vw,34px); border-bottom: 1px solid var(--c-grey-line); }
.jr-voet .tags .lbl { font: 500 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); margin-right: 6px; }
.jr-voet .tags a { font: 400 14.5px/1.6 var(--f-body); color: var(--c-primary); text-decoration: none; border-bottom: 1px solid var(--c-grey-line); padding-bottom: 2px; }
.jr-voet .tags a:hover { border-bottom-color: var(--c-primary); }
.jr-voet .tags a:not(:last-child)::after { content: "·"; margin-left: 11px; color: var(--c-label); border: 0; display: inline-block; }
.jr-voet .auteur { grid-column: 4 / 9; display: flex; gap: 16px; align-items: center; }
.jr-voet .auteur .av { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; background: var(--c-secondary); display: grid; place-items: center; font: 500 15px/1 var(--f-head); color: var(--c-primary); }
.jr-voet .auteur b { display: block; font: 500 15px/1.3 var(--f-head); color: var(--c-primary); }
.jr-voet .auteur span { display: block; font: 400 13.5px/1.6 var(--f-body); color: var(--c-label); margin-top: 5px; }
.jr-voet .deel { grid-column: 10 / 13; justify-self: end; display: flex; align-items: center; gap: 12px; }
.jr-voet .deel b { font: 500 11.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-label); }
.jr-voet .deel a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--c-grey-line); color: var(--c-primary); }
.jr-voet .deel a:hover { border-color: var(--c-primary); }

/* ---------- meer verhalen ---------- */
.jr-meer { padding: clamp(56px,6vw,88px) 0 var(--sec); }
.jr-meer .label { grid-column: 1 / 4; grid-row: 1; font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0; }
.jr-meer .kop { grid-column: 4 / 13; grid-row: 1; margin: 0 0 clamp(24px,3vw,38px); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.jr-meer h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px,2.2vw,29px); margin: 0; }
.jr-meer .alles { font: 500 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); text-decoration: none; border-bottom: 1px solid var(--c-primary); padding-bottom: 6px; }
.jr-meer .rij { grid-column: 4 / 13; grid-row: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,2.4vw,30px); }

/* ---------- meeschuivende inhoudsopgave ---------- */
.jr-index-kolom { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 1; }
.jr-index { grid-column: 1 / 4; position: sticky; top: 118px; align-self: start; pointer-events: auto; display: grid; gap: 0; }
.jr-index a { font: 500 11.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); text-decoration: none; padding: 7px 12px 7px 14px; border-left: 1px solid var(--c-grey-line); opacity: 0; transform: translateY(-5px); background: rgba(255,255,255,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .45s ease, transform .45s ease, color .2s ease, border-color .2s ease; }
.jr-index a.aan { opacity: 1; transform: none; }
.jr-index.weg { pointer-events: none; }
.jr-index.weg a { opacity: 0; transform: translateY(-5px); }
.jr-index a:hover { color: var(--c-primary); }
.jr-index a[aria-current="true"] { color: var(--c-primary); border-left-color: var(--c-primary); }
@media (max-width: 1080px) { .jr-index-kolom { display: none; } }
@media (prefers-reduced-motion: reduce) { .jr-index a { transition: none; } }

/* ---------- leesvoortgangsbalk ---------- */
.jr-voortgang { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 250; background: transparent; pointer-events: none; }
.jr-voortgang span { display: block; height: 100%; width: 0; background: var(--c-primary); }

/* ---------- scroll-effecten ----------
   De begintoestand (verborgen / uitgezoomd) staat achter `@media (scripting: enabled)`:
   zonder JS -- of in een oude browser die die media-query niet kent -- rendert de inhoud
   gewoon zichtbaar i.p.v. voor altijd op opacity 0 te blijven hangen. reve-journal.js zet
   .zichtbaar zodra een blok in beeld komt. */
.jr-zoom { overflow: hidden; display: block; }
.jr-onthul.zichtbaar { opacity: 1; transform: none; }
.jr-zoom.zichtbaar img { transform: scale(1); }
@media (scripting: enabled) {
	.jr-onthul { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
	.jr-zoom img { transform: scale(1.05); transition: transform 1.5s cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
	.jr-onthul, .jr-zoom img { transition: none; }
	.jr-onthul { opacity: 1; transform: none; }
	.jr-zoom img { transform: none; }
}
.jr-wissel { display: grid; position: relative; }
.jr-wissel img { grid-area: 1/1; width: 100%; height: auto; display: block; }
.jr-wissel img.hover { opacity: 0; transition: opacity .6s cubic-bezier(.22,.61,.36,1); }
.jr-beeld:hover .jr-wissel img.hover, .jr-beeld:focus-within .jr-wissel img.hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jr-wissel img.hover { transition: none; } }
@media (hover: none) { .jr-wissel img.hover { display: none; } }

/* ---------- smaller dan 1080px: kantlijn valt weg ---------- */
@media (max-width: 1080px) {
	.jr-blok > *, .jr-hero h1, .jr-meta, .jr-lead,
	.jr-beeld figure, .jr-beeld.vol figure, .jr-beeld figcaption,
	.jr-naast figure, .jr-naast .tekst,
	.jr-split figure, .jr-split.om figure, .jr-split .tekst, .jr-split.om .tekst,
	.jr-citaat blockquote,
	.jr-shop .kop, .jr-shop .rij, .jr-shop .label,
	.jr-voet .tags, .jr-voet .auteur, .jr-voet .deel,
	.jr-meer .kop, .jr-meer .rij, .jr-meer .label { grid-column: 1 / 13; }
	.jr-blok .label, .jr-blok .label + h2,
	.jr-beeld figcaption, .jr-beeld figure,
	.jr-naast figure, .jr-naast .tekst,
	.jr-shop .label, .jr-shop .kop,
	.jr-paar figure:first-of-type, .jr-paar figure:last-of-type, .jr-paar figcaption,
	.jr-paar-hoog figure:first-of-type, .jr-paar-hoog figure:last-of-type, .jr-paar-hoog figcaption,
	.jr-smal figure, .jr-smal figcaption,
	.jr-meer .label, .jr-meer .kop, .jr-meer .rij { grid-row: auto; }
	.jr-blok.tweekolom .kolommen { grid-column: 1 / 13; columns: 1; }
	.jr-paar figure:first-of-type, .jr-paar figure:last-of-type,
	.jr-paar-hoog figure:first-of-type, .jr-paar-hoog figure:last-of-type,
	.jr-paar figcaption, .jr-paar-hoog figcaption,
	.jr-smal figure, .jr-smal figcaption { grid-column: 1 / 13; }
	.jr-paar figure:last-of-type, .jr-paar-hoog figure:last-of-type { margin-top: clamp(10px,2vw,18px); }
	.jr-paar img, .jr-paar-hoog figure:first-of-type img, .jr-paar-hoog figure:last-of-type img, .jr-smal img { aspect-ratio: 3/2; }
	.jr-beeld figcaption { margin: 12px 0 0; max-width: none; }
	.jr-naast figure { max-width: 320px; margin-top: 26px; }
	.jr-split figure img { aspect-ratio: 3/2; }
	.jr-split .tekst { margin-top: 26px; position: static; }
	.jr-split.om .tekst { margin-top: 0; margin-bottom: 26px; }
	.jr-hero.split .beeld, .jr-hero.split .kop { grid-column: 1 / 13; grid-row: auto; position: static; }
	.jr-hero.split .kop { margin-top: 26px; }
	.jr-hero.split .beeld img { aspect-ratio: 3/2; }
	.jr-voet .deel { justify-self: start; margin-top: 26px; }
	.jr-shop .label, .jr-meer .label { margin-bottom: 12px; }
	.jr-meer .rij { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.jr-duo2 figure:first-of-type, .jr-duo2 figure:last-of-type, .jr-duo2 figcaption { grid-column: 1 / 13; grid-row: auto; }
	.jr-duo2 figure:last-of-type { margin-top: clamp(10px,2vw,18px); }
	.jr-duo2 img { aspect-ratio: 3/2; }
}
@media (max-width: 640px) {
	.jr-beeld.laag img { aspect-ratio: 4/3; }
	.jr-blok p, .jr-blok li, .jr-naast .tekst p { font-size: 16px; }
	.jr-shop .rij { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
	.jr-meer .rij { grid-template-columns: 1fr; }
}

/* Zelfde valkuil als bij het journal-overzicht (regel ~965): elk artikelblok zet
   "padding: X 0" en wist zo .jr's zijpadding. Die blokregels laden ná regel 965, dus hier
   nogmaals -- als laatste in de JOURNAL-sectie zodat .jr wint zonder !important. Zonder dit
   plakte op mobiel (kantlijn weg, alles op kolom 1/13) de tekst en de beelden tegen de rand.
   .jr-hero.vol heeft géén .jr-klasse en blijft dus wél van rand tot rand. */
.jr { padding-left: 24px; padding-right: 24px; }
/* JOURNAL — einde */


/* ============================================================
   Breadcrumbs (.crumbs) — eigen, was SEOPress. Zie inc/breadcrumbs.php.
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 26px; font: 400 13px/1.5 var(--f-body); color: var(--c-label); }
.crumbs a { color: var(--c-label); text-decoration: none; }
.crumbs a:hover { color: var(--c-primary); }
.crumbs > * + *::before { content: "/"; margin: 0 9px; color: var(--c-grey-line); }
.crumbs span[aria-current] { color: var(--c-primary); }

/* blog single: onder de header, gecentreerd -- past bij de gecentreerde titel/meta/lead van
   het artikel (was in de .jr-grid, ingesprongen tot de tekstlijn: leek zweven). Alleen hier
   gecentreerd; op product/categorie/project blijft de crumb links. */
.wrap.jr-crumbs { padding-top: clamp(18px, 2.5vw, 30px); }
.wrap.jr-crumbs .crumbs { margin: 0; justify-content: center; text-align: center; }

/* store-location single: onder de hero-foto -- padding-top/bottom apart i.p.v. de shorthand,
   die zet ook links/rechts op 0 en overschrijft .wrap's padding: 0 24px (zelfde valkuil als
   .store-detail hierboven). */
.store-crumbs { padding-top: clamp(26px, 3.5vw, 44px); padding-bottom: clamp(16px, 2vw, 24px); }

/* ============================================================
   B2B-outlet (/btb-outlet/, gregoir-exact-sync) -- theme-side fixes.
   Het orderblok `.gro-pad` is `position: sticky` maar zonder hoogtebegrenzing: zodra de
   orderlijst lang wordt zakt "SEND THIS ORDER" onder de vouw en moet je de hele pagina
   afscrollen. Begrens het paneel tot de viewport en laat de regellijst (.gro-lines, heeft
   al overflow:auto) meekrimpen. Alleen desktop -- < 1080px zet de plugin `.gro-pad` al
   `position: static` onder het grid.
   ============================================================ */

/* De outlet-bovenbalk (`.gro-bar`) is weg: het "GREGOIR"-woordmerk dubbelt met de site-header,
   de tag "Floor stock for our trade partners" dubbelt met de hero, en de taalwissel zit al in
   de footer (site-conventie: geen switcher in de kop, element 1.4). Het plugin-script meet dan
   `--gro-barh: 0`, dus de sticky-offsets hieronder vallen terug op alleen de site-header (60px). */
#gr-outlet .gro-bar { display: none; }

/* De content-containers van 1560px naar de site-breedte `--wrap` (1360px, 24px marge) zodat
   álles op /btb-outlet/ én /request-a-quote/ in dezelfde kolom als de header staat.
   `.gro-hero` = eyebrow/titel/cijfers · `.gro-wrap` = filters/lijst/orderpaneel ·
   `.gro-below` = kop + het Gravity Form op de offertepagina (staat buiten `#gr-outlet`). */
#gr-outlet .gro-hero,
#gr-outlet .gro-wrap,
.gro-below {
	max-width: var(--wrap, 1360px);
	padding-left: 24px;
	padding-right: 24px;
}
/* De "Get a Quote"-titel op /request-a-quote/ stond strak tegen de header; geef 'm dezelfde
   bovenruimte als een gewone contentpagina (`section.blk { padding: var(--sec) 0 }`). */
.gro-below--kop { padding-top: var(--sec); }

@media (min-width: 1081px) {
	/* Sticky-offsets onder de site-header (zie hierboven). */
	#gr-outlet .gro-filters { top: calc(60px + var(--gro-barh, 0px)); }
	.gro-wrap .gro-pad { top: calc(60px + var(--gro-barh, 0px) + 22px); }
	/* Bovenrand uitlijnen met de filterchips links (die 16px top-padding in `.gro-filters`
	   hebben; `.gro-pad` zit in dezelfde grid-rij met align-items:start en stond dus 16px hoger).
	   Maakt meteen de verticale ruimte links (lede -> chips) en rechts (notitie -> orderblok) gelijk. */
	.gro-wrap .gro-pad { margin-top: 16px; }
	/* Paneel niet hoger dan de viewport; scrolt intern als de inhoud groter is. */
	.gro-wrap .gro-pad {
		max-height: calc(100vh - 60px - var(--gro-barh, 0px) - 40px);
		max-height: calc(100dvh - 60px - var(--gro-barh, 0px) - 40px);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--gro-rule, #cfcfcf) transparent;
	}
	.admin-bar .gro-wrap .gro-pad { max-height: calc(100dvh - 60px - var(--gro-barh, 0px) - 72px); }
	/* CTA-knop plakt aan de onderrand van het paneel -- altijd zichtbaar, ook met een lange
	   orderlijst. Dekkende donkere achtergrond. `.gro-send` op /btb-outlet/, `.gro-go`
	   ("Continue to your details") op /request-a-quote/. */
	#gr-outlet .gro-wrap .gro-send,
	#gr-outlet .gro-wrap .gro-go { position: sticky; bottom: 0; z-index: 3; }
	/* De regellijst hoeft dan niet zelf te scrollen -- één scrollbalk op het paneel. */
	.gro-wrap .gro-lines { max-height: none; overflow: visible; }
}

/* ---------- mobiel / tablet (< 1081px) ----------
   1. De productrij: op smalle schermen liep de prijs (`white-space: nowrap`, rechts
      uitgelijnd) over de meta-tekst omdat een lange token als "BISCOTTI+CREAMSTONE" niet
      afbrak. Herstapelen naar thumb + één kolom eronder; prijs/voorraad/stepper links.
   2. Het orderpaneel stond ná de volledige lijst (258 rijen) -- onbereikbaar zonder alles
      door te scrollen. Boven de lijst zetten (`order: -1`) + sticky onder de header, met de
      CTA aan de onderrand van het paneel (zelfde patroon als desktop). */
@media (max-width: 700px) {
	#gr-outlet .gro-row {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 2px 14px; align-items: start;
	}
	#gr-outlet .gro-thumb { width: 56px; height: 56px; }
	#gr-outlet .gro-id,
	#gr-outlet .gro-nm,
	#gr-outlet .gro-meta,
	#gr-outlet .gro-actions,
	#gr-outlet .gro-price,
	#gr-outlet .gro-stockcell,
	#gr-outlet .gro-step {
		grid-column: 2; text-align: left; justify-content: flex-start;
	}
	#gr-outlet .gro-meta { overflow-wrap: anywhere; }
	#gr-outlet .gro-price { white-space: normal; margin: 7px 0 2px; }
	#gr-outlet .gro-price s,
	#gr-outlet .gro-price b,
	#gr-outlet .gro-price i { display: inline; }
	#gr-outlet .gro-price s { margin-right: 8px; }
	#gr-outlet .gro-price i { margin-left: 6px; }
	#gr-outlet .gro-step { margin-top: 8px; }
}

/* ---------- mobiel: orderpaneel als volscherm-sheet ----------
   Op mobiel is een altijd-zichtbaar paneel te opdringerig (halve schermhoogte tijdens het
   pikken). In de plaats: een vaste balk met icoon + totaal vlak boven de mobiele onderbalk;
   een tik opent `.gro-pad` als volscherm-sheet, net als de menu-/zoekoverlay.
   `.reve-order-bar` + de sluitknop worden door reve-outlet.js aangemaakt (dus altijd in de DOM);
   op desktop staan ze uit. */
.reve-order-bar,
.reve-order-close { display: none; }

@media (max-width: 1080px) {
	#gr-outlet .gro-wrap { display: block; }
	#gr-outlet .gro-wrap > main { min-width: 0; }

	/* Zoek + categorie/kleur/materiaal (`.gro-filters--bar`) blijft mee bovenaan tijdens het
	   scrollen. De plugin zet 'm < 1081px op `position: static`; hier terug sticky. z-index onder
	   de site-header (120) zodat die 'm afdekt zolang de header in beeld is -- en < 901px
	   verdwijnt de header bij scroll-omlaag, dan neemt de filterbalk de bovenrand over.
	   Negatieve zijmarge = achtergrond + schaduw lopen full-bleed; de velden zelf blijven op
	   24px uitgelijnd met de productrijen. */
	#gr-outlet .gro-filters--bar {
		position: sticky;
		top: 60px;
		z-index: 60;
		background: var(--gro-paper, #fff);
		margin-left: -24px; margin-right: -24px;
		padding: 10px 24px;
		box-shadow: 0 6px 14px rgba(10, 10, 10, .12);
	}

	#gr-outlet .gro-pad {
		position: fixed; inset: 0; z-index: 200;
		margin: 0; max-height: none; border: 0;
		overflow-y: auto;
		background: var(--gro-paper, #fff);
		transform: translateY(100%);
		transition: transform .28s ease;
		visibility: hidden;
	}
	#gr-outlet .gro-pad.reve-sheet-open { transform: translateY(0); visibility: visible; }
	#gr-outlet .gro-lines { max-height: none; overflow: visible; }
	#gr-outlet .gro-send,
	#gr-outlet .gro-go { position: sticky; bottom: 0; z-index: 3; }

	.reve-order-close {
		display: block;
		position: absolute; top: 10px; right: 10px; z-index: 5;
		width: 42px; height: 42px; border: 0; background: none;
		font: 400 30px/1 var(--gro-ui, sans-serif); color: var(--gro-ink, #1c1a17);
		cursor: pointer;
	}
	#gr-outlet .gro-pad__hd { padding-right: 56px; }

	body.reve-sheet-lock { overflow: hidden; }

	.reve-order-bar {
		position: fixed; left: 0; right: 0;
		bottom: calc(57px + env(safe-area-inset-bottom));
		z-index: 125;
		display: flex; align-items: center; gap: 12px;
		width: 100%; padding: 13px 20px;
		border: 0;
		background: var(--gro-ink, #1c1a17); color: var(--gro-paper, #fff);
		cursor: pointer; -webkit-tap-highlight-color: transparent;
	}
	.reve-order-bar svg { flex: none; }
	.reve-order-bar__lbl {
		font: 500 10px/1.3 var(--gro-ui, sans-serif); letter-spacing: .12em;
		text-transform: uppercase; opacity: .75;
	}
	.reve-order-bar__tot {
		margin-left: auto;
		font: 500 15px/1 var(--gro-ui, sans-serif); font-variant-numeric: tabular-nums;
	}
	/* Niks gekozen -> geen balk (verschijnt zodra er een stuk in de selectie zit). */
	.reve-order-bar.is-empty { display: none; }
	body.reve-sheet-lock .reve-order-bar { display: none; }
	/* Ruimte onder de laatste productrij zodat de balk niks afdekt (alleen als de balk er is). */
	html body.reve-has-order { padding-bottom: calc(57px + 48px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
	/* De site-header verdwijnt hier bij scroll-omlaag -> de filterbalk mag naar de absolute top. */
	#gr-outlet .gro-filters--bar { top: 0; }
}