/*
 * Banner-templates in huisstijl (zie bannerTemplates.ts). Wordt 1-op-1 gekopieerd naar de webshop en de PHP-shop:
 * wijzig je hier iets, wijzig dan ook de kopieën.
 *
 * Maten: alles in calc(n * var(--u)). --u = 1% van de bannerbreedte bij 705:352; andere formaten schalen --u zo dat de
 * verhoudingen gelijk blijven. Kleuren: alleen via de --bt-* tokens per merk.
 */

@font-face {
	font-family: 'XXL Banner Sans';
	src: url('//storage.googleapis.com/cdn.projectxxl.nl/assets/fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'XXL Banner Sans';
	src: url('//storage.googleapis.com/cdn.projectxxl.nl/assets/fonts/source-sans-pro-v11-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'XXL Banner Sans';
	src: url('//storage.googleapis.com/cdn.projectxxl.nl/assets/fonts/source-sans-pro-v11-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'XXL Banner Sans';
	src: url('//storage.googleapis.com/cdn.projectxxl.nl/assets/fonts/source-sans-pro-v11-latin-900.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}

/* Handschrift voor de (optionele) groet op homepagebanners */
@font-face {
	font-family: 'XXL Banner Hand';
	src:
		local('Caveat SemiBold'),
		url('https://fonts.gstatic.com/s/caveat/v23/WnznHAc5bAfYB2QRah7pcpNvOx-pjSx6eIWpYT5Kmgq3sw.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

/* ---------- Basis + merktokens ---------- */
.bt {
	--u: 1cqw;
	--bt-ink: #223243;
	--bt-ink2: #5d6b79;
	--bt-line: #e6e9ed;
	--bt-tint: #eef1f4;
	--bt-hot: #cd2047;
	--bt-cta-bg: #00a5e2;
	--bt-cta-fg: #ffffff;
	--bt-cta-hover: #0090c8;
	--bt-dark: 34, 50, 67;
	--bt-on-dark-accent: #00a5e2;
	--bt-on-dark-cta-bg: #00a5e2;
	--bt-on-dark-cta-fg: #ffffff;
	--bt-on-dark-cta-hover: #0090c8;
	--bt-warm: 250, 248, 245;
	--bt-hand: #00a5e2;

	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 705 / 352;
	overflow: hidden;
	container-type: inline-size;
	background: #fff;
	font-family: 'XXL Banner Sans', 'Source Sans Pro', 'Source Sans 3', sans-serif;
	font-weight: 400;
	color: var(--bt-ink);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	/* Overerfbare tekstinstellingen van de shops (bv. Bootstrap .card { word-wrap: break-word }) niet laten doorwerken */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	white-space: normal;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	line-height: 1.2;
}
/* Merk: op de banner zelf (Flow) of op een omringend element (shops: <div data-bt-brand="vws">) */
.bt[data-brand='vws'],
[data-bt-brand='vws'] .bt:not([data-brand='bxxl']) {
	--bt-ink: #3a1121;
	--bt-ink2: #75606a;
	--bt-line: #ece4e7;
	--bt-tint: #f3eef0;
	--bt-hot: #c41e3a;
	--bt-cta-bg: #53192f;
	--bt-cta-fg: #ffffff;
	--bt-cta-hover: #3a1121;
	--bt-dark: 58, 17, 33;
	--bt-on-dark-accent: #e7dfe2;
	--bt-on-dark-cta-bg: #e7dfe2;
	--bt-on-dark-cta-fg: #53192f;
	--bt-on-dark-cta-hover: #ffffff;
	--bt-warm: 250, 247, 246;
	--bt-hand: #53192f;
}
.bt *,
.bt *::before,
.bt *::after {
	box-sizing: border-box;
}
/* Formaten (verhouding + schaal) */
.bt[data-target='categoryHeader'],
.bt[data-target='productBanner'] {
	aspect-ratio: 3 / 1;
	--u: 0.68cqw;
}
/* Productpagina is maar ~460px breed: groter schalen en de subregel weglaten, anders wordt de tekst onleesbaar */
.bt[data-target='productBanner'] {
	--u: 0.95cqw;
}
.bt[data-target='productBanner'] .bt-sub {
	display: none;
}
.bt[data-target='categoryTile'] {
	aspect-ratio: 4 / 5;
	--u: 1.95cqw;
}

/* Foto: cover rond het focuspunt; overschrijft algemene img-regels van de shops */
.bt-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.bt .bt-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	object-fit: cover;
	object-position: var(--fx, 50%) var(--fy, 50%);
	transform: scale(var(--z, 1));
	transform-origin: var(--fx, 50%) var(--fy, 50%);
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Verschuiven (shiftX): de vrijgekomen rand toont de achtergrondkleur van de banner */
	left: var(--sx, 0%);
}
.bt:hover .bt-img {
	transform: scale(calc(var(--z, 1) * 1.05));
}
.bt-img--empty {
	background: repeating-linear-gradient(135deg, #eef1f4 0 12px, #e6e9ed 12px 24px);
}

/* Knop (overal gelijk): pill, pijltje schuift bij hover */
.bt .bt-cta {
	display: inline-flex;
	align-items: center;
	gap: calc(1.1 * var(--u));
	align-self: flex-start;
	margin-top: auto;
	padding: max(calc(1.3 * var(--u)), 5px) max(calc(2.5 * var(--u)), 10px);
	border-radius: 999px;
	background: var(--c-cta, var(--bt-cta-bg));
	color: var(--c-cta-text, var(--bt-cta-fg));
	font-size: max(calc(2.15 * var(--u)), 11px);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background 0.2s;
}
.bt .bt-cta::after {
	content: '→';
	display: inline-block;
	font-weight: 700;
}
.bt:hover .bt-cta {
	filter: brightness(0.9);
}
.bt:hover .bt-cta::after {
	animation: bt-nudge 1s ease-in-out infinite;
}
@keyframes bt-nudge {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(calc(0.8 * var(--u)));
	}
}

.bt .bt-sticker {
	position: absolute;
	z-index: 2;
	right: calc(3.4 * var(--u));
	top: calc(3.4 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(9.6 * var(--u));
	height: calc(9.6 * var(--u));
	padding: calc(0.8 * var(--u));
	border-radius: 50%;
	background: var(--c-sticker, var(--bt-hot));
	color: #fff;
	font-size: calc(2.2 * var(--u));
	font-weight: 900;
	line-height: 0.95;
	text-align: center;
	text-transform: uppercase;
	word-break: break-word;
	transform: rotate(-10deg);
	box-shadow: 0 calc(0.5 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.2);
}

/* Gedeelde tekstonderdelen van de actie-templates */
.bt .bt-eyebrow {
	align-self: flex-start;
	padding: calc(0.55 * var(--u)) calc(1.3 * var(--u));
	border-radius: 3px;
	background: var(--c-label-bg, var(--bt-tint));
	color: var(--c-label, var(--bt-ink));
	font-size: max(calc(1.75 * var(--u)), 9px);
	font-weight: 700;
	line-height: max(calc(2 * var(--u)), 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bt .bt-num {
	color: var(--c-num, var(--bt-ink));
	font-size: calc(10.5 * var(--u));
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: -0.02em;
}
.bt .bt-unit {
	margin-left: calc(0.7 * var(--u));
	color: var(--c-unit, var(--bt-ink2));
	font-size: max(calc(3.2 * var(--u)), 11px);
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: 0.25em;
}
.bt .bt-sub {
	margin-top: calc(1 * var(--u));
	color: var(--c-sub, var(--bt-ink2));
	font-size: max(calc(2 * var(--u)), 11px);
	font-weight: 400;
	line-height: 1.3;
}

/* Deel van een tekst in de accentkleur (*woord* in Flow); gewicht volgt de tekst eromheen */
.bt .bt-hl {
	color: var(--c-hl, var(--bt-cta-bg));
	font-weight: inherit;
	font-style: inherit;
}
.bt--actie-deal .bt-hl {
	color: var(--c-hl, var(--bt-hot));
}
.bt--home-donker .bt-hl,
.bt--home-licht .bt-hl {
	color: var(--c-hl, var(--c-accent, var(--h-accent)));
}

/* ---------- A: Productactie (actie-split) ---------- */
.bt--actie-split {
	background: rgb(var(--c-overlay, 255, 255, 255));
	box-shadow: inset 0 0 0 1px var(--bt-line);
}
.bt--actie-split .bt-media {
	left: 42%;
}
.bt--actie-split .bt-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(var(--c-overlay, 255, 255, 255)) 0, rgb(var(--c-overlay, 255, 255, 255)) 1.5%, rgba(var(--c-overlay, 255, 255, 255), 0.6) 5%, rgba(var(--c-overlay, 255, 255, 255), 0) 11%);
	pointer-events: none;
}
.bt--actie-split .bt-panel {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 42%;
	padding: calc(5 * var(--u)) calc(2 * var(--u)) calc(4.6 * var(--u)) calc(5 * var(--u));
	display: flex;
	flex-direction: column;
}
.bt--actie-split .bt-panel::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(5 * var(--u));
	width: calc(0.9 * var(--u));
	height: calc(3.1 * var(--u));
	background: var(--c-accent, var(--bt-ink));
}
.bt--actie-split .bt-head {
	margin-top: auto;
}
.bt--actie-split .bt-num {
	display: block;
	white-space: nowrap;
}
.bt--actie-split .bt-num--long {
	font-size: calc(8.6 * var(--u));
}
.bt--actie-split .bt-line {
	display: block;
	margin-top: calc(1.4 * var(--u));
	color: var(--c-line, var(--bt-ink));
	font-size: max(calc(3.2 * var(--u)), 12px);
	font-weight: 600;
	line-height: 1.12;
}
/* Brede formaten: smaller tekstvlak, meer product in beeld */
.bt--actie-split[data-target='categoryHeader'] .bt-media,
.bt--actie-split[data-target='productBanner'] .bt-media {
	left: 36%;
}
.bt--actie-split[data-target='categoryHeader'] .bt-panel,
.bt--actie-split[data-target='productBanner'] .bt-panel {
	width: 36%;
	padding-top: calc(4.4 * var(--u));
	padding-bottom: calc(4 * var(--u));
}
.bt--actie-split[data-target='categoryHeader'] .bt-panel::before,
.bt--actie-split[data-target='productBanner'] .bt-panel::before {
	top: calc(4.4 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-media {
	left: 44%;
}
.bt--actie-split[data-target='productBanner'] .bt-panel {
	width: 44%;
	padding: calc(3.4 * var(--u)) calc(1.6 * var(--u)) calc(3.2 * var(--u)) calc(4 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-panel::before {
	top: calc(3.4 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-num {
	font-size: calc(8.6 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-line {
	margin-top: calc(0.8 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-cta {
	margin-top: calc(1.6 * var(--u));
}
.bt--actie-split[data-target='productBanner'] .bt-head {
	margin-top: auto;
}
/* Tekst rechts: tekstvlak en foto wisselen van kant */
.bt--actie-split[data-side='right'] .bt-media {
	left: 0;
	right: 42%;
}
.bt--actie-split[data-side='right'] .bt-media::after {
	transform: scaleX(-1);
}
.bt--actie-split[data-side='right'] .bt-panel {
	left: auto;
	right: 0;
}
.bt--actie-split[data-side='right'][data-target='categoryHeader'] .bt-media,
.bt--actie-split[data-side='right'][data-target='productBanner'] .bt-media {
	left: 0;
	right: 36%;
}
.bt--actie-split[data-side='right'][data-target='productBanner'] .bt-media {
	right: 44%;
}
.bt--actie-split[data-side='right'] .bt-sticker {
	right: auto;
	left: calc(3.4 * var(--u));
}

/* Tegel: foto boven, tekst onder */
.bt--actie-split[data-target='categoryTile'] .bt-media {
	left: 0;
	right: 0;
	bottom: 52%;
}
.bt--actie-split[data-target='categoryTile'] .bt-media::after {
	transform: none;
}
.bt--actie-split[data-target='categoryTile'] .bt-sticker {
	left: auto;
	right: calc(3.4 * var(--u));
}
.bt--actie-split[data-target='categoryTile'] .bt-media::after {
	background: linear-gradient(0deg, rgb(var(--c-overlay, 255, 255, 255)) 0, rgb(var(--c-overlay, 255, 255, 255)) 2%, rgba(var(--c-overlay, 255, 255, 255), 0.6) 7%, rgba(var(--c-overlay, 255, 255, 255), 0) 16%);
}
.bt--actie-split[data-target='categoryTile'] .bt-panel {
	left: 0;
	right: auto;
	top: 44%;
	width: 100%;
	padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(4.2 * var(--u)) calc(5 * var(--u));
}
.bt--actie-split[data-target='categoryTile'] .bt-panel::before {
	top: calc(2 * var(--u));
}
.bt--actie-split[data-target='categoryTile'] .bt-head {
	margin-top: calc(2.2 * var(--u));
}
.bt--actie-split[data-target='categoryTile'] .bt-cta {
	margin-top: auto;
}

/* Zonder kerngetal (bv. "Uitverkoop"): de productregel wordt de kop */
.bt--actie-split.bt--no-num .bt-line {
	margin-top: 0;
	hyphens: auto;
	font-size: calc(4.6 * var(--u));
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* ---------- B: Deal (actie-deal) ---------- */
.bt--actie-deal .bt-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(var(--bt-dark), 0.28);
}
.bt--actie-deal .bt-card {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 46%;
	width: 58%;
	padding: calc(3.2 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
	transform: translate(-50%, -50%);
	border-top: calc(0.8 * var(--u)) solid var(--c-accent, var(--bt-ink));
	border-radius: 4px;
	background: var(--c-card, #fff);
	text-align: center;
	box-shadow: 0 calc(1.4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.28);
}
.bt--actie-deal .bt-eyebrow {
	display: inline-block;
}
.bt--actie-deal .bt-head {
	margin-top: calc(1.2 * var(--u));
	white-space: nowrap;
}
.bt--actie-deal .bt-pre {
	margin-right: calc(1 * var(--u));
	color: var(--c-unit, var(--bt-ink2));
	font-size: max(calc(3.2 * var(--u)), 11px);
	font-weight: 700;
	vertical-align: 0.9em;
}
.bt--actie-deal .bt-num {
	font-size: calc(12 * var(--u));
	color: var(--c-num, var(--bt-hot));
}
.bt--actie-deal .bt-sub {
	margin-top: calc(0.6 * var(--u));
}
.bt--actie-deal .bt-cta {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: calc(4 * var(--u));
	margin: 0;
	transform: translateX(-50%);
}
.bt--actie-deal[data-target='categoryHeader'] .bt-card,
.bt--actie-deal[data-target='productBanner'] .bt-card {
	width: 44%;
	top: 44%;
}
.bt--actie-deal[data-target='productBanner'] .bt-card {
	width: 54%;
	top: 42%;
	padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(1.6 * var(--u));
}
.bt--actie-deal[data-target='productBanner'] .bt-num {
	font-size: calc(9 * var(--u));
}
.bt--actie-deal[data-target='productBanner'] .bt-cta {
	bottom: calc(2.4 * var(--u));
}
.bt--actie-deal[data-target='categoryTile'] .bt-card {
	width: 86%;
	top: 44%;
}

/* Zonder kerngetal: de subregel wordt de kop op de kaart */
.bt--actie-deal.bt--no-num .bt-head {
	display: none;
}
.bt--actie-deal.bt--no-num .bt-sub {
	margin-top: calc(1.4 * var(--u));
	hyphens: auto;
	color: var(--c-sub, var(--bt-ink));
	font-size: calc(4.4 * var(--u));
	font-weight: 900;
	line-height: 1.05;
}

/*
 * ---------- Homepage donker én licht ----------
 * Zelfde opbouw (titel, streepje, kortingsregel, productregel, knop, maten), alleen de kleuren verschillen.
 * --h-* zijn de standaardkleuren per variant; eigen kleuren (--c-*) gaan daar overheen.
 */
.bt--home-donker {
	background: rgb(var(--c-overlay, var(--bt-dark)));
	--h-bg: var(--bt-dark);
	--h-text: #fff;
	--h-line: rgba(255, 255, 255, 0.8);
	--h-accent: var(--bt-on-dark-accent);
	--h-cta-bg: var(--bt-on-dark-cta-bg);
	--h-cta-fg: var(--bt-on-dark-cta-fg);
	--h-shadow: rgba(0, 0, 0, 0.25);
	--h-sub: rgba(255, 255, 255, 0.85);
	--h-glow: transparent;
}
.bt--home-licht {
	--h-bg: var(--bt-warm);
	--h-text: var(--bt-ink);
	--h-line: var(--bt-ink2);
	--h-accent: var(--bt-cta-bg);
	--h-cta-bg: var(--bt-cta-bg);
	--h-cta-fg: var(--bt-cta-fg);
	--h-shadow: rgba(var(--c-overlay, var(--bt-warm)), 0.9);
	--h-sub: #3e4c5a;
	--h-glow: rgba(var(--c-overlay, var(--bt-warm)), 0.9);
	background: rgb(var(--c-overlay, var(--bt-warm)));
}
.bt--home-donker .bt-media::after,
.bt--home-licht .bt-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(var(--c-overlay, var(--h-bg)), 0.92) 0,
		rgba(var(--c-overlay, var(--h-bg)), 0.8) 32%,
		rgba(var(--c-overlay, var(--h-bg)), 0.28) 57%,
		rgba(var(--c-overlay, var(--h-bg)), 0) 72%
	);
}
.bt--home-donker[data-side='right'] .bt-media::after,
.bt--home-licht[data-side='right'] .bt-media::after {
	transform: scaleX(-1);
}
.bt--home-donker .bt-panel,
.bt--home-licht .bt-panel {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 48%;
	padding: calc(5.4 * var(--u)) calc(2 * var(--u)) calc(4.6 * var(--u)) calc(5 * var(--u));
	display: flex;
	flex-direction: column;
	color: var(--h-text);
}
.bt--home-donker[data-side='right'] .bt-panel,
.bt--home-licht[data-side='right'] .bt-panel {
	left: auto;
	right: 0;
	padding-left: calc(2 * var(--u));
	padding-right: calc(5 * var(--u));
	/* Tekst links uitgelijnd (zoals de showroom-banner), alleen de knop rechts; lange titels worden vanzelf kleiner */
}
.bt--home-donker .bt-bar,
.bt--home-licht .bt-bar {
	width: calc(6 * var(--u));
	height: calc(0.8 * var(--u));
	margin-bottom: calc(2.2 * var(--u));
	border-radius: 2px;
	background: var(--c-accent, var(--h-accent));
}
.bt--home-donker .bt-title,
.bt--home-licht .bt-title {
	margin: 0;
	color: var(--c-title, var(--h-text));
	font-size: calc(7.2 * var(--u));
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.015em;
	text-shadow: 0 calc(0.2 * var(--u)) calc(1.2 * var(--u)) var(--h-shadow);
}
.bt--home-donker .bt-title--m,
.bt--home-licht .bt-title--m {
	font-size: calc(5.6 * var(--u));
	line-height: 0.98;
}
.bt--home-donker .bt-title--l,
.bt--home-licht .bt-title--l {
	font-size: calc(4.6 * var(--u));
	line-height: 1.02;
	letter-spacing: -0.01em;
}
.bt--home-donker .bt-title--xl,
.bt--home-licht .bt-title--xl {
	font-size: max(calc(3.7 * var(--u)), 14px);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
/* Handgeschreven groet (optioneel), op de plek van het streepje */
.bt--home-donker .bt-hand,
.bt--home-licht .bt-hand {
	display: inline-block;
	margin-bottom: calc(1.6 * var(--u));
	color: var(--c-hand, var(--h-accent));
	font-family: 'XXL Banner Hand', 'Caveat', cursive;
	font-size: max(calc(4.2 * var(--u)), 16px);
	font-weight: 600;
	line-height: 1;
	transform: rotate(-3deg);
	transform-origin: left;
}
.bt--home-donker .bt-line.bt-line--long,
.bt--home-licht .bt-line.bt-line--long {
	margin-top: calc(1 * var(--u));
	color: var(--c-line, var(--h-sub));
	font-size: max(calc(2 * var(--u)), 11px);
	font-weight: 400;
	line-height: 1.35;
	text-shadow:
		0 0 calc(1.2 * var(--u)) var(--h-glow),
		0 0 calc(0.4 * var(--u)) var(--h-glow);
}
/* Blok met groet, titel en subregel verticaal in het midden (alleen als er een subregel onder de titel staat) */
.bt--home-donker .bt-group,
.bt--home-licht .bt-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: auto 0;
}
/*
 * Homepage licht: tekstvlak en verloop zoals de showroom-banner (smaller verloop dat snel afloopt, zodat het onderwerp
 * vrij blijft; tekstvlak 42%). Opbouw en lettertypes blijven gelijk aan Homepage donker.
 */
.bt--home-licht .bt-media::after {
	background: linear-gradient(
		90deg,
		rgba(var(--c-overlay, var(--h-bg)), 0.95) 0,
		rgba(var(--c-overlay, var(--h-bg)), 0.9) 34%,
		rgba(var(--c-overlay, var(--h-bg)), 0.55) 44%,
		rgba(var(--c-overlay, var(--h-bg)), 0.2) 50%,
		rgba(var(--c-overlay, var(--h-bg)), 0) 56%
	);
}
.bt--home-licht .bt-panel {
	width: 42%;
	padding: calc(5.4 * var(--u)) calc(0.6 * var(--u)) calc(4.6 * var(--u)) calc(3.2 * var(--u));
}
.bt--home-licht[data-side='right'] .bt-panel {
	padding-left: calc(0.6 * var(--u));
	padding-right: calc(3.2 * var(--u));
}
.bt--home-licht .bt-title {
	text-shadow:
		0 0 calc(1.2 * var(--u)) var(--h-glow),
		0 0 calc(0.4 * var(--u)) var(--h-glow);
}
.bt--home-licht .bt-cta {
	margin-left: calc(1.8 * var(--u));
	box-shadow: 0 calc(0.5 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.12);
}
.bt--home-licht[data-side='right'] .bt-cta {
	margin-left: 0;
	margin-right: calc(1.8 * var(--u));
}

/* Subregel direct onder de titel */
.bt--home-donker .bt-line.bt-line--under,
.bt--home-licht .bt-line.bt-line--under {
	margin-top: calc(1.6 * var(--u));
}
.bt--home-donker .bt-deal,
.bt--home-licht .bt-deal {
	margin-top: auto;
	color: var(--c-deal, var(--h-text));
	font-size: max(calc(3.6 * var(--u)), 13px);
	font-weight: 700;
	line-height: 1.1;
}
.bt--home-donker .bt-deal .bt-hl,
.bt--home-licht .bt-deal .bt-hl {
	font-weight: 900;
}
.bt--home-donker .bt-line,
.bt--home-licht .bt-line {
	display: block;
	margin-top: calc(0.6 * var(--u));
	color: var(--c-line, var(--h-line));
	font-size: max(calc(2.8 * var(--u)), 11px);
	font-weight: 600;
	line-height: 1.15;
}
.bt--home-donker .bt-cta,
.bt--home-licht .bt-cta {
	background: var(--c-cta, var(--h-cta-bg));
	color: var(--c-cta-text, var(--h-cta-fg));
}
.bt--home-donker[data-side='right'] .bt-cta,
.bt--home-licht[data-side='right'] .bt-cta {
	align-self: flex-end;
}
.bt--home-donker:hover .bt-cta,
.bt--home-licht:hover .bt-cta {
	filter: brightness(0.9);
}

/*
 * Categorietegel in het productraster: vult de hele cel (rij is vaak hoger dan 4:5 door de productkaarten ernaast)
 * en heeft geen eigen rand, want het raster tekent die al. Zonder hoogte van de ouder blijft het 4:5.
 */
[data-bt-brand]:has(> .bt[data-target='categoryTile']) {
	height: 100%;
}
.bt[data-target='categoryTile'] {
	height: 100%;
	box-shadow: none !important;
}

/*
 * Mobiel: producten staan daar als compacte rijen onder elkaar; een staande tegel over de volle breedte wordt dan
 * veel te hoog. Daarom een liggende banner: tekst links, foto rechts (Productactie) of een lagere kaart (Deal).
 */
@media (max-width: 767px) {
	.bt[data-target='categoryTile'] {
		height: auto;
		aspect-ratio: 16 / 9;
		--u: 1.3cqw;
	}
	.bt--actie-split[data-target='categoryTile'] .bt-media {
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
	}
	.bt--actie-split[data-target='categoryTile'] .bt-media::after {
		background: linear-gradient(
			90deg,
			rgb(var(--c-overlay, 255, 255, 255)) 0,
			rgb(var(--c-overlay, 255, 255, 255)) 1.5%,
			rgba(var(--c-overlay, 255, 255, 255), 0.6) 6%,
			rgba(var(--c-overlay, 255, 255, 255), 0) 14%
		);
	}
	.bt--actie-split[data-target='categoryTile'] .bt-panel {
		top: 0;
		bottom: 0;
		width: 50%;
		padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(3.6 * var(--u)) calc(5 * var(--u));
	}
	.bt--actie-split[data-target='categoryTile'] .bt-panel::before {
		top: calc(4 * var(--u));
	}
	.bt--actie-split[data-target='categoryTile'] .bt-head {
		margin-top: auto;
	}
	.bt--actie-split[data-target='categoryTile'] .bt-cta {
		margin-top: calc(2.4 * var(--u));
	}
	.bt--actie-split[data-target='categoryTile'] .bt-sub,
	.bt--actie-split[data-target='categoryTile'] .bt-sticker {
		display: none;
	}
	.bt--actie-deal[data-target='categoryTile'] .bt-card {
		width: 70%;
		top: 44%;
	}
	.bt--actie-deal[data-target='categoryTile'] .bt-sub {
		display: none;
	}
}

/*
 * Smalle banners (mobiel, ~270-480px): kleine tekst krijgt hierboven een ondergrens (max(…, 11px)) zodat hij leesbaar
 * blijft; wat dan niet meer past laten we weg. De tegel heeft genoeg hoogte en houdt alles.
 */
@container (max-width: 480px) {
	.bt:not([data-target='categoryTile']) .bt-sub,
	.bt:not([data-target='categoryTile']) .bt-sticker,
	.bt--home-donker .bt-line,
	.bt--home-licht .bt-line {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt .bt-img {
		transition: none;
	}
	.bt:hover .bt-img {
		transform: scale(var(--z, 1));
	}
	.bt:hover .bt-cta::after {
		animation: none;
	}
}