/**
 * Обобщението над отзивите.
 *
 * Звездите вътре са тези на WooCommerce (`.star-rating`), за да изглеждат
 * еднакво тук и по картите в списъците - затова тук няма нито едно правило за
 * тях, само за кутията наоколо.
 */

.sld-reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	background: #fafafa;
}

.sld-reviews-summary__score {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	min-width: 120px;
}

.sld-reviews-summary__number {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}

.sld-reviews-summary__count {
	color: #666;
	font-size: 14px;
}

.sld-reviews-summary__bars {
	flex: 1 1 260px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sld-reviews-summary__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
}

.sld-reviews-summary__label,
.sld-reviews-summary__n {
	min-width: 18px;
	color: #666;
	font-size: 13px;
	text-align: right;
}

.sld-reviews-summary__track {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #e7e7e7;
}

.sld-reviews-summary__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: #e67e22;
}

@media (max-width: 560px) {
	.sld-reviews-summary {
		gap: 16px;
		padding: 14px 16px;
	}

	.sld-reviews-summary__number {
		font-size: 32px;
	}
}

/*
 * Броят отзиви до заглавието.
 *
 * `.woocommerce-Reviews-title` е `display: flex`, а броят е в свой `<div>` от
 * 14 пиксела до заглавие от 25 - без подравняване той увисваше горе и „Отзиви(4)“
 * изглеждаше като „Отзиви⁴“.
 */
.woocommerce-Reviews-title {
	align-items: baseline;
	gap: 6px;
}