/* Altus CSS-bundel 1.1: altus-bricks, altus-header, altus-product, altus-categorie, altus-steiger-snelzoeker, altus-homepage-mobiel, altus-homepage, altus-footer-tablet, altus-reserveonderdelen, altus-onderdelen-megamenu, altus-gratis-verzending-balk, altus-steiger-filters, altus-categorie-banner, altus-categorie-band */

/* --- altus-bricks --- */
/*
Theme Name: Altus Bricks
Theme URI: https://altus.be
Description: Bricks child-thema voor altus.be — herbouw van het XStore/Elementor/Jet-maatwerk in Bricks. Bevat de geporteerde, builder-onafhankelijke maatwerk-logica (zie altus-bricks-audit.md).
Author: Altus
Template: bricks
Version: 0.1.0
Text Domain: altus-bricks
*/


/* --- altus-header --- */
/* ===== Altus header: account-dropdown + winkelwagen ===== */

/* Logo */
#brx-header .brxe-image img {
    max-height: 100px;
    width: auto;
    height: auto;
}
#brx-header figure.brxe-image { margin-left: 32px; }
#brx-header figure.brxe-image figcaption { display: none; }

/* Header-rij met logo, zoekveld en knoppen: minimumhoogte + verticale centrering zoals live.
   18/10/2026: was "de eerste sectie van de header"; sinds de USP-balk bovenaan staat, gaf dat de USP-balk
   130px hoogte. Nu rechtstreeks de logo-rij (#brxe-pcfcoj). */
#brxe-pcfcoj {
    min-height: 130px;
}

/* Icoontjes */
.altus-icon { display: block; width: 28px; height: 28px; fill: currentColor; }

/* Wrapper rechterkolom */
.altus-account,
.altus-cart {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Ruimte tussen zoekbalk-kolom en iconen */
.altus-account { margin-left: 24px; }
.altus-cart    { margin-left: 8px; }

/* ---- Account trigger ---- */
.altus-account__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #24337a;
    text-decoration: none;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border: 2px solid #c2410c;
    border-radius: 8px;
}
.altus-account__trigger:hover {
    color: #c2410c;
    background: rgba(194,65,12,.06);
}
.altus-account__icon { line-height: 0; }
.altus-account__label { display: none; }

/* ---- Dropdown panel ---- */
.altus-account__panel {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 3px solid #c2410c;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    padding: 16px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, visibility .18s, transform .18s;
}
.altus-account:hover .altus-account__panel,
.altus-account.is-open .altus-account__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Driehoekje */
.altus-account__panel::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 18px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #c2410c;
}

.altus-account__greeting {
    font-size: 13px;
    font-weight: 700;
    color: #24337a;
    margin: 0 0 10px;
}
.altus-account__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.altus-account__menu li { margin: 0; }
.altus-account__menu a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}
.altus-account__menu a:hover { color: #c2410c; }
.altus-account__login-btn {
    display: block;
    background: #24337a;
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    margin-bottom: 10px;
}
.altus-account__login-btn:hover { background: #c2410c; color: #fff; }
.altus-account__register {
    font-size: 12px;
    color: #666;
    margin: 0 0 10px;
}
.altus-account__register a { color: #24337a; text-decoration: underline; }

/* ---- Winkelwagen ---- */
.altus-cart {
    display: inline-flex;
    align-items: center;
    color: #24337a;
    text-decoration: none;
    height: 42px;
    padding: 0 14px;
    gap: 6px;
    border: 2px solid #c2410c;
    border-radius: 8px;
}
.altus-cart:hover {
    color: #c2410c;
    background: rgba(194,65,12,.06);
}
.altus-cart__icon { line-height: 0; }
.altus-cart__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c2410c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0 4px;
    line-height: 1;
}

/* ---- BTW-toggle ---- */
/* Erfde de header se algemene paragraaf-lettergrootte (16px) en -regelhoogte
   (27px, bedoeld voor lopende tekst) — in dit smalle blokje liep "Excl. BTW"
   daardoor terug naar 2 regels met veel te veel ruimte ertussen. */
.btw-toggle p {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---- Mobiel ---- */
@media (max-width: 768px) {
    .altus-account__panel { right: 0; left: auto; transform: none; }
    .altus-account__panel::before { right: 12px; left: auto; }
    .altus-account__label { display: none; }
}

/* ---- Mobiele header (telefoon, tot 767px) — Sylvie, 08/10/2026 ----
   Twee blokken naast elkaar: links het logo met eronder het rijdende vrachtwagentje, rechts de BTW-schakelaar, het
   accounticoon en de winkelwagen op ÉÉN lijn. De rechterkolom (#brxe-czcxtq) en de shortcode met de icoontjes
   (#brxe-rickjl) worden daarvoor "doorzichtig" (display: contents), zodat de schakelaar, het account, de winkelwagen
   en het wagentje rechtstreeks rasterkinderen van de header-sectie (#brxe-pcfcoj) zijn. Het wagentje werd op mobiel
   tot nu toe verborgen door een oudere regel in altus-megamenu-render.php; hier staat het weer zichtbaar. */
@media (max-width: 767px) {
    #brxe-pcfcoj {
        align-items: center;
        column-gap: 6px !important;
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) auto auto;
        grid-template-rows: auto auto;
        min-height: 0 !important;
        padding: 8px 16px !important;
        row-gap: 2px !important;
    }

    #brxe-qnuadd {
        grid-column: 1;
        grid-row: 1;
        margin: 0 !important;
        min-height: 0 !important;
        width: 96px !important;
    }

    #brxe-qnuadd figure,
    #brxe-qnuadd a,
    #brxe-qnuadd img {
        height: auto !important;
        max-width: 96px !important;
        width: 96px !important;
    }

    #brxe-czcxtq,
    #brxe-czcxtq #brxe-rickjl {
        display: contents !important;
    }

    #brxe-pcfcoj .btw-toggle {
        align-items: center;
        gap: 0;
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
    }

    #brxe-pcfcoj .btw-toggle p {
        font-size: clamp(9px, 2.5vw, 11px);
    }

    #brxe-pcfcoj .btw-toggle .switch {
        margin: 0 3px;
        zoom: .85;
    }

    #brxe-pcfcoj .altus-account {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;
    }

    #brxe-pcfcoj .altus-cart {
        gap: 4px;
        grid-column: 4;
        grid-row: 1 / span 2;
        height: 36px;
        margin: 0;
        padding: 0 8px;
    }

    #brxe-pcfcoj .altus-account__trigger {
        height: 36px;
        width: 36px;
    }

    #brxe-pcfcoj .altus-icon {
        height: 22px;
        width: 22px;
    }

    #brxe-pcfcoj .altus-cart__meta {
        font-size: 10px;
        height: 18px;
        min-width: 18px;
    }

    #brxe-pcfcoj .altus-gl {
        display: inline-flex !important;
        gap: 1px;
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    #brxe-pcfcoj .altus-gl__track {
        height: 30px;
        width: 96px;
    }

    #brxe-pcfcoj .altus-gl__truck {
        height: 30px;
    }

    #brxe-pcfcoj .altus-gl__label {
        font-size: 9px;
    }
}

/* Smalle telefoons (tot 389px): alles iets compacter, zodat de rij ook op 360px past. */
@media (max-width: 389px) {
    #brxe-pcfcoj {
        column-gap: 4px !important;
        grid-template-columns: 84px minmax(0, 1fr) auto auto;
    }

    #brxe-qnuadd,
    #brxe-qnuadd figure,
    #brxe-qnuadd a,
    #brxe-qnuadd img {
        max-width: 84px !important;
        width: 84px !important;
    }

    #brxe-pcfcoj .altus-gl__track {
        width: 84px;
    }

    #brxe-pcfcoj .btw-toggle p {
        font-size: 9px;
    }

    #brxe-pcfcoj .btw-toggle .switch {
        zoom: .75;
    }

    #brxe-pcfcoj .altus-account__trigger {
        height: 32px;
        width: 32px;
    }

    #brxe-pcfcoj .altus-cart {
        height: 32px;
        padding: 0 6px;
    }

    #brxe-pcfcoj .altus-icon {
        height: 20px;
        width: 20px;
    }
}

/* Zeer smalle telefoons (tot 339px, bv. 320px breed): nog een tikje kleiner. */
@media (max-width: 339px) {
    #brxe-pcfcoj {
        grid-template-columns: 72px minmax(0, 1fr) auto auto;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #brxe-qnuadd,
    #brxe-qnuadd figure,
    #brxe-qnuadd a,
    #brxe-qnuadd img {
        max-width: 72px !important;
        width: 72px !important;
    }

    #brxe-pcfcoj .altus-gl__track {
        width: 72px;
    }

    #brxe-pcfcoj .altus-gl__label {
        font-size: 8px;
    }

    #brxe-pcfcoj .btw-toggle p {
        font-size: 8.5px;
    }

    #brxe-pcfcoj .btw-toggle .switch {
        zoom: .65;
    }

    #brxe-pcfcoj .altus-cart {
        padding: 0 5px;
    }
}

/* ---------------------------------------------------------------- 18/10/2026 --
   De header is in Bricks herschikt: de USP-balk (#brxe-whqxnc, element "Sociale
   iconen") staat nu in de bovenste sectie #brxe-zddcws, en logo, zoekveld,
   BTW-schakelaar, account en winkelwagen staan in een nieuwe sectie #brxe-pcfcoj.
   Alle ID's hierboven zijn daarom omgezet: zddcws → pcfcoj, geugkq → qnuadd (logo),
   bbuqio → czcxtq (BTW + account + winkelwagen), udglzz → rickjl (shortcode met de
   icoontjes). Herschik je de header opnieuw, kijk dan of deze ID's nog kloppen. */

/* Het zoekvak naast het logo (#brxe-agfvpy) niet op mobiel: daar staat het zoekveld al in de blauwe menubalk. */
@media (max-width: 767px) {
	#brxe-agfvpy {
		display: none !important;
	}
}

/* USP-balk (Sylvie 18/10/2026): op de computer alle vier op één lijn, gelijk verdeeld
   over de volle breedte van het scherm; op mobiel telkens één USP die om de 4 seconden
   wisselt. */
#brxe-whqxnc {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	list-style: none;
	margin: 0;
	padding: 0 24px; /* ruimte boven/onder: padding van de Sectie (#brxe-zddcws) in Bricks */
	width: 100%;
}

#brxe-whqxnc li {
	align-items: center;
	display: flex;
	flex: 0 0 auto; /* Bricks geeft elk item een gelijke breedte (flex: 1); dan staat de tekst links in zijn vak i.p.v. gelijk verdeeld */
	gap: 8px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	#brxe-whqxnc {
		display: block;
		height: 34px;
		overflow: hidden;
		padding: 0 16px;
		position: relative;
	}

	#brxe-whqxnc li {
		animation: altus-usp-wissel 16s infinite;
		font-size: 14px;
		inset: 0;
		justify-content: center;
		opacity: 0;
		position: absolute;
	}

	#brxe-whqxnc li:nth-child(2) { animation-delay: 4s; }
	#brxe-whqxnc li:nth-child(3) { animation-delay: 8s; }
	#brxe-whqxnc li:nth-child(4) { animation-delay: 12s; }
}

@keyframes altus-usp-wissel {
	0%        { opacity: 0; transform: translateY(8px); }
	3%, 22%   { opacity: 1; transform: none; }
	25%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Wie minder beweging wil (instelling van het toestel): enkel de eerste USP, zonder wisselen. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	#brxe-whqxnc li { animation: none; }
	#brxe-whqxnc li:first-child { opacity: 1; }
}


/* --- altus-product --- */
/**
 * Altus — opmaak productpagina (Bricks)
 *
 * Waarden nagemeten op de live-pagina, zodat de Bricks-versie ermee overeenkomt.
 * De prijsmarkup komt uit de mu-plugin altus-prijsweergave.php; de klassen
 * .adviesprijs / .altusprijs / .excluded-vat worden daar gezet.
 */

:root {
	--altus-navy: #223a80;
	--altus-oranje: #c2410c;
	--altus-groen: #5ac061;
	--altus-grijs: #f2f4f8;
}

/* ---------------------------------------------------------------- titel */

.brxe-product-title {
	color: var(--altus-navy);
	font-size: 36px;
	/* Lokaal zijn enkel Roboto 400 en 500 geladen; bij 600 maakt de browser
	   zelf een vetter gewicht aan, wat logger oogt dan de echte snede.
	   500 is een bestaande snede en komt daardoor dichter bij live. */
	font-weight: 500;
	line-height: 1;
	margin: 0;
}

/* ---------------------------------------------------------------- prijs */

.adviesprijs {
	color: rgba(36, 52, 122, 0.5);
	font-size: 16px;
}

.altusprijs {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 600;
}

/* "Onze prijs" — het bedrag zelf groot en oranje */
.altusprijs ins {
	color: var(--altus-oranje);
	font-size: 25px;
	font-weight: 700;
	text-decoration: none;
}

.excluded-vat {
	font-size: 14px;
	font-weight: 400;
}

/* Archiefkaarten (Bricks-productenelement): "excl. BTW" / "incl. BTW" staat altijd op een eigen regel, onder het bedrag — bij zowel de adviesprijs als
   "Onze prijs". Zo breekt de tekst nooit midden in "excl. | BTW" af en hebben alle kaarten dezelfde opbouw (Sylvie, 08/10/2026). */
.brxe-woocommerce-products .price-category-page .excluded-vat {
	display: block;
}

/* Archiefkaarten: de prijzen staan in een rij altijd OP ÉÉN LIJN (Sylvie, 08/10/2026).
   Sommige kaarten hebben een extra blok onder de titel ("Voordelige Tweedekans", "Met gratis …"), andere niet; daardoor
   schoof de prijs op die kaarten naar beneden. Opbouw van elke kaart: labels, afbeelding, titel, [extra blok], prijs, koop,
   (leeg). Elke kaart gebruikt daarom dezelfde 7 rijen van het raster (subgrid): de rij "extra blok" is zo hoog als het
   hoogste extra blok in die rij van kaarten, ook bij kaarten die er geen hebben. Alleen binnen het Bricks-productenelement (.brxe-woocommerce-products), dus voor elk overzicht-sjabloon maar NIET
   voor de aanbevolen producten in het winkelwagentje (gewone WooCommerce-kaarten met een andere opbouw). Past een browser geen subgrid toe, dan valt het terug op gewoon onder elkaar. */
/* De afstand tussen twee rijen kaarten (48px, overal gelijk) loopt via de kaart zelf: met een rij-afstand op het raster zou elke
   gedeelde rij binnen een kaart er extra ruimte bij krijgen. */
.brxe-woocommerce-products ul.products:has(.price-category-page) {
	row-gap: 0 !important; /* !important: de rij-afstand staat als eigen regel per element in het Bricks-sjabloon */
}

.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) {
	display: grid;
	grid-row: span 7;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	margin-bottom: 48px;
	row-gap: 0;
}

.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > * {
	grid-column: 1;
}

.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(1) { grid-row: 1; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(2) { grid-row: 2; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(3) { grid-row: 3; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :nth-child(4):not(:has(.price-category-page)) { grid-row: 4; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) { grid-row: 5; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) + * { grid-row: 6; }
.brxe-woocommerce-products ul.products > li.product:has(.price-category-page) > :has(.price-category-page) + * + * { grid-row: 7; }

/* -------------------------------------------------------- winkelwagenknop */

.brxe-product-add-to-cart .single_add_to_cart_button,
.altus-onderdelen .single_add_to_cart_button {
	background-color: var(--altus-groen);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	border: 0;
	border-radius: 6px;
	padding: 13px 31px;
	text-transform: capitalize;
	transition: background-color 0.15s ease;
}

.brxe-product-add-to-cart .single_add_to_cart_button:hover {
	background-color: #4aad51;
}

/* aantal-veld en knop op één regel naast elkaar */
.brxe-product-add-to-cart form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

/* de levertijdmelding van de plugin staat binnen hetzelfde formulier:
   die krijgt een eigen regel bovenaan in plaats van mee te schuiven */
.brxe-product-add-to-cart form.cart .pi-edd {
	flex: 1 0 100%;
	margin: 0 0 10px;
	order: -1;
}

/* maat en gewicht gelijk aan live (15.4px / 700) */
.pi-edd,
.pi-edd * {
	font-size: 15.4px;
	font-weight: 700;
	line-height: 1.4;
}

/* Eén omkaderd vakje met afgeronde hoeken — identiek aan het aantalveld bij
   de cross-sells: minknop 24px, invoer 38px, plusknop 24px, alles 38px hoog,
   met dunne scheidingslijntjes in plaats van drie losse kadertjes. */
.brxe-product-add-to-cart form.cart .quantity,
.altus-onderdelen form.cart .quantity {
	align-items: center;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	display: flex;
	/* Vaste 88px — even breed als het vakje bij de cross-sells. Met een
	   automatische breedte werd het vakje 200px door de eigen maat die de
	   browser aan een getalveld geeft. */
	flex: 0 0 88px;
	/* 51px = de hoogte van de keuzelijst met alternatieven eronder; de
	   winkelwagenknop ernaast en de knoppen in de alternatievenloop staan op
	   dezelfde maat. Bij de cross-sells blijft het vakje 38px, want daar is
	   de knop ook 38px. */
	height: 51px;
	margin: 0;
	overflow: hidden;
	width: 88px;
}

.brxe-product-add-to-cart form.cart .quantity .qty,
.altus-onderdelen form.cart .quantity .qty {
	-moz-appearance: textfield;
	background: #fff;
	border: 0;
	/* De scheidingslijntjes staan op de invoer zelf, zodat ze kloppen
	   ongeacht in welke volgorde de plus- en minknop weergegeven worden. */
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	color: #222;
	/* Zonder vaste flex-basis groeit het veld mee met zijn eigen
	   standaardbreedte en werd het vakje 200px breed. */
	flex: 0 0 38px;
	font-size: 14px;
	height: 100%;
	padding: 0;
	text-align: center;
	width: 38px;
}

.brxe-product-add-to-cart form.cart .quantity .qty::-webkit-outer-spin-button,
.brxe-product-add-to-cart form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.brxe-product-add-to-cart form.cart .quantity .minus,
.brxe-product-add-to-cart form.cart .quantity .plus,
.brxe-product-add-to-cart form.cart .quantity .action,
.altus-onderdelen form.cart .quantity .minus,
.altus-onderdelen form.cart .quantity .plus,
.altus-onderdelen form.cart .quantity .action {
	align-items: center;
	background: #fff;
	border: 0;
	color: var(--altus-navy);
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 24px;
}

.brxe-product-add-to-cart form.cart .quantity .minus:hover,
.brxe-product-add-to-cart form.cart .quantity .plus:hover,
.brxe-product-add-to-cart form.cart .quantity .action:hover {
	background: #f4f6fb;
}

/* De tekens zijn hier SVG-lijntjes; op 24px zouden ze het vakje vullen. */
.brxe-product-add-to-cart form.cart .quantity .action svg {
	height: 12px;
	width: 12px;
}

/* Vult de rest van de kolom naast het aantalveld, zodat de knop rechts
   gelijk uitkomt met de keuzelijst eronder. */
.brxe-product-add-to-cart .single_add_to_cart_button {
	/* basis 180px zodat hij naast het aantal past; groeit daarna door tot
	   de rand van de kolom. Met een grote basis brak flexbox de regel af. */
	flex: 1 1 180px;
	height: 51px;
	/* WooCommerce zet hier een marge van 10px boven; die duwde de knop 5px
	   lager dan het aantalveld ernaast. */
	margin-top: 0;
	white-space: nowrap;
}

/* Iets specifieker: iets anders zette het gewicht terug op 400, waardoor deze
   knop lichter oogde dan die in de alternatieven-rij. */
.brxe-product-add-to-cart form.cart .single_add_to_cart_button {
	font-weight: 600;
}

/* ------------------------------------------------------------ USP-lijst */

.altus-usp ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.altus-usp li {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	padding-left: 30px;
	position: relative;
	margin-bottom: 5px;
}

/* Icoontjes exact zoals live: twee vinkjes, een spaarvarken en een blaadje,
   allemaal in #1EBF27. Font Awesome 6 komt met Bricks mee. */
.altus-usp li::before {
	/* Bricks noemt de solid-variant "Font Awesome 6 Solid", niet de
	   standaardnaam "Font Awesome 6 Free" — anders krijg je lege blokjes. */
	font-family: "Font Awesome 6 Solid";
	font-weight: 900;
	color: #1ebf27;
	font-size: 18px;
	position: absolute;
	left: 0;
	top: 1px;
}

.altus-usp li:nth-child(1)::before,
.altus-usp li:nth-child(2)::before { content: "\f00c"; }   /* fa-check */
.altus-usp li:nth-child(3)::before { content: "\f4d3"; }   /* fa-piggy-bank */
.altus-usp li:nth-child(4)::before { content: "\f06c"; }   /* fa-leaf */

/* ------------------------------------------------- specificatiekaart ---- */

.altus-speckaart {
	border: 2px solid var(--altus-navy);
	border-radius: 8px;
	padding: 18px 20px 8px;
	background: #fff;
}

.altus-speckaart h3 {
	color: var(--altus-navy);
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 12px;
}

/* de attributentabel van WooCommerce binnen de kaart */
.altus-speckaart table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.altus-speckaart th,
.altus-speckaart td {
	border: 0;
	border-bottom: 1px solid #e3e7f0;
	padding: 9px 0;
	text-align: left;
	vertical-align: top;
}

/* Label en waarde in hetzelfde lettertype en dezelfde kleur — zoals op live */
.altus-speckaart th,
.altus-speckaart td {
	color: var(--altus-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.altus-speckaart th {
	width: 58%;
}

.altus-speckaart td {
	text-align: right;
}

/* Aanklikbare waarden herkenbaar maken (bv. de rij "Soort") */
.altus-speckaart td a {
	background: var(--altus-oranje);
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	padding: 3px 9px;
	text-decoration: none;
}

.altus-speckaart td a:hover {
	background: #9a3412;
}

.altus-speckaart tr:last-child th,
.altus-speckaart tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------- contactblok */

.altus-contact {
	background: var(--altus-grijs);
	border-radius: 8px;
	padding: 16px 20px;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.altus-contact strong {
	color: var(--altus-navy);
	display: block;
	font-weight: 600;
}

.altus-contact a {
	color: var(--altus-navy);
	font-weight: 700;
	text-decoration: none;
}


/* ------------------------------------------------------------- galerij
   Bricks' eigen WooCommerce-CSS (.woocommerce-product-gallery__image img) heeft
   dezelfde specificiteit als de regel hieronder (1 klasse + 1 tag) én zet ook nog
   aspect-ratio:1 + object-fit:cover — bij gelijke specificiteit wint de regel die
   het laatst geladen wordt, wat afhankelijk bleek van de laadvolgorde en de foto
   daardoor soms op haar volle, ongekrompen formaat toonde i.p.v. netjes te passen
   in de (door WooCommerce's eigen flexslider-script berekende) breedte van de
   galerij-slide. !important sluit die twijfel volledig uit.
   17/10/2026: enkel de productfoto zelf (de img in de link "a"), NIET:
   - img.zoomImg, de vergrote kopie van jQuery Zoom: die moet haar eigen volle formaat
     houden, anders vergroot het inzoomen bij hover niets (Sylvie);
   - het "Altrex Deal"/"Xtra Deal"-label (.altus-extradeal-label img, 84px in
     altus-koopjeshoek-band.css): met een te brede selector werd dat label over de hele
     foto uitgerekt (Sylvie: "dat mag niet!"). */
.brxe-product-gallery .woocommerce-product-gallery__image > a > img {
	aspect-ratio: auto !important;
	height: auto !important;
	object-fit: contain !important;
	width: 100% !important;
}

/* ------------------------------------------------------------- upsells */

.altus-upsells h3,
.altus-upsells .upsells > h2 {
	color: var(--altus-navy);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 16px;
}

/* -------------------------------------------- "Elders goedkoper gezien?" */

/* Live heeft hier geen kader: enkel een icoontje met tekst in navy 16px/400.
   Het opengeklapte formulier krijgt wel een kader (zie hieronder). */
.altus-elders {
	margin-top: 4px;
}

.altus-elders .accordion-title-wrapper {
	cursor: pointer;
	gap: 10px;
	justify-content: flex-start;
	padding: 4px 0;
}

.altus-elders .accordion-title-wrapper h3 {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 400;
	margin: 0;
}

/* spaarvarken vóór de tekst, zoals live */
/* 17/10/2026: het spaarvarken staat nu op de rij zelf, zodat de h3::before vrij is voor
   "Wij gaan voor de laagste prijs." in het oranje en vet, vóór "Elders goedkoper gezien?" (Sylvie). */
.altus-elders .accordion-title-wrapper::before {
	color: var(--altus-navy);
	content: "\f4d3";
	font-family: "Font Awesome 6 Solid";
	font-size: 16px;
	font-weight: 900;
}

.altus-elders .accordion-title-wrapper h3::before {
	color: var(--altus-oranje, #c2410c);
	content: "Wij gaan voor de laagste prijs. ";
	font-weight: 700;
}

.altus-elders .accordion-title-wrapper .brxe-icon {
	color: var(--altus-navy);
	font-size: 13px;
	margin-left: auto;
}

.altus-elders .accordion-content-wrapper {
	border: 2px solid var(--altus-navy);
	border-radius: 6px;
	margin-top: 8px;
	padding: 16px;
}

/* --------------------------------------------------------- broodkruimel */

/* Nagemeten op live (.woocommerce-breadcrumb): 11px, gewicht 500,
   met maar ~3px lucht rond het scheidingsteken. */
.brxe-woocommerce-breadcrumbs,
.brxe-woocommerce-breadcrumbs a,
.brxe-woocommerce-breadcrumbs .separator {
	color: var(--altus-navy);
	font-size: 11px;
	font-weight: 500;
}

/* Bricks' eigen separatorGap-instelling kwam op 13px uit; live heeft ~3px. */
.brxe-woocommerce-breadcrumbs .separator {
	font-size: 8px;
	font-weight: 400;
	margin: 0 3px !important;
	opacity: 0.55;
}

.brxe-woocommerce-breadcrumbs a:hover {
	text-decoration: underline;
}

/* --------------------------------------------- tekening in de speckaart */

.altus-spectekening {
	margin: 0 0 14px;
}

.altus-spectekening img {
	width: 100%;
	height: auto;
}

.altus-spectekening figcaption {
	color: var(--altus-navy);
	font-size: 11px;
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	margin-top: 6px;
}

/* ------------------------------------------------- maatkeuze (Iconic) --- */

/* Waarden nagemeten op live:
   niet gekozen  achtergrond #fafeff, rand 2px rgba(34,58,128,.1)
   gekozen       achtergrond #fbeee6, rand 2px #c2410c, prijs vet
   scheidingslijn #e1e1e1 */

/* Raster in plaats van flex: zo blijven alle knoppen even breed en rekt een
   laatste, alleenstaande knop niet uit over de volle rij. */
.iconic-wlv-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* De omhullende blokken van Iconic beperkten de lijst tot 336px; met de volle
   kolombreedte passen er twee knoppen naast elkaar. */
.iconic-wlv-variations,
.iconic-wlv-variations tbody,
.iconic-wlv-variations tr,
.iconic-wlv-variations td,
.iconic-wlv-attribute {
	display: block;
	width: 100%;
}

.iconic-wlv-terms__term {
	margin: 0;
	min-width: 0;
}

.iconic-wlv-terms__term-content {
	background: #fafeff;
	border: 2px solid rgba(34, 58, 128, 0.1);
	border-radius: 6px;
	color: var(--altus-navy);
	display: block;
	/* 15px i.p.v. de 16px van live: de langste maatnaam is 183px breed en
	   past dan met 8px opvulling op één regel binnen de knop van 197px. */
	font-size: 15px;
	line-height: 1.35;
	padding: 8px;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	/* Iconic zet hier nowrap; lange maatnamen werden daardoor afgekapt
	   ("3x10 sporten - 6.64 mete"). Laten afbreken over twee regels. */
	white-space: normal;
	overflow-wrap: break-word;
}

.iconic-wlv-terms__term-content * {
	white-space: normal;
}

.iconic-wlv-terms__term-content:hover {
	border-color: rgba(194, 65, 12, 0.5);
}

.iconic-wlv-terms__term--current .iconic-wlv-terms__term-content {
	background: #fbeee6;
	border-color: var(--altus-oranje);
}

.iconic-lv-term-button-price-line {
	border: 0;
	border-top: 1px solid #e1e1e1;
	margin: 6px 0;
}

.iconic-lv-term-button-price {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 400;
}

.iconic-wlv-terms__term--current .iconic-lv-term-button-price {
	font-weight: 700;
}

/* --------------------------------------------- alternatieven onderaan --- */

.altus-alternatieven-loop__titel {
	color: var(--altus-navy);
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 20px;
}

/* Het SALE-label wordt op de héle site verborgen (afspraak 25-08-2026).
   De id hieronder is het interne volgnummer van BeRocket in de markup —
   NIET het post-ID van het label; onder post 61728 staat in de database
   "Hymer - logo". Wijzigen de labels, controleer dan opnieuw welke klasse
   de tekst "SALE" draagt. */
.berocket_alabel_id_61728 {
	display: none !important;
}

/* Eén rij die horizontaal schuift, met de pijlen ernaast. */
.altus-alternatieven-loop__rij {
	align-items: center;
	display: flex;
	gap: 12px;
}

.altus-loop-pijl {
	align-items: center;
	background: #fff;
	border: 2px solid var(--altus-oranje);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	width: 44px;
}

/* Pijlpunt uit twee randen: altijd perfect gecentreerd, ongeacht lettertype. */
.altus-loop-pijl__punt {
	border-right: 2px solid var(--altus-oranje);
	border-top: 2px solid var(--altus-oranje);
	display: block;
	height: 10px;
	width: 10px;
}

.altus-loop-pijl--vorige .altus-loop-pijl__punt {
	transform: translateX(2px) rotate(-135deg);
}

.altus-loop-pijl--volgende .altus-loop-pijl__punt {
	transform: translateX(-2px) rotate(45deg);
}

.altus-loop-pijl:hover:not(:disabled) {
	background: #fdf1e9;
}

.altus-loop-pijl:disabled {
	cursor: default;
	opacity: 0.3;
}

.altus-alternatieven-loop__spoor {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 8px;
	/* Bewust géén scroll-snap: het klikte elke tussenstap van de animatie
	   terug naar nul, waardoor de pijlen niets leken te doen. */
	-webkit-overflow-scrolling: touch;
	/* Firefox */
	scrollbar-color: var(--altus-oranje) rgba(34, 58, 128, 0.15);
	scrollbar-width: thin;
}

/* Schuifbalk in de huisstijl: navy baan, oranje greep. */
.altus-alternatieven-loop__spoor::-webkit-scrollbar {
	height: 10px;
}

.altus-alternatieven-loop__spoor::-webkit-scrollbar-track {
	background: rgba(34, 58, 128, 0.12);
	border-radius: 5px;
}

.altus-alternatieven-loop__spoor::-webkit-scrollbar-thumb {
	background: var(--altus-oranje);
	border-radius: 5px;
}

.altus-alternatieven-loop__spoor::-webkit-scrollbar-thumb:hover {
	background: #9a3412;
}

.altus-alternatieven-loop ul.products {
	align-items: stretch;
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
}

.altus-alternatieven-loop ul.products::before,
.altus-alternatieven-loop ul.products::after {
	content: none;
}

/* De kaarten zijn dezelfde als in het archief (Bricks-element, zie
   mu-plugins/altus-alternatieven-loop.php); hier de breedte in de rij en de
   uitlijning: de kaarten zijn even hoog, de titel vult de ruimte op, en prijs,
   levertermijn en knoppen zakken naar onderen. Zo staan ze bij alle kaarten
   op dezelfde lijn, ook bij een titel van 2 of 3 regels. */
/* Bricks zet op de kaart height: 100% (wordt hier "auto", dus niet gelijk
   getrokken) en het productpaginathema flex-wrap: wrap; beide corrigeren. */
.single-product .altus-alternatieven-loop li.product {
	align-self: stretch;
	display: flex;
	flex: 0 0 260px;
	flex-direction: column;
	flex-wrap: nowrap;
	float: none;
	height: auto;
	margin: 0;
	width: 260px;
}

.altus-alternatieven-loop li.product > h5 {
	flex: 1 1 auto;
	font-weight: 700;
}

/* Aantal + winkelwagen boven, "Bekijk dit product" eronder. Een uitverkocht
   product heeft geen aantalveld en winkelwagenknop; die ruimte blijft toch
   gereserveerd, zodat prijs en knoppen bij alle kaarten gelijk staan. */
.altus-alternatieven-loop .altus-steiger-koop__rij {
	align-items: flex-start;
	flex-direction: column;
}

.altus-alternatieven-loop .altus-steiger-koop__mand {
	min-height: 38px;
}

/* Knop van de cross-sells-kaarten in de rechterrail. */
.altus-crosssells li.product .button {
	background-color: var(--altus-groen);
	border: 0;
	border-radius: 6px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 600;
	height: 51px;
	/* De tekst valt hier vaak over twee regels; met de standaard regelafstand
	   vulde ze de knop helemaal. Krapper zetten geeft lucht boven en onder. */
	line-height: 1.15;
	margin-top: 12px;
	padding: 0 20px;
	text-align: center;
	text-transform: capitalize;
	transition: background-color 0.15s ease;
}

.altus-crosssells li.product .button:hover {
	background-color: #4aad51;
}

/* In de smalle rechterkolom enkel een winkelwagen-icoon in plaats van de
   tekst: dezelfde knop, maar compact. De tekst blijft in de HTML staan en
   wordt met font-size: 0 verborgen, zodat schermlezers ze nog voorlezen. */
.altus-crosssells li.product .button {
	align-self: flex-start;
	flex: 0 0 auto;
	font-size: 0;
	height: 38px;
	margin-top: 0;
	/* Bricks legt op knoppen een min-height van 40px; die zou de knop hoger
	   maken dan het aantalveld ernaast. */
	min-height: 38px;
	padding: 0;
	width: 38px;
}

.altus-crosssells li.product .button::before {
	content: "\f07a";
	font-family: "Font Awesome 6 Solid";
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
}

/* ----------------------------------------------------- sterbeoordeling --- */

/* Voor het beoordelingselement staat de kleur als instelling op het element. */
.brxe-product-rating {
	margin: -8px 0 0;
}

.brxe-product-rating .woocommerce-review-link {
	color: var(--altus-navy);
	font-size: 14px;
	text-decoration: none;
}

/* De specificatietabel mag niet buiten haar kader lopen bij smalle kolommen. */
.altus-speckaart table {
	table-layout: fixed;
}

.altus-speckaart th,
.altus-speckaart td {
	/* break-word i.p.v. anywhere: anders splitste "8711563100954" middenin. */
	overflow-wrap: break-word;
	word-break: normal;
}

/* De badge bij "Soort" stak buiten het kader; nu breekt hij mee af. */
.altus-speckaart td a {
	max-width: 100%;
	white-space: normal;
}

/* Enkel tussen 992 en 1250px staat de kaart nog in de smalle rechterkolom
   (~258px) naast de rest; daar past label en waarde niet naast elkaar en zet
   ik het label erboven. Vanaf 991px naar beneden klapt de pagina naar één
   kolom en staat de kaart over de volle breedte — op tablet én telefoon
   passen ze dus gewoon naast elkaar. */
@media (min-width: 992px) and (max-width: 1250px) {
	.altus-speckaart th,
	.altus-speckaart td {
		display: block;
		width: auto;
	}

	.altus-speckaart th {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.altus-speckaart td {
		padding-top: 2px;
		text-align: left;
	}
}

/* ------------------------------------------------------ betaalmethodes --- */

.altus-betaalmethodes {
	align-items: center;
	border: 1px solid #e3e7f0;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	padding: 14px 18px;
}

.altus-betaalmethodes--zonder-kader {
	border: 0;
	padding: 0;
}

.altus-betaalmethodes img {
	display: block;
	height: 26px;
	width: auto;
}

/* -------------------------------------------------------- cross-sells --- */

.altus-crosssells__titel {
	color: var(--altus-navy);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 16px;
}

.altus-crosssells ul.products {
	display: grid;
	/* minmax(0, …) i.p.v. 1fr: anders mag de inhoud breder worden dan de
	   kolom en loopt ze buiten de rail op een smaller scherm. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.altus-crosssells ul.products::before,
.altus-crosssells ul.products::after {
	content: none;
}

.altus-crosssells li.product {
	display: flex;
	flex-direction: column;
	float: none;
	margin: 0;
	width: auto;
}

.altus-crosssells li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.altus-crosssells li.product img {
	height: auto;
	width: 100%;
}

.altus-crosssells .woocommerce-loop-product__title {
	color: var(--altus-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 10px 0 6px;
}

/* Géén vaste hoogte: bij een lange adviesprijs liep de tekst dan over de
   titel heen. De knoppen lijnen uit doordat de kaarten in de rij even hoog
   zijn en de knop met margin-top: auto onderaan de kaart geduwd wordt. */
.altus-crosssells li.product .price {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: auto;
}

/* De link vult de resterende hoogte van de kaart; samen met margin-top: auto
   op de prijs komen de prijzen van beide kaarten in een rij zo altijd op
   dezelfde lijn, ongeacht of er sterren staan of hoe lang de titel is. */
.altus-crosssells li.product > a.woocommerce-LoopProduct-link {
	flex: 1 1 auto;
}

.altus-crosssells .star-rating {
	color: #d8dce8;
}

.altus-crosssells .star-rating span::before {
	color: var(--altus-oranje);
}

/* -------------------------------------------------------------- tabs --- */

/* Live: actieve tab oranje met oranje onderlijn, rest navy, dunne lijn
   onder de hele rij. WooCommerce zet zelf de klasse .active. */
.brxe-product-tabs ul.tabs {
	border-bottom: 0;
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.brxe-product-tabs ul.tabs::before,
.brxe-product-tabs ul.tabs::after {
	content: none;
}

.brxe-product-tabs ul.tabs li {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin: 0;
	padding: 0 0 10px;
}

.brxe-product-tabs ul.tabs li a {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 500;
	padding: 0;
	text-decoration: none;
}

.brxe-product-tabs ul.tabs li.active {
	border-bottom-color: var(--altus-oranje);
}

.brxe-product-tabs ul.tabs li.active a {
	color: var(--altus-oranje);
	font-weight: 600;
}

.brxe-product-tabs ul.tabs li:hover a {
	color: var(--altus-oranje);
}

/* Aantalveld naast de winkelwagenknop in het cross-sells-blok.
   Maten nagemeten op live: minknop 24px, veld 38px, plusknop 24px, alles
   38px hoog, met de icoonknop er direct naast. */

.altus-loop-koop {
	align-items: center;
	display: flex;
	gap: 8px;
	/* Duwt de rij naar de onderkant van de kaart. De kaarten in één rij zijn
	   even hoog, dus staan de knoppen zo naast elkaar op dezelfde lijn. */
	margin-top: auto;
	padding-top: 12px;
}

.altus-aantal {
	align-items: center;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	display: flex;
	height: 38px;
	overflow: hidden;
}

.altus-aantal__knop {
	align-items: center;
	background: #fff;
	border: 0;
	color: var(--altus-navy);
	cursor: pointer;
	/* flex in plaats van de standaard knop-uitlijning: zo staat het teken
	   zowel horizontaal als verticaal precies in het midden. */
	display: flex;
	font-size: 15px;
	height: 100%;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 24px;
}

.altus-aantal__knop:hover {
	background: #f4f6fb;
}

.altus-aantal__veld {
	-moz-appearance: textfield;
	background: #fff;
	border: 0;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	color: #222;
	font-size: 14px;
	height: 100%;
	padding: 0;
	text-align: center;
	width: 38px;
}

/* De pijltjes van het getalveld weg: we hebben eigen − en + knoppen. */
.altus-aantal__veld::-webkit-outer-spin-button,
.altus-aantal__veld::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.altus-aantal__veld:focus {
	outline: 2px solid var(--altus-oranje);
	outline-offset: -2px;
}

/* Geen grijze lijnen rond het tabbladenblok: WooCommerce zet standaard een
   rand boven en onder de hele wrapper. Enkel de oranje streep onder het
   actieve tabblad blijft staan. */
.brxe-product-tabs .woocommerce-tabs,
.brxe-product-tabs .wc-tabs-wrapper {
	border-bottom: 0;
	border-top: 0;
}

/* ------------------------------------------------- mobiel: maatkeuze --- */

/* Op een telefoon paste er maar één maatknop naast elkaar (de knoppen vragen
   minstens 160px, de kolom is er 303px breed). Met vast twee kolommen en een
   iets kleinere letter halveert de hoogte van het maatblok. */
@media (max-width: 767px) {
	.iconic-wlv-terms {
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.iconic-wlv-terms__term-content {
		font-size: 14px;
		padding: 8px;
	}

	.iconic-lv-term-button-price {
		font-size: 14px;
	}
}

/* ------------------------------------------------- mobiel: koopbalk --- */

.altus-koopbalk {
	align-items: center;
	background: #fff;
	border-top: 1px solid #e3e7f0;
	bottom: 0;
	box-shadow: 0 -2px 12px rgba(34, 58, 128, 0.12);
	display: none;
	gap: 16px;
	/* Prijs en knop staan samen gecentreerd; het hoekje rechts blijft zo vrij
	   voor de knop "terug naar boven" van Bricks. */
	justify-content: center;
	left: 0;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	position: fixed;
	right: 0;
	/* Boven de pagina-inhoud, maar onder eventuele meldingen of pop-ups. */
	z-index: 90;
}

@media (max-width: 767px) {
	.altus-koopbalk[data-zichtbaar="ja"] {
		display: flex;
	}

	/* Zodat de balk de laatste regels van de pagina niet afdekt. */
	body.altus-koopbalk-actief {
		padding-bottom: 74px;
	}
}

/* Bedrag en BTW-label onder elkaar: zo blijft de prijs binnen de linkerhelft
   en botst ze niet met de knop die midden in de balk staat. */
.altus-koopbalk__prijs {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.altus-koopbalk__bedrag {
	color: var(--altus-oranje);
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.altus-koopbalk__btw {
	color: #6a7290;
	font-size: 12px;
	font-weight: 400;
}

.altus-koopbalk__knop {
	align-items: center;
	background: var(--altus-groen);
	border-radius: 6px;
	color: #fff;
	display: flex;
	flex: 0 1 auto;
	font-size: 16px;
	font-weight: 600;
	height: 46px;
	justify-content: center;
	padding: 0 22px;
	text-decoration: none;
	white-space: nowrap;
}

.altus-koopbalk__knop:hover,
.altus-koopbalk__knop:focus {
	background: #4aad51;
	color: #fff;
}

/* In de koopbalk is de plaats beperkt: enkel het winkelwagen-icoon in plaats
   van de tekst. De tekst blijft in de HTML staan (font-size: 0) zodat
   schermlezers ze nog voorlezen. */
.altus-koopbalk__knop {
	font-size: 0;
	padding: 0;
	width: 56px;
}

.altus-koopbalk__knop::before {
	content: "\f07a";
	font-family: "Font Awesome 6 Solid";
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

/* --------------------------------------- mobiel: carrousel + tabtekst --- */

@media (max-width: 767px) {
	/* De pijlen namen samen met de tussenruimte 112px van de 305px in,
	   waardoor er van een kaart van 260px maar 193px zichtbaar was. Kleinere
	   pijlen, en de kaart precies zo breed als het spoor: één kaart per keer,
	   volledig in beeld. */
	.altus-alternatieven-loop__rij {
		gap: 8px;
	}

	.altus-loop-pijl {
		flex: 0 0 32px;
		height: 32px;
		width: 32px;
	}

	.altus-alternatieven-loop ul.products {
		gap: 16px;
		width: 100%;
	}

	.single-product .altus-alternatieven-loop li.product {
		flex: 0 0 100%;
		width: 100%;
	}

	/* De koppen in de tabbladen komen uit de productomschrijving en stonden
	   op de maat van een breed scherm (34 en 29px). */
	.brxe-product-tabs .woocommerce-Tabs-panel h1,
	.brxe-product-tabs .woocommerce-Tabs-panel h2 {
		font-size: 22px;
		line-height: 1.3;
	}

	.brxe-product-tabs .woocommerce-Tabs-panel h3,
	.brxe-product-tabs .woocommerce-Tabs-panel h4 {
		font-size: 18px;
		line-height: 1.35;
	}

	.brxe-product-tabs .woocommerce-Tabs-panel p,
	.brxe-product-tabs .woocommerce-Tabs-panel li {
		font-size: 15px;
		line-height: 1.6;
	}
}



/* Op tablet staat de rechterrail over de volle breedte (713px). Met twee
   kolommen worden de cross-sell-kaarten dan 349px breed met afbeeldingen van
   436px hoog — veel te groot voor een aanvullingsblok. Vier op een rij houdt
   ze klein. Op een telefoon blijven het er twee. */
@media (min-width: 768px) and (max-width: 991px) {
	.altus-crosssells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------ gebruiksbadge --- */

/* Naast het merklogo: geeft aan of het product voor particulier of voor
   professioneel gebruik bedoeld is. Op live is de afbeelding 375×82; hier bewust kleiner getoond (170 px). */
.altus-gebruik-badge img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 170px;
}

@media (max-width: 767px) {
	.altus-gebruik-badge img {
		width: 150px;
	}
}

/* ---------------------------------------------------------- terug-link --- */

/* Rechts op de broodkruimelregel, in dezelfde maat en kleur als de kruimels.
   Het pijltje links ervan komt uit CSS, zoals het scheidingsteken tussen de
   kruimels. */
.altus-terug-link {
	color: var(--altus-navy);
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.altus-terug-link::before {
	content: "‹";
	margin-right: 5px;
}

.altus-terug-link:hover {
	color: var(--altus-oranje);
}

/* De shortcode-houder van Bricks neemt de resterende breedte van de rij in;
   zonder deze regel plakt de link tegen de broodkruimel in plaats van rechts. */
.altus-terug-houder {
	text-align: right;
}

@media (max-width: 767px) {
	.altus-terug-houder {
		text-align: left;
	}
}

/* De broodkruimel is sinds de terug-link een flex-item in dezelfde rij en
   kromp daardoor mee, waardoor de kruimels over twee regels vielen terwijl er
   nog ruimte was. Ze neemt nu de vrije ruimte in; de link houdt zijn eigen
   breedte en blijft rechts staan. */
#brxe-pbcon1 > .brxe-woocommerce-breadcrumbs {
	flex: 1 1 auto;
	min-width: 0;
}

/* Bricks geeft een shortcode-element `width: 100%`; als flex-item eiste de
   houder daarmee de hele rij op en bleef er voor de kruimels niets over. */
#brxe-pbcon1 > .altus-terug-houder {
	flex: 0 0 auto;
	width: auto;
}

/* ------------------------------------------ onderdelen (samengesteld) --- */

/* De onderdelenlijst van een samengesteld product, in de rechterrail (330px).
   Zonder opmaak zette de plugin naam, aantal en prijs naast elkaar: samen
   472px in een kolom van 330, dus alles brak af en elk onderdeel werd 260px
   hoog. Live zet ze onder elkaar; dat doen we hier ook. */

.altus-onderdelen h3 {
	color: var(--altus-navy);
	font-size: 18px;
	font-weight: 500;
	margin: 0;
}

.altus-onderdelen .wooco_component {
	border-bottom: 1px solid #eef0f5;
	padding: 12px 0;
}

.altus-onderdelen .wooco_component:last-child {
	border-bottom: 0;
}

/* De naam van het ónderdeel ("Opbouwframe 135-28-7 sport RS3") is de interne
   benaming; live toont enkel de productnaam eronder. */
.altus-onderdelen .wooco_component_name {
	display: none;
}

.altus-onderdelen .wooco_component_product {
	/* align-items: flex-start is hier de kern: de plugin centreert de blokjes,
	   waardoor elk stuk op zijn eigen breedte gecentreerd werd en dus anders
	   insprong — de naam 48px, het aantal 82px, de prijzen 36px. Nu staat
	   alles op één lijn, zoals live. */
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.altus-onderdelen .wooco_component_product_name a {
	color: var(--altus-navy);
	/* 16px zoals live; 14px oogde te klein in de rail van 330px. */
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.altus-onderdelen .wooco_component_product_name a:hover {
	color: var(--altus-oranje);
}

/* Artikelnummer en EAN: enkel zichtbaar voor wie aangemeld is. */
.altus-onderdelen .extra-info {
	color: var(--altus-oranje);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/* Aantal in dit pakket: label en stepper op één regel. */
.altus-onderdelen .wooco_component_quantity_image_wrapper {
	align-items: center;
	display: flex;
	gap: 10px;
}

.altus-onderdelen .wooco_component_product_qty {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 6px;
}

/* Live toont geen miniatuur bij de onderdelen. */
.altus-onderdelen .wooco_component_product_image {
	display: none;
}

.altus-onderdelen .wooco_component_product_description {
	font-size: 14px;
	line-height: 1.4;
}

.altus-onderdelen .adviesprijs {
	color: rgba(36, 52, 122, 0.5);
	font-size: 14px;
}

/* "Onze prijs" met het bedrag groter, zoals bij de hoofdprijs op de pagina. */
.altus-onderdelen .altusprijs {
	color: var(--altus-oranje);
	font-size: 15px;
	font-weight: 700;
}

.altus-onderdelen .altusprijs ins {
	font-size: 19px;
	text-decoration: none;
}

/* Het aantalvakje bij een onderdeel in dezelfde stijl als elders op de
   pagina: één omkaderd geheel, minknop 24px, invoer 38px, plusknop 24px. */
.altus-onderdelen .wooco-qty-label {
	color: var(--altus-navy);
	font-size: 14px;
}

.altus-onderdelen .wooco-qty-input {
	align-items: center;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	display: inline-flex;
	height: 34px;
	overflow: hidden;
}

.altus-onderdelen .wooco_component_product_qty_btn {
	align-items: center;
	background: #fff;
	color: var(--altus-navy);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	height: 100%;
	justify-content: center;
	line-height: 1;
	user-select: none;
	width: 24px;
}

.altus-onderdelen .wooco_component_product_qty_btn:hover {
	background: #f4f6fb;
}

.altus-onderdelen .wooco_component_product_qty_input {
	-moz-appearance: textfield;
	background: #fff;
	border: 0;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-radius: 0;
	color: #222;
	/* Zonder vaste basis groeit het veld mee met de eigen maat die de browser
	   aan een getalveld geeft — hetzelfde als bij de andere aantalvakjes. */
	flex: 0 0 38px;
	font-size: 13px;
	height: 100%;
	padding: 0;
	text-align: center;
	width: 38px;
}

.altus-onderdelen .wooco_component_product_qty_input::-webkit-outer-spin-button,
.altus-onderdelen .wooco_component_product_qty_input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* De plugin zet zelf `flex: 0 0 40px` op de knopjes en een eigen hoogte op het
   invoerveld; die regels wonnen van de regels hierboven. Vandaar deze
   specifiekere versie met dezelfde maten als de andere aantalvakjes. */
.altus-onderdelen .wooco-qty-input .wooco_component_product_qty_btn {
	flex: 0 0 24px;
	height: 32px;
	width: 24px;
}

.altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input {
	flex: 0 0 38px;
	height: 32px;
	padding: 0;
	width: 38px;
}

/* --------------------------------- samengesteld: maatkeuze en knoppen --- */

/* Live zet drie maatknoppen naast elkaar bij samengestelde producten (128px
   per knop). Bij de simpele producten blijven het er twee, want daar zijn de
   labels veel langer ("3x10 sporten - 6.64 meter"). */
.product-type-composite .iconic-wlv-terms {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* De winkelwagenknop in het onderdelenblok kwam op 46px uit; overal elders op
   de site is hij 51px. */
.altus-onderdelen .single_add_to_cart_button {
	height: 51px;
	min-height: 51px;
}

/* Het onderdelenblok als omkaderd geheel, zoals live: blauwe rand met de kop
   erin en de toelichting erboven. */
.altus-onderdelen {
	border: 1px solid var(--altus-navy);
	border-radius: 4px;
	padding: 14px 16px 6px;
}

.altus-onderdelen__toelichting {
	color: var(--altus-navy);
	font-size: 13px;
	line-height: 1.5;
}

.altus-onderdelen__toelichting p {
	margin: 0 0 8px;
}

.altus-onderdelen__toelichting a {
	color: var(--altus-oranje);
}

/* Aantal + winkelwagenknop in de middenkolom van een samengesteld product,
   in dezelfde maten als bij een gewoon product. */
.altus-composite-koop {
	align-items: center;
	display: flex;
	gap: 14px;
}

.altus-composite-koop .quantity {
	align-items: center;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	display: flex;
	flex: 0 0 88px;
	height: 51px;
	overflow: hidden;
	width: 88px;
}

.altus-composite-koop .action {
	align-items: center;
	background: #fff;
	border: 0;
	color: var(--altus-navy);
	cursor: pointer;
	display: flex;
	flex: 0 0 24px;
	font-size: 15px;
	height: 100%;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 24px;
}

.altus-composite-koop .action:hover {
	background: #f4f6fb;
}

.altus-composite-koop .qty {
	-moz-appearance: textfield;
	background: #fff;
	border: 0;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	color: #222;
	flex: 0 0 38px;
	font-size: 14px;
	height: 100%;
	padding: 0;
	text-align: center;
	width: 38px;
}

.altus-composite-koop .qty::-webkit-outer-spin-button,
.altus-composite-koop .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.altus-composite-koop .single_add_to_cart_button {
	background-color: var(--altus-groen);
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	flex: 1 1 180px;
	font-size: 17px;
	font-weight: 600;
	height: 51px;
	min-height: 51px;
	text-transform: capitalize;
	transition: background-color 0.15s ease;
}

.altus-composite-koop .single_add_to_cart_button:hover {
	background-color: #4aad51;
}

/* ------------------------------------------------ breedte van de pagina --- */

/* De container stond op 92% breed én kreeg daarbovenop 20px opvulling. Samen
   gaf dat een strook van 71px links en rechts op een venster van 1285px —
   ruimte die van de kolommen afging. Nu één vaste marge van 24px op elke
   schermbreedte; het maximum van 1400px blijft, zodat de regels op een heel
   breed scherm niet eindeloos lang worden.
   Geldt voor beide productsjablonen: die gebruiken dezelfde element-ID's. */
#brxe-pbcon1,
#brxe-phcon1,
#brxe-prcon1 {
	/* Het maximum stond op 1400px. Op een breed scherm (Sylvie werkt op ±1950px)
	   groeide de marge daardoor mee tot bijna 300px per kant. Met 1680px komt de
	   inhoud tot waar ze gevraagd werd, en blijven de regels in de omschrijving
	   nog leesbaar kort. De container staat gecentreerd, dus links en rechts
	   krijgen automatisch dezelfde ruimte. */
	max-width: 1680px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

/* De knop onderaan de onderdelenlijst kreeg een vaste basisbreedte mee en liep
   daardoor buiten de rechterrail op een smaller scherm. */
.altus-onderdelen form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	max-width: 100%;
	min-width: 0;
}

.altus-onderdelen form.cart {
	flex-wrap: wrap;
}

/* De linkerzone staat op 71% en de rechterrail op 26%; samen 97%, waardoor er
   rechts 3% min de tussenruimte overbleef en de rail 8px vóór de containerrand
   stopte. De rail vult dat restje nu op, zodat links en rechts even breed zijn.
   Enkel vanaf 992px: daaronder staan de zones onder elkaar op volle breedte. */
/* Op een breed scherm gaat álle extra ruimte naar de productfoto: het
   koopblok in het midden (460px) en de rechterrail (330px) houden de maat die
   ze op 1440px hadden. Ze mogen wél krimpen op een smaller scherm — vandaar
   flex-shrink 1 en geen vaste breedte — maar nooit méér worden. */
@media (min-width: 992px) {
	/* flex-basis 0 (niet auto): met `auto` bepaalt de inhoud van de galerij de
	   basis, en die is enorm — dan eiste de foto de ruimte op en kromp het
	   koopblok tot 284px. Met basis 0 vragen galerij en linkerzone niets en
	   krijgen ze enkel wat er overblijft. */
	#brxe-pzonel {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	#brxe-pzoner {
		flex: 0 1 330px;
		width: 330px;
	}

	/* De foto en het koopblok houden hun onderlinge verhouding uit het
	   sjabloon (48% / 53%) en verdelen samen wat er overblijft. Eerder liet ik
	   alle extra ruimte naar de foto gaan — die werd dan 778px en dat was te
	   veel — en daarna eiste het koopblok alles op. Dit blijft in verhouding. */
}

/* De miniatuur van een onderdeel staat op live wél in beeld, rechts naast het
   aantal. Ik had ze eerder verborgen; dat was verkeerd. */
.altus-onderdelen .wooco_component_product_image {
	display: block;
	flex: 0 0 auto;
	max-width: 60px;
}

.altus-onderdelen .wooco_component_product_image img {
	display: block;
	height: auto;
	width: 100%;
}

/* "Aantal in dit pakket:" staat op live boven de stepper, niet ernaast. */
.altus-onderdelen .wooco_component_product_qty {
	align-items: flex-start;
	flex-direction: column;
	gap: 4px;
}

.altus-onderdelen .wooco_component_quantity_image_wrapper {
	/* flex-start, niet flex-end: het aantal werd anders tegen de onderkant van
	   de 88px hoge miniatuur geduwd, met een gat van ~26px boven het label.
	   Op live staan miniatuur en label bovenaan gelijk. */
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

/* De plugin geeft elk onderdeel zijn eigen inspringing mee: de productnaam
   sprong 43px in, de prijzen 36px en het aantal zelfs 87px vanaf de rand van
   het kader. Live lijnt alles op dezelfde lijn uit. */
.altus-onderdelen .wooco_component_product,
.altus-onderdelen .wooco_component_product_name,
.altus-onderdelen .wooco_component_product_info,
.altus-onderdelen .wooco_component_product_description,
.altus-onderdelen .wooco_component_quantity_image_wrapper,
.altus-onderdelen .wooco_component_product_qty {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Kleur en maat van de onderdelenprijzen gelijk aan live: "Onze prijs" staat
   daar in navy met enkel het bedrag in oranje — bij ons was de hele regel
   oranje. Ook de stepper is er wat forser en de regels staan dichter op
   elkaar. */
.altus-onderdelen .altusprijs {
	color: var(--altus-navy);
	font-size: 15px;
	font-weight: 700;
}

.altus-onderdelen .altusprijs ins {
	color: var(--altus-oranje);
	font-size: 21px;
}

.altus-onderdelen .altusprijs .excluded-vat {
	color: var(--altus-navy);
	font-size: 14px;
	font-weight: 400;
}

.altus-onderdelen .wooco_component_product {
	gap: 2px;
}

.altus-onderdelen .wooco_component_quantity_image_wrapper {
	margin: 4px 0 6px;
}

.altus-onderdelen .wooco-qty-label {
	font-size: 15px;
}

/* Stepper iets forser, zoals live. */
.altus-onderdelen .wooco-qty-input {
	height: 40px;
}

.altus-onderdelen .wooco-qty-input .wooco_component_product_qty_btn {
	flex: 0 0 30px;
	font-size: 16px;
	height: 38px;
	width: 30px;
}

.altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input {
	flex: 0 0 44px;
	font-size: 15px;
	height: 38px;
	width: 44px;
}

/* ---------------------------------------------------------------------------
   Onderdelen: exact de waarden van live, opgemeten op 27-08 door het
   dichtgeklapte tabblad daar geforceerd open te zetten. Niet meer op het oog
   bijstellen — dit zijn de echte cijfers:

     onderdeel        opvulling 10px 0
     productnaam      16px / 700 / #24337a / regelafstand 22,86px
     artikelnummer    16px / 400 / #c2410c — inline achter de naam
     "Aantal in dit pakket"  16px / 400 / #24337a
     stepper          40px hoog, invoerveld 14px
     miniatuur        88px hoog
     adviesprijs      16px / 400 / rgba(36,52,122,.5), 6px eronder
     "Onze prijs"     16px / 700 / #24337a, regelafstand 16px
     bedrag           25px / 700 / #c2410c, regelafstand 25px
   ------------------------------------------------------------------------- */

.altus-onderdelen .wooco_component {
	padding: 10px 0;
}

.altus-onderdelen .wooco_component_product {
	gap: 0;
}

.altus-onderdelen .wooco_component_product_name {
	line-height: 22.86px;
}

.altus-onderdelen .wooco_component_product_name a {
	font-size: 16px;
	font-weight: 700;
	line-height: 22.86px;
}

/* Inline achter de naam, niet als eigen regel eronder. */
.altus-onderdelen .extra-info {
	display: inline;
	font-size: 16px;
	font-weight: 400;
	line-height: 22.86px;
	margin-top: 0;
}

.altus-onderdelen .wooco-qty-label {
	font-size: 16px;
	font-weight: 400;
	line-height: 22.86px;
}

.altus-onderdelen .wooco_component_quantity_image_wrapper {
	margin: 0;
}

.altus-onderdelen .wooco-qty-input {
	height: 40px;
}

.altus-onderdelen .wooco-qty-input .wooco_component_product_qty_input {
	font-size: 14px;
	line-height: 38px;
}

.altus-onderdelen .wooco_component_product_image {
	max-width: none;
}

.altus-onderdelen .wooco_component_product_image img {
	height: 88px;
	width: auto;
}

.altus-onderdelen .wooco_component_product_description {
	font-size: 16px;
	line-height: 22.86px;
}

.altus-onderdelen .adviesprijs {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 6px;
}

.altus-onderdelen .altusprijs {
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}

.altus-onderdelen .altusprijs ins {
	font-size: 25px;
	line-height: 25px;
}

.altus-onderdelen .altusprijs .excluded-vat {
	font-size: 16px;
	font-weight: 400;
}

/* ------------------------------------ prijs bij samengestelde producten --- */

/* Bij een samengesteld product schrijft de configurator de totaalprijs in
   <p class="price wooco-price-…"> — dát is het blok dat meebeweegt zodra je de
   aantallen aanpast. Het statische blok eronder komt uit de prijs-mu-plugin en
   verandert niet mee, dus dat verdwijnt hier. */
.product-type-composite .brxe-product-price .price-main-product {
	display: none;
}

/* De configurator gebruikt onze eigen klassen, maar zet het bedrag in <bdi>
   in plaats van <ins> — daardoor bleef het oranje en de grote maat achterwege. */
.altusprijs bdi {
	color: var(--altus-oranje);
	font-size: 25px;
	font-weight: 700;
	text-decoration: none;
}

/* "(Bespaard 21,59%)" hoort niet in het prijsblok; live toont dat daar niet. */
.brxe-product-price .woocommerce-price-suffix {
	display: none;
}

/* De knop onderaan de onderdelen stond op gewicht 400 zonder icoon; live toont
   hem vet met een winkelwagentje ervoor. */
.altus-onderdelen .single_add_to_cart_button {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	line-height: 1.2;
	text-align: center;
}

.altus-onderdelen .single_add_to_cart_button::before {
	content: "\f07a";
	flex: 0 0 auto;
	font-family: "Font Awesome 6 Solid";
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
}

/* Specifieker: iets anders zette het gewicht terug op 400 — hetzelfde als
   eerder bij de knop bovenaan de simpele pagina. */
.altus-onderdelen form.cart button.single_add_to_cart_button {
	font-weight: 600;
}

/* Zelfde correctie voor de knop in de middenkolom van een samengesteld
   product: die stond ook nog op gewicht 400 en had geen icoon. */
.altus-composite-koop button.single_add_to_cart_button {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	line-height: 1.2;
}

.altus-composite-koop .single_add_to_cart_button::before {
	content: "\f07a";
	flex: 0 0 auto;
	font-family: "Font Awesome 6 Solid";
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
}

/* ------------------------- Aanvullende informatie in het tabblad --------- */

/* Bij samengestelde producten staat deze tabel onderaan in het tabblad (bij
   simpele producten staat ze in de rechterrail als .altus-speckaart, die apart
   opgemaakt is). Waarden opgemeten op live:
     rij            55px hoog, onderlijn 1px #e1e1e1
     label (th)     16px / gewicht 400 / navy, links, opvulling 16px 12px 16px 0
     waarde (td)    16px / gewicht 400 / navy, rechts, opvulling 16px 0 16px 12px
   Het label stond bij ons vet en er stonden geen lijnen tussen de rijen. */
.brxe-product-tabs table.woocommerce-product-attributes,
.brxe-product-tabs table.shop_attributes {
	border: 0;
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}

.brxe-product-tabs table.woocommerce-product-attributes tr,
.brxe-product-tabs table.shop_attributes tr {
	border-bottom: 1px solid #e1e1e1;
}

.brxe-product-tabs table.woocommerce-product-attributes th,
.brxe-product-tabs table.shop_attributes th {
	border: 0;
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 400;
	/* 13,5px i.p.v. 16px: met 16px kwam de rij op 60px uit, live zit op 55px. */
	padding: 13.5px 12px 13.5px 0;
	text-align: left;
}

.brxe-product-tabs table.woocommerce-product-attributes td,
.brxe-product-tabs table.shop_attributes td {
	border: 0;
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 400;
	padding: 13.5px 0 13.5px 12px;
	text-align: right;
}

.brxe-product-tabs table.woocommerce-product-attributes td p,
.brxe-product-tabs table.shop_attributes td p {
	margin: 0;
}

/* Bij samengestelde producten staat het cross-sells-blok in de brede
   linkerkolom onder de tabbladen (bij simpele producten in de smalle rail).
   Live toont er daar vier naast elkaar; met de twee kolommen van de rail
   werden de kaarten 623px breed. */
@media (min-width: 992px) {
	.product-type-composite .altus-crosssells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* In de rail (330px) pasten het aantalvak (88px) en de knop met tekst (296px)
   niet samen op één regel, dus viel de knop eronder. Met enkel het
   winkelwagenicoon past het wel — de tekst blijft in de HTML staan voor
   schermlezers. */
.altus-onderdelen form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.altus-onderdelen form.cart .pi-edd {
	flex: 1 0 100%;
}

.altus-onderdelen form.cart .quantity {
	flex: 0 0 88px;
}

.altus-onderdelen form.cart button.single_add_to_cart_button {
	flex: 0 0 51px;
	font-size: 0;
	gap: 0;
	height: 51px;
	/* WooCommerce zet hier 10px marge boven; met align-items: center zakte de
	   knop daardoor 5px onder het aantalvak. */
	margin-top: 0;
	min-height: 51px;
	padding: 0;
	width: 51px;
}

.altus-onderdelen form.cart button.single_add_to_cart_button::before {
	font-size: 20px;
}

/* WooCommerce zet 19,2px marge onder <p class="price">; samen met de
   rijruimte van 14px in de kolom gaf dat 33px tussen "Onze prijs" en de
   BTW-schakelaar. */
.brxe-product-price p.price {
	margin-bottom: 0;
}

/* ------------------------------------------- Iconic-dropdown als tegel --- */

/* Bij attributen die in Iconic op "dropdown" staan rendert de plugin
   <select class="iconic-wlv-terms iconic-wlv-terms--dropdown">. Live geeft die
   een eigen uiterlijk (15px/600, grijs #888, rand #dce3ed, radius 10px); hier
   krijgt hij dezelfde stijl als de tegels, zodat beide weergaven bij elkaar
   passen: achtergrond #fafeff, rand 2px rgba(34,58,128,.1), radius 6px, navy.
   Het eigen pijltje van de browser gaat weg en wordt vervangen door hetzelfde
   chevron, in navy.
   ⚠️ Op de kloon staan momenteel álle attributen op tegels, dus deze regels
   worden pas zichtbaar zodra een attribuut op dropdown gezet wordt. */
select.iconic-wlv-terms--dropdown {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fafeff;
	/* chevron in navy, als data-URI zodat er geen extra bestand nodig is */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23223a80' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border: 2px solid rgba(34, 58, 128, 0.1);
	border-radius: 6px;
	color: var(--altus-navy);
	cursor: pointer;
	font-size: 15px;
	font-weight: 400;
	height: auto;
	line-height: 1.35;
	max-width: 100%;
	padding: 10px 40px 10px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	width: 100%;
}

select.iconic-wlv-terms--dropdown:hover {
	border-color: rgba(34, 58, 128, 0.25);
}

/* Open of met de aandacht erop: dezelfde oranje markering als een gekozen tegel. */
select.iconic-wlv-terms--dropdown:focus {
	background-color: #fbeee6;
	border-color: var(--altus-oranje);
	outline: none;
}

select.iconic-wlv-terms--dropdown option {
	background: #fff;
	color: var(--altus-navy);
	font-size: 15px;
}

/* ------------------------------------------- Voordelige Tweedekans ------- */

/* Verwijzing naar het tweedekans-exemplaar, in de koopkolom onder de prijs.
   Waarden opgemeten op live: kop 16px/700 oranje, link 16px/400 navy met
   onderlijning, prijs 16px/700 oranje. In het oude thema stonden die als
   stijlattributen in de HTML zelf. */
.altus-tweedekans {
	margin: 0;
}

/* Bewust geen flex: het element kreeg daardoor breedte 0 en elk woord viel op
   een eigen regel. Als gewoon blok blijft de kop op één regel staan. */
.altus-tweedekans__kop {
	color: var(--altus-oranje);
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	white-space: nowrap;
}

/* Wijzend handje om de aandacht te trekken, naar rechts (fa-hand-point-right).
   Bij "Bekijk alternatieven van hetzelfde formaat" staat hetzelfde handje maar
   naar beneden; daar staat het aanbod dan ook onder de kop. */
.altus-tweedekans__kop::before {
	content: "\f0a4";
	font-family: "Font Awesome 6 Solid";
	font-size: 18px;
	font-weight: 900;
	margin-right: 8px;
}

.altus-tweedekans__regel {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.altus-tweedekans__link {
	color: var(--altus-navy);
	font-size: 16px;
	font-weight: 400;
	text-decoration: underline;
}

.altus-tweedekans__link:hover {
	color: var(--altus-oranje);
}

.altus-tweedekans__prijs {
	color: var(--altus-oranje);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.altus-tweedekans__btw {
	font-weight: 700;
}

/* "Voordelige Tweedekans" + prijs op een archiefkaart (zie altus_tweedekans_kaart_html()). Oranje kop
   en prijs zoals het blok op de productpagina; de hele vermelding is de link naar het tweedekans-product. */
.altus-tweedekans-kaart {
	display: block;
	margin: 6px 0 0;
	text-decoration: none;
}

.altus-tweedekans-kaart__kop {
	color: var(--altus-oranje);
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
}

.altus-tweedekans-kaart__prijs {
	color: var(--altus-oranje);
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.altus-tweedekans-kaart__btw {
	font-weight: 400;
}

.altus-tweedekans-kaart:hover .altus-tweedekans-kaart__kop {
	color: var(--altus-navy);
}

/* --------------------------------------------------- Gratis product ------- */

/* "Met gratis {product} t.w.v. €{bedrag} excl. BTW" — op de archiefkaart
   (automatisch, elk product met een gekoppeld gratis product) en op de
   productpagina (via [altus_gratis_product]). "gratis" in het oranje, de
   rest in het blauw (op verzoek van Sylvie, 29/09/2026). */
.altus-gratisproduct {
	margin: 4px 0 0;
	color: var(--altus-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.altus-gratisproduct__woord {
	color: var(--altus-oranje);
	text-transform: uppercase;
}

/* Melding op een tweedekans-product: de actie met gratis product van het hoofdproduct geldt hier niet. */
.altus-gratisproduct-melding {
	margin: 8px 0 0;
	padding: 10px 14px;
	border: 1px solid var(--altus-oranje);
	border-radius: 8px;
	background: #fff6ef;
	color: var(--altus-navy);
	font-size: 14px;
	line-height: 1.45;
}

.altus-gratisproduct-melding a {
	color: var(--altus-navy);
	font-weight: 700;
	text-decoration: underline;
}

.altus-gratisproduct-melding a:hover {
	color: var(--altus-oranje);
}

/* Miniaturenbalk onder de productfoto: zolang de slider niet gestart is (WP Rocket vertraagt het Bricks-script tot de eerste aanraking)
   staan de 8-10 miniaturen onzichtbaar (opacity 0) onder elkaar en geven ze een leeg gat van honderden tot 3000px onder de foto,
   vooral op een telefoon (Sylvie, 09/10/2026). Zonder gestarte slider neemt de balk daarom geen ruimte in; zodra Bricks hem start
   (.flex-viewport verschijnt) is deze regel niet meer van toepassing. */
.brx-product-gallery-thumbnail-slider:not(:has(.flex-viewport)) {
	max-height: 0;
	overflow: hidden;
}

/* Cadeau-label rechtsonder op de afbeelding: pilletje "Gratis" op een vierkantje met de foto van het gratis product. ALLE labels
   zijn even groot (84 px, mobiel 72 px), ongeacht de tekst: het pilletje is even breed als het vierkantje. Een langere tekst
   ("1 + 1 gratis", klasse --breed) krijgt enkel een kleiner lettertype, zodat hij binnen die breedte past (Sylvie, 09/10/2026). */
.altus-cadeau-label {
	display: block;
	pointer-events: none;
	width: 84px;
}

.altus-cadeau-label__foto {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 2px solid var(--altus-oranje);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(34, 58, 128, 0.2);
	box-sizing: border-box;
	color: var(--altus-oranje);
	display: flex;
	font-size: 28px;
	justify-content: center;
	overflow: hidden;
	padding: 4px;
	width: 100%;
}

.altus-cadeau-label .altus-cadeau-label__foto-img {
	display: block;
	height: 100% !important;
	object-fit: contain;
	width: 100% !important;
}

.altus-cadeau-label__tekst {
	background: var(--altus-oranje);
	border-radius: 20px;
	box-sizing: border-box;
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	margin: -9px auto 0;
	padding: 5px 4px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
}

.altus-cadeau-label--breed .altus-cadeau-label__tekst {
	font-size: 10.5px;
}

/* Archiefkaart: een vierkant over de (vierkante) afbeelding; het label zit in de
   rechteronderhoek daarvan. */
.altus-cadeau-label--kaart {
	aspect-ratio: 1 / 1;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
	z-index: 3;
}

/* Binnen dat vierkant staat het label zelf rechtsonder. */
.altus-cadeau-label--kaart .altus-cadeau-label__foto {
	bottom: 26px;
	position: absolute;
	right: 8px;
	width: 84px;
}

.altus-cadeau-label--kaart .altus-cadeau-label__tekst {
	bottom: 12px;
	margin: 0;
	position: absolute;
	right: 8px;
	width: 84px;
}

/* Productpagina: in elke galerijafbeelding, rechtsboven. */
.woocommerce-product-gallery__image {
	position: relative;
}

.altus-cadeau-label--foto {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 5;
}

/* In de miniaturen onder de galerij staat het label niet: het bedekte de miniatuur zelf (Sylvie, 09/10/2026). Het label blijft
   op de grote foto. */
.brx-thumbnail-slider-wrapper .altus-cadeau-label {
	display: none;
}

/* Cross-sells onderaan de productpagina ("Dit product kan aangevuld worden met"): de kaarten zijn maar ~157px breed, daar is een label van
   84px te groot en bedekt het te veel van de productafbeelding. Hier een kleiner label (64px, voor alle teksten even groot), vast in de
   RECHTERBOVENHOEK van de afbeelding (niet rechtsonder in een vierkant zoals in een archief), ook op mobiel (Sylvie, 09/10/2026). */
.altus-crosssells .altus-cadeau-label--kaart {
	aspect-ratio: auto;
	bottom: auto;
	left: auto;
	right: 6px;
	top: 8px;
	width: 64px;
}

.altus-crosssells .altus-cadeau-label--kaart .altus-cadeau-label__foto {
	border-radius: 8px;
	border-width: 1.5px;
	bottom: auto;
	font-size: 20px;
	padding: 2px;
	position: static;
	right: auto;
	width: 100%;
}

.altus-crosssells .altus-cadeau-label--kaart .altus-cadeau-label__tekst {
	bottom: auto;
	font-size: 8.5px;
	margin: -7px auto 0;
	padding: 3px 3px;
	position: relative;
	right: auto;
	width: 100%;
}

.altus-crosssells .altus-cadeau-label--kaart.altus-cadeau-label--breed .altus-cadeau-label__tekst {
	font-size: 8px;
}

@media (max-width: 767px) {
	.altus-cadeau-label,
	.altus-cadeau-label--kaart .altus-cadeau-label__foto,
	.altus-cadeau-label--kaart .altus-cadeau-label__tekst {
		width: 72px;
	}

	.altus-cadeau-label--kaart {
		width: auto;
	}

	.altus-cadeau-label__foto {
		font-size: 22px;
	}

	.altus-cadeau-label__tekst {
		font-size: 10.5px;
		padding: 4px;
	}

	.altus-cadeau-label--breed .altus-cadeau-label__tekst {
		font-size: 9px;
	}
}

/* "(zolang de voorraad strekt)" — kleiner en lichter dan de rest van de regel. */
.altus-gratisproduct__voorraad {
	font-size: 12px;
	font-weight: 400;
}

/* Label naast de productnaam in winkelwagen + afrekenen, voor elk product dat
   automatisch (aan 100% korting) is meegekomen met een ander product. */
.altus-gratis-label {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--altus-oranje);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}


/* --- altus-categorie --- */
/**
 * Altus — opmaak categorie-/archiefpagina (Bricks)
 *
 * De titel-stijl (28.8px / 500 / var(--altus-navy)) is nagemeten op het "Kop"-element met
 * {archive_title} dat deze CSS vervangt — zie altus_categorie_intro_shortcode() in de
 * mu-plugin altus-categorie-content.php. De categorienaam staat altijd als eigen titel
 * bovenaan (los van de introtekst); afbeelding + introtekst komen daaronder, naast elkaar.
 */

/* De breedte/marges van het sjabloon "Categorie steigers archief" (containers
   "pqeuso"/"dxdaxu") stelt Sylvie zelf rechtstreeks in Bricks in (Stijl → Grootte)
   — bewust GEEN CSS-override hier, want die zou met !important haar eigen
   Bricks-instelling juist blokkeren. Zie de toelichting die ze daarvoor kreeg. */

/* Producttitel + afstand tussen rijen in het productenraster: nagemeten op de
   live site (altus.be/product-category/steigers/rolsteigers/, ~16px/500/25px
   regelhoogte voor de titel) i.p.v. Bricks' eigen grotere standaard (20,8px) —
   en de afstand tussen rijen iets ruimer. De titel is een Bricks-eigen dynamic-
   data H5 (géén woocommerce-loop-product__title-klasse — dit is het
   "Producten"-element van Bricks zelf, niet het standaard WooCommerce-sjabloon),
   herkenbaar aan het element-ID [data-field-id="b8462d"] uit het sjabloon
   "Categorie steigers archief" (post_id 147542). */
.products [data-field-id="b8462d"] {
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
	/* Vaste hoogte van precies 2 regels (2 x 25px): een langere titel liep soms
	   over 3 regels, wat alles eronder (prijs, levertermijn, knop) een regel lager
	   duwde dan bij kaarten met een kortere titel — nu afgekapt met "…". */
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	height: 50px;
	overflow: hidden;
}

.products.woocommerce {
	row-gap: 48px;
}

/* Prijsblok ("Adviesprijs" + "Onze prijs", zie altus_prijs_html() in
   altus-prijsweergave.php): "Onze prijs" moet overal op dezelfde regel staan, ook al
   heeft niet elk product een Adviesprijs-regel (korting) erboven. Een vaste pixel-
   hoogte bleek niet betrouwbaar (klopte enkel bij het kolombreedte waarop gemeten
   was — bij een bredere kolom, zonder tekstterugloop, gaf dat juist te veel
   witruimte). In plaats daarvan reserveert altus_prijs_blok() in die situatie zelf
   al een onzichtbare adviesprijs-regel (.adviesprijs--onzichtbaar) — hier enkel nog
   onzichtbaar maken, de ruimte staat al vast door dezelfde opmaak te hergebruiken. */
.adviesprijs--onzichtbaar {
	visibility: hidden;
}

/* ------------------------------------------- winkelwagen + levertermijn (raster) --
   Het `woocommerce_loop_add_to_cart_link`-filter in altus-steiger-filters.php bouwt
   hier levertermijntekst + aantal-stappenteller + winkelwagen-icoon + info-icoon op,
   in plaats van Bricks' standaard tekstknop "Toevoegen aan winkelwagen" — zelfde
   icoon-taal als de rail op de productpagina zelf (.altus-crosssells). */

.altus-steiger-koop__levertermijn {
	color: var(--altus-groen, #5ac061);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 8px;
}

/* FiboSearch se eigen hoeveelheidsveld in het zoekvoorbeeldpaneel (details
   panel) staat er nog steeds los boven onze eigen koop-rij — verborgen, want
   onze eigen .altus-aantal-stepper (zie altus-steiger-filters.php's DGWT-tak)
   vervangt hem daar volledig; anders 2 hoeveelheidsvelden onder elkaar. */
.dgwt-wcas-pd-addtc-form > .quantity {
	display: none;
}

/* FiboSearch's eigen form is flex met justify-content:flex-end (bedoeld om de
   winkelwagenknop rechts van het nu verborgen hoeveelheidsveld te duwen) —
   zonder dat veld duwt dat onze hele rij naar rechts, met een lege strook
   links. De <p>-wrapper (WooCommerce's [add_to_cart]-shortcode-output) kreeg
   daardoor ook nooit de volledige breedte (bleef smeltend om haar inhoud),
   waardoor de infoknop-tekst binnen een te smalle knop viel en overlapte. */
.dgwt-wcas-pd-addtc-form {
	justify-content: flex-start;
}

.dgwt-wcas-pd-addtc-form .add_to_cart_inline {
	flex: 1 1 100%;
	width: 100%;
}

/* Het FiboSearch-paneel is smal (~270px) — daarin steekt de infoknop naast de
   stepper+winkelwagenknop buiten de rand van het paneel. Binnen dit paneel
   specifiek onder elkaar i.p.v. naast elkaar. */
.dgwt-wcas-pd-addtc-form .altus-steiger-koop__rij {
	align-items: stretch;
	flex-direction: column;
	width: 100%;
}

.dgwt-wcas-pd-addtc-form .altus-icoon-knop--info {
	justify-content: center;
	width: 100%;
}

/* Producttitel in het FiboSearch-zoekvoorbeeld stond in FiboSearch's eigen
   grijstint (#333) i.p.v. het blauw dat overal elders op de site geldt.
   FiboSearch se eigen regel "a.dgwt-wcas-details-product-title" heeft dezelfde
   specificiteit (element + klasse) — !important om niet van laadvolgorde
   tussen plugin- en thema-CSS te moeten afhangen. */
a.dgwt-wcas-details-product-title {
	color: var(--altus-navy, #223a80) !important;
}

.altus-steiger-koop__rij {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Aantal-stappenteller + winkelwagen-icoon samen als 1 vast blok — anders kon
   dit stel op een smalle productkaart (bv. rond 130-140px in een dicht
   pakket rasterkolommen) tussen die twee zelf al uit elkaar breken, met het
   icoontje alleen op een eigen regel. flex-wrap: nowrap houdt ze altijd samen;
   de smallere maten hieronder (enkel binnen deze context, de gedeelde
   .altus-aantal-klasse elders — de cross-sells-rail — blijft ongemoeid) geven
   er samen met het icoontje net genoeg ruimte om ook op zo'n smalle kaart nog
   naast elkaar te passen. */
.altus-steiger-koop__mand {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 6px;
}

/* Het winkelwagen-icoon erft ergens een margin-top: 10px (vermoedelijk een
   generieke .button-stijl elders — de klasse "button" komt standaard van
   WooCommerce zelf mee op deze link) waardoor het lager hing dan de
   stappenteller ernaast, ook al zijn beide even hoog (38px) en staat de
   ouder op align-items: center. Concreet gemeten in DevTools en hersteld. */
.altus-steiger-koop__mand .altus-icoon-knop--winkelwagen {
	margin-top: 0;
}

.altus-steiger-koop__mand .altus-aantal__knop {
	width: 20px;
}

.altus-steiger-koop__mand .altus-aantal__veld {
	width: 28px;
}

/* De hele knoppenrij onderaan de kaart vastzetten: kaarten in dezelfde rij van het
   raster zijn even hoog (CSS Grid rekt ze automatisch), dus komt de knoppenrij van
   élke kaart zo op dezelfde hoogte, ongeacht een langere titel of intro erboven. De PRIJS
   blijft bewust direct onder de titel staan: de prijs mee naar onderen zetten liet bij kaarten
   zonder aantalrij (samengestelde producten, uitverkocht) een grote witruimte tussen titel en
   prijs ontstaan en de prijzen in een rij niet meer op één lijn (06/10/2026). */
.products [data-field-id="d97fd2"] {
	margin-top: auto;
}

.altus-icoon-knop {
	align-items: center;
	border: 0;
	border-radius: 6px;
	display: flex;
	flex: 0 0 auto;
	font-size: 0;
	height: 38px;
	justify-content: center;
	min-height: 38px;
	padding: 0;
	width: 38px;
}

.altus-icoon-knop::before {
	font-family: "Font Awesome 6 Solid";
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
}

.altus-icoon-knop--winkelwagen {
	background: var(--altus-groen, #5ac061);
	color: #fff;
}

.altus-icoon-knop--winkelwagen::before {
	content: "\f07a";
}

.altus-icoon-knop--winkelwagen:hover {
	background: #4aad51;
}

/* Info-knop toont, anders dan de winkelwagen-knop, wél haar eigen tekst: breder dan
   38px, icoon + tekst naast elkaar op één lijn (i.p.v. de tekst te verbergen). */
.altus-icoon-knop--info {
	background: var(--altus-navy, #223a80);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	gap: 6px;
	padding: 0 14px;
	width: auto;
}

.altus-icoon-knop--info::before {
	content: "\f05a";
	font-size: 16px;
}

.altus-icoon-knop--info:hover {
	background: #1a2d63;
}

/* --------------------------------------------------------- paginering (naast producten) --
   Element "Products pagination" (Bricks), door Sylvie bewust BUITEN de container van
   filters+producten geplaatst. Cijfers naast elkaar (rij), niet onder elkaar. */

.brxe-woocommerce-products-pagination {
	flex: 0 0 auto;
}

.brxe-woocommerce-products-pagination .woocommerce-pagination {
	border: 1px solid #dde;
	border-radius: 6px;
	display: inline-block;
	overflow: hidden;
}

.brxe-woocommerce-products-pagination ul.page-numbers {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}

.brxe-woocommerce-products-pagination ul.page-numbers li {
	border-right: 1px solid #dde;
}

.brxe-woocommerce-products-pagination ul.page-numbers li:last-child {
	border-right: 0;
}

.brxe-woocommerce-products-pagination .page-numbers {
	color: var(--altus-navy, #223a80);
	display: block;
	font-size: 13px;
	font-weight: 600;
	min-width: 36px;
	padding: 8px 6px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.brxe-woocommerce-products-pagination a.page-numbers:hover {
	background: #fff4ef;
	color: var(--altus-oranje, #c2410c);
}

.brxe-woocommerce-products-pagination .page-numbers.current {
	background: var(--altus-oranje, #c2410c);
	color: #fff;
}

.brxe-woocommerce-products-pagination .page-numbers.dots {
	color: #b5b5b5;
	cursor: default;
}

.brxe-woocommerce-products-pagination a.next.page-numbers {
	background: var(--altus-navy, #223a80);
	color: #fff;
	font-weight: 700;
}

.brxe-woocommerce-products-pagination a.next.page-numbers:hover {
	background: var(--altus-oranje, #c2410c);
	color: #fff;
}

/* Paginering op een telefoon: alles op 1 regel (Sylvie, 09/10/2026). Een rij met 17 cijfers past niet naast elkaar; daarom blijft er
   op een telefoon enkel over: vorige, eerste pagina, de pagina voor en na de huidige, de laatste pagina en volgende (met de puntjes
   ertussen). Browsers zonder :has() (voor iOS 15.4) tonen gewoon alle cijfers, in een kleinere rij. */
@media (max-width: 767px) {
	.brxe-woocommerce-products-pagination {
		width: 100%;
	}

	.brxe-woocommerce-products-pagination .woocommerce-pagination {
		display: block;
		max-width: 100%;
	}

	.brxe-woocommerce-products-pagination ul.page-numbers {
		flex-wrap: nowrap;
	}

	.brxe-woocommerce-products-pagination ul.page-numbers li {
		flex: 1 1 0;
		min-width: 0;
	}

	.brxe-woocommerce-products-pagination .page-numbers {
		min-width: 0;
		padding: 9px 0;
	}

	@supports selector(:has(a)) {
		.brxe-woocommerce-products-pagination ul.page-numbers li {
			display: none;
		}

		.brxe-woocommerce-products-pagination ul.page-numbers li:has(> .prev),
		.brxe-woocommerce-products-pagination ul.page-numbers li:has(> .next),
		.brxe-woocommerce-products-pagination ul.page-numbers li:has(> .current),
		.brxe-woocommerce-products-pagination ul.page-numbers li:has(> .dots),
		.brxe-woocommerce-products-pagination ul.page-numbers li:has(+ li > .current),
		.brxe-woocommerce-products-pagination ul.page-numbers li:has(> .current) + li,
		.brxe-woocommerce-products-pagination ul.page-numbers li:nth-child(2),
		.brxe-woocommerce-products-pagination ul.page-numbers li:nth-last-child(2) {
			display: block;
		}
	}
}

/* [altus_categorie_intro] (titel + introtekst bovenaan elke categoriepagina)
   zit in ELK archiefsjabloon in 2 geneste Bricks-elementen die allebei een
   vaste, niet-responsieve 160px links/rechts padding hebben (bedoeld voor
   desktop, om de tekst niet over de volle, brede pagina te laten lopen) —
   samen dus 320px padding per kant, 640px in totaal. Op mobiel (375px) is dat
   al meer dan het hele scherm: met box-sizing:border-box kan een element
   nooit smaller worden dan zijn eigen padding, dus het kaderde bleef vast op
   320px breed (de padding-som van het BINNENSTE element) en liep half van
   het scherm af, ongeacht welke breedte je er verder op zet (concreet
   gevonden op de Kamersteigers-pagina, 29/09/2026, tijdens de mobiele
   controle van de hele site). Elk archiefsjabloon (Steigers, Ladders,
   Trapladders, Zoldertrappen, Molenaarstrappen, Dakrandbeveiliging, het
   algemene sjabloon) heeft zijn eigen paar element-ID's met datzelfde
   patroon — hieronder allemaal expliciet opgesomd (opgezocht via de
   Bricks-instellingen van elk sjabloon, niet gegokt). Ook het sjabloon van de
   zoekresultaten (sectie #brxe-sr137a, 160px links/rechts) hoort erbij: de
   resultaten waren op een telefoon maar 23px breed (Sylvie, 09/10/2026). */
@media (max-width: 767px) {
	#brxe-kuhyvw, #brxe-hxhnsv,
	#brxe-abd64f, #brxe-60e1c1,
	#brxe-44bc45, #brxe-4eaad5,
	#brxe-5934ef, #brxe-0fd7dc,
	#brxe-efddc3, #brxe-614c04,
	#brxe-ga1dc9, #brxe-btb9fa,
	#brxe-sr137a {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 478px) {
	#brxe-kuhyvw, #brxe-hxhnsv,
	#brxe-abd64f, #brxe-60e1c1,
	#brxe-44bc45, #brxe-4eaad5,
	#brxe-5934ef, #brxe-0fd7dc,
	#brxe-efddc3, #brxe-614c04,
	#brxe-ga1dc9, #brxe-btb9fa,
	#brxe-sr137a {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Zorgt dat de titel/introtekst ook echt de volle (nu bevrijde) breedte
   gebruikt voor tekstterugloop, i.p.v. te blijven krimpen op haar inhoud. */
.brxe-shortcode:has(> .altus-categorie__titel) {
	width: 100% !important;
}

.altus-categorie__titel {
	color: var(--am-accent, var(--altus-oranje, #c2410c));
	font-size: 40px;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	padding-top: 0;
}

/* 2026-10-16: oranje categorietitel niet meer tonen op archiefpagina's.
   Heeft de categoriebeschrijving zelf een H1, dan verdwijnt de titel helemaal;
   anders blijft hij enkel voor zoekmachines/schermlezers (visueel verborgen),
   zodat de pagina altijd een H1 houdt. De blauwe zoekresultaten-titel blijft. */
.altus-categorie__titel:not(.altus-categorie__titel--blauw) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.brxe-shortcode:has(.altus-categorie__introtekst h1) > .altus-categorie__titel:not(.altus-categorie__titel--blauw) {
	display: none !important;
}

/* Zoekresultaten-titel heeft geen merk (dus geen --am-accent) en zou anders op
   de oranje terugval van .altus-categorie__titel hierboven landen — Sylvie wil
   deze titel expliciet in het blauw. */
.altus-categorie__titel--blauw {
	color: var(--altus-navy, #223a80);
}

.altus-categorie__introtekst {
	color: var(--altus-navy, #223a80);
}

.altus-categorie__introtekst > p {
	margin: 0 0 12px;
	line-height: 1.6;
}

/* Flex + order zet de knop ná de (in)geklapte tekst, in plaats van op de vaste plek die
   <summary> van nature krijgt (vóór de rest van de inhoud van <details>). Zo schuift de knop
   mee naar onder zodra hij openklapt. */
.altus-categorie__intro-meer {
	display: flex;
	flex-direction: column;
}

.altus-categorie__intro-rest {
	order: 1;
}

.altus-categorie__intro-meer summary {
	color: var(--altus-oranje);
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
	margin-top: 4px;
	order: 2;
	text-align: right;
}

.altus-categorie__intro-meer summary::-webkit-details-marker {
	display: none;
}

/* Voor het openklappen staat "Lees meer" boven de (nog verborgen) rest-tekst; de flex-order
   hierboven verplaatst de knop pas visueel zodra <details> openstaat en de tekst dus meetelt. */
.altus-categorie__lees-minder {
	display: none;
}

.altus-categorie__intro-meer[open] .altus-categorie__lees-meer {
	display: none;
}

.altus-categorie__intro-meer[open] .altus-categorie__lees-minder {
	display: inline;
}

.altus-categorie__intro-meer[open] summary {
	margin-top: 8px;
}

/* ------------------------------------------------- introafbeelding naast tekst -- */

/* 2026-10-17: afbeelding/filmpje en tekst bovenaan uitlijnen i.p.v. verticaal centreren.
   Geen vaste marge eronder meer (was 32px): de ruimte tot de producten regelt Sylvie in Bricks. */
.altus-categorie__intro-rij {
	align-items: flex-start;
	display: flex;
	gap: 48px;
	margin-bottom: 0;
}

.altus-categorie__intro-rij .altus-categorie__afbeelding {
	border-radius: 4px;
	flex: 0 0 260px;
	height: auto;
	width: 260px;
}

.altus-categorie__intro-rij .altus-categorie__introtekst {
	flex: 1 1 auto;
	margin-bottom: 0;
}

/* 2026-10-17: eigen H1 in de categoriebeschrijving kleiner dan Bricks' standaard (2.4em = 36px).
   Grootte aanpassen? Wijzig hier de px-waarden (en verhoog de ver in functions.php). */
.altus-categorie__introtekst h1 {
	font-size: 28px;
	line-height: 1.25;
	margin-bottom: 12px;
}

@media (max-width: 640px) {
	.altus-categorie__introtekst h1 {
		font-size: 24px;
	}
}

/* Eerste kop/alinea zonder bovenmarge, zodat de tekst gelijk start met het beeld. */
.altus-categorie__intro-rij .altus-categorie__introtekst > :first-child {
	margin-top: 0;
}

@media (max-width: 640px) {
	.altus-categorie__intro-rij {
		flex-direction: column;
	}

	.altus-categorie__intro-rij .altus-categorie__afbeelding {
		flex-basis: auto;
		width: 100%;
	}
}

/* --------------------------------------------------------------- per serie --
   [altus_categorie_series]: lijst van de subcategorieën ("series") van de huidige
   categorie, met een vinkje-uiterlijk — GEEN echte filter (dat zijn gewoon links naar
   elke subcategorie), op uitdrukkelijk verzoek van Sylvie. De <details>/<summary>
   geeft de in-/uitklapbare "SERIE"-kop zonder JavaScript, zelfde patroon als
   .altus-categorie__intro-meer hierboven. */

.altus-categorie__series {
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
	margin: 0 0 32px;
	padding: 0;
}

.altus-categorie__series-titel {
	align-items: center;
	border-left: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	color: var(--zwart, #1a1a1a);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.04em;
	list-style: none;
	padding: 10px 18px;
	text-transform: uppercase;
}

.altus-categorie__series-titel::-webkit-details-marker {
	display: none;
}

.altus-categorie__series-titel::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: '';
	height: 7px;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	width: 7px;
}

.altus-categorie__series[open] .altus-categorie__series-titel::after {
	transform: rotate(-135deg);
}

.altus-categorie__series[open] {
	padding-bottom: 16px;
}

.altus-categorie__series-lijst {
	column-gap: 24px;
	columns: 2;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.altus-categorie__series-lijst li {
	break-inside: avoid;
	margin: 0 0 10px;
}

.altus-categorie__series-lijst a {
	align-items: center;
	color: var(--zwart, #1a1a1a);
	display: flex;
	font-size: 15px;
	gap: 10px;
	text-decoration: none;
}

.altus-categorie__series-lijst a:hover {
	text-decoration: underline;
}

.altus-categorie__series-vinkje {
	border: 2px solid #b5b5b5;
	border-radius: 2px;
	flex-shrink: 0;
	height: 16px;
	width: 16px;
}

.altus-categorie__series-lijst a:hover .altus-categorie__series-vinkje {
	border-color: var(--altus-oranje);
}

@media (max-width: 480px) {
	.altus-categorie__series-lijst {
		columns: 1;
	}
}

/* ------------------------------------------ eigen onderdelen (bladcategorie) --
   [altus_categorie_onderdelen_tabel]: de tabel zelf hergebruikt de bestaande
   .altus-reserveonderdelen__*-stijlen (altus-reserveonderdelen.css) — hier enkel de
   buitenste afstand tot de rest van de pagina. */
.altus-categorie__onderdelen-tabel {
	margin: 32px 0;
}

/* ---------------------------------------------------------- subcategorieën --
   Geen kaart-rand/achtergrond (op Sylvies verzoek, naar het voorbeeld van
   altrex-onderdelen.nl): enkel afbeelding + titel + rode badges, los op de pagina. */

.altus-categorie__subcategorieen {
	display: grid;
	gap: 48px 60px;
	grid-template-columns: repeat(2, 1fr);
	margin: 32px 0;
}

@media (max-width: 640px) {
	.altus-categorie__subcategorieen {
		grid-template-columns: 1fr;
	}
}

/* In de Bricks-template staat elke kaart in een eigen Shortcode-element (versleepbaar).
   Dat wikkelt de kaart in een extra div; die laten we "verdwijnen" zodat de kaart zelf
   een rasterkolom is. Zonder kaarten (diepere onderdelen-pagina's) valt de lege rij weg. */
.altus-categorie__subcategorieen > .brxe-shortcode {
	display: contents;
}

.altus-categorie__subcategorieen:not(:has(a)) {
	display: none;
}

.altus-categorie__subcat-kaart {
	align-items: flex-start;
	color: inherit;
	display: flex;
	gap: 24px;
	text-decoration: none;
}

.altus-categorie__subcat-afbeelding {
	display: block;
	flex: 0 0 auto;
	max-width: 58%;
}

.altus-categorie__subcat-afbeelding img {
	display: block;
	height: auto;
	max-width: 100%;
}

.altus-categorie__subcat-inhoud {
	display: block;
}

.altus-categorie__subcat-titel {
	color: var(--zwart, #1a1a1a);
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 10px;
}

.altus-categorie__subcat-onderdelen-label {
	color: #6b6b6b;
	display: block;
	font-size: 13px;
	margin-bottom: 8px;
}

/* Zonder eenduidig merk (bv. de algemene Onderdelen-pagina; de wrapper heeft dan geen
   style-attribuut met merkkleuren) staan titel en tekst in Altus-blauw i.p.v. zwart/grijs. */
.altus-categorie__subcategorieen:not([style]) .altus-categorie__subcat-titel,
.altus-categorie__subcategorieen:not([style]) .altus-categorie__subcat-onderdelen-label {
	color: var(--altus-navy, #223a80);
}

/* Telefoon: de afbeelding mocht 58% van de kaart innemen, naast een titel die niet afbrak ("Dakrandbeveiliging"); samen met de
   tussenruimte was de kaart dan breder dan het scherm en schoof de hele pagina opzij (08/10/2026). */
@media (max-width: 640px) {
	.altus-categorie__subcat-kaart {
		gap: 16px;
	}

	.altus-categorie__subcat-afbeelding {
		max-width: 40%;
	}

	.altus-categorie__subcat-inhoud {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

.altus-categorie__subcat-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Kleur van de onderdelen-badges: de kleur van het merk van deze pagina
   (--am-achtergrond/--am-tekst, gezet op .altus-categorie__subcategorieen door
   altus_categorie_subcategorieen_shortcode()). Zonder eenduidig merk, bv. op de
   algemene Onderdelen-pagina, Altus-blauw. */
.altus-categorie__subcat-badge {
	background: var(--am-achtergrond, var(--altus-navy, #223a80));
	color: var(--am-tekst, #fff);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
}

/* --------------------------------------------------- shop-categorieoverzicht --
   [altus_shop_categorieen], enkel op /shop/ — bewust EEN VOLLEDIGE kaart (rand,
   achtergrond, titel in het blauw, omschrijving, knop), los van de bewuste
   minimale stijl van .altus-categorie__subcat-* hierboven (op Sylvies verzoek:
   "Let op! Dit staat los van de onderdelen opmaak"). */

.altus-shop-categorieen {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin: 32px 0;
}

.altus-shop-categorie__kaart {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	color: inherit;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.altus-shop-categorie__kaart:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.altus-shop-categorie__afbeelding {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: #fff;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.altus-shop-categorie__afbeelding img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.altus-shop-categorie__inhoud {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.altus-shop-categorie__titel {
	color: var(--altus-navy, #223a80);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.altus-shop-categorie__tekst {
	color: #555;
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
}

.altus-shop-categorie__knop {
	align-self: flex-start;
	background: var(--altus-navy, #223a80);
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
	padding: 10px 18px;
	transition: opacity 0.15s ease;
}

.altus-shop-categorie__kaart:hover .altus-shop-categorie__knop {
	opacity: 0.85;
}

@media (max-width: 480px) {
	.altus-shop-categorieen {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------- merk-keuzerij --
   Verzamelpagina's zonder eigen merk (bv. "Trapladder onderdelen"): eerst een
   merk kiezen, naar het voorbeeld van https://altus.be/ladder-onderdelen/ —
   enkel de merklogo's, geen titel/badges. */

.altus-categorie__merkkeuze {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	margin: 32px 0;
}

@media (max-width: 640px) {
	.altus-categorie__merkkeuze {
		grid-template-columns: repeat(2, 1fr);
	}
}

.altus-categorie__merkkeuze-tegel {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 140px;
	padding: 24px;
	transition: opacity 0.15s ease;
}

.altus-categorie__merkkeuze-tegel:hover {
	opacity: 0.75;
}

/* Vast breedte×hoogte-kader (i.p.v. enkel een vaste hoogte) zodat elk
   merklogo even groot OOGT, ongeacht de eigen verhouding van het
   brondbestand: met enkel een vaste hoogte kon een breed logo (bv. Tubesca,
   ratio ~6:1) veel breder/dominanter ogen dan een vierkant logo (bv.
   Altrex) — allebei "80px hoog", maar zichtbaar niet gelijk. Nu past elk
   logo proportioneel (object-fit:contain) binnen hetzelfde 180×80px-kader,
   zoals een pasfoto-kader — een breed logo wordt dan smaller weergegeven
   i.p.v. het kader te doen "meegroeien". */
.altus-categorie__merkkeuze-logo {
	display: block;
	width: 180px;
	height: 80px;
	object-fit: contain;
}

.altus-categorie__merkkeuze-naam {
	color: var(--zwart, #1a1a1a);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

/* 2026-10-17: de vaste 80px boven/onder het introblok (#brxe-btb9fa, uit de tijd dat het
   ONDER het productraster stond) is weg. De ruimte boven/onder regelt Sylvie nu zelf in
   Bricks: sjabloon "Categorie bordestrappen archief" → Shortcode-element → Stijl → Marge,
   en de Container met de filters → Marge boven. */

/* 2026-10-17: de oranje lijn onder de blokken van de archiefsjablonen (in Bricks ingesteld
   als "border-bottom: 2px solid var(--oranje)") moet overal weg (Sylvie). Per sjabloon de
   rij filters|producten en het introblok: Steigers, Bordestrappen, Trapladders,
   Zoldertrappen, Dakrandbeveiliging, Brandladders. */
#brxe-dxdaxu, #brxe-hxhnsv,
#brxe-bt2c17,
#brxe-0b4672, #brxe-4eaad5,
#brxe-44fe42, #brxe-0fd7dc,
#brxe-2ff86f, #brxe-60e1c1,
#brxe-4cc2c2, #brxe-614c04 {
	border-bottom: 0 !important;
}


/* --- altus-steiger-snelzoeker --- */
/**
 * Altus — Steiger-snelzoeker (homepage), shortcode [altus_steiger_snelzoeker].
 * Visuele stijl overgenomen uit Sylvies screenshot van steigerverkoop.nl
 * (29/09/2026), maar met Altus' eigen kleuren (--altus-navy/--altus-oranje).
 */

.altus-snelzoeker {
	background: #f0f2f5;
	border-radius: 8px;
	padding: 32px;
	/* Zonder dit erft deze container Bricks' vaste standaardbreedte (1100px) als
	   eigen inhoud-breedte i.p.v. de werkelijk beschikbare breedte van de sectie
	   erboven — op mobiel (375px) blies dat de hele pagina op tot 1100px breed
	   (concreet ontdekt: Sylvie, 29/09/2026, "mobiele weergave" — hero-tekst en
	   snelzoeker liepen allebei half van het scherm af). Zelfde onderliggende
	   oorzaak als de eerdere grid-overloop-fix bij .altus-snelzoeker__stap. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 780px) {
	.altus-snelzoeker {
		padding: 20px;
	}
}

.altus-snelzoeker__titel {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
}

.altus-snelzoeker__stappen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 780px) {
	.altus-snelzoeker__stappen {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.altus-snelzoeker__stappen {
		grid-template-columns: 1fr;
	}
}

.altus-snelzoeker__stap {
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	padding: 16px;
	/* Zonder dit weigert elke grid-kolom te krimpen onder de min-content-breedte
	   van haar inhoud (browser-standaard min-width:auto voor grid-items) — bij
	   een leeg Bricks-afbeeldingselement blies dat elke kolom op tot de volledige
	   breedte van de rij, 3x naast elkaar (concreet ontdekt: Sylvie, 29/09/2026,
	   "klopt niet" + screenshot met horizontale overloop). */
	min-width: 0;
	/* Bricks geeft een "container"-element zonder eigen breedte-instelling de
	   globale standaard containerbreedte (hier 1100px) als voorkeursbreedte —
	   dat won het van de 1fr-verdeling van de grid hierboven (elke kolom eiste
	   dus onafhankelijk 1100px op, 3x naast elkaar). width:100% dwingt de kolom
	   om wél de grid-celbreedte te volgen. */
	width: 100%;
	box-sizing: border-box;
	/* Nummer komt los in de linkerbovenhoek te staan (op verzoek van Sylvie,
	   29/09/2026: "Kan het nummer in de linker bovenhoek"), dus ruimte
	   vrijhouden bovenaan en de kaart als positioneringscontext instellen. */
	position: relative;
	padding-top: 40px;
	/* Elke kaart heeft dezelfde opbouw, onder elkaar: afbeelding, titel, dropdown
	   (Sylvie, 05/10/2026: "deze moeten allemaal gelijk zijn / even hoog"). Vroeger stonden
	   afbeelding en titel naast elkaar zolang de titel paste ("Kies je werkhoogte") en
	   eronder als de titel langer was, waardoor de eerste kaart lager was dan de andere
	   twee. De kaarten zijn even hoog door de grid; de dropdown staat onderaan. Bricks
	   zet dit element zelf op flex-direction:column via zijn eigen (op
	   altus.be gehoste) gegenereerde CSS — !important nodig om dat te winnen,
	   want die regel gebruikt een ID-selector (specifieker dan een klasse). */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap;
	align-items: stretch;
	row-gap: 10px;
}

/* De shortcode-wrapper van Bricks (.brxe-shortcode) zelf uit de flow halen,
   zodat .altus-snelzoeker__kop en .altus-snelzoeker__select-wrap zich als
   rechtstreekse flex-items van .altus-snelzoeker__stap gedragen — naast de
   afbeelding i.p.v. eronder. */
.altus-snelzoeker__stap > .brxe-shortcode {
	display: contents;
}

.altus-snelzoeker__kop {
	flex: 0 0 auto;
	min-width: 0;
}

.altus-snelzoeker__kop label {
	font-size: 14px;
	font-weight: 700;
	color: var(--altus-navy, #223a80);
	margin: 0;
}

/* Losstaand in de hoek i.p.v. naast het label (op verzoek van Sylvie,
   29/09/2026: "Kan het nummer in de linker bovenhoek"). */
.altus-snelzoeker__nr {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--altus-navy, #223a80);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}

/* Altijd onderaan de kaart, ook als de titel van een andere kaart korter of langer is. */
.altus-snelzoeker__select-wrap {
	flex: 0 0 auto;
	margin-top: auto;
}

/* Eigen afbeelding, rechtstreeks als Bricks-afbeeldingselement door Sylvie in te vullen.
   De afbeelding wordt NOOIT afgekapt (Sylvie, 05/10/2026: "moet steeds volledig getoond
   worden"). De ruimte voor het icoon is bij alle kaarten even hoog (120px, dus de kaarten
   blijven gelijk); de afbeelding staat daar volledig in, gecentreerd (object-fit:contain), en
   krimpt mee als de kaart smal is. Vroeger sneed object-fit:cover de zijkanten weg, waardoor
   het rechterpoppetje van Steigerbreedte een stukje kwijtraakte.
   Tip: de huidige bestanden (760x256) hebben veel witruimte rond het tekeningetje, waardoor het
   icoon klein oogt. Bestanden die strak op het tekeningetje bijgesneden zijn vullen de ruimte
   volledig; die verhoudingen worden vanzelf goed getoond. */
.altus-snelzoeker__icoon--afbeelding {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: contain;
	object-position: center;
	flex: 0 0 auto;
}

.altus-snelzoeker__select-wrap {
	position: relative;
}

.altus-snelzoeker__select {
	width: 100%;
	height: 42px;
	padding: 0 36px 0 12px;
	border: 1px solid #dde;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
	font-family: inherit;
	box-sizing: border-box;
	/* Eigen pijltje via .altus-snelzoeker__chevron hieronder i.p.v. de
	   standaard-pijl van de browser — die viel bij Sylvie niet op genoeg
	   ("toon een pijltje zodat mensen weten dat ze nog iets kunnen kiezen"). */
	appearance: none;
	-webkit-appearance: none;
}

/* Eigen keuzelijst (JS: altus-steiger-snelzoeker.php) i.p.v. de standaardlijst van de browser, zodat rand en
   hover in Altus-oranje kunnen (Sylvie, 06/10/2026). De echte <select> blijft bestaan, maar is verborgen. */
.altus-snelzoeker__select--verborgen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px !important;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px !important; /* !important: op een telefoon kreeg de verborgen lijst toch de volle breedte en duwde de pagina zijwaarts (08/10/2026) */
}

.altus-sz-dd__knop {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	height: 42px;
	overflow: hidden;
	padding: 0 36px 0 12px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.altus-sz-dd__knop--leeg {
	color: #6b7490;
}

.altus-sz-dd__knop:hover,
.altus-sz-dd__knop:focus,
.altus-sz-dd__knop:focus-visible,
.altus-sz-dd__knop[aria-expanded="true"] {
	border-color: var(--altus-oranje, #c2410c);
	box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.25);
	outline: 0;
}

.altus-sz-dd__lijst {
	background: #fff;
	border: 1px solid var(--altus-oranje, #c2410c);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(34, 58, 128, 0.18);
	box-sizing: border-box;
	left: 0;
	list-style: none;
	margin: 4px 0 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
}

.altus-sz-dd__lijst[hidden] {
	display: none;
}

.altus-sz-dd__optie {
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
	padding: 9px 12px;
}

.altus-sz-dd__optie--gekozen {
	font-weight: 700;
}

.altus-sz-dd__optie--actief {
	background: var(--altus-oranje, #c2410c);
	color: #fff;
}

.altus-sz-dd__optie--uit {
	color: #b3b8c9;
	cursor: not-allowed;
}

.altus-snelzoeker__chevron {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--altus-oranje, #c2410c);
	font-size: 13px;
	pointer-events: none;
}

.altus-snelzoeker__knop {
	display: block;
	margin-left: auto;
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 6px;
	background: var(--altus-oranje, #c2410c);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}

.altus-snelzoeker__knop:hover {
	background: #9a3412;
}


/* --- altus-homepage-mobiel --- */
/**
 * Altus — mobiele fixes voor de homepage (los verzameld naarmate ze opduiken
 * bij Sylvies mobiele controle, 29/09/2026).
 *
 * Rechtstreeks via Bricks' eigen breakpoint-instellingen aanpassen werkt niet
 * betrouwbaar via een script (Bricks' gecompileerde CSS-bestand wordt enkel
 * ververst bij opslaan in de builder zelf, en dat bestand wordt bovendien via
 * een mu-plugin herschreven naar de LIVE-site-URL, niet de lokale). Daarom
 * hier als losse, direct werkende overrides — zelfde patroon als de andere
 * feature-specifieke CSS-bestanden in dit project.
 */

/* ---------------------------------------------------- hero ("Top banner") --- */

/* De padding-links van #brxe-sdmnda staat vast op 150px (bedoeld voor desktop,
   naast de afbeelding rechts) en heeft geen eigen mobiele instelling — op een
   telefoonbreedte (375px) liep de tekst half van het scherm af doordat er maar
   375-150=225px overbleef voor de tekstkolom. */

@media (max-width: 767px) {
	#brxe-sdmnda {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		column-gap: 20px !important;
		row-gap: 24px !important;
	}
}

/* De foto's van de topbanner (#brxe-bvnbtt, de wisselende band met de ladders en steigers) worden op een telefoon niet getoond
   (Sylvie, 09/10/2026): ze namen een heel scherm in vóór je bij de inhoud was. Op tablet en desktop blijven ze staan. */
@media (max-width: 767px) {
	#brxe-bvnbtt {
		display: none !important;
	}
}

/* De titel "Ladders en steigers kopen" (hoofdtitel van de homepage) staat op een telefoon op 1 regel: het lettertype schaalt mee met de
   schermbreedte (de tekst is ongeveer 12,7 keer zo breed als hoog) i.p.v. een vaste maat die op "kopen" afbreekt (Sylvie, 09/10/2026). */
@media (max-width: 767px) {
	#brxe-afpsoj {
		font-size: calc((100vw - 32px) / 12.9);
		white-space: nowrap;
	}
}

@media (max-width: 478px) {
	#brxe-sdmnda {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* GEEN align-self hier zetten op .hero-img-band-0 (eerder wel gedaan, samen
   met een intussen teruggedraaide aspect-ratio-poging) — dat element is
   position:absolute met top/right/bottom/left:0 (vult zijn ouder #brxe-bvnbtt
   volledig), en align-self:flex-start bleek die hoogte-berekening kapot te
   maken: de foto kreeg dan height:0 en werd onzichtbaar, op ELKE
   schermbreedte (29/09/2026, Sylvie: "nu krijg ik daar niets meer te zien").
   Bevestigd met een live A/B-test in de browser (align-self terug op "auto"
   zetten herstelde de hoogte meteen naar 510px). */

/* --------------------------------------------- "Populaire producten"-rij --- */

/* Dit WooCommerce-productraster (#brxe-homepagetop, 9 producten) staat vast op
   4 (ongelijke) kolommen, zonder mobiele instelling — de kaarten duwden de
   hele pagina breder dan het scherm. Twee kolommen op telefoon, één op de
   smalste telefoons (< 400px, kaarten zelf ~180px breed anders te krap). */
@media (max-width: 767px) {
	#brxe-homepagetop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 400px) {
	#brxe-homepagetop ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ------------------------------------------------ zijmarge op de telefoon --- */

/* Tekst mag op een telefoon niet tot tegen de rand van het scherm lopen (Sylvie, 08/10/2026). Veel Bricks-containers hebben
   geen zijpadding. Elke container direct in een sectie krijgt daarom 16px links en rechts. Een eigen padding op een
   specifiek element (#id) wint hier nog altijd van. De banden die zelf een marge regelen (categorieband en de producten-
   banden) blijven buiten schot, anders zouden hun kaarten dubbel ingesprongen staan. */
@media (max-width: 767px) {
	.brxe-section > .brxe-container:not(:has(> .altus-cband)):not(:has(> #brxe-cadeau01)):not(:has(> #brxe-kband01)) {
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* "Kies jouw ideale steiger in 1-2-3": vaste padding van 150px links en rechts (bedoeld voor desktop) liet op een
	   telefoon maar 75px over voor de kaarten; nu staan ze volledig breed onder elkaar. */
	#brxe-9cfde0 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}


/* --- altus-homepage --- */
/**
 * Altus — homepage-opmaak die niet in Bricks zelf staat.
 * Vaste px (de site zet html op 10px, dus rem is hier geen 16px).
 */

/* "Extra deals" / "Tweedekans" onder de hero: twee gelijke knoppen die samen
   de volledige breedte van hun container innemen, met tussenruimte, rand en
   afgeronde hoeken (op verzoek van Sylvie, 02/10/2026). */
.altus-deals-knoppen {
	display: flex !important;
	flex-direction: row !important;
	gap: 14px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 22px 0 6px !important;
	padding: 0 24px;
	box-sizing: border-box;
}

/* Lichter gemaakt na de eerste versie ("die komt nu wel heel lomp over"):
   lager, dunnere rand, geen schaduw, kleiner en minder zwaar lettertype.
   Aanpassen kan hier: padding = hoogte van de knop, font-size/-weight = de
   tekst, border = de rand, border-radius = de afronding. */
.altus-deals-knoppen .altus-deals-knop {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid var(--altus-navy, #223a80) !important;
	border-radius: 8px !important;
	background: #ffd64f;
	color: var(--altus-navy, #223a80);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-deals-knoppen .altus-deals-knop:hover {
	background: var(--altus-oranje, #c2410c);
	color: var(--altus-navy, #223a80);
}

@media (max-width: 767px) {
	.altus-deals-knoppen {
		gap: 10px;
		padding: 0 16px;
	}

	.altus-deals-knoppen .altus-deals-knop {
		padding: 10px 8px;
		font-size: 15px;
	}
}

/* Drie knoppen óp de Altus Deals-banner (Alle Altus Deals / Xtra Altus Deals /
   Tweedekans), onderaan gecentreerd. Op telefoon staat de banner te laag om
   knoppen op te laten rusten: daar komen ze er gewoon onder. */
.altus-dealsbanner {
	position: relative;
	width: 100%;
}

.altus-dealsbanner > img,
.altus-dealsbanner > .brxe-image {
	display: block;
	width: 100%;
	/* Maak je de banner hoger (hoogte op het afbeeldingselement of een ander
	   bestand), dan wordt de afbeelding bijgesneden i.p.v. uitgerekt. */
	object-fit: cover;
	object-position: center;
}

.altus-dealsbanner .altus-deals-knoppen {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	width: min(820px, calc(100% - 48px)) !important;
	margin: 0 !important;
	padding: 0;
	z-index: 2;
}

@media (max-width: 767px) {
	.altus-dealsbanner .altus-deals-knoppen {
		position: static;
		transform: none;
		width: 100% !important;
		flex-wrap: wrap;
		margin: 12px 0 0 !important;
		padding: 0 16px;
	}

	.altus-dealsbanner .altus-deals-knoppen .altus-deals-knop {
		flex: 1 1 100%;
	}
}

/* Review-score onder de hero ("★ 4,7/5 uit 116 reviews"): link naar de Google-reviews van Altus.
   Onderlijning bij hover, zodat duidelijk is dat het aanklikbaar is. */
#brxe-blasqn:hover,
#brxe-blasqn:focus-visible {
	text-decoration: underline;
}


/* --- altus-footer-tablet --- */
/**
 * Altus — footer op tablet-breedte (mu-plugin/thema-onafhankelijk bestand,
 * apart omdat er nog geen footer-specifieke stylesheet bestond).
 *
 * ACHTERGROND
 * De 4 footer-kolommen (Algemeen / Openingsuren / Klantendienst / Mijn
 * account, container #brxe-vzgkhj) hebben in Bricks zelf al een 2-koloms
 * instelling voor "tablet_portrait" (768-991px) — maar Bricks' eigen
 * "mobile_landscape"-drempel ligt op 767px, en DAARONDER staat de container
 * vast op flex-direction:column (1 kolom), zonder tussenstap. Op een
 * telefoonbreedte (bv. 375px) is dat de juiste keuze, maar op een tablet die
 * toevallig net onder de 768px-drempel valt (bv. 700-767px, sommige
 * tablets/DevTools-profielen) oogt 1 volle kolom net zo "kapot" als op de
 * archiefpagina's — vandaar deze eigen tussenlaag (560-767px): dezelfde
 * 2-koloms opmaak als Bricks al voor 768-991px voorziet, gewoon iets verder
 * doorgetrokken. Enkel onder de 560px (kleine telefoons) blijft het echt 1
 * kolom.
 *
 * Gevonden tijdens de tablet-controle van de hele site, 29/09/2026: "In de
 * footer moeten de kolommen ook naast elkaar kunnen i.p.v. nu allemaal onder
 * elkaar."
 */
@media (min-width: 560px) and (max-width: 767px) {
	#brxe-vzgkhj {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}

	#brxe-yqmupw,
	#brxe-nprfhm,
	#brxe-ssvzlo,
	#brxe-zwfhti {
		width: calc(50% - 10px) !important;
	}
}


/* --- altus-reserveonderdelen --- */
/**
 * Altus — reserveonderdelen-tabel per laddermodel (mu-plugin altus-reserveonderdelen.php)
 *
 * Opmaak losjes naar het voorbeeld van altrex-onderdelen.nl: donkere kop boven de
 * tabel, groene/rode voorraadstatus. Hergebruikt de bestaande merkkleuren uit
 * altus-product.css (--altus-navy / --altus-oranje), zodat dit blok bij de rest van
 * de productpagina past.
 */

.altus-reserveonderdelen {
	margin-top: 40px;
}

.altus-reserveonderdelen__titel {
	color: var(--altus-navy);
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 12px;
}

.altus-reserveonderdelen__intro {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 28px;
	max-width: 720px;
}

.altus-reserveonderdelen__subtitel {
	background: #1b1b1b;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	padding: 14px 20px;
}

.altus-reserveonderdelen__tabel {
	background: #fff;
	border-collapse: collapse;
	width: 100%;
}

.altus-reserveonderdelen__tabel th,
.altus-reserveonderdelen__tabel td {
	border-bottom: 1px solid #e1e1e1;
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
}

/* Kleur van het merk waar deze onderdelentabel bij hoort (--am-achtergrond/-tekst,
   ingesteld als inline stijl op .altus-categorie__onderdelen-tabel — zie
   altus_om_merk_kleuren_stijl_attr() in altus-onderdelen-megamenu.php), i.p.v. het
   Altus-oranje: dit blok hoort bij het Onderdelen-luik, dat de kleuren van het
   betreffende merk volgt i.p.v. de Altus-merkkleuren. Rood (Altrex-huisstijl,
   #e1001a) blijft de terugval zolang een merk geen eigen kleuren heeft. */
.altus-reserveonderdelen__tabel thead th {
	background: var(--am-achtergrond, #e1001a);
	color: var(--am-tekst, #fff);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.altus-reserveonderdelen__tabel tbody tr:nth-child(even) {
	background: var(--altus-grijs);
}

.altus-reserveonderdelen__afbeelding img {
	display: block;
	height: 48px;
	width: auto;
}

.altus-reserveonderdelen__voorraad {
	align-items: center;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 6px;
	white-space: nowrap;
}

.altus-reserveonderdelen__voorraad--op-voorraad {
	color: var(--altus-groen);
}

.altus-reserveonderdelen__voorraad--op-bestelling {
	color: var(--altus-oranje);
}

.altus-reserveonderdelen__voorraad--niet-op-voorraad {
	color: #d33;
}

.altus-reserveonderdelen__knop.button {
	background-color: var(--am-accent, #e1001a);
	border: 0;
	border-radius: 6px;
	color: var(--am-tekst, #fff);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}

.altus-reserveonderdelen__knop.button:hover {
	background-color: var(--am-accent, #e1001a);
	color: var(--am-tekst, #fff);
	opacity: 0.8;
}

@media (max-width: 782px) {
	.altus-reserveonderdelen__tabel {
		display: block;
		overflow-x: auto;
	}
}


/* --- altus-onderdelen-megamenu --- */
/**
 * Altus — onderdelen-megamenu
 * (mu-plugins altus-onderdelen-megamenu.php)
 *
 * Losstaand van het generieke megamenu (altus-megamenu-render.php): dit is het
 * kolommen-blok dat enkel op het hoofdmenu-item "Onderdelen" gebruikt wordt.
 *
 * Structuur (naar het voorbeeld van altrex-onderdelen.nl):
 *   __balk    — balk, ALTIJD zichtbaar: merklogo + trigger "Alle onderdelen".
 *   __paneel  — dropdown-paneel met de kolommen, standaard [hidden], wordt getoond
 *               door het scriptje in altus_onderdelen_megamenu_script().
 *
 * KLEUREN PER MERK (v2.0): elk merk (Altrex, Solide, Staltor, ...) kan zijn eigen
 * kleuren instellen (zie de repeater "Merkkleuren" op Producten > Merken, en
 * altus_om_merk_kleuren() in altus-onderdelen-megamenu.php). Sylvie kiest zelf per
 * kleur de rol; de shortcode zet de bijhorende CSS-variabele als inline style op dit
 * blok. Onderstaande drie variabelen zijn dus de "standaardkleuren" die gelden zolang
 * een merk een rol niet heeft ingevuld — bewust gelijk aan de oorspronkelijke Altrex-
 * huisstijl (rood/wit/zwart), zodat er zonder ingevulde merkkleuren niets verandert
 * t.o.v. de al goedgekeurde opmaak:
 *   --am-achtergrond — paneel-achtergrond (was vast rood)
 *   --am-tekst       — tekstkleur op die achtergrond (was vast wit)
 *   --am-accent      — balk-achtergrond (was vast --zwart, dezelfde
 *                      kleurvariabele als de omringende Bricks-Sectie, zodat er geen
 *                      zichtbaar kleurverschil met de sectie erachter ontstaat)
 * NIET de Altus-merkkleuren (--altus-oranje/--altus-navy uit altus-product.css) — dit
 * blok toont zich als "[merk]-onderdelen", niet als Altus zelf.
 *
 * GEEN 100vw-uitbreek-truc: die brak de rest van de Bricks-header (logo en hoofdmenu
 * verdwenen). Volledige breedte hoort in Bricks zelf geregeld te worden — zet de
 * sectie/container waarin dit shortcode-element staat op "Full Width" via Bricks'
 * eigen instelling.
 */

.altus-onderdelen-megamenu {
	--am-achtergrond: #d81f1a;
	--am-tekst: #fff;
	--am-accent: var(--zwart, #1a1a1a);

	width: 100%;
	box-sizing: border-box;
}

/* Vangnet: Bricks' eigen "Shortcode"-element genereert een wrapper-div
   (.brxe-shortcode) rond onze HTML, met zijn eigen breedte-instelling los van de
   Container eromheen. Als die wrapper zelf niet 100% breed staat, blijft dit blok
   smal ondanks width:100% hierboven (100% van een smalle ouder is nog smal). Deze
   regel forceert de breedte van precies dié ene wrapper — geraakt dus geen ander
   Shortcode-element op de site. :has() werkt niet in oudere browsers; voor die
   uitzondering blijft de Bricks-breedte-instelling zelf nodig. */
.brxe-shortcode:has(> .altus-onderdelen-megamenu) {
	width: 100% !important;
	max-width: 100% !important;
}

.altus-onderdelen-megamenu [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------- balk -- */

.altus-onderdelen-megamenu__balk {
	align-items: center;
	background: var(--am-accent);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	/* De balk-achtergrond is bewust 100vw breed, maar de INHOUD moet uitlijnen
	   met de content-containerbreedte van de rest van de site (Bricks' eigen
	   --container-max-width, hier 1140px op desktop — geverifieerd in Bricks'
	   style-manager-CSS, niet gegokt), niet met de volledige schermbreedte.
	   padding-right is daarom berekend: de afstand van de rand van het scherm
	   tot de rand van die gecentreerde content-container. max() voorkomt een
	   (te) kleine of negatieve waarde zodra het venster smaller is dan
	   --container-max-width. */
	justify-content: flex-start;
	/* Links 16px, niet 32px: dat is precies de linker-padding van de sectie
	   met het Altus-logo bovenaan (#brxe-zddcws, padding: 8px 16px !important —
	   geverifieerd in de server-CSS) — zo lijnt het Altrex-logo in deze balk
	   verticaal exact uit met het Altus-logo erboven. */
	padding: 18px max(16px, calc((100vw - var(--container-max-width, 1140px)) / 2)) 18px 16px;
}

.altus-onderdelen-megamenu__logo-link {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.altus-onderdelen-megamenu__logo {
	height: 44px;
	width: auto;
}

.altus-onderdelen-megamenu__trigger {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--am-tekst);
	cursor: pointer;
	font-size: 19px;
	font-weight: 600;
	padding: 0 0 4px;
}

.altus-onderdelen-megamenu__trigger:hover {
	border-bottom-color: var(--am-tekst);
}

.altus-onderdelen-megamenu__pijl {
	display: inline-block;
	transition: transform 0.15s ease;
}

.altus-onderdelen-megamenu__trigger[aria-expanded="true"] .altus-onderdelen-megamenu__pijl {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------- paneel --
   Zelfde techniek als het bestaande hoofdnavigatie-megamenu (.altus-mega in
   altus-megamenu-render.php): position:fixed + left:0 + width:100vw haalt het
   paneel volledig uit de normale layout-flow, zodat het de flex-rij eromheen
   (met het logo) niet beïnvloedt — in tegenstelling tot de eerdere poging met
   position:relative + negatieve marge, die de header brak. De top-positie
   (net onder de balk) wordt door het scriptje hieronder berekend en gezet,
   net als bij het bestaande systeem. */

.altus-onderdelen-megamenu__paneel {
	background: var(--am-achtergrond);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	left: 0;
	/* Zelfde links/rechts-padding als .altus-onderdelen-megamenu__balk (32px):
	   zo lijnt de inhoud van het paneel uit met "Alle onderdelen" in de balk
	   erboven, dus ook met het logo net daarvoor. */
	padding: 32px 32px;
	position: fixed;
	width: 100vw;
	z-index: 9999;
}

.altus-onderdelen-megamenu__kolom {
	color: var(--am-tekst);
	min-width: 180px;
}

.altus-onderdelen-megamenu__kolomtitel {
	color: var(--am-tekst);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.altus-onderdelen-megamenu__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.altus-onderdelen-megamenu__lijst li {
	margin: 0 0 12px;
}

.altus-onderdelen-megamenu__lijst a {
	color: var(--am-tekst);
	font-size: 20px;
	text-decoration: none;
}

.altus-onderdelen-megamenu__lijst a:hover {
	text-decoration: underline;
}

/* De tak die je nu bekijkt (zie 'actief' in altus_onderdelen_megamenu_kolom_items()
   in altus-onderdelen-megamenu.php) — enkel van toepassing in "Per categorie". */
.altus-onderdelen-megamenu__lijst-actief {
	font-weight: 700;
	text-decoration: underline;
}

.altus-onderdelen-megamenu__toon-alle {
	margin: -4px 0 0;
}

.altus-onderdelen-megamenu__toon-alle a {
	color: var(--am-tekst);
	font-size: 17px;
	font-weight: 600;
	text-decoration: underline;
}


/* --- altus-gratis-verzending-balk --- */
/**
 * Altus — gratis verzending-voortgangsbalk (mu-plugin altus-gratis-verzending-balk.php)
 * Opmaak naar het voorbeeld van het oude XStore-widget: stippellijn-kader in
 * Altus-oranje, icoontje + tekst, grijze voortgangsbalk die in Altus-oranje vult.
 */

.altus-verzendbalk {
	border: 1px dashed var(--altus-oranje);
	border-radius: 6px;
	padding: 14px 16px;
}

.altus-verzendbalk__tekst {
	align-items: center;
	color: var(--altus-navy);
	display: flex;
	font-size: 14px;
	gap: 10px;
	line-height: 1.4;
	margin-bottom: 10px;
}

.altus-verzendbalk__icoon {
	color: var(--altus-oranje);
	flex-shrink: 0;
	font-size: 16px;
}

.altus-verzendbalk__balk {
	background: var(--altus-grijs);
	border-radius: 20px;
	height: 8px;
	overflow: hidden;
	width: 100%;
}

.altus-verzendbalk__vulling {
	background: var(--altus-oranje);
	border-radius: 20px;
	height: 100%;
	transition: width 0.3s ease;
}

/* Gratis verzending behaald (of: dit product wordt al gratis geleverd) = vakje met
   groene achtergrond, tekst en icoon; rand en laadbalk blijven Altus-oranje. */
.altus-verzendbalk--behaald {
	background: #eaf7ee;
	border-style: solid;
}

.altus-verzendbalk--behaald .altus-verzendbalk__tekst {
	color: #14803a;
	font-weight: 600;
}

.altus-verzendbalk--behaald .altus-verzendbalk__icoon {
	color: #1fa84a;
}


/* --- altus-steiger-filters --- */
/**
 * Altus — filter-sidebar voor "gewone" archiefpagina's (mu-plugin
 * altus-steiger-filters.php), gestart bij Kamersteigers.
 *
 * Visuele stijl overgenomen uit Sylvies eigen mockup
 * (~/Desktop/Claude/steigernavigatie/mockup_kamersteigers_verbeterd.html), maar met
 * Altus' eigen kleurvariabelen (--altus-navy/--altus-oranje, zie altus-product.css)
 * i.p.v. de placeholder-kleuren uit de mockup.
 */

.altus-steigerfilter {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.altus-steigerfilter__reset-alles {
	background: var(--altus-navy, #223a80);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.altus-steigerfilter__reset-alles:hover {
	color: #fff;
	opacity: 0.85;
}

.altus-steigerfilter__groep-titel {
	align-items: center;
	border-bottom: 2px solid var(--altus-oranje, #c2410c);
	color: var(--altus-navy, #223a80);
	display: flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: space-between;
	margin-bottom: 10px;
	padding-bottom: 6px;
}

.altus-steigerfilter__wis {
	color: var(--altus-oranje, #c2410c);
	font-size: 11px;
	font-weight: 400;
	text-decoration: none;
}

.altus-steigerfilter__wis:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- tegels --
   Breedte steiger / Platform uitvoering: enkelvoudige keuze. Onder elkaar op
   volledige blokbreedte (i.p.v. naast elkaar) — bij 3+ opties liepen de tegels
   anders buiten het filterblok, over de productenkolom heen. */

.altus-steigerfilter__tegels {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.altus-steigerfilter__tegel {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 6px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	width: 100%;
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	padding: 9px 12px;
	/* Links uitlijnen, zelfde als de Werkhoogte-banden en de vinkjes-groepen
	   ernaast/eronder — voordien centraal, waardoor de tekst per filtergroep
	   soms links en soms centraal stond. */
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.altus-steigerfilter__tegel input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steigerfilter__tegel:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__tegel--actief {
	background: #fff4ef;
	border-color: var(--altus-oranje, #c2410c);
	color: var(--altus-oranje, #c2410c);
}

/* Niet-klikbaar "je bevindt je hier"-label (bv. Type op een Trapladders-
   subcategoriepagina) — zelfde uiterlijk als een actieve tegel, maar zonder
   pointer-cursor of hover-effect, want er valt hier niets te kiezen. */
.altus-steigerfilter__tegel--label {
	cursor: default;
}

.altus-steigerfilter__tegel--label:hover {
	border-color: var(--altus-oranje, #c2410c);
}

/* Merk: logo-tegels (meervoudige keuze) i.p.v. tekst — breder/hoger dan de gewone
   tegels zodat een logo goed leesbaar blijft, en in een grid (meer dan 3 merken
   passen niet altijd naast elkaar op 1 rij zoals bij breedte/platform). */
.altus-steigerfilter__tegels--merk {
	display: grid;
	flex-wrap: unset;
	grid-template-columns: repeat(2, 1fr);
}

.altus-steigerfilter__tegel--merk {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 56px;
	padding: 8px;
}

.altus-steigerfilter__merk-logo {
	display: block;
	height: auto;
	max-height: 36px;
	max-width: 100%;
	width: auto;
}

.altus-steigerfilter__merk-naam {
	font-size: 12px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ banden --
   Werkhoogte: enkelvoudige keuze, met korte uitleg per band. */

.altus-steigerfilter__banden {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.altus-steigerfilter__band {
	align-items: center;
	background: #fff;
	border: 1px solid #dde;
	/* Zelfde afronding als .altus-steigerfilter__tegel hierboven — stond
	   voordien op 4px i.p.v. 6px, een klein maar zichtbaar verschil tussen
	   filtergroepen die verder identiek ogen. */
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	padding: 8px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.altus-steigerfilter__band input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steigerfilter__band:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__band--actief {
	background: #fff4ef;
	border-color: var(--altus-oranje, #c2410c);
}

.altus-steigerfilter__band--actief .altus-steigerfilter__band-tekst strong {
	color: var(--altus-oranje, #c2410c);
}

.altus-steigerfilter__band-tekst {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}

.altus-steigerfilter__band-tekst strong {
	color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__band-beschrijving {
	color: #888;
	font-size: 11px;
}

/* ----------------------------------------------------------------- vinkjes --
   Gebruik / Type opbouw: meervoudige keuze. */

.altus-steigerfilter__vinkjes {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.altus-steigerfilter__vinkje {
	align-items: center;
	color: #333;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 8px;
}

.altus-steigerfilter__vinkje input {
	accent-color: var(--altus-oranje, #c2410c);
	height: 14px;
	width: 14px;
}

/* Kleurstaaltje bij "Kleur/afwerking" (Molenaarstrappen) — altus-molenaarstrap-
   filters.php: een vaste, lichte rand zodat ook een wit staaltje nog zichtbaar
   afgebakend blijft tegen de witte zijbalk. */
.altus-steigerfilter__kleur-staaltje {
	border: 1px solid #d0d5dd;
	border-radius: 3px;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* ------------------------------------------------------------ sorteren op --
   [altus_steiger_sortering]: eigen, apart blokje BOVEN het productenraster (op
   verzoek van Sylvie), los van de filter-zijbalk hierboven. */

/* De Shortcode-container die zowel [altus_*_specifieke_werkhoogtes/treden] als
   [altus_*_sortering] bevat (op verzoek van Sylvie samen in 1 Bricks-element
   geplaatst) wordt hier tot een flexrij gemaakt, zodat "Sorteren op" via
   margin-left: auto hieronder altijd uiterst rechts kan uitlijnen — ook wanneer
   het de ENIGE inhoud is (bv. nog geen werkhoogte gekozen): met margin-left:
   auto op een flex-item duwt de vrije ruimte het item dan alsnog naar rechts. */
.brxe-shortcode:has(> .altus-steiger-sortering) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.altus-steiger-sortering {
	/* inline-flex i.p.v. flex: anders trekt Bricks' eigen <form>-standaard (100%
	   breed) dit blokje over de volle breedte van de pagina, terwijl label + veld
	   net compact naast elkaar (op 1 lijn) moeten staan. */
	align-items: center;
	display: inline-flex;
	gap: 10px;
	margin-bottom: 16px;
	margin-left: auto;
	white-space: nowrap;
	width: auto;
}

.altus-steiger-sortering__label {
	color: var(--altus-navy, #223a80);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.altus-steiger-sortering__select {
	/* Bricks zet standaard appearance: none op <select> (voor een eigen pijltje dat
	   hier nooit toegevoegd was) — vandaar het ontbrekende pijltje; hier een eigen
	   pijltje terug toevoegen i.p.v. gewoon terugvallen op de kale browserstijl. */
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23223a80' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 10px;
	border: 1px solid #dde;
	border-radius: 4px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	/* Zonder expliciete line-height erft dit veld ergens een regelhoogte van 40px
	   (vermoedelijk een generieke form-veld-stijl elders in het thema) — een
	   select met appearance: none centreert zijn waarde niet betrouwbaar binnen
	   zo'n overdreven regelhoogte, waardoor "Standaard" lager stond dan het
	   "Sorteren op"-label ernaast. Concreet gemeten (DevTools) en hersteld naar
	   een regelhoogte die bij de tekstgrootte past. */
	line-height: 20px;
	padding: 8px 32px 8px 12px;
	width: auto;
}

.altus-steiger-sortering__select:hover {
	border-color: var(--altus-navy, #223a80);
}

/* ------------------------------------------------ specifieke werkhoogte --
   [altus_steiger_specifieke_werkhoogtes]: verschijnt naast "Sorteren op" zodra
   links in de zijbalk een werkhoogte-BAND gekozen is, en laat toe binnen die band
   te verfijnen naar specifieke waarden (bv. "3.80 m") — vinkjes als compacte
   pilletjes, zelfde taal als de "Sorteren op"-balk ernaast. */

.altus-steiger-specifieke-werkhoogte {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	margin-left: 16px;
}

.altus-steiger-specifieke-werkhoogte__label {
	color: var(--altus-navy, #223a80);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.altus-steiger-specifieke-werkhoogte__vinkje {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 16px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.altus-steiger-specifieke-werkhoogte__vinkje input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steiger-specifieke-werkhoogte__vinkje:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steiger-specifieke-werkhoogte__vinkje:has(input:checked) {
	background: #fff4ef;
	border-color: var(--altus-oranje, #c2410c);
	color: var(--altus-oranje, #c2410c);
}

/* -------------------------------------------------------- laadindicator --
   Elke filter/sortering/paginaklik is een volledige pagina-navigatie (geen
   AJAX) — dit ladder-icoontje (wit → oranje, van onder naar boven) geeft
   meteen een signaal dat er iets aan het laden is, i.p.v. dat de bezoeker
   even niets zag gebeuren. */

.altus-steiger-laadindicator {
	align-items: center;
	background: rgba(255, 255, 255, 0.85);
	display: none;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 9999;
}

.altus-steiger-laadindicator--actief {
	display: flex;
}

.altus-steiger-laadindicator__ladder {
	height: 96px;
	width: 60px;
}

.altus-steiger-laadindicator__laag--wit {
	fill: #e3e6ef;
}

.altus-steiger-laadindicator__laag--oranje {
	fill: var(--altus-oranje, #c2410c);
}

/* De animatie staat bewust ENKEL op de actieve-toestand, niet los op de laag
   zelf: als het icoontje verborgen is (display: none) blijft de animatieklok
   ondertussen soms toch lopen, waardoor ze de 2de/3de keer niet meer vanaf 0%
   herstart — vandaar dat het de eerste keer wél, maar daarna niet meer vlot
   liep. Zo start de animatie elke keer opnieuw écht bij nul. */
.altus-steiger-laadindicator--actief .altus-steiger-laadindicator__laag--oranje {
	animation: altus-steiger-laadindicator-vullen 0.6s linear infinite;
}

/* Kort genoeg (0,6s) om, ongeacht hoe snel de pagina daadwerkelijk laadt, minstens
   1 volledige cyclus (leeg → helemaal vol) te tonen vóór de browser de pagina
   ombouwt — anders lijkt het icoontje halverwege af te breken, en bij een snellere
   herlaadbeurt (bv. door browsercache) elke keer een beetje vroeger, wat aanvoelt
   alsof de pagina vasthangt. `linear` i.p.v. `ease-in-out`: geen vertraging tegen
   het einde, dus het voelt ook niet aan alsof ze "blijft haperen" net voor vol. */
@keyframes altus-steiger-laadindicator-vullen {
	0% {
		clip-path: inset(100% 0 0 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}

/* --------------------------------------------------- tablet/mobiel --------
   De filter-kolom naast de producten staat in elk archiefsjabloon vast op
   15% breedte (bedoeld voor desktop, naast een brede productenkolom) — zonder
   mobiele/tablet-instelling. Bij een smallere rij (bv. 560px na de
   sectiepadding op een tablet) is 15% maar ~84px: te smal voor zelfs één
   woord, en de filtertegels + merklogo's persen zich daar krom in
   (gevonden tijdens de tablet-controle van de hele site, 29/09/2026: "De
   filters op de archiefpagina zijn niet mobielvriendelijk"). width:100%
   dwingt de kolom naar een eigen volle rij (de rij zelf staat al op
   flex-wrap), zodat filters bovenaan en producten eronder komen te staan —
   in plaats van allebei krom naast elkaar.
   Elk archief-categorie heeft zijn eigen shortcode-element-ID (geen
   gedeelde klasse beschikbaar op die buitenste Bricks-container), vandaar
   deze lijst: Steigers, Dakrandbeveiliging, Bordestrappen, Trapladders +
   Ladders (delen hetzelfde sjabloon/ID), Zoldertrappen, Molenaarstrappen. */
@media (max-width: 991px) {
	#brxe-axrnuv,
	#brxe-ba173b,
	#brxe-btad00,
	#brxe-edbfee,
	#brxe-9d2d39,
	#brxe-fadd5d {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}
}

/* Tablet (en kleiner): de rij "filters + producten" van elk archiefsjabloon
   staat in Bricks op rij zonder tabletinstelling, waardoor de producten naast
   de volle-breedte-zijbalk buiten beeld vielen (pagina 1300 px breed op een
   scherm van 768 px). Hier onder elkaar zetten: filters boven, producten eronder.
   Rij-containers per sjabloon: Steigers, Trapladders + Ladders, Zoldertrappen,
   Dakrandbeveiliging, Bordestrappen, Molenaarstrappen + Brandladders. */
@media (max-width: 991px) {
	#brxe-dxdaxu,
	#brxe-0b4672,
	#brxe-44fe42,
	#brxe-2ff86f,
	#brxe-bt2c17,
	#brxe-4cc2c2 {
		flex-direction: column !important;
		align-items: stretch !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}

	#brxe-dxdaxu > *,
	#brxe-0b4672 > *,
	#brxe-44fe42 > *,
	#brxe-2ff86f > *,
	#brxe-bt2c17 > *,
	#brxe-4cc2c2 > * {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* Tablet: twee producten naast elkaar (met de zijbalk nu boven het raster is
   er ruimte voor 4 smalle kaartjes, maar die zijn onleesbaar klein). */
@media (min-width: 600px) and (max-width: 991px) {
	#brxe-dxdaxu ul.products,
	#brxe-0b4672 ul.products,
	#brxe-44fe42 ul.products,
	#brxe-2ff86f ul.products,
	#brxe-bt2c17 ul.products,
	#brxe-4cc2c2 ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* --- altus-categorie-banner --- */
/**
 * Altus — categoriebanner met subcategorieën bovenaan een archiefpagina.
 *
 * De banner zelf is een gewoon Bricks-element in het archiefsjabloon (container
 * "Categoriebanner" met een Terms-lus over de subcategorieën): inhoud, volgorde
 * en aantal pas je aan in de Bricks-builder. Dit bestand regelt enkel de opmaak
 * via de klassen .altus-cat-banner / .altus-cat-tegel; de pijltjes komen uit
 * altus-categorie-banner.js. Vaste px (html staat op 10px).
 *
 * Alle tegels zijn exact even breed en even hoog (ook zonder afbeelding of met
 * een korte/lange naam), en schuiven in één rij.
 */

.altus-cat-banner-wrap {
	position: relative;
	width: 100%;
	max-width: 1160px;
	margin: 36px auto 4px;
	box-sizing: border-box;
}

.altus-cat-banner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 16px;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	/* Ruimte rond de tegels, zodat rand en schaduw bij het schuiven niet worden afgesneden. */
	padding: 6px 4px 12px !important;
	box-sizing: border-box;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.altus-cat-banner::-webkit-scrollbar {
	display: none;
}

/* Zonder wrapper (bv. vóór het script laadt) en zonder subcategorieën: niets tonen. */
.altus-cat-banner:not(:has(.altus-cat-tegel)) {
	display: none !important;
}

.altus-cat-banner-wrap:not(:has(.altus-cat-tegel)) {
	display: none;
}

.altus-cat-tegel {
	flex: 0 0 200px !important;
	width: 200px !important;
	height: 236px !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 20px 16px !important;
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	scroll-snap-align: start;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.altus-cat-tegel:hover {
	border-color: var(--altus-oranje, #c2410c);
	box-shadow: 0 4px 14px rgba(34, 58, 128, 0.12);
	transform: translateY(-2px);
}

/* Vast afbeeldingsvlak; heeft een categorie geen afbeelding, dan blijft dat vlak leeg. */
.altus-cat-tegel__img {
	flex: 0 0 112px;
	width: 100%;
	height: 112px;
	object-fit: contain;
	margin: 0;
}

.altus-cat-tegel:not(:has(img))::before {
	content: "";
	flex: 0 0 112px;
	display: block;
}

.altus-cat-tegel__naam {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--altus-navy, #223a80) !important;
	/* Naam krijgt altijd 2 regels ruimte, langere namen worden netjes afgekapt. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.altus-cat-tegel:hover .altus-cat-tegel__naam {
	color: var(--altus-oranje, #c2410c) !important;
}

/* Pijltjes — enkel zichtbaar als er iets te schuiven valt (script haalt [hidden] weg). */
.altus-cat-banner__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e2e6ec;
	border-radius: 50%;
	background: #fff;
	color: var(--altus-navy, #223a80);
	box-shadow: 0 2px 8px rgba(34, 58, 128, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-cat-banner__pijl[hidden] {
	display: none;
}

.altus-cat-banner__pijl:hover {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

.altus-cat-banner__pijl--vorige {
	left: -52px;
}

.altus-cat-banner__pijl--volgende {
	right: -52px;
}

/* Te smal voor pijltjes naast de banner: ze komen dan over de rand van de tegels. */
@media (max-width: 1260px) {
	.altus-cat-banner__pijl--vorige {
		left: 4px;
	}

	.altus-cat-banner__pijl--volgende {
		right: 4px;
	}
}

@media (max-width: 767px) {
	.altus-cat-banner-wrap {
		margin-top: 20px;
	}

	.altus-cat-banner {
		padding: 6px 16px 12px !important;
		gap: 12px;
		scroll-padding-left: 16px;
	}

	.altus-cat-tegel {
		flex-basis: 170px !important;
		width: 170px !important;
		height: 216px !important;
	}

	.altus-cat-tegel__img,
	.altus-cat-tegel:not(:has(img))::before {
		flex-basis: 96px;
		height: 96px;
	}

	/* Op telefoon: vingerzwiepen, geen pijltjes. */
	.altus-cat-banner__pijl {
		display: none !important;
	}
}


/* --- altus-categorie-band --- */
/**
 * Altus — categorie-band op de homepage ([altus_categorie_band], zie
 * mu-plugins/altus-categorie-band.php).
 *
 * Opgemaakt in vaste px (de site zet html op 10px, dus rem is hier niet
 * 16px — zie de lettergrootte-ontdekking van 30/09/2026).
 */

.altus-cband {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* Even breed als de snelzoeker erboven (volle breedte); de zijmarge
	   houdt ruimte voor de pijltjes, zodat die niet buiten beeld vallen. */
	padding: 0 60px;
}

.altus-cband__spoor {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 8px;
}

.altus-cband__spoor::-webkit-scrollbar {
	display: none;
}

/* 6 tegels zichtbaar op desktop; de rest schuift. */
.altus-cband__tegel {
	flex: 0 0 calc((100% - 5 * 20px) / 6);
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-decoration: none;
	scroll-snap-align: start;
}

/* Gekleurd, afgerond blok bovenaan; de afbeelding steekt er onderaan iets
   over uit (zoals in het voorbeeld). multiply laat de witte achtergrond van
   jpg-categoriefoto's wegvallen tegen het kleurblok. */
.altus-cband__blok {
	position: relative;
	display: block;
	height: 150px;
	border-radius: 14px 14px 0 0;
	background: #dfe6f5;
	transition: background 0.2s ease;
}

.altus-cband__img {
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 88%;
	height: 150px;
	object-fit: contain;
	object-position: center bottom;
	mix-blend-mode: multiply;
	transition: transform 0.25s ease;
}

.altus-cband__naam {
	display: block;
	margin-top: 22px;
	padding: 0 6px 4px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--altus-navy, #223a80);
	transition: color 0.2s ease;
}

/* Bij hover wordt het blok wit (Sylvie, 05/10/2026), niet donkerder. De afbeeldingen staan op
   mix-blend-mode: multiply, dus hun witte achtergrond valt mee weg. */
.altus-cband__tegel:hover .altus-cband__blok {
	background: #fff;
}

.altus-cband__tegel:hover .altus-cband__img {
	transform: translateX(-50%) translateY(-4px);
}

.altus-cband__tegel:hover .altus-cband__naam {
	color: var(--altus-oranje, #c2410c);
}

/* Pijltjes — alleen zichtbaar als er iets te schuiven valt (JS haalt
   [hidden] weg). */
.altus-cband__pijl {
	position: absolute;
	top: 66px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e2e6ec;
	border-radius: 50%;
	background: #fff;
	color: var(--altus-navy, #223a80);
	box-shadow: 0 2px 8px rgba(34, 58, 128, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-cband__pijl[hidden] {
	display: none;
}

.altus-cband__pijl:hover {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

.altus-cband__pijl--vorige {
	left: 10px;
}

.altus-cband__pijl--volgende {
	right: 10px;
}

@media (max-width: 991px) {
	.altus-cband__tegel {
		flex-basis: calc((100% - 3 * 20px) / 4);
	}
}

@media (max-width: 767px) {
	.altus-cband {
		padding: 0 16px;
	}

	.altus-cband__spoor {
		gap: 14px;
	}

	.altus-cband__tegel {
		flex-basis: calc((100% - 14px) / 2.4);
		min-width: 0;
	}

	.altus-cband__blok,
	.altus-cband__img {
		height: 120px;
	}

	.altus-cband__naam {
		font-size: 16px;
	}

	/* Op telefoon: vingerzwiepen, geen pijltjes. */
	.altus-cband__pijl {
		display: none !important;
	}
}