/* Kadoodle Producten – productkaartjes in plakband-stijl.
   Kleuren en lettertype erven van het Kadoodle-designsystem (.kd-*) waar mogelijk;
   overschrijf de variabelen per wereld, bijv. .kd-wereld-kpop .kd-prod-block { --kd-prod-accent: #e0218a; } */

.kd-prod-block {
	--kd-prod-ink: var(--kd-ink, #241b3a);
	--kd-prod-muted: var(--kd-muted, #6b6380);
	--kd-prod-card: var(--kd-card, rgba(255, 255, 255, .86));
	--kd-prod-line: var(--kd-line, rgba(36, 27, 58, .08));
	--kd-prod-accent: var(--kd-accent, #6b2bd9);
	--kd-prod-accent-ink: var(--kd-accent-ink, #fff);
	--kd-prod-tape: var(--kd-tape, rgba(255, 236, 160, .85));
	--kd-prod-radius: var(--kd-radius, 18px);
	margin: 0 0 2rem;
	/* Ruimte voor het plakbandje en het nummertje, zodat ze niet over de tekst erboven vallen. */
	padding-top: 1.25rem;
	color: var(--kd-prod-ink);
}

/* Tussenkopjes tussen de blokken (bijv. "Tot €15", "Vanaf 6 jaar"). */
.kd-prod-kop {
	margin: 1.5rem 0 .25rem;
	font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
	line-height: 1.25;
}

.kd-prod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-prod {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: .75rem .75rem 1rem;
	background: var(--kd-prod-card);
	border: 1px solid var(--kd-prod-line);
	border-radius: var(--kd-prod-radius);
	box-shadow: 0 1px 2px rgba(36, 27, 58, .06), 0 10px 24px -14px rgba(36, 27, 58, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.kd-prod:nth-child(3n+1) { transform: rotate(-.6deg); }
.kd-prod:nth-child(3n+2) { transform: rotate(.5deg); }

@media (hover: hover) {
	.kd-prod:hover {
		transform: rotate(0) translateY(-3px);
		box-shadow: 0 2px 4px rgba(36, 27, 58, .08), 0 16px 32px -14px rgba(36, 27, 58, .35);
	}
}

/* Plakbandje bovenaan het kaartje */
.kd-prod__tape {
	position: absolute;
	top: -9px;
	left: 50%;
	width: 74px;
	height: 20px;
	background: var(--kd-prod-tape);
	transform: translateX(-50%) rotate(-3deg);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(36, 27, 58, .12);
	pointer-events: none;
}
.kd-prod:nth-child(even) .kd-prod__tape { transform: translateX(-50%) rotate(4deg); }

.kd-prod__img {
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0 0 .75rem;
	padding: .5rem;
	background: #fff;
	border-radius: calc(var(--kd-prod-radius) - 6px);
	overflow: hidden;
}
.kd-prod__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kd-prod__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .35rem;
	padding: 0 .25rem;
}

.kd-prod__brand {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kd-prod-muted);
}

.kd-prod__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.kd-prod__title a {
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kd-prod__title a:hover,
.kd-prod__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.kd-prod__why {
	margin: 0;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--kd-prod-muted);
}

.kd-prod__labels {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: .15rem 0 0;
	padding: 0;
	list-style: none;
}
.kd-prod__label {
	margin: 0;
	padding: .15rem .55rem;
	font-size: .72rem;
	font-weight: 600;
	border-radius: 999px;
	background: rgba(107, 43, 217, .08);
	color: var(--kd-prod-ink);
}
.kd-prod__label--hout,
.kd-prod__label--duurzaam,
.kd-prod__label--tweedehands { background: rgba(122, 156, 120, .18); }

.kd-prod__foot {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-top: auto;
	padding-top: .6rem;
}

.kd-prod__price { margin: 0; font-size: 1.15rem; font-weight: 800; }
.kd-prod__was { margin-right: .3rem; font-size: .85rem; font-weight: 500; color: var(--kd-prod-muted); }
.kd-prod__checked { margin: 0; font-size: .7rem; color: var(--kd-prod-muted); }

.kd-prod__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: .5rem;
	padding: .6rem 1rem;
	font-weight: 700;
	font-size: .95rem;
	text-align: center;
	text-decoration: none;
	color: var(--kd-prod-accent-ink);
	background: var(--kd-prod-accent);
	border-radius: 999px;
	transition: filter .15s ease, transform .15s ease;
}
/* Specifieker dan ".kd a { color: inherit }" uit het designsystem, zodat de tekst altijd wit blijft. */
.kd-prod-block a.kd-prod__btn,
.kd-prod-block a.kd-prod__btn:visited,
.kd-prod-block a.kd-prod__btn:hover,
.kd-prod-block a.kd-prod__btn:focus { color: var(--kd-prod-accent-ink); text-decoration: none; }
.kd-prod__btn:hover { filter: brightness(1.08); }
.kd-prod__btn:active { transform: scale(.98); }
.kd-prod__btn:focus-visible,
.kd-prod__img:focus-visible { outline: 3px solid var(--kd-prod-accent); outline-offset: 3px; }

/* Top 3: groter en met een nummertje */
.kd-prod-block--top3 .kd-prod-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 2rem 1.5rem;
}
.kd-prod-block--top3 .kd-prod { padding: 1rem 1rem 1.25rem; }
.kd-prod-block--top3 .kd-prod__title { font-size: 1.15rem; }
.kd-prod__rank {
	position: absolute;
	top: -.6rem;
	left: -.6rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--kd-prod-accent-ink);
	background: var(--kd-prod-accent);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 10px -4px rgba(36, 27, 58, .4);
}

/* Slider: één rij kaartjes die rustig opschuift (weergave="slider") */
.kd-prod-block--slider .kd-prod-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	/* Ruimte voor plakbandje, schaduw en de schuine kaartjes, anders vallen die weg. */
	padding: 14px 4px 22px;
	margin: -14px -4px -10px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.kd-prod-block--slider .kd-prod-track::-webkit-scrollbar { display: none; }
.kd-prod-block--slider .kd-prod-track:focus-visible { outline: 3px solid var(--kd-prod-accent); outline-offset: 2px; border-radius: var(--kd-prod-radius); }
.kd-prod-block--slider .kd-prod {
	flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
	scroll-snap-align: start;
}
.kd-prod-slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin: -.5rem 0 .5rem;
}
.kd-prod-slider__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--kd-prod-ink);
	background: var(--kd-prod-card);
	border: 1px solid var(--kd-prod-line);
	border-radius: 50%;
	box-shadow: 0 6px 14px -8px rgba(36, 27, 58, .35);
	cursor: pointer;
}
.kd-prod-slider__btn:hover { background: #fff; }
.kd-prod-slider__btn:focus-visible { outline: 3px solid var(--kd-prod-accent); outline-offset: 2px; }

@media (max-width: 1023px) {
	.kd-prod-block--slider .kd-prod { flex-basis: calc((100% - 2 * 1.25rem) / 3); }
}
@media (max-width: 700px) {
	.kd-prod-block--slider .kd-prod-track { gap: .9rem; }
	/* Iets meer dan anderhalf kaartje, zodat je ziet dat er meer is. */
	.kd-prod-block--slider .kd-prod { flex-basis: 62%; }
	.kd-prod-slider__btn { width: 40px; height: 40px; }
}

.kd-prod-disclosure {
	margin: 0 0 1.25rem;
	padding: .65rem .9rem;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--kd-muted, #6b6380);
	background: rgba(255, 255, 255, .6);
	border: 1px dashed rgba(36, 27, 58, .18);
	border-radius: 12px;
}
.kd-prod-disclosure a { color: inherit; font-weight: 600; }

.kd-prod-block .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 480px) {
	.kd-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
	.kd-prod { padding: .5rem .5rem .75rem; }
	.kd-prod__title { font-size: .9rem; }
	.kd-prod__why { display: none; }
	.kd-prod__btn { padding: .55rem .6rem; font-size: .85rem; }
	.kd-prod-block--top3 .kd-prod-grid { grid-template-columns: 1fr; }
	.kd-prod-block--top3 .kd-prod__why { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.kd-prod, .kd-prod:nth-child(n), .kd-prod__btn { transition: none; transform: none; }
}

/* Eerlijke gids op de kaart: voor wie, let op en Kadoodle's pick */
.kd-prod__for,
.kd-prod__con { margin: .1rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--kd-prod-muted); }
.kd-prod__for span,
.kd-prod__con span { font-weight: 700; color: var(--kd-prod-ink); }
.kd-prod__con { padding: .35rem .55rem; border-radius: 10px; background: rgba(255, 176, 59, .14); }
.kd-prod__con span { color: #9A4D00; }
.kd-prod--pick { border-color: rgba(139, 61, 255, .35); box-shadow: 0 1px 2px rgba(36, 27, 58, .06), 0 12px 28px -14px rgba(139, 61, 255, .45); }
.kd-prod__pick { position: absolute; top: .55rem; left: .55rem; max-width: calc(100% - 4.5rem); z-index: 2; padding: .25rem .65rem; font-size: .72rem; font-weight: 800; letter-spacing: .01em; line-height: 1.2; color: #fff; background: linear-gradient(135deg, #FF4FB8, #8B3DFF); border: 2px solid #fff; border-radius: 999px; transform: rotate(-4deg); box-shadow: 0 4px 10px -2px rgba(139, 61, 255, .35); pointer-events: none; white-space: nowrap; }
.kd-prod--top .kd-prod__pick { left: 2.2rem; }