/**
 * Agri-Boss Winkelweergave — de winkellaag.
 *
 * Alles hier is normale CSS zonder !important en is gekeyd op de
 * ab-eigen-* body-classes die de plugin alleen zet als een module
 * actief is. Module uit = deze CSS doet niets.
 *
 * De enige uitzondering op de body-class-regel zijn de componenten
 * die bewust ook los werken (.ab-raster, .ab-sectie, .ab-usp,
 * .ab-categorien): die verschijnen alleen waar een shortcode of
 * hook ze neerzet, dus hun aanwezigheid ís al de opt-in.
 *
 * Structuur:
 *   1. Tokens & basis
 *   2. Elementor-header/footer verbergen
 *   3. Topbalk
 *   4. Hoofdrij (logo, zoek, acties, wagen)
 *   5. Categoriebalk & dropdowns
 *   6. Mobiel
 *   7. Kruimelpad
 *   8. Productkaart & raster
 *   9. Sorteerbalk, teller, paginering
 *  10. Sectiekop
 *  11. Categorietegels
 *  12. USP-band
 *  13. Footer
 */

/* ── 1. TOKENS & BASIS ────────────────────────────────────────── */

:root {
	--ab-accent: #3B732C;        /* merkgroen */
	--ab-accent-donker: #2E5A22;
	--ab-transactie: #00820D;    /* koopknop en voorraad */
	--ab-transactie-donker: #006A0B;
	--ab-donker: #1C2B1A;        /* header/footer-donkergroen */
	--ab-zwart: #19191E;
	--ab-tekst: #505050;
	--ab-grijs: #888888;
	--ab-rand: #E4E4E4;
	--ab-vlak: #F7F7F7;
	--ab-rood: #CD0000;
	--ab-wit: #FFFFFF;

	/* Het wagentje uit de header, als masker voor de koopknop. */
	--ab-wagen-masker: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.7h2.05l2.4 10.05a1.9 1.9 0 0 0 1.85 1.45h8.15a1.9 1.9 0 0 0 1.85-1.4L21 7.3H6.05'/%3E%3Ccircle cx='9.6' cy='19.4' r='1.55'/%3E%3Ccircle cx='17.6' cy='19.4' r='1.55'/%3E%3C/svg%3E");

	--ab-schaduw: 0 2px 5px rgba(0, 0, 0, .10);
	--ab-schaduw-zwaar: 0 8px 24px rgba(0, 0, 0, .14);
	/* Vierkant: het designsysteem van de site kent geen afgeronde
	   hoeken (de unificatielaag dwingt overal radius 0 af). */
	--ab-radius: 0;
	--ab-font-nav: "Khand", "Mulish", sans-serif;

	--ab-container: 1400px;
	--ab-goot: 24px;

	--ab-blok: 72px;
	--ab-knop-h: 48px;
	--ab-input-h: 48px;

	--ab-font: "Mulish", -apple-system, "Segoe UI", sans-serif;
	--ab-font-kop: "Khand", "Mulish", sans-serif;
}

.ab-container {
	max-width: var(--ab-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ab-header, .ab-topbalk, .ab-footer, .ab-usp,
.ab-sectie, .ab-categorien, .ab-kruimelpad, .ab-homepagina {
	font-family: var(--ab-font);
	box-sizing: border-box;
}

.ab-header *, .ab-topbalk *, .ab-footer *, .ab-usp *,
.ab-sectie *, .ab-categorien *, .ab-homepagina * {
	box-sizing: border-box;
}

.ab-icoon {
	display: inline-block;
	vertical-align: middle;
	flex: none;
}

/* ── 2. ELEMENTOR-HEADER/FOOTER VERBERGEN ─────────────────────── */

/*
 * De Elementor-templates blijven bestaan en blijven renderen; ze
 * worden alleen niet getoond zolang de eigen variant actief is.
 * Module uit = body-class weg = Elementor meteen terug.
 *
 * LET OP: geen tag-kwalificatie! Elementor rendert deze templates
 * als <header> en <footer>, niet als <div> — daarom staan hier het
 * attribuut en de locatieklasse, allebei zonder element.
 */
body.ab-eigen-header [data-elementor-type="header"],
body.ab-eigen-header .elementor-location-header {
	display: none;
}

body.ab-eigen-footer [data-elementor-type="footer"],
body.ab-eigen-footer .elementor-location-footer {
	display: none;
}

/*
 * De WPML-taalstrook onderaan (wp_footer) vervalt zodra de eigen
 * footer actief is: de taalkiezer zit dan in de topbalk.
 */
body.ab-eigen-footer .wpml-ls-statics-footer {
	display: none;
}

/*
 * Twee compensaties voor de oude zwevende header, die nu verborgen
 * is: de sticky-marge uit het child theme en de 130px padding-top
 * die de content vrijhield van de absolute Elementor-header.
 */
body.ab-eigen-header .site-main .page-header {
	margin-top: 0;
}

body.ab-eigen-header .content-area {
	padding-top: 0;
}

/* ── 3. TOPBALK ───────────────────────────────────────────────── */

.ab-topbalk {
	background: var(--ab-donker);
	color: rgba(255, 255, 255, .92);
	font-size: 13px;
	line-height: 1.4;
}

.ab-topbalk .ab-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	padding-block: 6px;
}

/*
 * LET OP DE KLEUR — die staat hier met opzet nog eens, terwijl de
 * balk hierboven al een kleur zet.
 *
 * Een GEËRFDE waarde verliest van ELKE regel die het element zelf
 * raakt, hoe zwak die regel ook is. In de Extra CSS van het thema
 * (Weergave -> Aanpassen -> Extra CSS) staat:
 *
 *     .Syndified®-page p { color: black; }
 *
 * Syndified zet die body-class op al zijn pagina's — categorie,
 * product, inhoud. Op precies die pagina's werd deze zin dus zwart op
 * donkergroen: contrastverhouding 1,4 op 1, volstrekt onleesbaar,
 * terwijl de links ernaast (die wél een eigen kleur hebben) gewoon wit
 * bleven. Vandaar hier een expliciete kleur, ook op de twee spans
 * eronder voor als er ooit een even brede span-regel bijkomt.
 */
.ab-topbalk .ab-topbalk__tekst,
.ab-topbalk .ab-topbalk__punt,
.ab-topbalk .ab-topbalk__dealer {
	color: rgba(255, 255, 255, .92);
}

.ab-topbalk .ab-topbalk__tekst {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* De gouden ster voor de Google-score, en het puntje tussen de twee
   vertrouwenssignalen. */
.ab-topbalk__ster {
	color: #FFC53D;
	margin-right: 2px;
}

.ab-topbalk__punt {
	margin: 0 10px;
	opacity: .55;
}

.ab-topbalk__rechts {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

/*
 * De beheerknop in de topbalk.
 *
 * Alleen zichtbaar voor wie het recht agriboss_winkelbeheer heeft — een
 * klant krijgt hem nooit te zien. Voor de winkelbeheerder is dit de
 * enige ingang naar zijn gereedschap, want op de site staat geen
 * WordPress-balk. Hij mag dus opvallen.
 *
 * WIT VLAK MET DONKERE INKT, en niet groen op groen. De eerste versie
 * was een doorzichtig vlak met een dun randje: op de donkergroene balk
 * werd dat een grijzige vlek waar je overheen leest. Een dicht wit vlak
 * is het enige dat op dit donker echt spríngt.
 *
 * Twee klassen diep, en dat is geen sier: de Elementor-kit kleurt elke
 * link met .elementor-kit-7 a — één klasse plus één element, wat een
 * losse .ab-beheerknop verslaat. Gemeten voor het herstellen:
 * rgb(59,115,44) waar wit hoorde te staan.
 */
.ab-topbalk .ab-beheerknop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 26px;
	padding: 0 13px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--ab-donker);
	font-family: var(--ab-font);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.ab-topbalk .ab-beheerknop:hover,
.ab-topbalk .ab-beheerknop:focus {
	background: var(--ab-accent);
	color: #fff;
}

.ab-topbalk .ab-beheerknop .ab-icoon {
	width: 13px;
	height: 13px;
	flex: none;
}

/*
 * Op een smal scherm blijft alleen het sleuteltje over. De topbalk
 * heeft daar amper plaats — de dealerregel verdwijnt daar al — en het
 * icoon alleen is genoeg voor iemand die weet waar hij op klikt.
 */
@media (max-width: 767px) {

	.ab-topbalk .ab-beheerknop {
		padding: 0 8px;
	}

	.ab-topbalk .ab-beheerknop span {
		display: none;
	}

	.ab-topbalk .ab-beheerknop .ab-icoon {
		width: 15px;
		height: 15px;
	}
}

/* De taalkiezer: NL / FR / EN als sobere codes, actieve taal omkaderd. */

.ab-taalwissel {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ab-taalwissel a,
.ab-taalwissel span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 24px;
	padding: 0 5px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--ab-radius);
}

.ab-taalwissel a:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

.ab-taalwissel .ab-taalwissel__actief {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

/* ── 4. HOOFDRIJ ──────────────────────────────────────────────── */

.ab-header {
	position: sticky;
	top: 0;
	z-index: 990;
	box-shadow: var(--ab-schaduw);
}

/* De adminbar-offsets van WordPress zelf: 32px breed scherm, 46px
   t/m 782px, en onder 600px scrolt de balk weg (dan geen offset). */
body.admin-bar .ab-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ab-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .ab-header {
		top: 0;
	}
}

.ab-hoofdrij {
	background: var(--ab-wit);
	border-bottom: 1px solid var(--ab-rand);
}

.ab-hoofdrij .ab-container {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 84px;
	padding-block: 12px;
}

.ab-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}

.ab-logo img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

.ab-logo .ab-logo__tekst {
	font-family: var(--ab-font-kop);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ab-zwart);
	text-transform: uppercase;
}

/* De zoekbalk: het sterkste enkele winkel-signaal dat er is. */

.ab-zoek {
	display: flex;
	flex: 1 1 auto;
	max-width: 620px;
	height: var(--ab-input-h);
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	overflow: hidden;
	background: var(--ab-vlak);
	transition: border-color .15s ease, background .15s ease;
}

.ab-zoek:focus-within {
	border-color: var(--ab-accent);
	background: var(--ab-wit);
}

.ab-zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 16px;
	border: 0;
	outline-offset: -2px;
	background: transparent;
	font-family: var(--ab-font);
	font-size: 15px;
	color: var(--ab-zwart);
}

.ab-zoek input[type="search"]::placeholder {
	color: var(--ab-grijs);
	opacity: 1;
}

.ab-zoek button {
	width: 56px;
	height: 100%;
	border: 0;
	cursor: pointer;
	background: var(--ab-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}

.ab-zoek button:hover {
	background: var(--ab-accent-donker);
}

/* Acties rechts: account en wagen. */

.ab-acties {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	flex: none;
}

.ab-actie {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ab-zwart);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.ab-actie:hover {
	color: var(--ab-accent);
}

.ab-actie .ab-icoon {
	width: 24px;
	height: 24px;
}

.ab-actie__label {
	display: block;
}

/* De wagenknop met teller en bedrag. */

/*
 * Dezelfde hoogte als de accountknop en de btw-schuif ernaast: die
 * stonden op 48 en de wagen op 44, wat de rij scheef trok. Het
 * donkere streepje onderaan geeft de knop gewicht zonder hem zwaarder
 * te maken, en op hover komt hij een pixel omhoog — genoeg om te
 * voelen dat het een knop is en geen vlak.
 */
.ab-acties .ab-wagen {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: var(--ab-knop-h);
	padding: 0 20px;
	border-radius: var(--ab-radius);
	background: var(--ab-accent);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
	color: #fff;
	text-decoration: none;
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.15;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ab-acties .ab-wagen:hover {
	background: var(--ab-accent-donker);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 4px 10px rgba(0, 0, 0, .16);
}

.ab-acties .ab-wagen:active {
	transform: none;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22);
}

.ab-wagen .ab-icoon {
	width: 24px;
	height: 24px;
	flex: none;
}

.ab-wagen__kolom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.ab-wagen__bedrag {
	font-family: var(--ab-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .92);
}

.ab-wagen__bedrag:empty {
	display: none;
}

/*
 * De teller zweefde half buiten de knop, boven de linkerbovenhoek.
 * Hij hoort rechtsboven op het icoon te zitten, met een ring in de
 * knopkleur eromheen: rood direct tegen groen laat de randen trillen.
 * De ring volgt de achtergrond, dus ook bij hover.
 */
.ab-wagen__aantal {
	position: absolute;
	top: 5px;
	left: 30px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ab-rood);
	box-shadow: 0 0 0 2px var(--ab-accent);
	color: #fff;
	font-family: var(--ab-font);
	font-size: 11px;
	font-weight: 800;
	line-height: 18px;
	letter-spacing: 0;
	text-align: center;
	display: none;
	transition: box-shadow .15s ease;
}

.ab-acties .ab-wagen:hover .ab-wagen__aantal {
	box-shadow: 0 0 0 2px var(--ab-accent-donker);
}

.ab-wagen__aantal--gevuld {
	display: block;
	animation: ab-tel 0.25s ease;
}

@keyframes ab-tel {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ── 5. NAVBALK ───────────────────────────────────────────── */

/*
 * Het echte sitemenu, in de stijl van de site zelf: wit, Khand
 * uppercase, groene onderstreep bij hover en op de huidige pagina.
 * De markup is die van wp_nav_menu; de fallback bootst hem na.
 */
.ab-navbalk {
	background: var(--ab-wit);
	border-bottom: 1px solid var(--ab-rand);
}

.ab-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-nav li {
	position: relative;
	margin: 0;
	display: flex;
	align-items: stretch;
}

.ab-nav > li > a {
	display: inline-flex;
	align-items: center;
	padding: 13px 16px;
	font-family: var(--ab-font-nav);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ab-zwart);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color .12s ease, box-shadow .12s ease;
}

.ab-nav > li > a:hover,
.ab-nav > li:focus-within > a,
.ab-nav > li.ab-nav__item--open > a,
.ab-nav > li.current-menu-item > a,
.ab-nav > li.current-menu-ancestor > a {
	color: var(--ab-accent);
	box-shadow: inset 0 -2px 0 var(--ab-accent);
}

/* De uitklap-pijl wordt door weergave.js in elke
   li.menu-item-has-children gezet: tikbaar op mobiel,
   toetsenbord-bereikbaar, met aria-expanded. */
.ab-nav .ab-nav__pijl {
	width: 26px;
	min-width: 0;
	min-height: 0;
	border: 0;
	padding: 0;
	margin: 0 0 0 -6px;
	cursor: pointer;
	/* Expliciet, want de Elementor-kit geeft élke <button> een groen
	   vlak; zonder deze resets wordt de pijl een groene blok. */
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	color: var(--ab-grijs);
	position: relative;
}

.ab-nav .ab-nav__pijl:hover,
.ab-nav .ab-nav__pijl:focus {
	background: transparent;
	background-color: transparent;
}

.ab-nav .ab-nav__pijl::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--ab-grijs);
	border-bottom: 2px solid var(--ab-grijs);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease, border-color .15s ease;
}

.ab-nav li:hover > .ab-nav__pijl::after,
.ab-nav li.ab-nav__item--open > .ab-nav .ab-nav__pijl::after {
	border-color: var(--ab-accent);
}

.ab-nav li.ab-nav__item--open > .ab-nav .ab-nav__pijl::after {
	transform: rotate(225deg) translateY(-2px);
}

/*
 * HET MEGAMENU. Het panel hangt aan de container (li's staan op
 * position:static) en spant de volle containerbreedte. Sub-items
 * staan in kolommen; een sub-item dat zelf kinderen heeft wordt een
 * kolomkop met zijn kinderen als lijst eronder (niveau 3).
 * Zichtbaarheid via opacity/visibility zodat het opengaan zacht
 * animeert; display blijft grid.
 */
.ab-navbalk .ab-container {
	position: relative;
}

.ab-nav > li {
	position: static;
}

/*
 * LET OP de scoping: `> li >`. Alleen het paneel op TOPNIVEAU krijgt
 * zichtbaarheidsregels. De niveau-3-lijsten erbinnen mogen die NOOIT
 * zelf zetten: `visibility: hidden` van een ouder is namelijk door
 * een kind te overschrijven, en dan blijven die lijsten aanklikbaar
 * terwijl het paneel dicht is. Gevolg was dat het menu opende zodra
 * je eronder kwam, en dat panelen elkaars hover afpakten.
 */
.ab-nav > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 991;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 6px 32px;
	align-items: start;
	margin: 0;
	padding: 26px 28px 30px;
	list-style: none;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	border-top: 2px solid var(--ab-accent);
	box-shadow: var(--ab-schaduw-zwaar);
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

/*
 * Een paneel zonder fototegels mag smallere kolommen hebben. Reden:
 * Tuinmachines heeft zes koppen en die pasten met 230px net niet naast
 * elkaar, waardoor de zesde (STIHL Bronnen) onder de lijst van
 * achttien belandde — onderaan links, alleen te vinden door te
 * scrollen. De container geeft 1328px; zes kolommen passen daar met
 * 190px en 24px ertussen.
 *
 * Het merkenpaneel valt er via :has() buiten: daar bepalen de
 * logotegels de maat en die moeten breed blijven. Kent een browser
 * :has() niet, dan geldt gewoon de 230px hierboven — dan staat het
 * zoals het stond, niet stuk.
 */
.ab-nav > li > .sub-menu:not(:has(.ab-mega__tegel-item)) {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	column-gap: 24px;
}

.ab-nav > li:hover > .sub-menu,
.ab-nav > li:focus-within > .sub-menu,
.ab-nav > li.ab-nav__item--open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

.ab-nav .sub-menu li {
	display: block;
	position: static;
}

.ab-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-family: var(--ab-font);
	font-size: 14px;
	color: var(--ab-zwart);
	text-decoration: none;
}

.ab-nav .sub-menu a:hover {
	color: var(--ab-accent);
	background: transparent;
}

/*
 * Elke CATEGORIE op de eerste rij van een megapaneel is een kolomkop,
 * of er nu een lijst onder hangt of niet. Zo ziet STIHL Accessoires —
 * een eindpunt zonder lijst — er hetzelfde uit als de vier
 * categorieën ernaast.
 *
 * Bewust NIET op .menu-item-has-children: WordPress plakt die klasse
 * erop vóór het filter wp_nav_menu_objects draait, dus items waar wij
 * daarna nog kinderen aan hangen krijgen hem nooit. Positie is hier
 * bovendien de eerlijker maatstaf dan "heeft toevallig kinderen".
 *
 * Twee uitzonderingen: de fototegels van het Merken-paneel, die hun
 * eigen vorm hebben, en de extra's (zie hieronder), die geen categorie
 * zijn en dus ook niet zo horen te ogen.
 */
.ab-nav > li > .sub-menu > li:not(.ab-mega__tegel-item):not(.ab-mega__extra) > a {
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding-bottom: 9px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--ab-rand);
}

/*
 * DE EXTRA'S. Een paneel-item dat geen productcategorie is — bij ons
 * STIHL Bronnen, de verzamelpagina met catalogi, veiligheidsbladen en
 * handleidingen — hoort niet tussen de categorieën. Het krijgt een
 * eigen strook over de volle breedte onderaan het paneel: nog steeds
 * te vinden, maar duidelijk van een andere orde.
 *
 * grid-column 1/-1 zorgt voor die volle rij; omdat de rij pas begint
 * onder de langste kolom, komt de strook vanzelf onderaan te staan.
 */
.ab-nav > li > .sub-menu > li.ab-mega__extra {
	grid-column: 1 / -1;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ab-rand);
}

.ab-nav .sub-menu > li.ab-mega__extra > a {
	display: inline-flex;
	gap: 8px;
	padding: 4px 0;
	font-family: var(--ab-font-nav);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ab-tekst);
	text-transform: none;
	border-bottom: 0;
}

.ab-nav .sub-menu > li.ab-mega__extra > a::after {
	content: "→";
	transition: transform .14s ease;
}

.ab-nav .sub-menu > li.ab-mega__extra > a:hover {
	color: var(--ab-accent);
}

.ab-nav .sub-menu > li.ab-mega__extra > a:hover::after {
	transform: translateX(3px);
}

/*
 * …en zijn lijst (niveau 3) staat gewoon open in de kolom.
 * Uitsluitend layout-resets: geen opacity, visibility, transform of
 * pointer-events. Die erft deze lijst van het paneel, en dat moet zo
 * blijven — zie de waarschuwing hierboven.
 */
.ab-nav .sub-menu .sub-menu {
	position: static;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	max-height: none;
	overflow: visible;
}

.ab-mega__label {
	min-width: 0;
}

/*
 * De fototegels: sub-items zonder eigen kinderen maar mét beeld.
 * In het Merken-panel wordt dit een merkenwand; tussen kolommen
 * met groepen voegt een tegel zich gewoon in het raster.
 */
.ab-nav .sub-menu > li.ab-mega__tegel-item > a {
	display: block;
	padding: 0 0 12px;
	text-align: center;
}

/*
 * Transparant vlak met een dunne rand: de logo's staan zo op wit,
 * met een zichtbare scheiding tussen de tegels — hetzelfde ritme als
 * het merkenraster op de homepage.
 */
.ab-mega__tegelbeeld {
	display: block;
	padding: 18px;
	margin-bottom: 10px;
	background: transparent;
	border: 1px solid var(--ab-rand);
	transition: border-color .15s ease;
}

.ab-nav .sub-menu > li.ab-mega__tegel-item > a:hover .ab-mega__tegelbeeld {
	border-color: var(--ab-accent);
}

/*
 * De verhouding staat op de AFBEELDING, niet op het vak. Stond hij op
 * het vak, dan kon geen enkele percentagehoogte (ook max-height niet)
 * oplossen — de hoogte van het vak was zelf onbepaald. Het beeld viel
 * dan terug op zijn eigen vierkante verhouding, werd hoger dan het
 * vak, hing aan de bovenkant en de onderkant werd weggeknipt,
 * waardoor het logo optisch naar onderen zakte.
 *
 * Nu leidt de afbeelding haar hoogte af van haar eigen breedte, en
 * centreert object-fit:contain het logo netjes in dat vlak. Alle
 * tegels in het raster zijn even breed, dus ook even hoog.
 *
 * Geen multiply: de logo's zijn PNG's met een alfakanaal, en multiply
 * zou donkere logo's op de rand vuil maken.
 */
.ab-mega__tegelbeeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: normal;
	transition: transform .18s ease;
}

.ab-nav .sub-menu > li.ab-mega__tegel-item > a:hover .ab-mega__tegelbeeld img {
	transform: scale(1.05);
}

.ab-nav .sub-menu > li.ab-mega__tegel-item > a .ab-mega__label {
	font-family: var(--ab-font-nav);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ── 6. MOBIEL ────────────────────────────────────────────── */

.ab-hoofdrij .ab-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	padding: 10px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	/* Expliciet tegen de groene kit-knopstijl. */
	background: var(--ab-wit);
	background-color: var(--ab-wit);
	box-shadow: none;
	cursor: pointer;
}

.ab-hoofdrij .ab-hamburger:hover,
.ab-hoofdrij .ab-hamburger:focus {
	background: var(--ab-vlak);
	background-color: var(--ab-vlak);
}

.ab-hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--ab-zwart);
	transition: transform .2s ease, opacity .2s ease;
}

.ab-hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ab-hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ab-hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* De lade-onderdelen die weergave.js in het menu zet, bestaan alleen
   op mobiel; op desktop blijven ze onzichtbaar. Mét .ab-nav in de
   selector: de desktopregel `.ab-nav li { display:flex }` (0,1,1)
   versloeg een kale klasse (0,1,0) — en dan stond het lade-logo op
   volle natuurlijke grootte midden op de desktoppagina. */
.ab-nav > li.ab-lade__kop,
.ab-nav > li.ab-lade__extra,
.ab-nav .sub-menu .ab-lade__terugrij {
	display: none;
}

/* Riem én bretellen: zelfs als de kop ooit tóch rendert, blijft het
   logo op koptekengrootte. */
.ab-lade__kop img {
	height: 34px;
	width: auto;
}

@media (max-width: 991px) {

	.ab-topbalk .ab-topbalk__tekst {
		font-size: 12px;
	}

	/* Eén vertrouwenssignaal op een smal scherm: de Google-score. Het
	   verdelerschap staat ook in de voettekst en op de contactpagina. */
	.ab-topbalk__punt,
	.ab-topbalk__dealer {
		display: none;
	}

	.ab-hoofdrij .ab-container {
		flex-wrap: wrap;
		gap: 12px 10px;
		padding-block: 10px;
		min-height: 0;
	}

	/* Iets kleiner logo: samen met het btw-label onder de schuif
	   houdt dat logo, schuif, account, wagen en hamburger op ÉÉN rij
	   tot ver onder de 375px. */
	.ab-logo img {
		height: 38px;
		max-width: 132px;
	}

	.ab-hoofdrij .ab-hamburger {
		display: flex;
		order: 3;
	}

	.ab-acties {
		order: 2;
		gap: 12px;
	}

	.ab-actie__label,
	.ab-wagen__kolom {
		display: none;
	}

	.ab-acties .ab-wagen {
		padding: 10px 12px;
	}

	.ab-wagen__aantal {
		left: auto;
		right: -6px;
	}

	/* De zoekbalk krijgt zijn eigen volle rij: altijd zichtbaar,
	   nooit achter een icoontje verstopt. */
	.ab-zoek {
		order: 4;
		flex-basis: 100%;
		max-width: none;
	}

	/* ── HET MENU ALS LADE (het tuinmachinecenter-model) ──
	   Een paneel dat van links inschuift: het hoofdniveau als rustige
	   lijst met chevrons, en een categorie opent als TWEEDE scherm dat
	   eroverheen schuift, met een terugknop in de kop. Geen accordeon
	   meer. De kop, terugrij en hulplinks zet weergave.js erin. */
	.ab-navbalk .ab-container {
		padding-inline: 0;
	}

	body.ab-menu-open {
		overflow: hidden;
	}

	/*
	 * ONDER de header (990), niet erboven: de lade zit ín de sticky
	 * header en diens stacking-context rendert als één laag op 990 —
	 * een sluier op 998 lag dus over lade én hamburger heen en maakte
	 * álles onaantikbaar. Op 980 dimt hij alleen de pagina-inhoud.
	 */
	body.ab-menu-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(13, 13, 20, .45);
		z-index: 980;
	}

	.ab-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 360px);
		height: 100dvh;
		margin: 0;
		background: var(--ab-wit);
		z-index: 999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-103%);
		transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
	}

	body.ab-menu-open .ab-nav {
		transform: translateX(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.ab-nav,
		.ab-nav > li > .sub-menu {
			transition: none;
		}
	}

	.ab-nav li {
		flex-wrap: nowrap;
		border-bottom: 1px solid var(--ab-rand);
	}

	.ab-nav > li {
		display: flex;
		align-items: center;
		position: static;
	}

	/* Rustige zinletters in plaats van de Khand-kapitalen van de
	   desktopbalk — het referentiemenu leest als een lijst, niet als
	   een kop. */
	.ab-nav > li > a {
		flex: 1 1 auto;
		padding: 13px 20px;
		box-shadow: none;
		font-family: var(--ab-font);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		color: var(--ab-zwart);
	}

	.ab-nav > li.current-menu-item > a,
	.ab-nav > li > a:hover {
		box-shadow: none;
	}

	.ab-nav .ab-nav__pijl {
		width: 52px;
		margin: 0;
	}

	/* De lade-kop: logo links, sluitkruis rechts. Zelfde sterkte als
	   de verbergregel erbuiten. */
	.ab-nav > li.ab-lade__kop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 10px 10px 20px;
	}

	.ab-lade__kop img {
		height: 34px;
		width: auto;
	}

	.ab-lade__sluit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ab-zwart);
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}

	/* Het tweede scherm: dezelfde lade-geometrie, schuift óver het
	   hoofdniveau heen. */
	.ab-nav > li > .sub-menu {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 360px);
		height: 100dvh;
		display: block;
		overscroll-behavior: contain;
		grid-template-columns: none;
		gap: 0;
		margin: 0;
		padding: 0 0 24px;
		box-shadow: none;
		border: 0;
		background: var(--ab-wit);
		z-index: 1001;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		min-width: 0;
		max-height: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-103%);
		transition: transform .25s ease;
	}

	/*
	 * DIT WAS DE BUG MET DE TERUGKNOP.
	 *
	 * Voor het desktop-megamenu bestaat de regel
	 *   .ab-nav > li:hover > .sub-menu,
	 *   .ab-nav > li:focus-within > .sub-menu { transform: none; }
	 * en die staat BUITEN elke mediaquery, dus hij geldt ook op een
	 * telefoon. Zijn specificiteit (0,3,1) is hoger dan de dichte stand
	 * hierboven (0,2,1).
	 *
	 * Tik je op een categorie, dan krijgt de link focus en is het li
	 * :focus-within — het paneel werd dus zichtbaar gehouden door de
	 * FOCUS, niet door de klasse. De terugknop zit ín dat paneel, dus
	 * na een tik daarop bleef de focus binnen hetzelfde li: klasse weg,
	 * paneel bleef staan. Precies het "er gebeurt niks" dat gemeld werd.
	 *
	 * En het verklaart de eerdere ronde: zolang de code de hele lade
	 * sloot, verdween er wél iets zichtbaar — vandaar "hij sluit het
	 * hele menu" in plaats van één niveau terug.
	 *
	 * In de lade stuurt dus ALLEEN de klasse. Deze reset staat bewust
	 * vóór de open-regel: bij gelijke specificiteit wint de laatste, en
	 * dat moet de open-regel zijn.
	 */
	.ab-nav > li:hover > .sub-menu,
	.ab-nav > li:focus-within > .sub-menu {
		transform: translateX(-103%);
	}

	.ab-nav > li.ab-nav__item--open > .sub-menu {
		transform: translateX(0);
	}

	/* De kop van het tweede scherm: terugpijl + naam + sluitkruis. */
	.ab-nav .sub-menu .ab-lade__terugrij {
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--ab-wit);
		border-bottom: 1px solid var(--ab-rand);
		padding: 4px 6px 4px 8px;
	}

	/*
	 * Subtiel: de terugknop is een hulpmiddel, geen kop. De Elementor-
	 * kit stijlt ELKE <button> als een groene pil (gemeten: merkgroen,
	 * 16px/30px padding) en won van een kale klasse — vandaar de volle
	 * scope plus het element in de selector.
	 */
	.ab-navbalk .ab-nav .sub-menu .ab-lade__terugrij button.ab-lade__terug {
		/* manipulation: geen dubbeltik-zoom en dus geen wachttijd van
		   ~300 ms waarin de browser een spookklik nastuurt. */
		touch-action: manipulation;
		display: flex;
		align-items: center;
		gap: 8px;
		width: auto;
		min-height: 0;
		padding: 11px 8px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		font-family: var(--ab-font);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		color: var(--ab-tekst);
		cursor: pointer;
		text-align: left;
	}

	.ab-navbalk .ab-nav .sub-menu .ab-lade__terugrij button.ab-lade__terug svg {
		width: 13px;
		height: 13px;
		flex: none;
		opacity: .7;
	}

	/* Het sluitkruis is óók een <button> en kreeg dezelfde groene pil. */
	.ab-navbalk .ab-nav .ab-lade__kop button.ab-lade__sluit,
	.ab-navbalk .ab-nav .sub-menu .ab-lade__terugrij button.ab-lade__sluit {
		touch-action: manipulation;
		width: 44px;
		height: 44px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--ab-zwart);
		font-size: 26px;
		font-weight: 400;
		line-height: 1;
	}

	.ab-lade__terugrij .ab-lade__sluit {
		margin-left: auto;
	}

	/* De hulplinks (Onderhoud, STIHL Bronnen, Contact) onderaan het
	   hoofdniveau, als rustige tweede groep. */
	.ab-nav > li.ab-lade__extra {
		display: block;
		margin-top: 6px;
		border-top: 6px solid var(--ab-vlak);
	}

	/* > li.klasse > a: de desktopregel .ab-nav > li > a (inline-flex)
	   matcht deze gekloonde links óók en zette ze naast elkaar. */
	.ab-nav > li.ab-lade__extra > a {
		display: block;
		padding: 13px 20px;
		border-bottom: 1px solid var(--ab-rand);
		font-family: var(--ab-font);
		font-size: 14px;
		font-weight: 600;
		color: var(--ab-tekst);
		text-decoration: none;
	}

	.ab-nav > li.ab-lade__extra > a:last-child {
		border-bottom: 0;
	}

	.ab-nav .sub-menu li {
		border: 0;
		border-bottom: 1px solid var(--ab-rand);
	}

	.ab-nav .sub-menu li:last-child {
		border-bottom: 0;
	}

	.ab-nav .sub-menu .sub-menu {
		display: block;
		background: transparent;
		padding: 0 0 6px;
	}

	.ab-nav .sub-menu > li.menu-item-has-children > a {
		border-bottom: 0;
		margin-bottom: 0;
	}

	.ab-nav .sub-menu .sub-menu a {
		padding-left: 50px;
	}

	/* Fototegels worden op mobiel rijen met een kleine thumb, zoals de
	   referentie: foto links, naam ernaast, lijntje eronder. */
	.ab-navbalk .ab-nav .sub-menu > li.ab-mega__tegel-item > a {
		display: flex;
		min-height: 48px;
		align-items: center;
		gap: 12px;
		padding: 4px 18px;
		text-align: left;
	}

	/* Volle selectorlengte: het Merken-paneel heeft eigen, sterkere
	   tegelregels en hield anders zijn desktopformaat (134px-thumbs)
	   in de lade. */
	.ab-navbalk .ab-nav .sub-menu > li.ab-mega__tegel-item > a .ab-mega__tegelbeeld {
		width: 36px;
		height: 36px;
		flex: none;
		display: grid;
		place-items: center;
		padding: 4px;
		margin: 0;
	}

	/* Hier is de hoogte van het vak wél bepaald (40px), dus mag het
	   beeld gewoon vierkant meeschalen. */
	.ab-navbalk .ab-nav .sub-menu > li.ab-mega__tegel-item > a .ab-mega__tegelbeeld img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1;
	}

	.ab-navbalk .ab-nav .sub-menu > li.ab-mega__tegel-item > a .ab-mega__label {
		font-family: var(--ab-font);
		font-size: 14px;
		line-height: 1.35;
		text-transform: none;
		letter-spacing: normal;
	}

	/* (Hier stond de oude accordeonregel "open paneel → display:grid";
	   in de lade is het paneel altijd een blok en regelt transform de
	   zichtbaarheid.) */
	.ab-nav > li.ab-nav__item--open > .sub-menu,
	.ab-nav > li:focus-within > .sub-menu {
		display: block;
	}
}

/* ── 7. KRUIMELPAD ────────────────────────────────────────────── */

/*
 * Padding en niet margin voor de ruimte boven het pad: de body van
 * dit thema is donker, en een top-marge op het eerste kind zakt door
 * margin-collapse uit het witte hoofdvlak — dat wás de zwarte streep
 * tussen header en pagina.
 */
.ab-kruimelpad {
	max-width: var(--ab-container);
	margin: 0 auto;
	padding: 18px 24px 0;
	font-size: 13px;
	color: var(--ab-grijs);
}

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

.ab-kruimelpad a:hover {
	color: var(--ab-accent);
	text-decoration: underline;
}

/* ── 8. PRODUCTKAART & RASTER ─────────────────────────────────── */

/*
 * HET PAGINASKELET van de archieven. Het thema heeft een donkere
 * body; zonder dit skelet staan de archieven op een donker vlak met
 * onleesbare koppen. Dit verving vroeger het WPCode-blok (sectie 3);
 * dat blok is nu van de plugin.
 */
body.ab-eigen-archief.woocommerce-page .content-area {
	padding-top: 0;
}

body.ab-eigen-archief.woocommerce-page .site-main,
body.ab-eigen-archief.archive .site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0 0 64px;
	background: var(--ab-wit);
}

body.ab-eigen-archief.woocommerce-page .site-main > *,
body.ab-eigen-archief.archive .site-main > * {
	max-width: var(--ab-container);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/*
 * De paginakop: geen fotobanner meer maar dezelfde kop als de
 * homepagesecties — wenkbrauw met het groene streepje, Khand-titel.
 * De wenkbrauw komt uit een hook die ná de h1 rendert (er bestaat
 * geen hook ervóór binnen de header); flex + order tilt hem erboven.
 */
body.ab-eigen-archief .woocommerce-products-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 26px;
}

body.ab-eigen-archief .woocommerce-products-header .ab-archiefkop__sub {
	order: -1;
	margin: 0 0 20px;
	padding-left: 10px;
	border-left: 2px solid var(--ab-accent);
	font-family: var(--ab-font-kop);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #111;
}

body.ab-eigen-archief .woocommerce-products-header .woocommerce-products-header__title {
	margin: 0 0 10px;
	font-family: var(--ab-font-kop);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #111;
}

body.ab-eigen-archief .woocommerce-products-header .term-description,
body.ab-eigen-archief .woocommerce-products-header .term-description p {
	max-width: 820px;
	margin: 0;
	font-family: var(--ab-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

@media (max-width: 767px) {

	body.ab-eigen-archief .woocommerce-products-header .woocommerce-products-header__title {
		font-size: 32px;
	}
}

/* ── De merkfilter ── */

body.ab-eigen-archief .ab-merkfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 4px;
}

body.ab-eigen-archief .ab-merkfilter__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	background: var(--ab-wit);
	font-family: var(--ab-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-zwart);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

/* 3 klassen diep, om de kit-hover (#F8F8F8, specificiteit 0,2,1)
   voor te blijven — zie de subcatknoppen. */
body.ab-eigen-archief .ab-merkfilter .ab-merkfilter__chip:hover,
body.ab-eigen-archief .ab-merkfilter .ab-merkfilter__chip:focus {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
	background: var(--ab-wit);
}

body.ab-eigen-archief .ab-merkfilter .ab-merkfilter__chip--actief,
body.ab-eigen-archief .ab-merkfilter .ab-merkfilter__chip--actief:hover,
body.ab-eigen-archief .ab-merkfilter .ab-merkfilter__chip--actief:focus {
	border-color: var(--ab-accent);
	background: var(--ab-accent);
	color: #fff;
}

.ab-merkfilter__telling {
	font-size: 12px;
	font-weight: 700;
	color: var(--ab-grijs);
}

.ab-merkfilter__chip--actief .ab-merkfilter__telling {
	color: rgba(255, 255, 255, .75);
}

/* Losse WooCommerce-knoppen buiten de kaarten (account, meldingen,
   tabellen) in dezelfde stijl als de rest. */
body.ab-eigen-archief .woocommerce a.button,
body.ab-eigen-archief .woocommerce button.button,
body.ab-eigen-archief .woocommerce input.button {
	background-color: var(--ab-transactie);
	color: #fff;
	border: 0;
	border-radius: var(--ab-radius);
	box-shadow: var(--ab-schaduw);
	font-family: var(--ab-font);
	font-weight: 700;
	text-decoration: none;
}

body.ab-eigen-archief .woocommerce a.button:hover,
body.ab-eigen-archief .woocommerce button.button:hover,
body.ab-eigen-archief .woocommerce input.button:hover {
	background-color: var(--ab-transactie-donker);
	color: #fff;
}

/*
 * HET RASTER. Geldt op twee plekken met dezelfde regels:
 *  - de WooCommerce-archieven (body.ab-eigen-archief ul.products)
 *  - de [ab_producten]-shortcode (ul.products.ab-raster)
 *
 * De dubbele selectors zijn nodig om de float-layout van
 * woocommerce-general.css te verslaan zonder !important.
 */

body.woocommerce.ab-eigen-archief ul.products,
body.ab-eigen-archief ul.products,
ul.products.ab-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px var(--ab-goot);
	/* auto: deze regel staat later in het bestand dan de
	   containerregel (.site-main > *) en wint bij gelijke
	   specificiteit — met 0 stond het raster op brede schermen
	   tegen de linkerrand geplakt. */
	margin: 28px auto;
	padding: 0;
	list-style: none;
}

/*
 * woocommerce-layout.css zet een clearfix (::before/::after met
 * display:table) op de lijst. In een grid worden die pseudo-elementen
 * volwaardige grid-items: cel 1 blijft leeg en elke rij verspringt.
 * content:none voorkomt de boxgeneratie volledig.
 */
body.woocommerce.ab-eigen-archief ul.products::before,
body.woocommerce.ab-eigen-archief ul.products::after,
body.ab-eigen-archief ul.products::before,
body.ab-eigen-archief ul.products::after,
ul.products.ab-raster::before,
ul.products.ab-raster::after {
	content: none;
}

@media (max-width: 1199px) {
	body.woocommerce.ab-eigen-archief ul.products,
	body.ab-eigen-archief ul.products,
	ul.products.ab-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body.woocommerce.ab-eigen-archief ul.products,
	body.ab-eigen-archief ul.products,
	ul.products.ab-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 14px;
	}
}

/*
 * Witte kaart met een dunne rand in plaats van een grijs beeldvak op
 * een kale pagina — naar het model van tuinmachinecenter.be. De rand
 * doet nu het werk dat het grijze vlak deed: de kaart afbakenen. De
 * padding zet alle inhoud 14px van de rand; het beeldvak is wit dus
 * de foto lijkt gewoon in de kaart te staan.
 */
body.woocommerce.ab-eigen-archief ul.products li.product,
body.ab-eigen-archief ul.products li.product,
body.woocommerce ul.products.ab-raster li.product,
ul.products.ab-raster li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0 16px 16px;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	font-family: var(--ab-font);
	/*
	 * opacity hoort hier ook in. De onthulregel van de homepage
	 * (.ab-homepagina .ab-anim.ab-anim) zet zijn eigen transitielijst,
	 * maar deze selector is specifieker en won — met als gevolg dat
	 * opacity nergens meer in de lijst stond en de kaarten met een
	 * knal verschenen in plaats van te vervagen. Eén eigenschap
	 * toevoegen is hier het juiste antwoord; nóg een klasse stapelen
	 * zou de hover-lift onderuithalen.
	 */
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease, opacity .35s ease;
}

/* Dezelfde lift als de categorietegels en de merkenwand: de kaart komt
   naar je toe in plaats van dat er iets binnenin beweegt. */
body.ab-eigen-archief ul.products li.product:hover,
ul.products.ab-raster li.product:hover {
	border-color: var(--ab-accent);
	box-shadow: var(--ab-schaduw-zwaar);
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {

	body.ab-eigen-archief ul.products li.product,
	ul.products.ab-raster li.product {
		transition: border-color .15s ease, box-shadow .18s ease;
	}

	body.ab-eigen-archief ul.products li.product:hover,
	ul.products.ab-raster li.product:hover {
		transform: none;
	}
}

/* De hoofdlink wordt de kolom; de knop haakt er onderaan in. */

body.ab-eigen-archief ul.products li.product a.woocommerce-LoopProduct-link,
ul.products.ab-raster li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
}

/* Hele kaart klikbaar; interactieve elementen liggen erboven. */

body.ab-eigen-archief ul.products li.product a.woocommerce-LoopProduct-link::after,
ul.products.ab-raster li.product a.woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.ab-eigen-archief ul.products li.product .button,
body.ab-eigen-archief ul.products li.product .added_to_cart,
ul.products.ab-raster li.product .button,
ul.products.ab-raster li.product .added_to_cart {
	position: relative;
	z-index: 2;
}

/* Het beeldvak: vierkant, licht vlak, contain — de ene regel die
   300×300, 300×200 en 200×300 tegelijk gelijktrekt. */

/*
 * HET BEELDVAK draagt de achtergrondkleur, de AFBEELDING blendt
 * ertegen. Die scheiding is de hele truc: de meeste productfoto's
 * zijn JPEG's met een puur witte achtergrond, en multiply laat wit
 * opgaan in wat eronder ligt. Zou de kleur op de afbeelding zelf
 * staan, dan zit hij mee in de blend en blijft het witte vierkant
 * zichtbaar — precies wat er eerst gebeurde. De STIHL-beelden hebben
 * al een alfakanaal en blijven onaangeroerd.
 */
.ab-kaart__beeld {
	display: block;
	background: var(--ab-wit); /* wit, de kaartrand bakent nu af */
	border-radius: var(--ab-radius);
	padding: 16px 8px;
	overflow: hidden;
}

/*
 * 4:3 en niet vierkant. Bijna elke machinefoto is breed en laag — een
 * kettingzaag met zwaard is ruwweg 3:1. In een vierkant vak liet
 * object-fit: contain dan boven en onder een brede lege band staan, en
 * dat gat vulde de halve kaart. Op 4:3 loopt het beeld vrijwel tot de
 * randen en wint de kaart een kwart van zijn hoogte terug.
 */
body.ab-eigen-archief ul.products li.product .ab-kaart__beeld img,
ul.products.ab-raster li.product .ab-kaart__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	margin: 0;
	mix-blend-mode: multiply;
}

/* Vangnet voor beelden buiten het vak (bv. als een plugin de
   thumbnail-hook overneemt): nooit uit de kaart lopen. En geen eigen
   rand: een themalaag geeft archiefminiaturen 1px #D1D5DB mee,
   waardoor er een binnenkader om elke foto stond — de kaartrand is
   de enige omlijsting. */
body.ab-eigen-archief ul.products li.product img,
ul.products.ab-raster li.product img {
	max-width: 100%;
	height: auto;
	border: 0;
}

/*
 * DEZELFDE BEHANDELING OP DE REST VAN DE WINKEL. Overal waar een
 * productfoto op een licht vlak ligt, laat multiply een witte
 * JPEG-achtergrond erin opgaan. Op wit is multiply een no-op, dus
 * deze regels kunnen geen kwaad waar de foto al transparant is.
 *
 * Bewust NIET toegepast op beelden in donkere vlakken (banners,
 * hero's): daar zou multiply ze juist laten verdwijnen.
 */
body.ab-eigen-archief .woocommerce div.product .woocommerce-product-gallery img,
body.ab-eigen-archief .wc-block-components-product-image img,
body.ab-eigen-archief .woocommerce table.shop_table .product-thumbnail img,
body.ab-eigen-archief .woocommerce-cart .cart_item img,
body.ab-eigen-archief .wc-block-grid__product-image img,
body.ab-eigen-archief .woocommerce-order-details .product-thumbnail img {
	mix-blend-mode: multiply;
	background: transparent;
}

/* Categorielabel, titel, prijs. */

.ab-kaart__categorie {
	margin: 4px 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ab-grijs);
}

/*
 * Twee regels, niet drie. Een productnaam als "MS 300 C-M VW, 40 CM,
 * RS PRO 1,3 MM, .325\", LIGHT 04" is een specificatiereeks: wie de
 * derde regel nodig heeft, klikt toch door naar de productpagina. Met
 * een vaste hoogte van twee regels liggen prijs, voorraad en knop op
 * alle kaarten in de rij op dezelfde lijn — dat rustige raster is het
 * halve verschil.
 */
body.ab-eigen-archief ul.products li.product .woocommerce-loop-product__title,
ul.products.ab-raster li.product .woocommerce-loop-product__title {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--ab-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ab-zwart);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.4em);
	transition: color .15s ease;
}

body.ab-eigen-archief ul.products li.product:hover .woocommerce-loop-product__title,
ul.products.ab-raster li.product:hover .woocommerce-loop-product__title {
	color: var(--ab-accent);
}

body.ab-eigen-archief ul.products li.product .price,
ul.products.ab-raster li.product .price {
	margin: 0 0 6px;
	font-family: var(--ab-font-kop);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--ab-zwart);
	display: block;
}

body.ab-eigen-archief ul.products li.product .price del,
ul.products.ab-raster li.product .price del {
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-grijs);
	margin-right: 6px;
}

body.ab-eigen-archief ul.products li.product .price ins,
ul.products.ab-raster li.product .price ins {
	text-decoration: none;
	color: var(--ab-rood);
}

/* Voorraadmelding. */

/*
 * GEEN STIP MEER VOOR "Op voorraad".
 *
 * Er stond een rond bolletje van 7px voor de tekst. De winkelier vond
 * het rommelig, en hij heeft gelijk: de tekst staat er al in het groen
 * van de koopknop, dus het bolletje zei niets wat de kleur niet al
 * zei. De regel is nu tekst en verder niets.
 */
.ab-voorraad {
	display: inline-flex;
	align-items: center;
	margin-bottom: 14px;
	font-size: 12.5px;
	font-weight: 600;
}

.ab-voorraad--ja {
	color: var(--ab-transactie);
}

.ab-voorraad--nee {
	color: var(--ab-grijs);
}

/* De koopknop: onderaan uitgelijnd, vol groen, geen verrassingen. */

/*
 * De knop hangt onderaan aan een scheidingslijn: die lijn maakt van de
 * prijs-plus-voorraad een blok en van de knop een aparte handeling, in
 * plaats van vijf regels tekst die toevallig eindigen in iets groens.
 * De slagschaduw eronder is weg — een vlakke knop op een vlakke kaart
 * oogt rustiger, en de kaart zelf draagt de schaduw al bij hover.
 */
body.ab-eigen-archief ul.products li.product .button,
ul.products.ab-raster li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	min-height: 46px;
	padding: 12px 14px;
	border: 0;
	border-top: 1px solid transparent;
	border-radius: var(--ab-radius);
	background: var(--ab-transactie);
	color: #fff;
	font-family: var(--ab-font);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}

/*
 * Het wagentje voor het label. Als masker en niet als achtergrondbeeld,
 * zodat het de tekstkleur volgt en dus ook wit blijft bij hover.
 *
 * Alleen op .add_to_cart_button: WooCommerce zet diezelfde .button op
 * "Selecteer opties" en "Lees meer", en een winkelwagentje voor die
 * labels belooft iets wat de knop niet doet.
 */
body.ab-eigen-archief ul.products li.product .button.add_to_cart_button::before,
ul.products.ab-raster li.product .button.add_to_cart_button::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--ab-wagen-masker) center / contain no-repeat;
	mask: var(--ab-wagen-masker) center / contain no-repeat;
}

body.ab-eigen-archief ul.products li.product .button:hover,
ul.products.ab-raster li.product .button:hover {
	background: var(--ab-transactie-donker);
	color: #fff;
}

/* De scheidingslijn boven het knopblok. */
body.ab-eigen-archief ul.products li.product .ab-voorraad,
ul.products.ab-raster li.product .ab-voorraad {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ab-rand);
	width: 100%;
}

body.ab-eigen-archief ul.products li.product .added_to_cart,
ul.products.ab-raster li.product .added_to_cart {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ab-accent);
	text-align: center;
}

/* Actievlag. */

body.ab-eigen-archief ul.products li.product .onsale,
ul.products.ab-raster li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto; /* woocommerce.css zet right:0; zonder deze reset rekt de badge uit tot een balk */
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--ab-radius);
	background: var(--ab-rood);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ── 9. SORTEERBALK, TELLER, PAGINERING ───────────────────────── */

/*
 * Teller en sorteerdropdown op ÉÉN rij: teller links, sortering
 * rechts. Het zijn broertjes zonder gedeelde wrapper, dus de
 * sortering wordt met een negatieve marge naast de teller getild —
 * kan veilig, want de teller is altijd één regel hoog.
 */
/* float:none — woocommerce-layout.css float bovenop deze twee, en een
   float negeert auto-marges: op schermen breder dan de container
   schoten teller en sortering naar de schermranden. */
body.ab-eigen-archief .woocommerce-result-count {
	float: none;
	margin: 18px auto 0;
	padding-top: 16px;
	border-top: 1px solid var(--ab-rand);
	color: var(--ab-tekst);
	font-size: 14px;
	line-height: 44px;
	padding-bottom: 0;
}

body.ab-eigen-archief .woocommerce-ordering {
	float: none;
	display: flex;
	justify-content: flex-end;
	margin: -44px auto 16px;
}

body.ab-eigen-archief .woocommerce-ordering select {
	width: auto;
	height: 44px;
	padding: 0 36px 0 12px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	background-color: var(--ab-wit);
	font-family: var(--ab-font);
	font-size: 14px;
	color: var(--ab-zwart);
	cursor: pointer;
}

@media (max-width: 767px) {

	/* Onder elkaar: op een smal scherm past de dropdown niet naast
	   de teller, en een overlap leest als kapot. */
	body.ab-eigen-archief .woocommerce-result-count {
		line-height: 1.5;
	}

	body.ab-eigen-archief .woocommerce-ordering {
		justify-content: flex-start;
		margin: 10px auto 16px;
	}

	body.ab-eigen-archief .woocommerce-ordering select {
		width: 100%;
	}
}

body.ab-eigen-archief .woocommerce-pagination {
	margin: 24px 0 48px;
}

body.ab-eigen-archief .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 6px;
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ab-eigen-archief .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	overflow: visible;
}

body.ab-eigen-archief .woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	background: var(--ab-wit);
	color: var(--ab-zwart);
	font-family: var(--ab-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body.ab-eigen-archief .woocommerce-pagination .page-numbers li .page-numbers:hover {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
	background: var(--ab-wit);
}

body.ab-eigen-archief .woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--ab-accent);
	border-color: var(--ab-accent);
	color: #fff;
}

/* ── 10. SECTIEKOP ────────────────────────────────────────────── */

.ab-sectie {
	padding-block: calc(var(--ab-blok) / 2);
}

/*
 * De automatische homepage-blokken. De witte wrapper is verplicht:
 * de body van dit thema is donker, en losse secties zonder eigen
 * achtergrond zouden donkere tekst op een donker vlak zetten.
 * De middelste sectie krijgt het lichte vlak voor ritme.
 */
.ab-homeblokken {
	background: var(--ab-wit);
}

.ab-homeblokken .ab-sectie {
	padding-block: var(--ab-blok) calc(var(--ab-blok) / 2);
}

.ab-homeblokken .ab-sectie + .ab-sectie {
	padding-block: calc(var(--ab-blok) / 2);
}

.ab-homeblokken .ab-sectie--producten:nth-of-type(2) {
	background: var(--ab-vlak);
	padding-block: calc(var(--ab-blok) / 2);
	margin-top: calc(var(--ab-blok) / 2);
}

.ab-homeblokken .ab-sectie:last-child {
	padding-bottom: var(--ab-blok);
}

.ab-sectiekop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 6px;
}

/*
 * EXACT DE TYPOGRAFIE VAN DE ELEMENTOR-PAGINA'S.
 *
 * Afgelezen uit de opgeslagen Elementor-instellingen van
 * /onderhoud-herstellingen/, niet benaderd:
 *
 *   wenkbrauw : Khand 16px, gewicht 500, letterafstand 2px,
 *               regelhoogte 1.5, hoofdletters, #111111, met een
 *               linkerrand van 2px in het accentgroen en 10px ruimte
 *               ertussen. Op alle schermformaten 16px.
 *   titel     : Khand, gewicht 500, regelhoogte 1.1, letterafstand 0,
 *               hoofdletters, #111111.
 *
 * DE MAAT komt óók uit die kit, maar een trede lager: H3 (34px, 30
 * tablet, 28 mobiel) in plaats van H2 (54px). Een sectiekop staat hier
 * vlak boven een raster van kaarten, niet in een sectie met een halve
 * schermhoogte lucht eromheen zoals op de Elementor-pagina's — op 54px
 * duwde de kop de hele bladspiegel uit balans. De letter, het gewicht,
 * de kapitalen en de wenkbrauw zijn identiek; alleen de trede
 * verschilt, en die staat net zo goed in de kit.
 */
.ab-sectiekop .ab-sectiekop__subtitel {
	display: block;
	/* 20px onder de wenkbrauw: die draagt zelf regelhoogte 1.5, maar
	   dat vult de ruimte optisch niet — de twee regels plakten aan
	   elkaar en lazen als één blok in plaats van als label en kop. */
	margin: 0 0 20px;
	padding-left: 10px;
	border-left: 2px solid var(--ab-accent);
	font-family: var(--ab-font-kop);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #111;
}

.ab-sectiekop .ab-sectiekop__titel {
	margin: 0;
	font-family: var(--ab-font-kop);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #111;
}

@media (max-width: 1024px) {
	.ab-sectiekop .ab-sectiekop__titel {
		font-size: 36px;
	}
}

.ab-sectiekop__knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	color: var(--ab-accent);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Twee klassen plus :hover: de Elementor-kit zet a:hover met (0,2,1)
 * op bijna-wit, en een kale .ab-sectiekop__knop:hover (0,2,0) verloor
 * daar ONvoorwaardelijk van — "Bekijk alle producten" werd op het
 * witte vlak onleesbaar bij het aanwijzen. Zelfde bug, zelfde remedie
 * als bij de subcategoriekaart-knop.
 */
.ab-sectiekop .ab-sectiekop__knop:hover {
	color: var(--ab-accent-donker);
	text-decoration: underline;
}

.ab-sectiekop__knop .ab-icoon {
	width: 18px;
	height: 18px;
	transition: transform .15s ease;
}

.ab-sectiekop__knop:hover .ab-icoon {
	transform: translateX(3px);
}

@media (max-width: 767px) {
	.ab-sectiekop {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.ab-sectiekop .ab-sectiekop__titel {
		font-size: 30px;
	}
}

/* ── 11. CATEGORIETEGELS ──────────────────────────────────────── */

.ab-categorien {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ab-goot);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1199px) {
	.ab-categorien {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ab-categorien {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

.ab-categorien__item {
	margin: 0;
}

.ab-categorien__item a {
	display: block;
	text-decoration: none;
}

.ab-categorien__beeld {
	display: block;
	background: var(--ab-vlak);
	border-radius: var(--ab-radius);
	padding: 16px;
}

/* Zelfde constructie als bij de megamenu-tegels: verhouding op de
   afbeelding, niet op het vak. */
.ab-categorien__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .18s ease;
}

.ab-categorien__item:hover .ab-categorien__beeld img {
	transform: scale(1.05);
}

.ab-categorien__naam {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ab-zwart);
}

.ab-categorien__item:hover .ab-categorien__naam {
	color: var(--ab-accent);
}

.ab-categorien__aantal {
	font-weight: 600;
	font-size: 13px;
	color: var(--ab-grijs);
}

/* ── 11b. SUBCATEGORIE-KAARTEN ───────────────────────────── */

/*
 * Beeld links op wit, inhoud rechts op het lichte vlak, knop
 * rechtsonder met een rond pijlknopje. De kaart past zich aan wat er
 * is: heeft een subcategorie zelf kinderen, dan staan die als lijst
 * in de kaart; anders komt er het aantal producten.
 */
.ab-subcats-blok {
	margin: 0;
}

/*
 * Het blok wordt door de JavaScript onder de banner geschoven en
 * staat tot dan verborgen — zo zie je het niet eerst onderaan de
 * pagina staan en dan wegspringen. Het vangnet in weergave.js toont
 * het alsnog als de banner uitblijft.
 */
/*
 * Het blok is ALTIJD zichtbaar. Eerst stond het verborgen tot de
 * JavaScript het onder de banner had gezet, maar dan verdwijnt het
 * spoorloos zodra daar iets misgaat — en dat gebeurde ook: de
 * verbergregel had twee selectors en de toonregel maar één, dus de
 * verbergregel won en het blok bleef weg. Zichtbaar laten staan en
 * daarna verplaatsen is het veiliger: mislukt het verplaatsen, dan
 * staat het onderaan de pagina in plaats van nergens.
 */
.ab-hubkaarten {
	background: var(--ab-wit);
	padding-block: 48px 40px;
}

.ab-subcats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ab-goot);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-subcats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-subcats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ab-subcats-blok .ab-sectiekop {
	margin-bottom: 24px;
}

.ab-subcat {
	display: flex;
	align-items: stretch;
	margin: 0;
	background: var(--ab-vlak);
	min-height: 190px;
	transition: box-shadow .15s ease;
}

.ab-subcat:hover {
	box-shadow: var(--ab-schaduw);
}

/*
 * Beeld op wit met een dunne rand — dezelfde behandeling als de
 * merktegels in het megamenu. Onze productfoto's zijn uitgeknipte
 * machines, geen sfeerbeelden, dus ze staan het best op een schoon
 * vlak. Maar dat vlak is wit en de pagina ook, waardoor de foto naast
 * de kaart leek te zweven in plaats van erin te zitten. De rand geeft
 * het vlak een grens en maakt er weer één kaart van.
 */
.ab-subcat__beeld {
	flex: 0 0 38%;
	display: grid;
	place-items: center;
	padding: 16px;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	transition: border-color .15s ease;
}

.ab-subcat:hover .ab-subcat__beeld {
	border-color: var(--ab-accent);
}

/*
 * Geen vergroting op hover. Die trok de aandacht naar de foto terwijl
 * de kaart als geheel de knop is, en bij uitgeknipte machines op een
 * krap vlak ging het beeld tegen de rand duwen.
 */
.ab-subcat__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ab-subcat__inhoud {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 22px 18px;
	min-width: 0;
}

.ab-subcat .ab-subcat__titel {
	margin: 0;
	font-family: var(--ab-font-kop);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.ab-subcat__titel a {
	color: var(--ab-zwart);
	text-decoration: none;
}

/* Drie klassen, om dezelfde reden als bij de knop hieronder. */
.ab-subcats .ab-subcat:hover .ab-subcat__titel a,
.ab-subcats .ab-subcat .ab-subcat__titel a:hover {
	color: var(--ab-accent);
}

.ab-subcat__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ab-subcat__lijst li {
	position: relative;
	margin: 0;
	padding-left: 14px;
	font-size: 13px;
	line-height: 1.45;
}

.ab-subcat__lijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ab-accent);
}

.ab-subcat__lijst a {
	color: var(--ab-tekst);
	text-decoration: none;
}

.ab-subcats .ab-subcat .ab-subcat__lijst a:hover {
	color: var(--ab-accent);
	text-decoration: underline;
}

.ab-subcat__meer-lijst {
	color: var(--ab-grijs);
	font-style: italic;
}

.ab-subcat__meer-lijst::before {
	display: none;
}

.ab-subcat__aantal {
	margin: 0;
	font-family: var(--ab-font);
	font-size: 13px;
	color: var(--ab-grijs);
}

/* Knop rechtsonder, met het pijltje in een rond vlak — zoals in de
   referentie. */
.ab-subcat__knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	align-self: flex-end;
	padding-top: 10px;
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ab-accent);
	text-decoration: none;
}

.ab-subcat__knop .ab-icoon {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 50%;
	background: var(--ab-accent);
	color: #fff;
	transition: background .15s ease, transform .15s ease;
}

/*
 * LET OP de drie klassen. De Elementor-kit zet
 * `.elementor-kit-7 a:hover { color: #F8F8F8 }` — bijna wit — en die
 * selector (0,2,1) verslaat een gewone `.ab-subcat__knop:hover`
 * (0,1,1). Op het vlak van #F7F7F7 werd "Bekijk alles" daardoor bij
 * het aanwijzen onzichtbaar: de tekst verdween, alleen het pijltje
 * bleef staan. Hier winnen we op specificiteit in plaats van op
 * laadvolgorde, want dat laatste is te broos.
 */
.ab-subcats .ab-subcat .ab-subcat__knop:hover,
.ab-subcats .ab-subcat:hover .ab-subcat__knop {
	color: var(--ab-accent-donker);
}

.ab-subcat:hover .ab-subcat__knop .ab-icoon {
	background: var(--ab-accent-donker);
	transform: translateX(3px);
}

@media (max-width: 1199px) {
	.ab-subcats,
	.ab-subcats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ab-subcats,
	.ab-subcats--2,
	.ab-subcats--4 {
		grid-template-columns: 1fr;
	}

	.ab-subcat {
		min-height: 0;
	}

	.ab-subcat__beeld {
		flex-basis: 34%;
		padding: 12px;
	}

	.ab-subcat__inhoud {
		padding: 16px 16px 14px;
	}

	.ab-subcat .ab-subcat__titel {
		font-size: 19px;
	}

	.ab-hubkaarten {
		padding-block: 32px 28px;
	}
}

/* ── 12. USP-BAND ─────────────────────────────────────────────── */

.ab-usp {
	background: var(--ab-vlak);
	border-block: 1px solid var(--ab-rand);
	padding-block: 26px;
}

.ab-usp__lijst {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.ab-usp__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.ab-usp__lijst {
		grid-template-columns: 1fr;
	}
}

.ab-usp__item {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0;
}

.ab-usp__icoon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: var(--ab-accent);
	color: #fff;
}

.ab-usp__icoon .ab-icoon {
	width: 22px;
	height: 22px;
}

.ab-usp__inhoud {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ab-tekst);
}

.ab-usp__inhoud strong {
	font-size: 14px;
	color: var(--ab-zwart);
}

/* ── 13. FOOTER ───────────────────────────────────────────────── */

.ab-footer {
	background: var(--ab-donker);
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	line-height: 1.6;
	padding-block: 56px 24px;
	margin-top: 0;
}

.ab-footer a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}

/* Drie klassen: een kale .ab-footer a:hover (0,2,1) stond exact
   gelijk aan de kit-hover en won alleen op laadvolgorde. */
body.ab-eigen-footer .ab-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.ab-footer__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	padding-bottom: 40px;
}

@media (max-width: 991px) {
	.ab-footer__kolommen {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 599px) {
	.ab-footer__kolommen {
		grid-template-columns: 1fr;
	}
}

.ab-footer .ab-footer__merk {
	margin: 0 0 2px;
	font-family: var(--ab-font-kop);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
}

.ab-footer .ab-footer__slogan {
	margin: 0 0 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

.ab-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-style: normal;
}

.ab-footer .ab-footer__kop {
	margin: 0 0 14px;
	font-family: var(--ab-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}

.ab-footer__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ab-footer__lijst li {
	margin: 0;
}

.ab-footer__social {
	margin: 14px 0 0;
	display: flex;
	gap: 14px;
}

.ab-footer__social a {
	font-weight: 700;
}

.ab-footer__onderbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px;
}

.ab-footer .ab-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, .55);
}

.ab-footer__juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-footer__juridisch li {
	margin: 0;
}

.ab-betaal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-betaal li {
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--ab-radius);
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .06);
}

/* ── 14. DE WEBSHOP-HOMEPAGE ──────────────────────────────────── */

/*
 * De volledige vervanging van de brochure (module_homepagina).
 * De witte wrapper om alles heen, om dezelfde reden als bij de
 * homeblokken: de body van dit thema is donker.
 *
 * LET OP, overal in dit blok: de Elementor-kit zet
 * `.elementor-kit-7 a:hover { color: #F8F8F8 }` (0,2,1). Elke link
 * waarvan de hoverkleur ertoe doet, staat hier dus op ten minste twee
 * klassen plus :hover, en de hero-knoppen zetten hun kleur expliciet
 * op de hover in plaats van hem te erven. Dat is geen overdaad; op de
 * subcategoriekaarten werd "Bekijk alles" er wit van, op een wit vlak.
 */
.ab-homepagina {
	background: var(--ab-wit);
	padding-bottom: var(--ab-blok);
}

/*
 * HET RITME. Eén maat voor de ruimte tussen alle secties: 64px
 * boven elke sectie, niets eronder — zo telt de afstand nooit dubbel
 * op en ademt de pagina overal even veel. De atelierband regelt zijn
 * eigen ruimte met margins, want hij is een volle-breedte-blok.
 */
.ab-homepagina .ab-sectie {
	padding-block: 64px 0;
}

.ab-homepagina .ab-sectiekop {
	margin-bottom: 28px;
}

/*
 * BEWEGING. Twee soorten, allebei klein: de hero vaart één keer in
 * bij het laden (puur CSS), en verderop varen kaarten in zodra ze in
 * beeld scrollen (klasse ab-anim gezet door weergave.js — zonder
 * JavaScript bestaat de klasse niet en staat alles er gewoon).
 * Kaart-hovers krijgen een lichte lift. Wie beweging heeft uitgezet,
 * krijgt niets van dit alles.
 */
@keyframes ab-invaren {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.ab-homepagina .ab-hero__inhoud {
	animation: ab-invaren .55s ease .05s backwards;
}

.ab-homepagina .ab-hero__tegel:nth-child(1) {
	animation: ab-invaren .55s ease .18s backwards;
}

.ab-homepagina .ab-hero__tegel:nth-child(2) {
	animation: ab-invaren .55s ease .3s backwards;
}

/*
 * De klasse telt dubbel voor de specificiteit: de productkaart-regel
 * (ul.products.ab-raster li.product) zet zelf een transition met
 * (0,2,2), en zou anders de invaar-overgang overschrijven — de kaart
 * verscheen dan met een knal in plaats van een golfje.
 */
.ab-homepagina .ab-anim.ab-anim {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .55s ease, transform .55s ease, border-color .15s ease, box-shadow .15s ease;
}

.ab-homepagina .ab-anim.ab-anim.ab-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ab-homepagina .ab-hero__inhoud,
	.ab-homepagina .ab-hero__tegel {
		animation: none;
	}

	.ab-homepagina .ab-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── De hero ── */

.ab-homepagina .ab-hero {
	padding-block: var(--ab-goot) 0;
}

.ab-homepagina .ab-hero__raster {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--ab-goot);
}

/*
 * Het campagnebeeld is 1920×600 met het onderwerp rechts; de tekst
 * staat links op het donkere deel. De overlay verloopt van donker
 * naar niets zodat de tekst leesbaar blijft, wat het beeld ook doet —
 * en ontbreekt het beeld, dan is het paneel gewoon donkergroen.
 */
.ab-homepagina .ab-hero__paneel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 460px;
	padding: 44px 48px;
	background-color: var(--ab-donker);
	background-size: cover;
	background-position: center right;
}

.ab-homepagina .ab-hero__paneel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 30, 18, .88) 0%, rgba(20, 30, 18, .55) 55%, rgba(20, 30, 18, .12) 100%);
}

.ab-homepagina .ab-hero__inhoud {
	position: relative;
	max-width: 560px;
}

.ab-homepagina .ab-hero__sub {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #A8D29A;
}

.ab-homepagina .ab-hero__titel {
	margin: 0 0 14px;
	font-family: var(--ab-font-kop);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
	color: #fff;
}

.ab-homepagina .ab-hero__tekst {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.ab-homepagina .ab-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.ab-homepagina .ab-hero__knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--ab-knop-h);
	padding: 0 26px;
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--ab-transactie);
	transition: background .15s ease;
}

.ab-homepagina .ab-hero__knop:hover,
.ab-homepagina .ab-hero__knop:focus {
	color: #fff;
	background: var(--ab-transactie-donker);
}

.ab-homepagina .ab-hero__knop .ab-icoon {
	width: 18px;
	height: 18px;
}

.ab-homepagina .ab-hero__knop--tweede {
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}

.ab-homepagina .ab-hero__knop--tweede:hover,
.ab-homepagina .ab-hero__knop--tweede:focus {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

.ab-homepagina .ab-hero__vinkjes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-homepagina .ab-hero__vinkjes li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
}

.ab-homepagina .ab-hero__vinkjes .ab-icoon {
	width: 17px;
	height: 17px;
	color: #A8D29A;
}

/* De twee tegels rechts van de hero. */
.ab-homepagina .ab-hero__zij {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--ab-goot);
}

.ab-homepagina .ab-hero__tegel {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 22px 24px;
	text-decoration: none;
	background-color: var(--ab-donker);
	background-size: cover;
	background-position: center;
}

.ab-homepagina .ab-hero__tegel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 30, 18, .82) 0%, rgba(20, 30, 18, .12) 60%);
	transition: background .15s ease;
}

.ab-homepagina .ab-hero__tegel-inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ab-homepagina .ab-hero__tegel strong {
	font-family: var(--ab-font-kop);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

.ab-homepagina .ab-hero__tegel-knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: #A8D29A;
}

.ab-homepagina .ab-hero__tegel-knop .ab-icoon {
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}

.ab-homepagina .ab-hero__tegel:hover .ab-hero__tegel-knop .ab-icoon {
	transform: translateX(3px);
}

.ab-homepagina .ab-hero__tegel:hover strong {
	color: #fff; /* expliciet, tegen de kit-hover */
}

/* ── De categorietegels ── */

/*
 * Zes tegels, twee rijen van drie: foto groot op wit, naam met pijl
 * eronder, de hele tegel is de link. Het rustige tegelpatroon van
 * tuinmachinecenter.be — geen lijstjes, geen grijs vlak.
 */
.ab-homepagina .ab-hcats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ab-goot);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-homepagina .ab-hcat {
	margin: 0;
}

.ab-homepagina .ab-hcat__kaart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	height: 100%;
	padding: 30px 22px 24px;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .18s ease;
}

.ab-homepagina .ab-hcat__kaart:hover {
	border-color: var(--ab-accent);
	box-shadow: var(--ab-schaduw);
	transform: translateY(-4px);
}

/*
 * De foto op ruwweg zestig procent van de tegelbreedte: groot genoeg
 * om de machine te herkennen, met lucht eromheen zoals in de
 * referentie. De verhouding staat op de afbeelding (huisregel); het
 * lege vak houdt dezelfde verhouding zodat een categorie zonder foto
 * de rij niet laat verspringen.
 */
.ab-homepagina .ab-hcat__beeld {
	display: block;
	width: min(62%, 240px);
}

.ab-homepagina .ab-hcat__beeld:empty {
	aspect-ratio: 4 / 3;
}

.ab-homepagina .ab-hcat__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ab-homepagina .ab-hcat__naam {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	font-family: var(--ab-font-kop);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ab-zwart);
	transition: color .15s ease;
}

.ab-homepagina .ab-hcat__naam .ab-icoon {
	width: 19px;
	height: 19px;
	color: var(--ab-accent);
	transition: transform .15s ease;
}

/* Drie klassen plus :hover — de kit-hover (0,2,1) wint anders. */
.ab-homepagina .ab-hcat__kaart:hover .ab-hcat__naam {
	color: var(--ab-accent);
}

.ab-homepagina .ab-hcat__kaart:hover .ab-hcat__naam .ab-icoon {
	transform: translateX(3px);
}

/* ── De merkenwand ── */

.ab-homepagina .ab-merken {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ab-goot);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-homepagina .ab-merken li {
	margin: 0;
}

/*
 * Eén kaart per merk, met een lichte lift op hover. Alleen het logo:
 * de merknaam eronder herhaalde wat het logo zelf al zegt. Zonder die
 * regel staat het logo gecentreerd, dus gelijke ruimte boven en onder.
 */
.ab-homepagina .ab-merk {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 24px 20px;
	text-align: center;
	text-decoration: none;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	transition: border-color .15s ease, box-shadow .15s ease, transform .18s ease;
}

.ab-homepagina .ab-merk:hover {
	border-color: var(--ab-accent);
	box-shadow: var(--ab-schaduw);
	transform: translateY(-4px);
}

.ab-homepagina .ab-merk__vak {
	display: block;
	width: 100%;
}

.ab-homepagina .ab-merk__vak img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .2s ease, opacity .2s ease;
}

.ab-homepagina .ab-merk:hover .ab-merk__vak img {
	filter: none;
	opacity: 1;
}

/* ── De atelierband ── */

/*
 * Donkergroene band van schermrand tot schermrand: de foto is de
 * volledige linkerhelft, de tekst zit in de rechterhelft met een
 * eigen leesbreedte. Geen container — in een container zweefde de
 * foto in een donker kader met dode ruimte ernaast.
 */
.ab-homepagina .ab-atelier {
	/* Alleen boven: de ruimte eronder komt van de volgende sectie,
	   anders telt de afstand daar dubbel op. */
	margin-block: var(--ab-blok) 0;
	background: var(--ab-donker);
}

.ab-homepagina .ab-atelier__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Ruim genoeg dat de werkbankfoto links een tafereel wordt in
	   plaats van een strook, en de tekst rechts lucht houdt. */
	min-height: 520px;
}

.ab-homepagina .ab-atelier__beeld {
	background-color: var(--ab-donker);
	background-size: cover;
	background-position: center;
}

/* De tekstcel centreert een kolom met leesbreedte; zo ligt de tekst
   dicht bij de foto in plaats van tegen de schermrand geplakt. */
.ab-homepagina .ab-atelier__cel {
	display: flex;
	align-items: center;
	padding: 64px 56px;
}

.ab-homepagina .ab-atelier__inhoud {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 560px;
}

.ab-homepagina .ab-atelier__sub {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #A8D29A;
}

.ab-homepagina .ab-atelier__titel {
	margin: 0;
	font-family: var(--ab-font-kop);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	color: #fff;
}

.ab-homepagina .ab-atelier__tekst {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .88);
}

.ab-homepagina .ab-atelier__knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--ab-knop-h);
	margin-top: 8px;
	padding: 0 26px;
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ab-donker);
	background: #fff;
	transition: background .15s ease;
}

.ab-homepagina .ab-atelier__knop:hover,
.ab-homepagina .ab-atelier__knop:focus {
	color: var(--ab-donker); /* expliciet, tegen de kit-hover */
	background: #A8D29A;
}

.ab-homepagina .ab-atelier__knop .ab-icoon {
	width: 18px;
	height: 18px;
}

/* ── De tips-band ── */

/*
 * Drie artikelkaarten met de STIHL-sfeerfoto's. Anders dan de
 * productfoto's zijn dit échte foto's, geen uitgeknipte objecten:
 * die mogen vullend gesneden worden (cover), niet passend (contain).
 */
.ab-homepagina .ab-advies {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ab-goot);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-homepagina .ab-advies li {
	margin: 0;
}

.ab-homepagina .ab-advies__kaart {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	border: 1px solid var(--ab-rand);
	background: var(--ab-wit);
	transition: border-color .15s ease, box-shadow .15s ease, transform .18s ease;
}

.ab-homepagina .ab-advies__kaart:hover {
	border-color: var(--ab-accent);
	box-shadow: var(--ab-schaduw);
	transform: translateY(-4px);
}

/* De sfeerfoto zoomt heel licht mee — foto's mogen dat, machines niet. */
.ab-homepagina .ab-advies__beeld img {
	transition: transform .35s ease;
}

.ab-homepagina .ab-advies__kaart:hover .ab-advies__beeld img {
	transform: scale(1.045);
}

.ab-homepagina .ab-advies__beeld {
	display: block;
	overflow: hidden;
}

.ab-homepagina .ab-advies__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ab-homepagina .ab-advies__titel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	font-family: var(--ab-font-kop);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ab-zwart);
	transition: color .15s ease;
}

.ab-homepagina .ab-advies__titel .ab-icoon {
	width: 19px;
	height: 19px;
	color: var(--ab-accent);
	transition: transform .15s ease;
}

.ab-homepagina .ab-advies__kaart:hover .ab-advies__titel {
	color: var(--ab-accent);
}

.ab-homepagina .ab-advies__kaart:hover .ab-advies__titel .ab-icoon {
	transform: translateX(3px);
}

/* ── De brede banner ── */

.ab-homepagina .ab-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 320px;
	padding: 48px;
	text-decoration: none;
	background-color: var(--ab-donker);
	background-size: cover;
	background-position: center right;
}

.ab-homepagina .ab-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 30, 18, .85) 0%, rgba(20, 30, 18, .45) 55%, rgba(20, 30, 18, .08) 100%);
}

.ab-homepagina .ab-banner__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 520px;
}

.ab-homepagina .ab-banner__sub {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #A8D29A;
}

.ab-homepagina .ab-banner__titel {
	font-family: var(--ab-font-kop);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	color: #fff;
}

.ab-homepagina .ab-banner__knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: #A8D29A;
}

.ab-homepagina .ab-banner__knop .ab-icoon {
	width: 17px;
	height: 17px;
	transition: transform .15s ease;
}

.ab-homepagina .ab-banner:hover .ab-banner__knop .ab-icoon {
	transform: translateX(3px);
}

.ab-homepagina .ab-banner:hover .ab-banner__titel {
	color: #fff; /* expliciet, tegen de kit-hover */
}

/* ── De winkel-afsluiter ── */

.ab-homepagina .ab-winkel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr);
	gap: calc(var(--ab-goot) * 1.5);
	padding: 0 48px 0 0;
	background: var(--ab-vlak);
	overflow: hidden;
}

/* De winkelfoto op volle hoogte tegen de linkerrand. */
.ab-homepagina .ab-winkel__beeld {
	min-height: 300px;
	background-color: var(--ab-donker);
	background-size: cover;
	background-position: center;
}

.ab-homepagina .ab-winkel__tekst,
.ab-homepagina .ab-winkel__uren {
	padding-block: 40px;
}

.ab-homepagina .ab-winkel__tekst p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ab-tekst);
}

.ab-homepagina .ab-winkel__gegevens a {
	color: var(--ab-accent);
	font-weight: 700;
	text-decoration: none;
}

.ab-homepagina .ab-winkel .ab-winkel__gegevens a:hover {
	color: var(--ab-accent-donker);
	text-decoration: underline;
}

.ab-homepagina .ab-winkel__knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--ab-knop-h);
	margin-top: 20px;
	padding: 0 26px;
	font-family: var(--ab-font-nav);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--ab-accent);
	transition: background .15s ease;
}

.ab-homepagina .ab-winkel__knop:hover,
.ab-homepagina .ab-winkel__knop:focus {
	color: #fff;
	background: var(--ab-accent-donker);
}

.ab-homepagina .ab-winkel__knop .ab-icoon {
	width: 18px;
	height: 18px;
}

.ab-homepagina .ab-winkel__uren strong {
	display: block;
	margin-bottom: 10px;
	font-family: var(--ab-font-kop);
	font-size: 19px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

.ab-homepagina .ab-winkel__uren ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-homepagina .ab-winkel__uren li {
	margin: 0;
	padding: 7px 0;
	font-size: 14.5px;
	color: var(--ab-tekst);
	border-bottom: 1px solid var(--ab-rand);
}

.ab-homepagina .ab-winkel__uren li:last-child {
	border-bottom: 0;
}

/* ── Toetsenbordfocus ── */

/*
 * Eén expliciete focusring voor de hele homepage: de knoppen wisselen
 * op :focus alleen van achtergrondkleur en de tegels hadden niets,
 * dus toetsenbordgebruik leunde volledig op de browser-default — en
 * of de Elementor-kit die ergens uitzet valt niet te garanderen. Op
 * de donkere vlakken (hero, tegels, banner) is groen op groen
 * onzichtbaar; daar wordt de ring lichtgroen.
 */
.ab-homepagina a:focus-visible {
	outline: 2px solid var(--ab-accent);
	outline-offset: 2px;
}

.ab-homepagina .ab-hero__paneel a:focus-visible,
.ab-homepagina .ab-hero__tegel:focus-visible,
.ab-homepagina .ab-atelier a:focus-visible,
.ab-homepagina .ab-banner:focus-visible {
	outline-color: #A8D29A;
	outline-offset: -4px; /* naar binnen: de tegel loopt tot de rand */
}

/* ── Responsief ── */

@media (max-width: 1199px) {
	.ab-homepagina .ab-hcats,
	.ab-homepagina .ab-merken {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ab-homepagina .ab-hero__raster {
		grid-template-columns: 1fr;
	}

	/* Naast elkaar in plaats van gestapeld zodra de hero één kolom is. */
	.ab-homepagina .ab-hero__zij {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.ab-homepagina .ab-hero__tegel {
		min-height: 190px;
	}
}

@media (max-width: 767px) {
	.ab-homepagina .ab-hero__paneel {
		min-height: 0;
		padding: 32px 24px;
	}

	.ab-homepagina .ab-hero__titel {
		font-size: 30px;
	}

	.ab-homepagina .ab-hcats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ab-homepagina .ab-merken {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Op mobiel is de hoogte niet het probleem — daar staat de tekst
	   toch onder elkaar. De desktopwaarde zou hier alleen lege ruimte
	   opleveren. */
	.ab-homepagina .ab-banner {
		min-height: 240px;
		padding: 32px 24px;
	}

	/* Meer lucht tussen de secties: 40px las als één lange brij. */
	.ab-homepagina .ab-sectie {
		padding-block: 56px 0;
	}

	.ab-homepagina .ab-atelier {
		margin-block: 56px 0;
	}

	.ab-homepagina .ab-atelier__raster {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ab-homepagina .ab-atelier__beeld {
		min-height: 220px;
	}

	/*
	 * De cel HOUDT zijn desktoppadding (64/56) niet: samen met de
	 * padding van de inhoud gaf dat ±92px dood donkergroen boven de
	 * tekst. Ééntje mag de ruimte dragen, niet allebei.
	 */
	.ab-homepagina .ab-atelier__cel {
		padding: 0;
	}

	.ab-homepagina .ab-atelier__inhoud {
		padding: 32px 24px 36px;
	}

	/* De knop: volle breedte, gecentreerd, en hij mag in de hoogte
	   meegroeien — de vaste 48px kneep de tweeregelige tekst fijn en
	   duwde de pijl er los van. */
	.ab-homepagina .ab-atelier__knop {
		width: 100%;
		height: auto;
		min-height: var(--ab-knop-h);
		justify-content: center;
		padding: 12px 18px;
		text-align: center;
	}

	.ab-homepagina .ab-advies {
		grid-template-columns: 1fr;
	}

	.ab-homepagina .ab-winkel {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0 0 28px;
	}

	.ab-homepagina .ab-winkel__beeld {
		min-height: 220px;
	}

	.ab-homepagina .ab-winkel__tekst,
	.ab-homepagina .ab-winkel__uren {
		padding: 24px 24px 0;
	}
}

@media (max-width: 600px) {
	.ab-homepagina .ab-hero__zij {
		grid-template-columns: 1fr;
	}

	.ab-homepagina .ab-hcats {
		grid-template-columns: 1fr;
	}
}

/*
 * DE PRODUCTBLOKKEN OP MOBIEL: een swipe-strook in plaats van een
 * krap 2-koloms raster — het tuinmachinecenter-model. Puur CSS
 * (scroll-snap), dus niets te initialiseren en niets dat stuk kan.
 * De strook loopt tot de schermrand (negatieve marge tegen de
 * containerpadding) en elke kaart klikt op zijn plek.
 */
@media (max-width: 767px) {

	.ab-homepagina ul.products.ab-raster {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		/* Expliciet dicht: zodra overflow-x op auto staat, wordt een
		   ongezette overflow-y dat óók — en de invaar-animatie (kaarten
		   starten 22px lager) gaf de strook dan verticale speling om
		   in te wiebelen. */
		overflow-y: hidden;
		/* En niet doorschieten naar de pagina als de strook op is. */
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		margin-inline: -24px;
		padding-inline: 24px;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ab-homepagina ul.products.ab-raster::-webkit-scrollbar {
		display: none;
	}

	.ab-homepagina ul.products.ab-raster li.product {
		flex: 0 0 66%;
		max-width: 66%;
		scroll-snap-align: start;
	}

	/*
	 * Het kleine wagenknopje: op een kaart van tweederde scherm is
	 * "Toevoegen aan winkelwagen" voluit te lang. font-size:0 laat de
	 * tekst verdwijnen (hij blijft er voor schermlezers en als
	 * aria-context), het maskericoon houdt zijn eigen vaste maat.
	 */
	.ab-homepagina ul.products.ab-raster li.product .button.add_to_cart_button {
		width: 52px;
		min-height: 44px;
		height: 44px;
		padding: 0;
		gap: 0;
		font-size: 0;
	}

	.ab-homepagina ul.products.ab-raster li.product .button.add_to_cart_button::before {
		width: 19px;
		height: 19px;
	}

	/*
	 * GEEN onthul-animatie op de sliderkaarten. De reveal wacht tot een
	 * kaart in BEELD komt, maar in een horizontale strook staan de
	 * kaarten rechts buiten het scherm: die bleven dus op opacity 0
	 * staan tot je ze binnenswipete, en gleden dan alsnog van onderen
	 * in — tijdens het swipen. In een raster is dat een golfje, in een
	 * slider is het gehannes.
	 *
	 * De klasse telt dubbel voor de specificiteit, net als de regel die
	 * hij terugdraait.
	 */
	.ab-homepagina ul.products.ab-raster > li.product.ab-anim.ab-anim {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
		transition-delay: 0s;
	}
}

/*
 * De pijlknoppen van de swipe-stroken (weergave.js zet ze in een
 * .ab-strook-wikkel om elke strook). Alleen op mobiel zichtbaar; aan
 * het begin dooft de linker, aan het einde de rechter.
 */
.ab-strook {
	position: relative;
}

.ab-strook__pijl {
	display: none;
}

@media (max-width: 767px) {

	/* Ruimte voor de pijlknoppen ónder de strook: zwevend over de
	   kaarten zaten ze in de weg. */
	.ab-strook {
		padding-bottom: 56px;
	}

	/* Twee klassen: de Elementor-kit styleert 'button' op (0,1,1) en
	   won anders de maat en padding van de knop. */
	.ab-strook .ab-strook__pijl {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		z-index: 5;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--ab-rand);
		border-radius: var(--ab-radius);
		background: var(--ab-wit);
		color: var(--ab-zwart);
		box-shadow: var(--ab-schaduw);
		cursor: pointer;
		transition: opacity .15s ease;
	}

	.ab-strook .ab-strook__pijl--links {
		right: 52px;
		left: auto;
	}

	.ab-strook .ab-strook__pijl--rechts {
		right: 0;
	}

	/* Aan het begin/einde dooft de betreffende pijl half: hij houdt
	   zijn plek (geen verspringend duo) maar nodigt niet meer uit. */
	.ab-strook--begin .ab-strook__pijl--links,
	.ab-strook--einde .ab-strook__pijl--rechts {
		opacity: .3;
		pointer-events: none;
	}
}

/*
 * AANRAAKSCHERMEN: geen hover. Een tik liet kaarten "opgetild"
 * plakken tot de volgende tik — op een telefoon is dat geen
 * voorvertoning maar een haperende indruk. Waar geen muis is, doet
 * hover niets.
 */
@media (hover: none) {

	body.ab-eigen-archief ul.products li.product:hover,
	ul.products.ab-raster li.product:hover {
		transform: none;
		box-shadow: none;
		border-color: var(--ab-rand);
	}

	body.ab-eigen-archief ul.products li.product:hover .woocommerce-loop-product__title,
	ul.products.ab-raster li.product:hover .woocommerce-loop-product__title {
		color: var(--ab-zwart);
	}

	.ab-homepagina .ab-merk:hover,
	.ab-homepagina .ab-hcat:hover,
	.ab-homepagina .ab-advies__kaart:hover,
	.ab-subcats .ab-subcat:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ── 15. ACCOUNTKNOP EN BTW-SCHAKELAAR ────────────────────────── */

/*
 * De accountknop staat naast de winkelwagen, maar bewust rustiger:
 * de wagen is de transactieknop en houdt zijn groene vlak, het account
 * is een hulplink en blijft tekst met een icoon.
 */
.ab-account {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--ab-knop-h);
	padding: 0 14px;
	color: var(--ab-zwart);
	text-decoration: none;
	transition: color .15s ease;
}

.ab-acties .ab-account:hover {
	color: var(--ab-accent);
}

.ab-account .ab-icoon {
	width: 24px;
	height: 24px;
	flex: none;
}

.ab-account__kolom {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.ab-account .ab-actie__label {
	font-family: var(--ab-font-nav);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ab-account__onder {
	font-size: 11.5px;
	color: var(--ab-grijs);
}

.ab-acties .ab-account:hover .ab-account__onder {
	color: var(--ab-accent);
}

/* Op smallere schermen blijft alleen het icoon over — de wagen heeft
   daar voorrang op de beschikbare breedte. */
@media (max-width: 1099px) {
	.ab-account__kolom {
		display: none;
	}

	.ab-account {
		padding: 0 8px;
	}
}

/* ── De btw-schakelaar ── */

/*
 * Staat in de actiebalk naast Mijn account, dus in dezelfde hoogte als
 * de accountknop en de wagen.
 */
.ab-btwkeuze {
	display: inline-flex;
	align-items: center;
}

/*
 * Een echte schuifschakelaar. Alles wat de Elementor-kit op button
 * zet, wordt hier gereset: die geeft knoppen een groene achtergrond,
 * een eigen letter en padding, en zonder deze reset wordt dit een dik
 * groen blok in plaats van een schakelaar.
 */
.ab-btwkeuze .ab-btwschakelaar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--ab-knop-h);
	margin: 0;
	padding: 0 14px;
	font-family: var(--ab-font);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	color: var(--ab-zwart);
}

.ab-btwkeuze .ab-btwschakelaar:hover {
	background: transparent;
	color: var(--ab-accent);
}

/* Het spoor met de knop erin. */
.ab-btwschakelaar__spoor {
	position: relative;
	flex: none;
	width: 38px;
	height: 21px;
	background: var(--ab-rand);
	border-radius: 999px; /* de enige ronding op de site: een schuif is rond */
	transition: background .18s ease;
}

.ab-btwschakelaar__knop {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}

/* Aan = excl. btw. */
.ab-btwschakelaar[aria-checked="true"] .ab-btwschakelaar__spoor {
	background: var(--ab-accent);
}

.ab-btwschakelaar[aria-checked="true"] .ab-btwschakelaar__knop {
	transform: translateX(17px);
}

.ab-btwschakelaar__kolom {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.ab-btwschakelaar__titel {
	font-size: 11.5px;
	color: var(--ab-grijs);
}

.ab-btwschakelaar__stand {
	font-family: var(--ab-font-nav);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ab-btwkeuze .ab-btwschakelaar:focus-visible {
	outline: 2px solid var(--ab-accent);
	outline-offset: -2px;
}

/*
 * Onder 1099px wordt het label compact in plaats van weg: alleen de
 * stand ("incl. btw") blijft staan, klein ÓNDER de schuif. Een kale
 * schuif zonder één woord uitleg laat de bezoeker raden wat hij
 * omzet — en naast de schuif duwde het label de hamburger op smalle
 * schermen naar een tweede rij.
 */
@media (max-width: 1099px) {
	.ab-btwschakelaar__titel {
		display: none;
	}

	.ab-btwschakelaar__stand {
		font-size: 9.5px;
		letter-spacing: .03em;
	}

	.ab-btwkeuze .ab-btwschakelaar {
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 0 4px;
	}
}

/*
 * Het labeltje achter elke prijs. Klein en grijs: het moet te lezen
 * zijn zonder de prijs zelf te beconcurreren.
 */
.ab-btwlabel {
	display: inline-block;
	margin-left: 6px;
	font-family: var(--ab-font);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--ab-grijs);
	text-transform: none;
	letter-spacing: 0;
	vertical-align: middle;
}

/* ── 16. HET WINKELMENU ───────────────────────────────────────── */

/*
 * De hulplinks in de topbalk: onderhoud, bronnen, contact. Geen
 * winkelcategorieën, dus ze horen niet in de navigatiebalk — maar wel
 * binnen handbereik, net als bij de referentiewinkels.
 */
.ab-hulplinks {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}

.ab-topbalk .ab-hulplink {
	font-size: 12.5px;
	color: inherit;
	text-decoration: none;
	opacity: .82;
	transition: opacity .15s ease;
}

.ab-topbalk .ab-hulplink:hover {
	color: inherit;
	opacity: 1;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.ab-hulplinks {
		display: none;
	}
}

/*
 * DE FOTOTEGELS in een winkelpaneel. Anders dan het merkenpaneel,
 * waar de logo's een vaste maat delen, gaat het hier om machinefoto's
 * van heel verschillende vorm: een zitmaaier is breed, een grondboor
 * smal en hoog. Vandaar een ruim vak met object-fit: contain — elke
 * machine staat er vólledig in, ongeacht zijn verhouding.
 */
body.ab-eigen-menustructuur .ab-nav > li > .sub-menu {
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 4px 12px;
	padding: 24px 22px 26px;
}

body.ab-eigen-menustructuur .ab-nav .sub-menu > li.ab-mega__tegel-item > a {
	padding: 10px 8px 14px;
}

/*
 * Wit vlak, geen rand en geen kader: de foto's zweven op het paneel,
 * zoals bij de referentiewinkels. Een raster vol grijze blokjes maakt
 * het onrustig, en de machines zijn uitgeknipt — die hebben geen vlak
 * nodig om op te staan.
 *
 * Expliciet wit en niet transparant: de afbeelding hieronder blendt
 * met multiply, en die heeft een gedefinieerde ondergrond nodig. Op
 * wit is multiply bovendien een no-op, dus een witte JPEG-achtergrond
 * gaat er vanzelf in op.
 */
body.ab-eigen-menustructuur .ab-mega__tegelbeeld {
	padding: 8px;
	margin-bottom: 8px;
	border: 0;
	background: var(--ab-wit);
}

/* De terugkoppeling zit in het beeld en het label, niet in een vlak. */
body.ab-eigen-menustructuur .ab-nav .sub-menu > li.ab-mega__tegel-item > a:hover .ab-mega__tegelbeeld img {
	transform: scale(1.05);
}

/*
 * De verhouding staat op de AFBEELDING, niet op het vak — huisregel,
 * want een percentagehoogte kan niet oplossen tegen een vak waarvan de
 * hoogte van zijn kinderen afhangt. mix-blend-mode: multiply laat de
 * witte JPEG-achtergrond opgaan in het grijze vlak.
 */
body.ab-eigen-menustructuur .ab-mega__tegelbeeld img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .18s ease;
}

body.ab-eigen-menustructuur .ab-nav .sub-menu > li.ab-mega__tegel-item > a .ab-mega__label {
	font-family: var(--ab-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ab-zwart);
}

body.ab-eigen-menustructuur .ab-nav .sub-menu > li.ab-mega__tegel-item > a:hover .ab-mega__label {
	color: var(--ab-accent);
}

/*
 * De categorieën staan nu zelf in de balk en zijn dus met meer. Iets
 * krapper zetten zodat ze op één rij blijven; de balk zelf scrollt
 * niet, dus dit is waar de ruimte vandaan moet komen.
 */
@media (min-width: 1200px) {
	body.ab-eigen-menustructuur .ab-nav > li > a {
		padding-inline: 13px;
		font-size: 15px;
	}
}

@media (max-width: 1199px) {
	body.ab-eigen-menustructuur .ab-nav > li > .sub-menu {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/*
 * (Hier stond een mobiel tegelraster met fototegels in twee kolommen.
 * Vervangen door het lade-menu met rijen — het tuinmachinecenter-
 * model; zie de lade-sectie in het 991px-blok.)
 */

/* ── 17. BETAALLOGO'S EN HET FOOTERLOGO ───────────────────────── */

/*
 * De logo's komen van de betaalmodules en dragen elk hun eigen
 * breedte, hoogte en witruimte. Een vast wit plaatje eronder trekt ze
 * optisch gelijk: allemaal even hoog, gecentreerd, met dezelfde
 * afstand. Zonder dat vlak staat Klarna's brede logo naast Bancontact's
 * vierkante en oogt het rommelig.
 */
.ab-betaal--logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-betaal--logos .ab-betaal__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 3px 6px;
	margin: 0;
	background: #fff;
	border-radius: 3px; /* betaallogo's dragen zelf een ronding; een
	                       scherp vlak eromheen oogt afgeknipt */
}

/*
 * De hoogte stuurt, de breedte volgt — anders rekt een breed logo
 * uit. !important omdat de modules hun eigen width/height als
 * attribuut op de <img> zetten, en die wint van een gewone regel.
 */
.ab-betaal--logos .ab-betaal__logo img {
	display: block;
	width: auto !important;
	height: 100% !important;
	max-width: 62px;
	object-fit: contain;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* Het logo in de footer, in plaats van de sitenaam als tekst. */
.ab-footer__merk--logo {
	margin: 0 0 6px;
}

.ab-footer__merk--logo img {
	display: block;
	width: auto;
	height: 46px;
	max-width: 170px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.ab-betaal--logos {
		justify-content: flex-start;
	}

	.ab-betaal--logos .ab-betaal__logo {
		height: 24px;
	}
}

/* ── 18. DE TYPOGRAFIE VAN DE ELEMENTOR-PAGINA'S, OVERAL ──────── */

/*
 * De hero, de atelierband en de brede banner hebben elk hun eigen
 * wenkbrauw en titel. Die volgden de oude, zelfbedachte schaal; hier
 * krijgen ze dezelfde vorm als op de Elementor-pagina's — inclusief
 * het streepje links.
 *
 * Op de donkere vlakken kan het zwart van #111 natuurlijk niet, en
 * accentgroen op donkergroen leest niet. Daar wordt de tekst wit en
 * het streepje lichtgroen; de vorm, de letter, het gewicht, de
 * letterafstand en de maat blijven identiek.
 */

/* De wenkbrauwen: hero, atelier, banner. */
.ab-homepagina .ab-hero__sub,
.ab-homepagina .ab-atelier__sub,
.ab-homepagina .ab-banner__sub {
	display: block;
	margin: 0 0 20px;   /* zelfde afstand als bij de sectiekop */
	padding-left: 10px;
	border-left: 2px solid #A8D29A;
	font-family: var(--ab-font-kop);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

/* De titels op de donkere vlakken. */
.ab-homepagina .ab-hero__titel,
.ab-homepagina .ab-atelier__titel,
.ab-homepagina .ab-banner__titel {
	font-family: var(--ab-font-kop);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

/*
 * De hero mag een trede hoger dan een sectiekop: dat is het enige
 * blok met ruimte eromheen, net als een Elementor-hero. H2-tablet
 * (42px) in plaats van de volle 54, want het paneel is de helft van
 * de breedte en niet het hele scherm.
 */
.ab-homepagina .ab-hero__titel {
	font-size: 42px;
}

/* De banden staan op dezelfde trede als de sectiekoppen: het zijn
   koppen van hetzelfde niveau, dus dezelfde maat. */
.ab-homepagina .ab-atelier__titel,
.ab-homepagina .ab-banner__titel {
	font-size: 42px;
}

/*
 * De kaarttitels: zelfde letter en gewicht, kleinere maat. Ze stonden
 * op gewicht 600 en 700, wat naast een kop van gewicht 500 zwaarder
 * oogt dan de kop zelf.
 */
.ab-homepagina .ab-hcat__naam,
.ab-homepagina .ab-advies__titel,
.ab-homepagina .ab-hero__tegel strong,
.ab-subcats .ab-subcat .ab-subcat__titel {
	font-family: var(--ab-font-kop);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
}

.ab-homepagina .ab-winkel__uren strong {
	font-family: var(--ab-font-kop);
	font-weight: 500;
	text-transform: uppercase;
}

/*
 * De kaarttitels op de treden H5 (22px) en H6 (18px) uit dezelfde kit.
 * Ze stonden op zelfbedachte maten van 19 en 22 met gewicht 600 en
 * 700 — zwaarder dan de kop erboven, wat de rangorde omdraaide.
 */
.ab-homepagina .ab-hcat__naam,
.ab-homepagina .ab-advies__titel {
	font-size: 18px;
}

.ab-homepagina .ab-hero__tegel strong,
.ab-subcats .ab-subcat .ab-subcat__titel {
	font-size: 22px;
}

@media (max-width: 767px) {
	.ab-homepagina .ab-hcat__naam,
	.ab-homepagina .ab-advies__titel {
		font-size: 17px;
	}

	.ab-homepagina .ab-hero__tegel strong,
	.ab-subcats .ab-subcat .ab-subcat__titel {
		font-size: 20px;
	}
}

@media (max-width: 1024px) {
	.ab-homepagina .ab-hero__titel,
	.ab-homepagina .ab-atelier__titel,
	.ab-homepagina .ab-banner__titel {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.ab-homepagina .ab-hero__titel,
	.ab-homepagina .ab-atelier__titel,
	.ab-homepagina .ab-banner__titel {
		font-size: 30px;
	}

	/* Op een telefoon is 20px onder de wenkbrauw te veel lucht in een
	   blok dat toch al gestapeld is. */
	.ab-sectiekop .ab-sectiekop__subtitel,
	.ab-homepagina .ab-hero__sub,
	.ab-homepagina .ab-atelier__sub,
	.ab-homepagina .ab-banner__sub {
		margin-bottom: 14px;
	}
}

/*
 * HET RITME ROND DE KOP.
 *
 * De wenkbrauw draagt regelhoogte 1.5, dus er zit al lucht onder de
 * letters vóór de marge begint; 6px erbij is genoeg. Tussen de kop en
 * wat eronder komt hoort meer ruimte dan binnen de kop zelf, anders
 * plakt de titel aan het raster. 24px is de helft van de 48px die
 * tussen twee secties staat — zo blijft de kop bij zijn eigen blok
 * horen en niet bij het vorige.
 */
.ab-homepagina .ab-sectiekop,
.ab-subcats-blok .ab-sectiekop {
	margin-bottom: 24px;
}

.ab-homepagina .ab-hero__inhoud .ab-hero__titel,
.ab-homepagina .ab-atelier__titel,
.ab-homepagina .ab-banner__titel {
	margin-block: 0 4px;
}

/* De losse wenkbrauw in de winkel-afsluiter zit niet in een
   sectiekop-wrapper; dezelfde afstand geven. */
.ab-homepagina .ab-winkel__tekst .ab-sectiekop {
	margin-bottom: 0;
}

/*
 * Het anker van de eerste heroknop. Zacht scrollen zodat de sprong
 * naar de categorietegels leesbaar is, en genoeg marge erboven zodat
 * de sectiekop niet onder de header verdwijnt.
 */
.ab-homepagina #ab-assortiment {
	scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.ab-homepagina) {
		scroll-behavior: smooth;
	}
}

/*
 * Op smallere schermen valt de tekst weg en blijft het icoon met zijn
 * teller over — zelfde breekpunt als de accountknop, zodat de drie
 * acties samen op één rij blijven.
 */
@media (max-width: 1099px) {
	.ab-acties .ab-wagen {
		padding: 0 14px;
	}

	.ab-acties .ab-wagen .ab-wagen__kolom {
		display: none;
	}

	.ab-acties .ab-wagen .ab-wagen__aantal {
		left: 24px;
	}
}

/* ── 19. DE LIGHTBOX VAN DE PRODUCTGALLERIJ ───────────────────── */

/*
 * Eigen vergroting met pijltjes. De vergroting van Syndified heeft er
 * geen: daar moet je sluiten en een andere miniatuur aantikken om de
 * volgende foto te zien. Deze staat in weergave.css en niet in
 * syndified.css omdat het onze eigen markup is — geen gevecht met hun
 * Tailwind, dus ook geen !important nodig.
 */
.ab-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: rgba(13, 13, 20, .93);
}

.ab-lightbox--aan {
	display: flex;
}

body.ab-lightbox-open {
	overflow: hidden;
}

.ab-lightbox__vak {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	max-width: 1100px;
	height: 100%;
}

.ab-lightbox__vak img {
	max-width: 100%;
	max-height: 84vh;
	object-fit: contain;
	background: #fff;
}

/*
 * Kale pijlen en een kaal kruisje: geen knopvlak, alleen het teken
 * zelf. Het tikvlak blijft 48px, dus goed raakbaar op een telefoon.
 *
 * Mét .ab-lightbox én het element in de selector: de Elementor-kit
 * stijlt ELKE <button> als groene pil op (0,1,1) en won anders van
 * een kale klasse — precies wat eerder met de terugknop in het menu
 * gebeurde.
 */
.ab-lightbox button.ab-lightbox__pijl,
.ab-lightbox button.ab-lightbox__sluit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	touch-action: manipulation;
	transition: color .15s ease, opacity .15s ease;
}

.ab-lightbox button.ab-lightbox__pijl:hover,
.ab-lightbox button.ab-lightbox__sluit:hover {
	background: transparent;
	color: #fff;
}

.ab-lightbox button.ab-lightbox__pijl svg {
	width: 30px;
	height: 30px;
	display: block;
}

.ab-lightbox button.ab-lightbox__sluit {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
}

/* Eén foto: geen pijlen en geen teller. */
.ab-lightbox--enkel button.ab-lightbox__pijl,
.ab-lightbox--enkel .ab-lightbox__teller {
	display: none;
}

.ab-lightbox__teller {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 0;
	text-align: center;
	font-family: var(--ab-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .75);
}

/* Op een smal scherm zakken de pijlen naast de teller, zodat de foto
   de volle breedte houdt. */
@media (max-width: 640px) {

	.ab-lightbox {
		padding: 12px;
	}

	.ab-lightbox button.ab-lightbox__pijl {
		position: absolute;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}

	.ab-lightbox__pijl--vorige {
		left: 16px;
	}

	.ab-lightbox__pijl--volgende {
		right: 16px;
	}

	.ab-lightbox__teller {
		bottom: 28px;
	}

	.ab-lightbox__vak img {
		max-height: 72vh;
	}
}

/* ── 20. BLADERPIJLEN OP DE PRODUCTGALLERIJ ───────────────────── */

/*
 * Twee pijlen in de rij ONDER de foto, rechts naast de miniaturen.
 * Ze stonden eerst over het beeld, maar op een schermvullend
 * sfeerbeeld (gras, gebladerte) verdwijnt een pijl dan in de drukte —
 * en ruimte vrijhouden náást de foto zou de foto smaller maken. Zo
 * blijft het beeld op volle breedte en staan de pijlen er toch buiten.
 */
.ab-galbalk button.ab-galpijl {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ab-zwart);
	opacity: .45;
	cursor: pointer;
	touch-action: manipulation;
	transition: opacity .15s ease, color .15s ease;
}

.ab-galbalk button.ab-galpijl:hover {
	background: transparent;
	color: var(--ab-accent);
	opacity: 1;
}

/* De vorige-pijl sluit aan bij de volgende-pijl, samen rechts. */
.ab-galbalk button.ab-galpijl--vorige {
	margin-left: auto;
}

.ab-galbalk button.ab-galpijl svg {
	display: block;
	width: 22px;
	height: 22px;
}

/*
 * Vanaf 1200px is er witruimte naast de foto (gemeten: 49px links,
 * 40px rechts tot de koopkolom). Daar horen de pijlen: naast het
 * beeld, niet erop en niet eronder. Smaller dan dat is die ruimte er
 * niet en blijven ze in de rij onder de foto staan.
 */
/*
 * Naast de foto, op ELKE schermbreedte: er blijkt overal witruimte te
 * zijn naast het fotovak (gemeten: 40px op een telefoon van 375px,
 * 49px bij 1200px, 69px bij 1440px). Zo staan de pijlen nooit op het
 * beeld en blijft de foto op volle grootte.
 */
.ab-galwrap {
	position: relative;
}

.ab-galbalk button.ab-galpijl {
	position: absolute;
	/* Het fotovak is door de app vastgezet op 288px, en vanaf het
	   md-breekpunt (1024px) op 400px. De helft daarvan is het
	   verticale midden van de foto. */
	top: 144px;
	transform: translateY(-50%);
	margin: 0;
	width: 32px;
	height: 32px;
}

.ab-galbalk button.ab-galpijl--vorige {
	left: -36px;
	margin-left: 0;
}

.ab-galbalk button.ab-galpijl--volgende {
	right: -36px;
}

@media (min-width: 1024px) {

	.ab-galbalk button.ab-galpijl {
		top: 200px;
		width: 34px;
		height: 34px;
	}

	.ab-galbalk button.ab-galpijl--vorige {
		left: -40px;
	}

	.ab-galbalk button.ab-galpijl--volgende {
		right: -38px;
	}
}

/* ── 21. MIJN ACCOUNT, WINKELWAGEN EN AFREKENEN ───────────────── */

/*
 * Deze pagina's draaien op het standaardsjabloon van het thema en
 * kregen tot nu toe een donkere fotobanner van 480px hoog (uit de
 * overgangslaag). Dat was nog de oude vormtaal; sinds de winkelpagina's
 * licht zijn, past dezelfde rustige kop hier ook: groen streepje,
 * Khand-titel, links uitgelijnd.
 */
/*
 * 1180px en niet --ab-container (1400px). De inhoud op deze pagina's
 * wordt door unificatie.css op 1180 gezet; de kop stond op 1400 en
 * begon daardoor honderdtien pixels links van de kaarten eronder.
 * Gemeten op 1440px: titel x=44, inhoud x=154. Twee verschillende
 * breedtes op één pagina lijnen nooit uit — dus één maat.
 */
body.page-template-default .site-main > .page-header {
	max-width: 1180px;
	width: 100%;
	min-height: 0;
	margin: 0 auto;
	padding: 34px 24px 6px;
	box-sizing: border-box;
	background: none;
	text-align: left;
	display: block;
}

body.page-template-default .site-main > .page-header h1 {
	position: relative;
	margin: 0;
	padding-top: 16px;
	font-family: var(--ab-font-kop);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: #111;
}

body.page-template-default .site-main > .page-header h1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 3px;
	background: var(--ab-accent);
}

@media (max-width: 767px) {

	body.page-template-default .site-main > .page-header {
		padding: 24px 24px 4px;
	}

	body.page-template-default .site-main > .page-header h1 {
		font-size: 32px;
	}
}


/* ── De inlogpagina ── */

/*
 * Eén formulier, niet twee. WooCommerce zette inloggen en registreren
 * als twee volledige formulieren naast elkaar; wie terugkomt moest dan
 * eerst uitzoeken welk blok van hem was, met twee wachtwoordvelden
 * onder elkaar. Nu staat links het inlogformulier en rechts een rustig
 * paneel met één knop naar de registratie.
 *
 * De verhouding is bewust ongelijk: het inlogformulier is het werk, het
 * paneel ernaast is een wegwijzer.
 */
body.woocommerce-account .ab-inlogpagina {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 8px 0 56px;
}

body.woocommerce-account .ab-inlogpagina--registreren {
	grid-template-columns: minmax(0, 1fr);
	max-width: 620px;
}

body.woocommerce-account .ab-inlogkaart {
	padding: 30px 30px 34px;
	border: 1px solid var(--ab-rand);
	background: var(--ab-wit);
}

body.woocommerce-account .ab-inlogkaart__titel {
	margin: 0 0 6px;
	font-family: var(--ab-font-kop);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.woocommerce-account .ab-inlogkaart__onder {
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

body.woocommerce-account .ab-inlogkaart__terug {
	margin: 20px 0 0;
	font-size: 14.5px;
	color: var(--ab-tekst);
}

body.woocommerce-account .ab-inlogkaart__terug a {
	font-weight: 700;
	color: var(--ab-accent);
}

/*
 * Het paneel voor nieuwe klanten. Vlak in plaats van wit, zodat het
 * naast het formulier leest als "dit is iets anders" en niet als een
 * tweede formulier dat je vergeten bent in te vullen.
 */
body.woocommerce-account .ab-nieuwkaart {
	padding: 30px 30px 34px;
	border: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
}

body.woocommerce-account .ab-nieuwkaart__punten {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .ab-nieuwkaart__punten li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ab-tekst);
}

/* Een vinkje in merkgroen, getekend met randen: geen extra bestand. */
body.woocommerce-account .ab-nieuwkaart__punten li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	width: 6px;
	height: 11px;
	border: solid var(--ab-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

body.woocommerce-account .ab-nieuwkaart__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--ab-knop-h);
	padding: 12px 22px;
	background: var(--ab-accent);
	border: 0;
	color: #fff;
	font-family: var(--ab-font);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}

body.woocommerce-account .woocommerce .ab-nieuwkaart__knop:hover,
body.woocommerce-account .woocommerce .ab-nieuwkaart__knop:focus {
	background: var(--ab-accent-donker);
	color: #fff;
}

@media (max-width: 767px) {

	body.woocommerce-account .ab-inlogpagina {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-bottom: 36px;
	}

	body.woocommerce-account .ab-inlogkaart,
	body.woocommerce-account .ab-nieuwkaart {
		padding: 24px 20px 26px;
	}
}

/* ── Inloggen en registreren ── */

/*
 * WooCommerce zet login en registratie in twee kale kolommen. Als
 * kaarten naast elkaar is meteen duidelijk dat het twee losse keuzes
 * zijn: "ik heb al een account" tegenover "ik ben nieuw".
 */
body.woocommerce-account .woocommerce .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ab-goot);
	width: 100%;
	margin: 8px 0 48px;
}

/*
 * DEZELFDE VALKUIL ALS BIJ HET INGELOGDE SCHERM.
 *
 * WooCommerce hangt aan .col2-set een clearfix: ::before en ::after met
 * content:" ". Bij floats zie je die niet, maar in een RASTER worden
 * het twee volwaardige cellen. Gemeten op de live pagina: het
 * inlogblok stond in kolom 2 rij 1 en het registratieblok in kolom 1
 * rij 2, met twee lege gaten ernaast. Precies wat je op het scherm zag.
 *
 * Er valt niets te clearen zodra er geen floats meer zijn, dus ze
 * mogen weg.
 */
/*
 * De vinkjes op de inlog- en registratiekaart.
 *
 * "Onthouden" en "Ik koop als bedrijf of zelfstandige" waren allebei
 * 13px hoog — het standaardvinkje van de browser, en op een telefoon
 * niet te raken zonder te mikken. Nagemeten voor het herstellen: 13px
 * waar 20 het minimum is om er met een duim op te komen.
 *
 * accent-color en geen zelfgetekend vinkje: het native vakje houdt zijn
 * gedrag met toetsenbord en schermlezer, en alleen de kleur en de maat
 * waren hier het probleem.
 */
body.woocommerce-account .woocommerce input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	accent-color: var(--ab-accent);
	vertical-align: middle;
}

body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme,
body.woocommerce-account .woocommerce .ab-zakelijk__schakel {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 4px 0 18px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ab-tekst);
	cursor: pointer;
}

body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme span,
body.woocommerce-account .woocommerce .ab-zakelijk__schakel span {
	letter-spacing: 0;
	text-transform: none;
}

body.woocommerce-account .woocommerce .u-columns.col2-set::before,
body.woocommerce-account .woocommerce .u-columns.col2-set::after {
	display: none;
	content: none;
}

/*
 * En dezelfde behandeling voor de wrapper eromheen. Die is vandaag geen
 * raster op de uitgelogde pagina, maar wordt het wel zodra iemand er
 * later één van maakt — en dan staat de fout er meteen weer.
 */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
	display: none;
	content: none;
}

body.woocommerce-account .woocommerce .u-columns .col-1,
body.woocommerce-account .woocommerce .u-columns .col-2 {
	width: 100%;
	float: none;
	padding: 28px 28px 32px;
	background: var(--ab-wit);
	border: 1px solid var(--ab-rand);
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce .u-columns h2 {
	margin: 0 0 4px;
	font-family: var(--ab-font-kop);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: #111;
}

/* Een regel uitleg onder elke kop, zodat de keuze meteen duidelijk is.
   De koppen zijn van WooCommerce; de toelichting hangen we eraan. */
body.woocommerce-account .woocommerce .col-1 > h2::after,
body.woocommerce-account .woocommerce .col-2 > h2::after {
	display: block;
	margin-top: 6px;
	font-family: var(--ab-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ab-tekst);
}

body.woocommerce-account .woocommerce .col-1 > h2::after {
	content: "Meld u aan om uw bestellingen, adressen en gegevens te beheren.";
}

body.woocommerce-account .woocommerce .col-2 > h2::after {
	content: "Nieuw hier? Maak een account en bestel voortaan sneller.";
}

/* De velden. */
body.woocommerce-account .woocommerce form .form-row,
body.woocommerce-account .woocommerce form .woocommerce-form-row {
	padding: 0;
	margin: 0 0 16px;
}

body.woocommerce-account .woocommerce form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ab-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ab-zwart);
}

body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce form input[type="text"],
body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="password"],
body.woocommerce-account .woocommerce form input[type="tel"] {
	width: 100%;
	height: var(--ab-input-h);
	padding: 0 14px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	background: var(--ab-wit);
	font-family: var(--ab-font);
	font-size: 15px;
	color: var(--ab-zwart);
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce form .input-text:focus,
body.woocommerce-account .woocommerce form input:focus {
	border-color: var(--ab-accent);
	outline: 2px solid rgba(59, 115, 44, .22);
	outline-offset: 0;
}

/* Het wachtwoordveld zit in een span met een oogje ernaast. */
body.woocommerce-account .woocommerce form .password-input {
	display: block;
	width: 100%;
	position: relative;
}

body.woocommerce-account .woocommerce form .show-password-input {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
}

/* "Onthoud mij" naast het vinkje in plaats van eronder. */
body.woocommerce-account .woocommerce form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-weight: 400;
	color: var(--ab-tekst);
	cursor: pointer;
}

/*
 * Stond op width/height auto — dat is de 13px van de browser, en op een
 * telefoon niet te raken zonder te mikken. Deze regel is specifieker
 * dan de algemene vinkjesregel hierboven en won het dus; daarom staat
 * de maat híer en niet daar.
 */
body.woocommerce-account .woocommerce form .woocommerce-form__input-checkbox {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	accent-color: var(--ab-accent);
}

/* De knoppen: vol transactiegroen, volle breedte. */
body.woocommerce-account .woocommerce form button.button,
body.woocommerce-account .woocommerce form .woocommerce-Button {
	display: block;
	width: 100%;
	min-height: var(--ab-knop-h);
	margin: 4px 0 0;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--ab-radius);
	background: var(--ab-transactie);
	box-shadow: none;
	font-family: var(--ab-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

body.woocommerce-account .woocommerce form button.button:hover,
body.woocommerce-account .woocommerce form .woocommerce-Button:hover {
	background: var(--ab-transactie-donker);
	color: #fff;
}

body.woocommerce-account .woocommerce .lost_password {
	margin: 14px 0 0;
	font-size: 14px;
}

body.woocommerce-account .woocommerce .lost_password a {
	color: var(--ab-accent);
}

body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ab-grijs);
}

@media (max-width: 767px) {

	body.woocommerce-account .woocommerce .u-columns.col2-set {
		grid-template-columns: 1fr;
		margin-bottom: 32px;
	}

	body.woocommerce-account .woocommerce .u-columns .col-1,
	body.woocommerce-account .woocommerce .u-columns .col-2 {
		padding: 22px 20px 26px;
	}
}

/* ── 22. ZAKELIJK KOPEN: BEDRIJFSNAAM EN BTW-NUMMER ───────────── */

/*
 * Het blok klapt open zodra iemand aanvinkt dat hij zakelijk koopt.
 * Zonder script: het vinkje stuurt de zichtbaarheid via :has().
 * Staat er al iets ingevuld (na een mislukte registratie), dan zet PHP
 * de klasse --open erop zodat het blok open blijft.
 */
.ab-zakelijk {
	margin: 4px 0 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ab-rand);
}

.ab-zakelijk__schakel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--ab-font);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ab-zwart);
	cursor: pointer;
}

.ab-zakelijk__vink {
	width: auto;
	height: auto;
	margin: 0;
	accent-color: var(--ab-accent);
}

.ab-zakelijk__velden {
	display: none;
	margin-top: 16px;
}

.ab-zakelijk:has(.ab-zakelijk__vink:checked) .ab-zakelijk__velden,
.ab-zakelijk--open .ab-zakelijk__velden {
	display: block;
}

.ab-zakelijk .description {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ab-grijs);
}

/* ── 23. DE INGELOGDE ACCOUNTOMGEVING ─────────────────────────── */

/*
 * LET OP BIJ HERNOEMEN: de body-klasse heet ab-accountPAGINA en niet
 * ab-account. Die laatste bestaat al als de accountknop in de header
 * (regel ~3828, display:inline-flex). Zet je diezelfde naam op de
 * body, dan matcht body die knopregel en wordt de HELE pagina een
 * inline-flex doos: header, inhoud en footer komen naast elkaar te
 * staan in kolommen van een paar honderd pixels. Een body-klasse mag
 * dus nooit dezelfde naam dragen als een component.
 *
 * Alles hieronder hangt aan body.ab-accountpagina — de klasse die
 * Agriboss_Weergave_Account::bodyklasse() zet zodra module_account
 * aan staat. Module uit = deze hele sectie doet niets.
 *
 * Drie randvoorwaarden van unificatie.css zitten hier ingebakken:
 *
 * 1. main.site-main staat op background:#F8F8F8 !important. Elk paneel
 *    krijgt daarom expliciet background: var(--ab-wit). --ab-vlak
 *    (#F7F7F7) wordt NOOIT als paneelvlak gebruikt — alleen binnenin
 *    een wit paneel (kopbalken, hover, klantblok). Op #F8F8F8 zou het
 *    verdwijnen.
 * 2. .page-content is 1180px met 24px padding = 1132px werkbreedte.
 *    268px zijkolom + 32px goot laat 832px inhoud over. Alle vaste
 *    kolommen hieronder zijn tegen die 832px gerekend, niet tegen
 *    --ab-container (1400px) — die is hier met !important overruled.
 * 3. html .woocommerce-page a.button.wc-forward wordt daar met
 *    !important gekaapt (Khand 18px, padding 16/28). Alles wat in
 *    onze eigen panelen staat gebruikt daarom .ab-knop. De knoppen in
 *    de bestellingentabel houden .button bewust wel — die dragen geen
 *    .wc-forward en zijn dus gewoon te stijlen.
 *
 * Hoverregels staan overal op minstens drie klassen: de Elementor-kit
 * zet a en a:hover op (0,2,1) en wint anders onvoorwaardelijk.
 */

/* ── Het skelet ── */

/*
 * woocommerce-layout.css geeft .woocommerce een clearfix met
 * content:" " en display:table. Zodra de wrapper een raster wordt,
 * worden dat twee volwaardige rastercellen: de eerste rij wordt
 * opgegeten en het menu schuift een kolom op.
 */
body.ab-accountpagina.woocommerce-account.logged-in .woocommerce::before,
body.ab-accountpagina.woocommerce-account.logged-in .woocommerce::after {
	display: none;
	content: none;
}

body.ab-accountpagina.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin: 8px 0 64px;
	font-family: var(--ab-font);
	color: var(--ab-tekst);
}

body.ab-accountpagina.woocommerce-account.logged-in .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Dezelfde laag zet floats en vaste breedtes op de twee kolommen. */
body.ab-accountpagina.woocommerce-account .woocommerce-MyAccount-navigation,
body.ab-accountpagina.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

body.ab-accountpagina .ab-accountmenu,
body.ab-accountpagina .ab-accountmenu *,
body.ab-accountpagina .ab-overzicht,
body.ab-accountpagina .ab-overzicht * {
	box-sizing: border-box;
}

/* ── De zijkolom: één witte kaart ── */

body.ab-accountpagina .ab-accountmenu {
	border: 1px solid var(--ab-rand);
	background: var(--ab-wit);
}

body.ab-accountpagina .ab-accountmenu__klant {
	padding: 16px 18px 15px;
	border-bottom: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
}

body.ab-accountpagina .ab-accountmenu__naam {
	margin: 0;
	font-family: var(--ab-font-kop);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ab-zwart);
	overflow-wrap: anywhere;
}

/*
 * --ab-tekst en niet --ab-grijs: #888 haalt op --ab-vlak ongeveer
 * 3,4:1 en zakt daarmee onder de leesbaarheidsdrempel; #505050 haalt
 * ruim 7:1 en leest door het formaat nog altijd als tweede rang.
 * Dat geldt voor élke kleine tekst in deze sectie.
 */
body.ab-accountpagina .ab-accountmenu__mail {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ab-tekst);
	overflow-wrap: anywhere;
}

body.ab-accountpagina .ab-accountmenu__soort {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 9px 0 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-accountmenu__soort .ab-icoon {
	width: 14px;
	height: 14px;
	flex: none;
}

/* ── Het menu ── */

body.ab-accountpagina .ab-accountmenu__lijst {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

body.ab-accountpagina .ab-accountmenu__lijst li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ab-rand);
	list-style: none;
}

body.ab-accountpagina .ab-accountmenu__lijst li:last-child {
	border-bottom: 0;
}

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__lijst a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 14px 14px;
	border-left: 2px solid transparent;
	font-family: var(--ab-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ab-tekst);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/*
 * Het icoon volgt currentColor en wordt in rust alleen met dekking
 * gestuurd. Bij hover kleurt het dus vanzelf mee met de groene tekst;
 * op de actieve rij zetten we het expliciet groen, want daar is de
 * tekst zwart.
 */
body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__lijst .ab-icoon {
	width: 18px;
	height: 18px;
	flex: none;
	opacity: .55;
	transition: opacity .15s ease, color .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__lijst a:hover {
	background: var(--ab-vlak);
	color: var(--ab-accent);
}

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__lijst a:hover .ab-icoon {
	opacity: 1;
}

/*
 * De actieve rij: geen vol groen vlak meer (dat was het meest
 * WooCommerce-achtige element van de oude pagina) maar het groene
 * streepje van de paginatitels, hier verticaal. 2px, exact de maat van
 * .ab-archiefkop__sub en .ab-sectiekop__subtitel.
 */
body.ab-accountpagina .woocommerce-MyAccount-navigation li.is-active > a,
body.ab-accountpagina .woocommerce-MyAccount-navigation li.is-active > a:hover {
	background: var(--ab-vlak);
	border-left-color: var(--ab-accent);
	font-weight: 700;
	color: var(--ab-zwart);
}

body.ab-accountpagina .woocommerce-MyAccount-navigation li.is-active > a .ab-icoon {
	opacity: 1;
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-accountmenu__aantal {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ab-tekst);
	font-variant-numeric: tabular-nums;
}

body.ab-accountpagina .ab-accountmenu__item--customer-logout {
	border-top: 1px solid var(--ab-rand);
}

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__item--customer-logout > a {
	font-weight: 600;
	color: var(--ab-tekst);
}

/* Vangnet: menuitems() haalt downloads al uit de array, maar een
   gecachete pagina kan de rij nog bevatten. */
body.ab-accountpagina .woocommerce-MyAccount-navigation-link--downloads {
	display: none;
}

/* ── De belregel onderaan de zijkolom ── */

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__bel {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ab-zwart);
	text-decoration: none;
	transition: color .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__bel:hover {
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-accountmenu__bel .ab-icoon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-accountmenu__bel small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ab-tekst);
}

/* ── Het overzicht ── */

body.ab-accountpagina .ab-overzicht {
	display: grid;
	gap: 24px;
}

body.ab-accountpagina .ab-blok {
	border: 1px solid var(--ab-rand);
	background: var(--ab-wit);
}

body.ab-accountpagina .ab-blok__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
}

body.ab-accountpagina .ab-blok__kop h2 {
	margin: 0;
	padding: 0;
	font-family: var(--ab-font-kop);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-blok__meer {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ab-accent);
	text-decoration: none;
	white-space: nowrap;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-blok__meer:hover {
	color: var(--ab-accent-donker);
	text-decoration: underline;
}

body.ab-accountpagina .ab-blok__meer .ab-icoon {
	width: 15px;
	height: 15px;
	flex: none;
	transition: transform .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-blok__meer:hover .ab-icoon {
	transform: translateX(3px);
}

body.ab-accountpagina .ab-blok__tussenkop {
	margin: 0;
	padding: 11px 20px;
	border-top: 1px solid var(--ab-rand);
	border-bottom: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ab-tekst);
}

/* ── De laatste bestelling ── */

body.ab-accountpagina .ab-laatste {
	padding: 18px 20px 20px;
}

body.ab-accountpagina .ab-laatste__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-laatste__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

body.ab-accountpagina .ab-laatste__wie {
	display: block;
	min-width: 0;
}

body.ab-accountpagina .ab-laatste__nummer {
	display: block;
	font-family: var(--ab-font-kop);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-laatste__datum {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-laatste__inhoud {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-laatste__rest {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-laatste__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ab-rand);
}

body.ab-accountpagina .ab-laatste__bedrag {
	margin: 0;
	font-family: var(--ab-font-kop);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-laatste__bedrag small {
	margin-left: 8px;
	font-family: var(--ab-font);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ab-tekst);
}

/* ── De eerdere bestellingen als rijen ── */

body.ab-accountpagina .ab-bestellijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ab-accountpagina .ab-bestellijst li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ab-accountpagina .ab-bestellijst li + li {
	border-top: 1px solid var(--ab-rand);
}

/*
 * 832px inhoud min 2px rand min 40px padding = 790px. De vaste
 * kolommen nemen 348px plus 64px goten; de artikelregel houdt dus
 * ruim 370px over en hoeft niet afgekapt te worden.
 */
body.ab-accountpagina .woocommerce-MyAccount-content .ab-bestelrij {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr) 132px minmax(84px, auto) 16px;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	color: var(--ab-tekst);
	text-decoration: none;
	transition: background .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-bestelrij:hover {
	background: var(--ab-vlak);
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-bestelrij__nummer {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ab-zwart);
	font-variant-numeric: tabular-nums;
}

body.ab-accountpagina .ab-bestelrij__datum {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-bestelrij__inhoud {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-bestelrij__bedrag {
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	color: var(--ab-zwart);
	font-variant-numeric: tabular-nums;
}

body.ab-accountpagina .ab-bestelrij__pijl .ab-icoon {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--ab-grijs);
	transition: color .15s ease, transform .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-bestelrij:hover .ab-bestelrij__pijl .ab-icoon {
	color: var(--ab-accent);
	transform: translateX(3px);
}

/* ── De status: dezelfde stip als de voorraadmelding ── */

/*
 * Een ronde stip van 7px in currentColor naast de tekst. Dit is de
 * enige plek waar die vorm nog staat: op de productkaarten is hij
 * weggehaald op vraag van de winkelier. Hier blijft hij, want een
 * bestelstatus heeft geen andere drager dan zijn kleur.
 */
body.ab-accountpagina .ab-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-status::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

body.ab-accountpagina .ab-status--loopt {
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-status--klaar {
	color: var(--ab-transactie);
}

body.ab-accountpagina .ab-status--wacht {
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-status--gestopt {
	color: var(--ab-rood);
}

/* ── Je gegevens: vier klikbare rijen met de échte waarde ── */

body.ab-accountpagina .ab-gegevens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--ab-rand);
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-gegevens__rij {
	display: block;
	padding: 16px 20px 18px;
	background: var(--ab-wit);
	color: var(--ab-tekst);
	text-decoration: none;
	transition: background .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-gegevens__rij:hover {
	background: var(--ab-vlak);
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-gegevens__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

body.ab-accountpagina .ab-gegevens__label {
	font-family: var(--ab-font-kop);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-gegevens__actie {
	flex: none;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ab-accent);
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-gegevens__rij:hover .ab-gegevens__actie {
	text-decoration: underline;
}

body.ab-accountpagina .ab-gegevens__waarde {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ab-tekst);
	overflow-wrap: anywhere;
}

body.ab-accountpagina .ab-gegevens__rij--leeg .ab-gegevens__waarde {
	font-weight: 600;
	color: var(--ab-accent);
}

/* ── Contact en service ── */

body.ab-accountpagina .ab-service__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 268px;
	gap: 1px;
	background: var(--ab-rand);
}

body.ab-accountpagina .ab-service__hulp,
body.ab-accountpagina .ab-service__uren {
	padding: 18px 20px 20px;
	background: var(--ab-wit);
}

body.ab-accountpagina .ab-service__tekst {
	margin: 0;
	max-width: 48ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-service__adres {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-service__adres .ab-icoon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--ab-accent);
}

body.ab-accountpagina .ab-service__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

body.ab-accountpagina .ab-service__note {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-service__urenkop {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-service__urenlijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ab-accountpagina .ab-service__urenlijst li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--ab-rand);
	font-size: 13.5px;
	line-height: 1.4;
	list-style: none;
}

body.ab-accountpagina .ab-service__urenlijst li:last-child {
	border-bottom: 0;
}

body.ab-accountpagina .ab-service__dag {
	color: var(--ab-tekst);
}

body.ab-accountpagina .ab-service__tijd {
	font-weight: 700;
	white-space: nowrap;
	color: var(--ab-zwart);
}

/* ── De knop ── */

/*
 * Een eigen knop en NIET .button of .wc-forward: die twee worden in
 * unificatie.css met !important gekaapt, en dan staat er een
 * archiefknop midden in een paneel.
 */
body.ab-accountpagina .ab-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid var(--ab-accent);
	border-radius: var(--ab-radius);
	background: var(--ab-accent);
	font-family: var(--ab-font);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--ab-wit);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.ab-accountpagina .ab-knop .ab-icoon {
	width: 18px;
	height: 18px;
	flex: none;
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-knop:hover {
	background: var(--ab-accent-donker);
	border-color: var(--ab-accent-donker);
	color: var(--ab-wit);
}

body.ab-accountpagina .ab-knop--rand {
	background: var(--ab-wit);
	border-color: var(--ab-rand);
	color: var(--ab-zwart);
}

body.ab-accountpagina .woocommerce-MyAccount-content .ab-knop--rand:hover {
	background: var(--ab-wit);
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

/* ── De lege staat ── */

body.ab-accountpagina .ab-leeg {
	padding: 22px 20px 24px;
}

body.ab-accountpagina .ab-leeg p {
	margin: 0 0 16px;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

/* ── De bestellingentabel op /orders/ ── */

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--ab-rand);
	border-collapse: collapse;
	background: var(--ab-wit);
}

/* De kopcellen krijgen hun lettertype van unificatie.css (Tomorrow
   11px, .12em, uppercase, !important). Kleur, vlak en padding zijn
   wel van ons, en die drie doen het werk. */
body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--ab-rand);
	background: var(--ab-vlak);
	color: var(--ab-tekst);
	text-align: left;
}

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--ab-rand);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ab-tekst);
	vertical-align: middle;
}

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td {
	border-top: 0;
}

body.ab-accountpagina .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
	color: var(--ab-zwart);
	text-decoration: none;
}

body.ab-accountpagina .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-number a:hover {
	color: var(--ab-accent);
}

body.ab-accountpagina .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-total {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.ab-accountpagina .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

/* De actie in de tabel is de enige die op die pagina telt en houdt
   dus een echt raakvlak van 40px, geen tekstlink. */
body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0 0 0 8px;
	padding: 0 16px;
	border: 1px solid var(--ab-rand);
	border-radius: var(--ab-radius);
	background: var(--ab-wit);
	font-family: var(--ab-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ab-zwart);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button:first-child {
	margin-left: 0;
}

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button:hover {
	background: var(--ab-wit);
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

/* Alleen de betaalknop is vol: dat is de enige rij waar nog iets
   moet gebeuren. */
body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button.pay {
	border-color: var(--ab-transactie);
	background: var(--ab-transactie);
	color: var(--ab-wit);
}

body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button.pay:hover {
	border-color: var(--ab-transactie-donker);
	background: var(--ab-transactie-donker);
	color: var(--ab-wit);
}

body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: 10px;
	margin: 0 0 32px;
}

/* ── Adressen ── */

/*
 * De twee adreskaarten zijn .u-columns.col2-set en krijgen hun witte
 * kaart met 1px rand al van sectie 21 (die regel is niet aan het
 * inlogscherm gebonden). Hier alleen de titelregel en het adres zelf.
 */
body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
	font-family: var(--ab-font-kop);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--ab-accent);
	text-decoration: none;
}

body.ab-accountpagina .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {
	color: var(--ab-accent-donker);
	text-decoration: underline;
}

body.ab-accountpagina .woocommerce-MyAccount-content address {
	margin: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ab-tekst);
}

/* ── De formulieren op adressen en mijn gegevens ── */

body.ab-accountpagina .woocommerce-MyAccount-content > form {
	max-width: 640px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--ab-rand);
	background: var(--ab-wit);
}

body.ab-accountpagina .woocommerce-MyAccount-content > form > h3 {
	margin: 0 0 16px;
	font-family: var(--ab-font-kop);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .woocommerce-MyAccount-content fieldset {
	margin: 26px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--ab-rand);
}

body.ab-accountpagina .woocommerce-MyAccount-content fieldset legend {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--ab-font-kop);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ab-zwart);
}

body.ab-accountpagina .ab-veldgroep__uitleg {
	margin: 0 0 16px;
	max-width: 56ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ab-tekst);
}

/* De bewaarknop: niet over de volle 640px, wel breed genoeg om de
   belangrijkste actie van het scherm te zijn. */
body.ab-accountpagina .woocommerce .woocommerce-MyAccount-content form button.button,
body.ab-accountpagina .woocommerce .woocommerce-MyAccount-content form .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 240px;
	min-height: var(--ab-knop-h);
	margin-top: 24px;
}

/* ── Toetsenbordfocus ── */

body.ab-accountpagina .woocommerce-MyAccount-navigation a:focus-visible {
	outline: 2px solid var(--ab-accent);
	outline-offset: -2px;
}

body.ab-accountpagina .woocommerce-MyAccount-content a:focus-visible,
body.ab-accountpagina .woocommerce-MyAccount-content button:focus-visible {
	outline: 2px solid var(--ab-accent);
	outline-offset: 2px;
}

/* ── Beweging uit ── */

@media (prefers-reduced-motion: reduce) {

	body.ab-accountpagina .ab-blok__meer .ab-icoon,
	body.ab-accountpagina .ab-bestelrij__pijl .ab-icoon {
		transition: color .15s ease;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content .ab-blok__meer:hover .ab-icoon,
	body.ab-accountpagina .woocommerce-MyAccount-content .ab-bestelrij:hover .ab-bestelrij__pijl .ab-icoon {
		transform: none;
	}
}

/* ── Mobiel ── */

@media (max-width: 899px) {

	body.ab-accountpagina.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-bottom: 48px;
	}

	/* Twee kolommen: alle vijf de rijen blijven zonder scrollen in
	   beeld en elk raakvlak komt ruim boven 44px uit. Geen accordeon,
	   geen horizontale schuifstrook. */
	body.ab-accountpagina .ab-accountmenu__lijst {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * "Alle bestellingen" is als tekstregel 23px hoog en daarmee met een
	 * duim niet te raken. Verticale ruimte eromheen maakt het raakvlak
	 * 44px zonder dat de regel er anders uitziet; de negatieve marge
	 * houdt de kopbalk even hoog als hij was.
	 */
	body.ab-accountpagina .woocommerce-MyAccount-content .ab-blok__meer {
		padding: 11px 0;
		margin: -11px 0;
	}

	body.ab-accountpagina .ab-accountmenu__lijst li:nth-child(odd):not(:last-child) {
		border-right: 1px solid var(--ab-rand);
	}

	/* Afmelden is het vijfde item en krijgt de volle balk, op elke
	   schermbreedte op dezelfde plek. */
	body.ab-accountpagina .ab-accountmenu__lijst li:last-child {
		grid-column: 1 / -1;
	}

	body.ab-accountpagina .woocommerce-MyAccount-navigation .ab-accountmenu__lijst a {
		padding: 15px 14px;
	}

	body.ab-accountpagina .ab-gegevens,
	body.ab-accountpagina .ab-service__body {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ab-accountpagina .woocommerce-MyAccount-content .ab-bestelrij {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 14px;
		padding: 14px 16px;
	}

	body.ab-accountpagina .ab-bestelrij__nummer {
		grid-column: 1;
		grid-row: 1;
	}

	body.ab-accountpagina .ab-bestelrij__bedrag {
		grid-column: 2;
		grid-row: 1;
	}

	body.ab-accountpagina .ab-bestelrij__inhoud {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	body.ab-accountpagina .ab-bestelrij .ab-status {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 2px;
	}

	body.ab-accountpagina .ab-bestelrij__pijl {
		display: none;
	}

	body.ab-accountpagina .ab-laatste__voet .ab-knop,
	body.ab-accountpagina .ab-service__knoppen .ab-knop {
		width: 100%;
	}

	body.ab-accountpagina .ab-laatste,
	body.ab-accountpagina .ab-leeg,
	body.ab-accountpagina .ab-service__hulp,
	body.ab-accountpagina .ab-service__uren {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.ab-accountpagina .ab-blok__kop,
	body.ab-accountpagina .ab-blok__tussenkop,
	body.ab-accountpagina .woocommerce-MyAccount-content .ab-gegevens__rij {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content > form {
		padding: 20px 16px;
	}

	body.ab-accountpagina .woocommerce .woocommerce-MyAccount-content form button.button,
	body.ab-accountpagina .woocommerce .woocommerce-MyAccount-content form .woocommerce-Button {
		width: 100%;
		min-width: 0;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content .form-row-first,
	body.ab-accountpagina .woocommerce-MyAccount-content .form-row-last {
		float: none;
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 767px) {

	/* De bestellingentabel klapt om. WooCommerce doet dit zelf al met
	   float:left op de labelcel; deze regels nemen dat over met flex,
	   zodat label en waarde op één regel staan. */
	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody tr {
		display: block;
		padding: 6px 0;
		border-top: 1px solid var(--ab-rand);
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody tr:first-child {
		border-top: 0;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 16px;
		border: 0;
		text-align: right;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody td::before {
		content: attr(data-title);
		float: none;
		flex: none;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ab-tekst);
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions::before {
		content: none;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions {
		display: block;
		padding-top: 10px;
		padding-bottom: 12px;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button {
		width: 100%;
		margin: 8px 0 0;
	}

	body.ab-accountpagina .woocommerce-MyAccount-content table.shop_table a.button:first-child {
		margin-top: 0;
	}
}

@media (max-width: 379px) {

	body.ab-accountpagina .ab-accountmenu__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ab-accountpagina .ab-accountmenu__lijst li:nth-child(odd):not(:last-child) {
		border-right: 0;
	}
}

/* ── De btw-uitsplitsing in de winkelwagen ────────────────────── */

/*
 * Twee regels boven het totaal: wat het kost zonder btw, en hoeveel
 * btw erbij komt. Ze staan er ALTIJD, want de vraag "hoeveel btw zit
 * hierin" is voor een zaakvoerder even normaal als voor een
 * particulier. Wie de winkel op "excl. btw" heeft staan krijgt ze
 * geaccentueerd: die bladert door prijzen zonder btw en moet in de
 * wagen niet hoeven rekenen waar het verschil vandaan komt.
 *
 * De opmaak volgt de regels van het WooCommerce-blok eromheen
 * (label links, bedrag rechts, zelfde maat), zodat het geen aangeplakt
 * blokje wordt maar een deel van dezelfde lijst.
 */
.ab-btwsplitsing {
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
	margin-bottom: 12px;
}

.ab-btwsplitsing__rij {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3c3c3c;
}

.ab-btwsplitsing__rij strong {
	font-weight: 600;
	white-space: nowrap;
}

/* Staat de schakelaar op excl. btw, dan is dit de regel die de klant
   zoekt: die krijgt het gewicht, en de btw-regel het accent. */
.ab-btwsplitsing[data-ab-btw-modus="excl"] {
	padding: 12px 14px;
	border: 1px solid var(--ab-rand);
	border-left: 3px solid var(--ab-transactie);
	background: #FAFBF9;
}

.ab-btwsplitsing[data-ab-btw-modus="excl"] .ab-btwsplitsing__rij:first-child {
	font-size: 16px;
	color: var(--ab-tekst);
}

.ab-btwsplitsing[data-ab-btw-modus="excl"] .ab-btwsplitsing__rij:first-child strong {
	font-weight: 700;
}

.ab-btwsplitsing[data-ab-btw-modus="excl"] .ab-btwsplitsing__rij + .ab-btwsplitsing__rij {
	color: var(--ab-transactie);
}

/*
 * Het "excl. btw"-labeltje onder de bedragen in de winkelwagen. Staat er
 * alleen als de winkel op excl. btw staat — zie weergave.js. Onder het
 * bedrag en niet erachter: de kolom is smal en het bedrag moet het
 * eerste blijven wat je leest.
 */
.ab-btwlabel--wagen {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: #6b6b6b;
	white-space: nowrap;
}