/*
 * Live viewer count.
 *
 * Sits above the add to cart button as one small line. Deliberately quiet: the
 * figure is real, and a real figure does not need a banner to carry it.
 */

.pearlory-viewers {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	color: rgba(0, 0, 0, 0.62);
	font-size: 13px;
	line-height: 1.3;
}

.pearlory-viewers__dot {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d64545;
	/* the pulse marks it as live; it stops for anyone who has asked the system
	   for less motion, in the media query below */
	animation: pearlory-viewers-pulse 2s ease-in-out infinite;
}

@keyframes pearlory-viewers-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pearlory-viewers__dot {
		animation: none;
	}
}