/* Alore Marketing — live viewers counter (below the product gallery) */

/* Matches the theme's in-stock pill (`p.stock.in-stock` — grosso/style.css
   ~5094 for the colours, ~12445 for the shape) so it reads as part of the
   product furniture rather than something bolted on. */
.alore-views {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	clear: both;
	margin: 18px 0 12px;
	padding: 0 15px;
	height: 34px;
	font-size: 13px;
	line-height: 34px;
	color: #6b6b6b;
	background-color: #f5fde3;
	border: 1px solid #edf5db;
	border-radius: 2em;
	box-sizing: border-box;

	/* Revealed once JS has parked it below the thumbnail strip, so it never
	   flashes in the wrong place while flexslider is still initialising. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.alore-views.is-ready {
	opacity: 1;
}

/* Pulsing dot — the "live" cue that makes the number feel current */
.alore-views::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e9c4f;
	box-shadow: 0 0 0 0 rgba(46, 156, 79, 0.5);
	animation: alore-views-pulse 2s ease-out infinite;
}

.alore-views-count {
	display: inline-block;
	min-width: 1.2em;
	font-weight: 700;
	color: #2a2a2a;
	text-align: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Number swap: drop out, then the new value fades back in */
.alore-views-count.is-changing {
	opacity: 0;
	transform: translateY(-6px);
}

@keyframes alore-views-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(46, 156, 79, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(46, 156, 79, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(46, 156, 79, 0);
	}
}

@media (max-width: 767px) {
	.alore-views {
		margin-top: 12px;
		margin-left: 8px;
		font-size: 12px;
	}

	.alore-views-count {
		min-width: 1.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alore-views::before {
		animation: none;
	}

	.alore-views-count {
		transition: none;
	}
}