/**
 * 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;
	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, #ff6a00);
}

.brxe-woocommerce-products-pagination .page-numbers.current {
	background: var(--altus-oranje, #ff6a00);
	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, #ff6a00);
	color: #fff;
}

/* [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). */
@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 {
		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 {
		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, #ff6a00));
	font-size: 40px;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	padding-top: 0;
}

/* 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 -- */

.altus-categorie__intro-rij {
	align-items: center;
	display: flex;
	gap: 48px;
	margin-bottom: 32px;
}

.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;
}

@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);
}

.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;
}

/* Introblok onderaan de Bordestrappen-archiefpagina's: dezelfde marge t.o.v.
   het raster als de standaard archiefpagina's (voorheen in het verwijderde
   altus-bordestrap-landing.css). */
#brxe-btb9fa {
	margin-top: 80px;
	margin-bottom: 80px;
}