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

/* ---- 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, winkelwagen, 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. */
#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(7, auto);
	row-gap: 0;
}

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

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

/* ---- Pagina /gratis-cadeau/: alle producten met een cadeau in een raster ---- */
/* Zelfde kaartopbouw als de cadeau-band (7 onderdelen per kaart); "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 7;
	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;
	}
}