/* Recarfix Category Showcase — Final */

/* ── Carousel wrapper ───────────────────────────────────── */
.rcf-carousel-wrap { position: relative; }

/* ── Splide ─────────────────────────────────────────────── */
.rcf-carousel-wrap .splide { visibility: visible; }
.rcf-carousel-wrap .splide__track { overflow: hidden; }
.rcf-carousel-wrap .splide__list {
	display: flex; flex-wrap: nowrap;
	list-style: none; margin: 0; padding: 0;
	align-items: flex-start;
}
.rcf-carousel-wrap .splide__slide {
	display: block;
	flex-shrink: 0;
	box-sizing: border-box;
	height: auto !important;
}
.rcf-carousel-wrap .splide__pagination { display: none !important; }

/* ── Card link ──────────────────────────────────────────── */
.rcf-carousel-wrap .rcf-card-link,
.rcf-grid-wrap .rcf-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
}

/* ── Carousel card — hoogte bepaald door image_height ────── */
.rcf-carousel-wrap .rcf-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	transition: transform 0.2s ease;
}
.rcf-carousel-wrap .rcf-card:hover { transform: translateY(-2px); }

/* ── Carousel afbeelding — vaste hoogte via inline style ─── */
.rcf-carousel-wrap .rcf-card-img {
	display: block;
	height: 80px; /* fallback — overschreven door inline style in PHP */
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto 12px;
}

/* ── Grid card — vierkant, afbeelding vult de kaart ─────── */
.rcf-grid-wrap .rcf-card-link {
	display: block;
}
.rcf-grid-wrap .rcf-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	transition: transform 0.2s ease;
}
.rcf-grid-wrap .rcf-card:hover { transform: translateY(-2px); }

/* Grid afbeelding vult beschikbare ruimte — aspect-ratio 1:1 */
.rcf-grid-wrap .rcf-img-wrap {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	overflow: hidden;
}
.rcf-grid-wrap .rcf-card-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ── Titel ──────────────────────────────────────────────── */
.rcf-carousel-wrap .rcf-card-title,
.rcf-grid-wrap .rcf-card-title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

/* ── Knop ───────────────────────────────────────────────── */
.rcf-carousel-wrap .rcf-card-btn,
.rcf-grid-wrap .rcf-card-btn {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: underline;
	margin-top: 8px;
}

/* ── Pijltjes — desktop buiten, mobiel binnen ───────────── */
.rcf-carousel-wrap .rcf-arrows { pointer-events: none; }
.rcf-carousel-wrap .rcf-arrows.--hover-only { opacity: 0; transition: opacity 0.3s; }
.rcf-carousel-wrap:hover .rcf-arrows.--hover-only { opacity: 1; }
.rcf-carousel-wrap .rcf-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	pointer-events: all; background: none; border: none;
	padding: 0; cursor: pointer; font-size: 40px;
	width: 1em; height: 1em; display: flex;
	align-items: center; justify-content: center;
	transition: opacity 0.2s; z-index: 10; color: #111;
}
.rcf-carousel-wrap .rcf-arrow svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.rcf-carousel-wrap .rcf-arrow--left  { left: -55px; }
.rcf-carousel-wrap .rcf-arrow--right { right: -55px; }

@media (max-width: 1024px) {
	.rcf-carousel-wrap {
		overflow: hidden; /* voorkomt dat pijltjes buiten de pagina-grid vallen */
	}
	.rcf-carousel-wrap .rcf-arrow--left  { left: 6px; }
	.rcf-carousel-wrap .rcf-arrow--right { right: 6px; }
	.rcf-carousel-wrap .rcf-arrow {
		font-size: 32px;
		background: rgba(255,255,255,0.9);
		border-radius: 50%;
		box-shadow: 0 1px 4px rgba(0,0,0,.15);
	}
}

/* ── Grid layout ────────────────────────────────────────── */
.rcf-grid-wrap {
	display: grid;
	grid-template-columns: repeat(var(--rcf-cd, 6), 1fr);
	gap: var(--rcf-gd, 20px);
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.rcf-grid-wrap {
		grid-template-columns: repeat(var(--rcf-ct, 3), 1fr);
		gap: var(--rcf-gt, 16px);
	}
}
@media (max-width: 767px) {
	.rcf-grid-wrap {
		grid-template-columns: repeat(var(--rcf-cm, 2), 1fr);
		gap: var(--rcf-gm, 12px);
	}
}