/* ============================================================
 *  Pluffie Cards (v5)
 *  Premium product- en dier-cards passend bij het donker/licht
 *  redactionele systeem. Echte productfotografie vult de media,
 *  zachte witte kaarten, een pastel per Pluffie als achtergrond.
 * ============================================================ */

/* =====================================================
 *  PRODUCT CARD
 * ===================================================== */

.pluffie-card-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pluffie-bg-card);
	border-radius: var(--pluffie-radius-lg);
	overflow: hidden;
	box-shadow: var(--pluffie-shadow-soft);
	border: 1px solid var(--pluffie-border-soft);
	transition: transform var(--pluffie-transition-base), box-shadow var(--pluffie-transition-base), border-color var(--pluffie-transition-base);
}

.pluffie-card-product:hover {
	transform: translateY(-6px);
	box-shadow: var(--pluffie-shadow-large);
	border-color: var(--pluffie-current);
}

.pluffie-card-product__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* === Media: foto vult het pastel-vlak van het dier === */

.pluffie-card-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--pluffie-current);
	overflow: hidden;
}

.pluffie-card-product__img,
.pluffie-card-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--pluffie-transition-slow) var(--pluffie-easing-smooth);
}

.pluffie-card-product:hover .pluffie-card-product__img,
.pluffie-card-product:hover .pluffie-card-product__media img {
	transform: scale(1.05);
}

.pluffie-card-product__img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: clamp(4rem, 12vw, 6.5rem);
	line-height: 1;
	transition: transform var(--pluffie-transition-base) var(--pluffie-easing-bounce);
}

.pluffie-card-product:hover .pluffie-card-product__img-placeholder {
	transform: scale(1.08) rotate(-5deg);
}

/* === Badge linksboven === */

.pluffie-card-product__badge {
	position: absolute;
	top: var(--pluffie-space-sm);
	left: var(--pluffie-space-sm);
	padding: 0.4rem 0.85rem;
	background: var(--pluffie-bg-card);
	color: var(--pluffie-accent-dark);
	border-radius: var(--pluffie-radius-pill);
	font-family: var(--pluffie-font-display);
	font-size: var(--pluffie-fs-3xs);
	font-weight: var(--pluffie-fw-bold);
	letter-spacing: 0.04em;
	z-index: 2;
	white-space: nowrap;
	box-shadow: var(--pluffie-shadow-soft);
}

/* Limited Edition: label rechtsboven, zelfde hoogte als de "Nieuw"-badge,
   maar in een eigen (donker accent) kleurstelling. */
.pluffie-card-product__badge--limited {
	left: auto;
	right: var(--pluffie-space-sm);
	background: var(--pluffie-accent-dark);
	color: var(--pluffie-bg-card);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Kleine uitverkocht-badge (donker, valt op tegen de foto). */
.pluffie-card-product__badge--soldout {
	background: var(--pluffie-fg);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.28rem 0.7rem;
	font-size: 0.62rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Voorkom dat twee badges (bijv. een uitverkochte limited) op smalle schermen overlappen. */
@media (max-width: 540px) {
	.pluffie-card-product__badge { max-width: 47%; font-size: 0.56rem; padding: 0.26rem 0.62rem; }
}

/* === Body === */

.pluffie-card-product__body {
	padding: var(--pluffie-space-md) var(--pluffie-space-md) var(--pluffie-space-2xs);
	display: flex;
	flex-direction: column;
	gap: var(--pluffie-space-3xs);
	flex: 1;
}

.pluffie-card-product__naam {
	font-family: var(--pluffie-font-display);
	font-size: var(--pluffie-fs-lg);
	font-weight: var(--pluffie-fw-bold);
	color: var(--pluffie-fg);
	margin: 0;
	line-height: var(--pluffie-lh-tight);
}

.pluffie-card-product__oneliner {
	font-size: var(--pluffie-fs-2xs);
	color: var(--pluffie-fg-muted);
	margin: 0;
	line-height: var(--pluffie-lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === Foot: prijs links, ronde add-to-cart knop rechts === */

.pluffie-card-product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pluffie-space-sm);
	padding: var(--pluffie-space-2xs) var(--pluffie-space-md) var(--pluffie-space-md);
	margin-top: auto;
}

.pluffie-card-product__price {
	font-family: var(--pluffie-font-display);
	font-size: var(--pluffie-fs-md);
	font-weight: var(--pluffie-fw-bold);
	color: var(--pluffie-accent-dark);
	white-space: nowrap;
}

.pluffie-card-product__price .amount {
	color: var(--pluffie-accent-dark);
	font-family: var(--pluffie-font-display);
}

.pluffie-card-product__price del,
.pluffie-card-product__price del .amount {
	font-size: var(--pluffie-fs-2xs);
	color: var(--pluffie-fg-muted);
	font-weight: var(--pluffie-fw-regular);
	margin-right: 5px;
}

.pluffie-card-product__price ins {
	text-decoration: none;
}

.pluffie-card-product__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	background: var(--pluffie-accent);
	color: var(--pluffie-bg-card);
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(197, 111, 69, 0.28);
	transition: transform var(--pluffie-transition-fast), background var(--pluffie-transition-base), box-shadow var(--pluffie-transition-base);
}

.pluffie-card-product__cart:hover {
	background: var(--pluffie-accent-dark);
	color: var(--pluffie-bg-card);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 10px 22px rgba(197, 111, 69, 0.34);
}

.pluffie-card-product__cart svg {
	stroke: currentColor;
}

/* =====================================================
 *  DIER-CATEGORIE CARD (Kies jouw Pluffie)
 * ===================================================== */

.pluffie-card-dier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pluffie-bg-card);
	border-radius: var(--pluffie-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--pluffie-fg);
	box-shadow: var(--pluffie-shadow-soft);
	border: 1px solid var(--pluffie-border-soft);
	transition: transform var(--pluffie-transition-base), box-shadow var(--pluffie-transition-base), border-color var(--pluffie-transition-base);
}

.pluffie-card-dier:hover {
	transform: translateY(-6px) rotate(-1.5deg);
	box-shadow: var(--pluffie-shadow-large);
	border-color: var(--pluffie-current);
}

.pluffie-card-dier__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--pluffie-current);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pluffie-card-dier__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--pluffie-transition-slow) var(--pluffie-easing-smooth);
}

.pluffie-card-dier:hover .pluffie-card-dier__media img {
	transform: scale(1.06);
}

.pluffie-card-dier__emoji {
	font-size: clamp(3.5rem, 9vw, 5rem);
	line-height: 1;
	transition: transform var(--pluffie-transition-slow) var(--pluffie-easing-smooth);
}

.pluffie-card-dier:hover .pluffie-card-dier__emoji {
	transform: scale(1.1) rotate(-6deg);
}

.pluffie-card-dier__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pluffie-space-2xs);
	padding: var(--pluffie-space-sm) var(--pluffie-space-md);
}

.pluffie-card-dier__naam {
	font-family: var(--pluffie-font-display);
	font-size: var(--pluffie-fs-md);
	font-weight: var(--pluffie-fw-bold);
	color: var(--pluffie-fg);
	margin: 0;
}

.pluffie-card-dier__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--pluffie-space-3xs);
	flex-shrink: 0;
	font-family: var(--pluffie-font-display);
	font-size: var(--pluffie-fs-2xs);
	font-weight: var(--pluffie-fw-bold);
	color: var(--pluffie-accent-dark);
}

.pluffie-card-dier__cta svg {
	transition: transform var(--pluffie-transition-base);
}

.pluffie-card-dier:hover .pluffie-card-dier__cta svg {
	transform: translateX(3px);
}