/* ═══════════════════════════════════════════════════════════════════
 * Wapu Perfumery v1.5.11 — Card decorator (catálogo/archive)
 *
 * Notas en círculos apilados + badge "Pirámide" en cards de productos.
 * Diseño consistente con el preview #04 (catalogo.html).
 * Standalone-safe — no depende de body class de vertical.
 * ═══════════════════════════════════════════════════════════════════ */

.wapu-perf-card-notes {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 8px 0 10px;
	flex-wrap: nowrap;
	max-width: 100%;
}

.wapu-perf-card-note {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: -0.02em;
	border: 1.5px solid #fff;
	margin-left: -7px;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.wapu-perf-card-note:first-child {
	margin-left: 0;
}
.wapu-perf-card-note:nth-child(2) { z-index: 2; }
.wapu-perf-card-note:nth-child(3) { z-index: 3; }
.wapu-perf-card-note:nth-child(4) { z-index: 4; }

.wapu-perf-card-note img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wapu-perf-card-note span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.wapu-perf-card-notes__more {
	font-size: 10px;
	color: rgba(60, 60, 67, 0.55);
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Paleta de 7 colores determinística (idéntica a la del frontend de notas) */
.wapu-perf-card-c0 { background: #E1F5EE; color: #0F6E56; }
.wapu-perf-card-c1 { background: #FAEEDA; color: #854F0B; }
.wapu-perf-card-c2 { background: #FAECE7; color: #993C1D; }
.wapu-perf-card-c3 { background: #F1EFE8; color: #5F5E5A; }
.wapu-perf-card-c4 { background: #FBEAF0; color: #993556; }
.wapu-perf-card-c5 { background: #EEEDFE; color: #3C3489; }
.wapu-perf-card-c6 { background: #E6F1FB; color: #185FA5; }

/* ─── Badge "Pirámide" — solo cuando producto tiene la pirámide activada ─── */

.wapu-perf-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: rgba(26, 37, 64, 0.92);
	color: #fff;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
	line-height: 1.4;
}

.wapu-perf-card-badge--pyramid {
	background: linear-gradient(135deg, #1a2540, #2d3b5e);
}
.wapu-perf-card-badge--pyramid::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 7px solid #f8c873;
	margin-right: 2px;
}

/* Responsive — en mobile, hide el "+N" si la card es muy chica */
@media (max-width: 380px) {
	.wapu-perf-card-notes__more {
		display: none;
	}
}