/* Product cards: colour swatches (inc/colour-swatches.php) and the rating row (inc/product-card-rating.php). */

/* Swatch pill per Figma: sand, hairline border, 16px rings. */
.sng-swatches {
	display: flex;
	width: fit-content; /* never stretch with a 100%-wide shortcode wrapper */
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-5) var(--space-10);
	background-color: var(--color-surface-sand);
	border: var(--hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-pill);
}

.sng-swatches__dot {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--icon-xs);
	height: var(--icon-xs);
	padding: var(--gap-2);
	cursor: pointer;
	background: none;
	border: var(--hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-pill);
}

.sng-swatches__dot.is-active,
.sng-swatches__dot:hover {
	border-color: var(--color-brand-accent);
}

.sng-swatches__dot:focus-visible {
	outline: var(--hairline-md) solid var(--color-brand-deep);
	outline-offset: var(--space-2);
}

.sng-swatches__fill {
	display: block;
	width: var(--dot-sm);
	height: var(--dot-sm);
	overflow: hidden;
	background-color: var(--sng-swatch, var(--color-thumb-backdrop));
	border-radius: var(--radius-pill);
}

.sng-swatches__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rating row per Figma (Bedsheets Listing card): 15px gold stars 5px apart, then "4.9 (57)". */
.sng-card-rating {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.sng-card-rating__stars {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.sng-card-rating__base,
.sng-card-rating__fill {
	display: flex;
	gap: var(--space-5);
}

.sng-card-rating__base {
	color: var(--color-border-subtle);
}

.sng-card-rating__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--color-star-gold);
	white-space: nowrap;
}

.sng-card-rating__star {
	flex-shrink: 0;
	width: var(--icon-star);
	height: var(--icon-star);
}

.sng-card-rating__text {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--color-ink-muted);
	white-space: nowrap;
}