/* Botón Nav Flotante Promo — estilos del frontend */

.bnfp-wrap {
	--bnfp-primary: #8e0e26;
	--bnfp-primary2: #6d0a1e;
	--bnfp-grad-pos: 100%;
	--bnfp-accent: #e8447c;
	--bnfp-gold: #f3d9a4;
	--bnfp-cream: #fff8f5;
	--bnfp-ink: #2d2230;
	position: fixed;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.35;
}

.bnfp-right { right: 24px; }
.bnfp-left  { left: 24px; align-items: flex-start; }

/* ---------- Botón flotante — estilo cinta / rosetón elegante ---------- */
/* Tema por campaña: variables --bnfp-btn-primary/-primary2/-gold/-shine (ver frontend.php) */

.bnfp-wrap {
	--bnfp-btn-primary: var(--bnfp-primary);
	--bnfp-btn-primary2: var(--bnfp-primary2);
	--bnfp-btn-gold: var(--bnfp-gold);
	--bnfp-btn-shine: #ffe8bf;
	--bnfp-btn-border: var(--bnfp-btn-gold);
	--bnfp-btn-text: #ffffff;
	--bnfp-btn-angle: 135deg;
	--bnfp-btn-scale: 1;
	--bnfp-btn-icon-scale: 1;
	--bnfp-btn-lift: 0px;
	--bnfp-anim-duration: 6s;
	--bnfp-mobile-scale: 1;
	--bnfp-mobile-bottom: 16px;
	--bnfp-mobile-side: 12px;
}

.bnfp-right button.bnfp-toggle-ribbon { transform-origin: bottom right; }
.bnfp-left button.bnfp-toggle-ribbon  { transform-origin: bottom left; }

.bnfp-wrap button.bnfp-toggle-ribbon {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 0 0 14px;
	padding: 11px 22px 11px 12px !important;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	overflow: visible;
	border: 1px solid color-mix(in srgb, var(--bnfp-btn-border) 60%, transparent) !important;
	border-radius: 999px !important;
	background:
		linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%, transparent 100%),
		linear-gradient(var(--bnfp-btn-angle), var(--bnfp-btn-primary) 0%, var(--bnfp-btn-primary2) 100%) !important;
	background-size: 220% 100%, 100% 100% !important;
	background-position: 220% 0, 0 0 !important;
	background-repeat: no-repeat !important;
	color: var(--bnfp-btn-text, #fff) !important;
	font-size: 14.5px !important;
	font-weight: 800;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-transform: none !important;
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.3),
		0 2px 7px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1));
}

.bnfp-wrap button.bnfp-toggle-ribbon:hover,
.bnfp-wrap button.bnfp-toggle-ribbon:focus,
.bnfp-wrap button.bnfp-toggle-ribbon:active {
	--bnfp-btn-lift: -2px;
	color: var(--bnfp-btn-text, #fff) !important;
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.36),
		0 4px 10px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
	outline: none;
}

/* Medallón tipo rosetón, superpuesto al borde izquierdo del botón */

.bnfp-toggle-medal {
	position: relative;
	flex: none;
	width: 34px;
	height: 34px;
	margin-left: -6px;
	/* El medallón sobresale del borde superior del botón para ser el elemento
	   que más llama la atención, manteniendo un look elegante y premium. */
	top: -11px;
	transform: scale(var(--bnfp-btn-icon-scale, 1));
	transform-origin: bottom left;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.bnfp-toggle-medal-tails {
	position: absolute;
	top: 20px;
	left: 6px;
	display: flex;
	transform: rotate(0deg);
}

.bnfp-toggle-medal-tails i {
	display: block;
	width: 7px;
	height: 16px;
	clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.bnfp-toggle-medal-tails i:nth-child(1) {
	background: linear-gradient(180deg, var(--bnfp-btn-primary), var(--bnfp-btn-primary2));
	transform: rotate(-14deg) translateY(1px);
}

.bnfp-toggle-medal-tails i:nth-child(2) {
	background: linear-gradient(180deg, var(--bnfp-btn-gold), var(--bnfp-btn-primary2));
	transform: rotate(10deg) translateY(1px);
	margin-left: -3px;
}

.bnfp-toggle-medal-ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		var(--bnfp-btn-gold) 0deg 20deg,
		#fff8ee 20deg 40deg,
		var(--bnfp-btn-gold) 40deg 60deg,
		#fff8ee 60deg 80deg,
		var(--bnfp-btn-gold) 80deg 100deg,
		#fff8ee 100deg 120deg,
		var(--bnfp-btn-gold) 120deg 140deg,
		#fff8ee 140deg 160deg,
		var(--bnfp-btn-gold) 160deg 180deg,
		#fff8ee 180deg 200deg,
		var(--bnfp-btn-gold) 200deg 220deg,
		#fff8ee 220deg 240deg,
		var(--bnfp-btn-gold) 240deg 260deg,
		#fff8ee 260deg 280deg,
		var(--bnfp-btn-gold) 280deg 300deg,
		#fff8ee 300deg 320deg,
		var(--bnfp-btn-gold) 320deg 340deg,
		#fff8ee 340deg 360deg
	);
	box-shadow:
		0 3px 8px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.35),
		0 0 0 2px color-mix(in srgb, var(--bnfp-btn-border, var(--bnfp-btn-gold)) 70%, transparent);
}

.bnfp-toggle-medal-core {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fffdf8, #fbeedb 70%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.bnfp-toggle-medal-icon {
	width: 13px;
	height: 13px;
	color: var(--bnfp-btn-primary2);
}

.bnfp-toggle-medal-icon-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Imagen personalizada (PNG transparente): sin anillo, sin núcleo blanco y sin
   cintas. La imagen se muestra tal cual, sobresaliendo del botón para ser el
   elemento protagonista. Su tamaño y posición se controlan desde el panel
   mediante --bnfp-btn-icon-scale, --bnfp-btn-icon-x y --bnfp-btn-icon-y. */

.bnfp-wrap .bnfp-toggle-medal--custom {
	width: 40px;
	height: 34px;
	margin-left: -8px;
	top: 0;
	transform: none;
	filter: none;
}

.bnfp-wrap .bnfp-toggle-medal--custom .bnfp-toggle-custom-img {
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 56px;
	max-width: none;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: translateX(-50%)
		translate(var(--bnfp-btn-icon-x, 0px), var(--bnfp-btn-icon-y, 0px))
		scale(var(--bnfp-btn-icon-scale, 1));
	transform-origin: bottom center;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Brillo sutil que recorre el botón */

.bnfp-toggle-shine {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.bnfp-toggle-text {
	color: inherit;
}

/* Insignia con número de promociones */

.bnfp-toggle-badge {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: linear-gradient(160deg, var(--bnfp-btn-gold), var(--bnfp-btn-primary2));
	border: 1.5px solid var(--bnfp-btn-gold);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
	animation: bnfp-badge-pop 0.35s ease 0.6s backwards;
}

@keyframes bnfp-badge-pop {
	from { transform: scale(0); }
	60%  { transform: scale(1.2); }
	to   { transform: scale(1); }
}

/* Al abrir el panel, el botón se aquieta */

.bnfp-wrap.bnfp-open button.bnfp-toggle-ribbon {
	--bnfp-btn-lift: 0px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28) !important;
}

/* ---------- Animaciones del botón (configurables desde el panel) ---------- */
/* El JS del plugin añade la clase .bnfp-anim-run al contenedor cada
   «Frecuencia» segundos: cada efecto se ejecuta UNA vez con duración fija y el
   botón vuelve al reposo. No se programan ejecuciones mientras el panel está
   abierto o el cursor está sobre el botón. Solo se usan transform, opacity y
   box-shadow en overlays, por lo que el coste de rendimiento es mínimo. */

/* Banda de luz reutilizable dentro del overlay del botón (Shine). */

.bnfp-toggle-shine {
	overflow: hidden;
}

.bnfp-toggle-shine::after {
	content: "";
	position: absolute;
	top: -25%;
	bottom: -25%;
	left: 0;
	width: 34%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.05) 18%,
		rgba(255, 255, 255, 0.65) 50%,
		rgba(255, 255, 255, 0.05) 82%,
		transparent 100%
	);
	transform: translateX(-170%) skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

/* Chispas alrededor del botón (Sparkles / Premium). */

.bnfp-toggle-sparkles {
	position: absolute;
	inset: -14px;
	pointer-events: none;
}

.bnfp-toggle-sparkles i {
	position: absolute;
	display: block;
	width: 9px;
	height: 9px;
	background: radial-gradient(circle at 50% 42%, #ffffff 0 32%, var(--bnfp-btn-gold, #f3d9a4) 72%, transparent 100%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	filter: drop-shadow(0 0 3px var(--bnfp-btn-shine, #ffe8bf));
	transform: scale(0);
	opacity: 0;
}

.bnfp-toggle-sparkles i:nth-child(1) { top: 2px; left: 16%; }
.bnfp-toggle-sparkles i:nth-child(2) { top: -4px; left: 42%; width: 7px; height: 7px; }
.bnfp-toggle-sparkles i:nth-child(3) { top: 4px; right: 12%; width: 10px; height: 10px; }
.bnfp-toggle-sparkles i:nth-child(4) { bottom: 0; left: 30%; width: 6px; height: 6px; }
.bnfp-toggle-sparkles i:nth-child(5) { bottom: -3px; right: 26%; width: 8px; height: 8px; }
.bnfp-toggle-sparkles i:nth-child(6) { top: 38%; right: -2px; width: 7px; height: 7px; }
.bnfp-toggle-sparkles i:nth-child(7) { top: 30%; left: 4%; width: 6px; height: 6px; }

/* --- Shine: reflejo de luz que recorre el botón de un extremo al otro. --- */

.bnfp-anim-run.bnfp-anim-shine .bnfp-toggle-shine::after,
.bnfp-anim-run.bnfp-anim-shine_bounce .bnfp-toggle-shine::after,
.bnfp-anim-run.bnfp-anim-premium .bnfp-toggle-shine::after {
	animation: bnfp-run-shine 1.4s ease-in-out 1;
}

@keyframes bnfp-run-shine {
	0%   { transform: translateX(-170%) skewX(-18deg); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateX(450%) skewX(-18deg); opacity: 0; }
}

/* --- Bounce: rebote elegante y claramente visible, con dos toques. --- */

.bnfp-anim-run.bnfp-anim-bounce button.bnfp-toggle-ribbon,
.bnfp-anim-run.bnfp-anim-shine_bounce button.bnfp-toggle-ribbon {
	animation: bnfp-run-bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) 1;
}

@keyframes bnfp-run-bounce {
	0%, 100% { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	22%      { transform: translateY(calc(var(--bnfp-btn-lift, 0px) - 12px)) scale(var(--bnfp-btn-scale, 1)); }
	44%      { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	62%      { transform: translateY(calc(var(--bnfp-btn-lift, 0px) - 6px)) scale(var(--bnfp-btn-scale, 1)); }
	80%      { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	91%      { transform: translateY(calc(var(--bnfp-btn-lift, 0px) - 2px)) scale(var(--bnfp-btn-scale, 1)); }
}

/* --- Pulse: dos latidos suaves de tamaño. --- */

.bnfp-anim-run.bnfp-anim-pulse button.bnfp-toggle-ribbon {
	animation: bnfp-run-pulse 1.6s ease-in-out 1;
}

@keyframes bnfp-run-pulse {
	0%, 50%, 100% { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	25%           { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(calc(var(--bnfp-btn-scale, 1) * 1.07)); }
	75%           { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(calc(var(--bnfp-btn-scale, 1) * 1.05)); }
}

/* --- Glow: resplandor que aparece y se desvanece alrededor del botón.
   Se anima sobre el overlay .bnfp-toggle-shine porque la sombra del botón
   está declarada con !important y las animaciones no pueden sobrescribirla. --- */

.bnfp-anim-run.bnfp-anim-glow .bnfp-toggle-shine,
.bnfp-anim-run.bnfp-anim-premium .bnfp-toggle-shine {
	animation: bnfp-run-glow 1.8s ease-in-out 1;
}

@keyframes bnfp-run-glow {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	35%      { box-shadow: 0 0 26px 10px color-mix(in srgb, var(--bnfp-btn-border, var(--bnfp-btn-gold)) 62%, transparent); }
	70%      { box-shadow: 0 0 12px 4px color-mix(in srgb, var(--bnfp-btn-border, var(--bnfp-btn-gold)) 32%, transparent); }
}

/* --- Sparkles: pequeños destellos que aparecen y desaparecen suavemente. --- */

.bnfp-anim-run.bnfp-anim-sparkles .bnfp-toggle-sparkles i,
.bnfp-anim-run.bnfp-anim-premium .bnfp-toggle-sparkles i {
	animation: bnfp-run-sparkle 1.3s ease-in-out 1 backwards;
}

.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(1) { animation-delay: 0s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(2) { animation-delay: 0.14s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(3) { animation-delay: 0.26s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(4) { animation-delay: 0.38s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(5) { animation-delay: 0.1s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(6) { animation-delay: 0.32s; }
.bnfp-anim-run .bnfp-toggle-sparkles i:nth-child(7) { animation-delay: 0.46s; }

@keyframes bnfp-run-sparkle {
	0%   { transform: scale(0) rotate(0deg); opacity: 0; }
	45%  { transform: scale(1) rotate(60deg); opacity: 1; }
	100% { transform: scale(0) rotate(120deg); opacity: 0; }
}

/* --- Premium: shine + glow + sparkles + salto muy sutil, sincronizados. --- */

.bnfp-anim-run.bnfp-anim-premium button.bnfp-toggle-ribbon {
	animation: bnfp-run-bounce-soft 1.7s ease-in-out 1;
}

@keyframes bnfp-run-bounce-soft {
	0%, 100% { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	30%      { transform: translateY(calc(var(--bnfp-btn-lift, 0px) - 6px)) scale(var(--bnfp-btn-scale, 1)); }
	55%      { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
	74%      { transform: translateY(calc(var(--bnfp-btn-lift, 0px) - 3px)) scale(var(--bnfp-btn-scale, 1)); }
	90%      { transform: translateY(var(--bnfp-btn-lift, 0px)) scale(var(--bnfp-btn-scale, 1)); }
}

/* ---------- Panel ---------- */

.bnfp-panel {
	width: 348px;
	max-width: calc(100vw - 32px);
	max-height: min(74vh, 620px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background:
		radial-gradient(circle at 88% 6%, rgba(255, 216, 150, 0.28) 0 2px, transparent 3px),
		radial-gradient(circle at 8% 12%, rgba(255, 216, 150, 0.24) 0 2px, transparent 3px),
		radial-gradient(circle at 94% 40%, rgba(255, 216, 150, 0.2) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 5% 60%, rgba(255, 216, 150, 0.18) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 92% 78%, rgba(255, 216, 150, 0.16) 0 1.5px, transparent 2.5px),
		linear-gradient(170deg, var(--bnfp-primary) 0%, var(--bnfp-primary2, #6d0a1e) var(--bnfp-grad-pos, 100%));
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.bnfp-open .bnfp-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Cabecera */

.bnfp-header {
	position: relative;
	flex: none;
	padding: 10px 46px 0px;
	text-align: center;
	color: #fff;
	background: transparent;
}

.bnfp-title {
	margin: 0 0 2px;
	font-family: var(--bnfp-title-font, Georgia, "Times New Roman", serif);
	font-size: var(--bnfp-title-size, 16px);
	font-weight: 700;
	letter-spacing: 2px;
	color: #fff;
	text-transform: uppercase;
}

.bnfp-subtitle {
	margin: 0;
	font-family: var(--bnfp-subtitle-font, "Dancing Script", "Segoe Script", cursive);
	font-style: normal;
	font-weight: 600;
	font-size: var(--bnfp-subtitle-size, 15px);
	color: var(--bnfp-gold);
}

/* Cinta patria (rojo-blanco-rojo) */

.bnfp-ribbon {
	position: absolute;
	top: -6px;
	left: 14px;
	display: flex;
	transform: rotate(-8deg);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

.bnfp-ribbon i {
	width: 9px;
	height: 28px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.bnfp-ribbon i:nth-child(1),
.bnfp-ribbon i:nth-child(3) { background: linear-gradient(180deg, #e02240, #b0122c); }
.bnfp-ribbon i:nth-child(2) { background: linear-gradient(180deg, #ffffff, #f0e8e8); }

/* Cinta con imagen personalizada */

.bnfp-ribbon-img {
	position: absolute;
	top: -4px;
	left: 12px;
	height: 34px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
	transform: rotate(-8deg);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

/* Botón cerrar */

.bnfp-wrap button.bnfp-close {
	position: absolute !important;
	top: 8px;
	right: 12px;
	left: auto;
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--bnfp-primary) !important;
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1 !important;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	transition: transform 0.15s ease;
}

.bnfp-wrap button.bnfp-close:hover,
.bnfp-wrap button.bnfp-close:focus,
.bnfp-wrap button.bnfp-close:active {
	transform: scale(1.1);
	background: #fff !important;
	color: var(--bnfp-primary) !important;
	outline: none;
}

/* Contador regresivo */

.bnfp-countdown {
	margin-top: 6px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	font-size: 11.5px;
	color: var(--bnfp-gold);
}

.bnfp-countdown-time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

/* Lista de productos */

.bnfp-products {
	flex: 1 1 auto;
	min-height: 0; /* Permite que el contenedor se encoja dentro del panel y
	                  active su propio scroll interno en vez de desbordar el
	                  panel (cuyo overflow:hidden recortaba los productos que
	                  excedían la altura fija, dando la impresión de un límite
	                  de 5 productos). Con esto, los 10 productos seleccionados
	                  se muestran y se recorren con scroll sin afectar el
	                  tamaño del panel. */
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* Scroll elegante y discreto para recorrer todos los productos. */
.bnfp-products::-webkit-scrollbar {
	width: 6px;
}

.bnfp-products::-webkit-scrollbar-track {
	background: transparent;
}

.bnfp-products::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.35);
	border-radius: 999px;
}

.bnfp-products::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

.bnfp-card {
	flex: 0 0 auto; /* Evita que las tarjetas se compriman entre sí: con muchos
	                   productos la lista se desplaza con scroll en lugar de
	                   aplastar las tarjetas. */
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 3px 5px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.bnfp-thumb {
	flex: none;
	width: 56px;
	align-self: center;
	border-radius: 9px;
	overflow: hidden;
	line-height: 0;
	background: #fdf6f3;
}

.bnfp-thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	display: block;
	margin: 0;
}

.bnfp-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.bnfp-badge {
	align-self: flex-start;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--bnfp-badge-bg, #fdeaf1);
	color: var(--bnfp-badge, #c02458);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.bnfp-name {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bnfp-ink);
}

.bnfp-name a {
	color: inherit;
	text-decoration: none;
}

.bnfp-name a:hover { color: var(--bnfp-accent); }

.bnfp-brand {
	font-size: 11px;
	color: #8a7a85;
}

/* Estrellas */

.bnfp-stars {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
}

.bnfp-stars-bg {
	position: relative;
	display: inline-block;
	color: #ddd2d8;
	letter-spacing: 1px;
	line-height: 1;
}

.bnfp-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f0a63c;
	letter-spacing: 1px;
}

.bnfp-stars-count {
	font-size: 10.5px;
	color: #9a8a95;
}

/* Precio + botón */

.bnfp-bottom {
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.bnfp-bottom.bnfp-no-price { justify-content: flex-end; }

.bnfp-price { line-height: 1.15; }

.bnfp-price del {
	display: block;
	font-size: 10.5px;
	color: #a89aa2;
}

.bnfp-price del .amount { color: inherit; }

.bnfp-price ins {
	display: block;
	text-decoration: none;
	font-size: 14px;
	font-weight: 800;
	color: var(--bnfp-ink);
}

.bnfp-price > .amount,
.bnfp-price ins .amount {
	font-size: 14px;
	font-weight: 800;
	color: var(--bnfp-ink);
}

.bnfp-btn {
	flex: none;
	padding: 3px 10px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bnfp-btn:hover { transform: translateY(-1px); }

.bnfp-btn-solid {
	background: var(--bnfp-accent);
	color: #fff !important;
	/*box-shadow: 0 5px 14px rgba(232, 68, 124, 0.4);*/
}

.bnfp-btn-solid:hover { filter: brightness(1.06); }

.bnfp-btn-outline {
	background: #fff;
	color: var(--bnfp-accent) !important;
	border: 1.5px solid var(--bnfp-accent);
}

/* Pie del panel */

/* Pie del panel. Cada aspecto es personalizable desde el panel administrativo
   mediante variables CSS; sin configuración, se conserva el diseño original. */

.bnfp-footer {
	flex: none;
	display: flex;
	align-items: stretch;
	gap: 6px;
	padding: var(--bnfp-f-pad-y, 7px) var(--bnfp-f-pad-x, 12px);
	border-top: 1px solid var(--bnfp-f-border, rgba(255, 255, 255, 0.18));
	background: var(--bnfp-f-bg, transparent);
}

.bnfp-footer-item {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	align-items: center;
	/* Icono + texto perfectamente centrados dentro de su columna,
	   tanto horizontal como verticalmente. */
	justify-content: center;
	gap: var(--bnfp-f-gap, 6px);
	font-size: var(--bnfp-f-text-size, 9.5px);
	line-height: 1.3;
	color: var(--bnfp-f-text-color, #727272f0);
}

.bnfp-footer-item > span {
	min-width: 0;
}

.bnfp-footer-item strong {
	font-size: var(--bnfp-f-title-size, 9.5px);
	font-weight: var(--bnfp-f-title-weight, 700);
	letter-spacing: 0.3px;
	color: var(--bnfp-f-title-color, var(--bnfp-primary));
}

.bnfp-footer-icon {
	flex: none;
	width: var(--bnfp-f-icon-size, 18px);
	height: var(--bnfp-f-icon-size, 18px);
	color: var(--bnfp-f-icon-color, var(--bnfp-primary));
}

img.bnfp-footer-icon {
	object-fit: contain;
	border-radius: 3px;
}

/* En pantallas muy estrechas los bloques se apilan, cada uno centrado y con
   aire respecto a los bordes, para que nunca se vean descentrados o pegados. */
@media (max-width: 360px) {
	.bnfp-footer {
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	.bnfp-footer-item {
		flex: 1 1 100%;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	/* Posición respecto al borde inferior/lateral, configurable solo para móvil
	   desde el panel administrativo (para no chocar con WhatsApp u otros botones). */
	.bnfp-wrap {
		bottom: var(--bnfp-mobile-bottom, 16px);
		/* Tamaño del botón exclusivo de móvil: se combina con el tamaño de
		   campaña ya aplicado en escritorio. Al redefinirse aquí, tanto el
		   estado en reposo como cualquier animación en curso quedan al tamaño correcto. */
		--bnfp-btn-scale: calc(var(--bnfp-btn-scale, 1) * var(--bnfp-mobile-scale, 1));
	}
	.bnfp-right { right: var(--bnfp-mobile-side, 12px); }
	.bnfp-left { left: var(--bnfp-mobile-side, 12px); }

	.bnfp-panel { max-height: 72vh; }

	.bnfp-wrap button.bnfp-toggle-ribbon {
		gap: 10px;
		padding: 9px 18px 9px 10px !important;
		font-size: 13.5px !important;
		margin-left: 12px;
	}

	.bnfp-toggle-medal,
	.bnfp-toggle-medal-ring {
		width: 30px;
		height: 30px;
	}

	.bnfp-toggle-medal {
		top: -9px;
	}

	.bnfp-toggle-medal-core {
		width: 19px;
		height: 19px;
	}

	.bnfp-toggle-medal-icon {
		width: 11px;
		height: 11px;
	}

	.bnfp-toggle-medal-tails i {
		width: 6px;
		height: 13px;
	}

	.bnfp-toggle-medal--custom {
		width: 34px;
		height: 30px;
		top: 0;
	}

	.bnfp-toggle-medal--custom .bnfp-toggle-custom-img {
		width: 48px;
	}

	.bnfp-toggle-badge {
		top: -6px;
		right: -6px;
		min-width: 19px;
		height: 19px;
		font-size: 10.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bnfp-panel,
	.bnfp-toggle-ribbon,
	.bnfp-btn,
	.bnfp-close { transition: none; }

	.bnfp-wrap button.bnfp-toggle-ribbon { animation: none !important; }
	.bnfp-toggle-shine,
	.bnfp-toggle-shine::after,
	.bnfp-toggle-sparkles i { animation: none !important; }
	.bnfp-toggle-badge { animation: none; }
}