/* Altus CSS-bundel 1.1: altus-koopjeshoek-band, altus-extra-deal-klok */

/* --- altus-koopjeshoek-band --- */
/**
 * Altus — Koopjeshoek-band + "Extra deal"-label (mu-plugins/altus-koopjeshoek-band.php).
 * De band is het Bricks-element #brxe-kband01 (en de cadeau-band #brxe-cadeau01, zelfde opmaak) (gewone productkaarten) dat hier
 * als schuifband wordt getoond. Vaste px (html staat op 10px).
 */

/* ---- Label ---- */
.altus-extradeal-label {
	position: absolute;
	top: 8px;
	/* Rechtsboven: linksboven zit al het zwarte "Professioneel"-label. */
	right: 8px;
	z-index: 3;
	display: block;
	line-height: 0;
	pointer-events: none;
}

.altus-extradeal-label img {
	display: block;
	width: 84px;
	height: auto;
}

/* Productpagina: de galerijopmaak (.brxe-product-gallery .woocommerce-product-gallery__image img, met !important) rekte het label op tot de
   volle breedte van de foto. Hier dezelfde grootte als op de kaarten (84px, mobiel 66px), net als het cadeau-label (Sylvie, 12/10/2026). */
.woocommerce-product-gallery__image .altus-extradeal-label img {
	height: auto !important;
	max-width: none !important;
	width: 84px !important;
}

/* In de miniaturen onder de foto staat het label niet (het bedekte de miniatuur). Staat er ook een cadeau-label op de foto, dan komt dat
   onder het Extra deal-label in plaats van erover (84px breed = ±59px hoog + marge). */
.brx-thumbnail-slider-wrapper .altus-extradeal-label {
	display: none;
}

.woocommerce-product-gallery__image:has(.altus-extradeal-label) .altus-cadeau-label--foto {
	top: 76px;
}

@media (max-width: 767px) {
	.woocommerce-product-gallery__image .altus-extradeal-label img {
		width: 66px !important;
	}

	.woocommerce-product-gallery__image:has(.altus-extradeal-label) .altus-cadeau-label--foto {
		top: 63px;
	}
}

/* ---- Band ---- */
/* Even breed en met dezelfde kaartgrootte als de rij "meest verkochte
   producten" erboven (#brxe-homepagetop): 1100px, 4 kaarten, 18px ertussen.
   De pijltjes staan buiten die 1100px. */
#brxe-kband01,
#brxe-cadeau01 {
	position: relative;
	width: 100% !important;
	max-width: 1100px !important;
	min-width: 0 !important;
	margin: 10px auto 0 !important;
	box-sizing: border-box;
	padding: 0;
}

#brxe-kband01 ul.products,
#brxe-cadeau01 ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
}

#brxe-kband01 ul.products::-webkit-scrollbar,
#brxe-cadeau01 ul.products::-webkit-scrollbar {
	display: none;
}

/* 4 kaarten zichtbaar op desktop, zoals in het archief. */
#brxe-kband01 ul.products > li,
#brxe-cadeau01 ul.products > li {
	flex: 0 0 calc((100% - 3 * 18px) / 4) !important;
	width: auto !important;
	max-width: none !important;
	min-width: 220px;
	scroll-snap-align: start;
}

/* Laatste tegel: "Bekijk alle Altus Deals". */
#brxe-kband01 ul.products > li.altus-kband__alle,
#brxe-cadeau01 ul.products > li.altus-kband__alle {
	flex: 0 0 200px !important;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.altus-kband__alle a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 18px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
	border: 1px solid var(--altus-navy, #223a80);
	border-radius: 8px;
	background: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.altus-kband__alle a:hover {
	background: var(--altus-oranje, #ff6a00);
	color: var(--altus-navy, #223a80);
}

#brxe-kband01 .altus-kband__pijl,
#brxe-cadeau01 .altus-kband__pijl {
	position: absolute;
	top: 130px;
	z-index: 4;
	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;
}

#brxe-kband01 .altus-kband__pijl[hidden],
#brxe-cadeau01 .altus-kband__pijl[hidden] {
	display: none;
}

#brxe-kband01 .altus-kband__pijl:hover,
#brxe-cadeau01 .altus-kband__pijl:hover {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

#brxe-kband01 .altus-kband__pijl--vorige,
#brxe-cadeau01 .altus-kband__pijl--vorige {
	left: 6px;
}

#brxe-kband01 .altus-kband__pijl--volgende,
#brxe-cadeau01 .altus-kband__pijl--volgende {
	right: 6px;
}

/* Is er links en rechts ruimte naast de 1100px, dan staan de pijltjes daarbuiten. */
@media (min-width: 1240px) {
	#brxe-kband01 .altus-kband__pijl--vorige,
#brxe-cadeau01 .altus-kband__pijl--vorige {
		left: -52px;
	}

	#brxe-kband01 .altus-kband__pijl--volgende,
#brxe-cadeau01 .altus-kband__pijl--volgende {
		right: -52px;
	}
}

@media (max-width: 991px) {
	#brxe-kband01 ul.products > li,
#brxe-cadeau01 ul.products > li {
		flex-basis: calc((100% - 18px) / 2) !important;
	}
}

@media (max-width: 767px) {
	#brxe-kband01,
#brxe-cadeau01 {
		padding: 0 16px;
	}

	#brxe-kband01 ul.products,
#brxe-cadeau01 ul.products {
		gap: 14px;
	}

	#brxe-kband01 ul.products > li,
#brxe-cadeau01 ul.products > li {
		flex-basis: 78% !important;
		min-width: 0;
	}

	#brxe-kband01 .altus-kband__pijl,
#brxe-cadeau01 .altus-kband__pijl {
		display: none !important;
	}

	.altus-extradeal-label img {
		width: 66px;
	}
}

/* ---- Uitlijning van de kaarten in de banden ---- */
/* Elke kaart is een kolom; het blok met levertijd + knoppen zakt naar de onderkant, zodat
   "Bekijk dit product" en de winkelwagenknop bij alle kaarten op één lijn staan, ook als een
   kaart (bv. een samengesteld product) geen aantalkeuze heeft of een langere prijs. */
#brxe-kband01 ul.products > li:not(.altus-kband__alle),
#brxe-cadeau01 ul.products > li {
	display: flex;
	flex-direction: column;
}

#brxe-kband01 ul.products > li > [data-field-id="3e1b96"],
#brxe-cadeau01 ul.products > li > [data-field-id="3e1b96"] {
	margin-top: auto;
}

#brxe-kband01 ul.products > li > [data-field-id="d97fd2"],
#brxe-cadeau01 ul.products > li > [data-field-id="d97fd2"] {
	margin-top: 0;
}

/* Titel: altijd ruimte voor 2 regels, zodat de prijzen op gelijke hoogte beginnen. */
#brxe-kband01 ul.products > li > h5,
#brxe-cadeau01 ul.products > li > h5 {
	min-height: 2.8em;
}

/* "excl. BTW" breekt als geheel af (niet "BTW" alleen op een nieuwe regel). */
#brxe-kband01 .excluded-vat,
#brxe-cadeau01 .excluded-vat {
	white-space: nowrap;
}

/* Kaarten even hoog (Bricks zet ze anders bovenaan uit) zodat het blok met knoppen naar de
   onderkant kan zakken. */
#brxe-kband01 ul.products,
#brxe-cadeau01 ul.products {
	align-items: stretch !important;
}

/* Een vaste hoogte op de eerste kaart (komt uit het raster van het thema/Bricks) liet die kaart korter
   dan de rest: hoogte volgt weer de rij. */
#brxe-kband01 ul.products > li:not(.altus-kband__alle),
#brxe-cadeau01 ul.products > li {
	height: auto !important;
}

/* Cadeau-band: elke kaart heeft dezelfde 7 onderdelen (label, foto, titel, cadeau-vermelding,
   prijs, levertijd + knoppen, rest). Met een raster en "subgrid" delen alle kaarten dezelfde rijen: titel,
   vermelding, prijs en knoppen staan zo bij elke kaart exact op dezelfde hoogte, ook bij een
   vermelding die op 2 of 3 regels staat. Het prijsblok (adviesprijs + onze prijs) en het blok met levertijd +
   knoppen delen daarbinnen nog eens elk 2 rijen (9 rijen in totaal), anders zakte de inhoud van een kaart
   met een korter prijsblok of zonder aantalkeuze naar beneden (Sylvie, 09/10/2026). */
#brxe-cadeau01 ul.products {
	column-gap: 18px;
	display: grid !important;
	grid-auto-columns: max(220px, calc((100% - 3 * 18px) / 4));
	grid-auto-flow: column;
	grid-template-rows: repeat(9, auto);
	row-gap: 0;
}

#brxe-cadeau01 ul.products > li {
	display: grid;
	grid-row: 1 / span 9;
	grid-template-rows: subgrid;
	row-gap: 0;
}

#brxe-cadeau01 ul.products > li > [data-field-id="05a5c0"],
.altus-cadeau-grid ul.products > li > [data-field-id="05a5c0"] {
	grid-row: 1;
}

#brxe-cadeau01 ul.products > li > [data-field-id="b84983"],
.altus-cadeau-grid ul.products > li > [data-field-id="b84983"] {
	grid-row: 2;
}

#brxe-cadeau01 ul.products > li > h5,
.altus-cadeau-grid ul.products > li > h5 {
	grid-row: 3;
}

#brxe-cadeau01 ul.products > li > [data-field-id="f5208b"],
.altus-cadeau-grid ul.products > li > [data-field-id="f5208b"] {
	grid-row: 4;
}

/* Prijsblok: adviesprijs en onze prijs elk in een eigen gedeelde rij (geen "margin-top: auto" meer van hierboven). */
#brxe-cadeau01 ul.products > li > [data-field-id="3e1b96"],
.altus-cadeau-grid ul.products > li > [data-field-id="3e1b96"] {
	display: grid;
	grid-row: 5 / span 2;
	grid-template-rows: subgrid;
	margin-top: 0;
	row-gap: 0;
}

/* Levertijd + knoppen: levertijd in rij 7, het blok met aantal/winkelwagen/"Bekijk dit product" in rij 8. */
#brxe-cadeau01 ul.products > li > [data-field-id="d97fd2"],
.altus-cadeau-grid ul.products > li > [data-field-id="d97fd2"] {
	display: grid;
	grid-row: 7 / span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
}

#brxe-cadeau01 ul.products > li > [data-field-id="33172f"],
.altus-cadeau-grid ul.products > li > [data-field-id="33172f"] {
	grid-row: 9;
}

/* Een samengesteld product heeft geen aantalkeuze: de ruimte ervan blijft gereserveerd, zodat "Bekijk dit product" bij alle kaarten op
   dezelfde hoogte staat (zelfde aanpak als bij de alternatieven onderaan de productpagina). */
#brxe-cadeau01 .altus-steiger-koop__rij,
.altus-cadeau-grid .altus-steiger-koop__rij {
	align-items: flex-start;
	flex-direction: column;
}

#brxe-cadeau01 .altus-steiger-koop__mand,
.altus-cadeau-grid .altus-steiger-koop__mand {
	min-height: 38px;
}

@media (max-width: 991px) {
	#brxe-cadeau01 ul.products {
		grid-auto-columns: calc((100% - 18px) / 2);
	}
}

@media (max-width: 767px) {
	#brxe-cadeau01 ul.products {
		column-gap: 14px;
		grid-auto-columns: 78%;
	}
}

/* Bricks zet zelf "grid-template-columns: repeat(4, 1fr)" op de cadeau-band (inline, per element). Op een telefoon gaf dat vier
   kolommen van 45px in plaats van de brede kaarten uit "grid-auto-columns", waardoor de gratis-productkaarten volledig over
   elkaar vielen (Sylvie, 08/10/2026). Zonder vaste kolommen bepaalt "grid-auto-columns" de breedte, ook op de desktop. */
#brxe-cadeau01 ul.products {
	grid-template-columns: none !important;
}

/* De container rond de producten-banden heeft 60px zijpadding (ruimte voor de pijltjes op de desktop). Op een telefoon zijn er
   geen pijltjes en regelt de band zelf al 16px marge. */
@media (max-width: 767px) {
	.brxe-container:has(> #brxe-cadeau01),
	.brxe-container:has(> #brxe-kband01) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---- Pagina /gratis-cadeau/: alle producten met een cadeau in een raster ---- */
/* Zelfde kaartopbouw als de cadeau-band (7 onderdelen per kaart, in 9 rijen); "subgrid" laat titel, cadeau-
   vermelding, prijs en knoppen bij elke kaart op dezelfde hoogte staan, per rij kaarten. */
/* Ruimte tussen de introtekst en de eerste rij producten. */
.altus-cadeau-grid {
	margin-top: 40px !important;
}

.altus-cadeau-grid ul.products {
	align-items: stretch !important;
	column-gap: 20px;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	row-gap: 0 !important;
}

.altus-cadeau-grid ul.products > li {
	display: grid;
	grid-row: span 9;
	grid-template-rows: subgrid;
	height: auto !important;
	margin: 0 !important;
	padding-bottom: 36px;
	row-gap: 0;
	width: auto !important;
}

.altus-cadeau-grid .excluded-vat {
	white-space: nowrap;
}

.altus-cadeau-grid ul.products > li > h5 {
	min-height: 2.8em;
}

@media (max-width: 991px) {
	.altus-cadeau-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.altus-cadeau-grid ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}


/* --- altus-extra-deal-klok --- */
/**
 * Altus — aftelklok van een Xtra deal op de productpagina
 * ([altus_extra_deal_klok], zie mu-plugins/altus-extra-deal-einddatum.php).
 * Vaste px (html staat op 10px).
 */

.altus-extradeal-klok {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 8px 0 14px;
	padding: 8px 18px 8px 12px;
	border: 1px solid var(--altus-oranje, #c2410c);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	line-height: 1.3;
	color: var(--altus-navy, #223a80);
}

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

.altus-extradeal-klok__label {
	display: block;
	width: auto;
	height: 46px;
	margin: 0;
}

.altus-extradeal-klok__tekst {
	color: var(--altus-navy, #223a80);
	font-size: 16px;
	font-weight: 700;
}

.altus-extradeal-klok__tijd {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.altus-extradeal-klok__deel b {
	display: inline-block;
	min-width: 1.4em;
	font-size: 20px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 478px) {
	.altus-extradeal-klok {
		display: flex;
		padding: 10px 12px;
		gap: 4px 10px;
	}
}