.ct-product-scores {
	display: grid;
	grid-column-gap: 25px;
	grid-row-gap: 25px;
	margin: 0 auto;
	max-width: var(--product-scores-width, 800px);

	@include media-breakpoint-up (md) {
		grid-template-columns: 2fr 1fr;
	}

	&:not(:last-child) {
		margin-bottom: 60px;
	}

	li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 10px 20px;

		&:before {
			position: absolute;
			z-index: 0;
			inset: 0;
			content: '';
			border-radius: 2px;
			opacity: 0.2;
			background: var(--theme-border-color);
		}

		> span {
			font-size: 15px;
			font-weight: 500;
			position: relative;
		}
	}
}

.ct-overall-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: var(--overall-score-text-color, var(--theme-palette-color-8));
	border-radius: 2px;
	background: var(--overall-score-box-background, var(--theme-palette-color-4));

	.ct-average-score {
		font-size: 55px;
		font-weight: 800;
		line-height: normal;
		margin-bottom: 10px;
	}

	.ct-score-label {
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		margin: 15px 0 0 0;
	}
}

// layer
.ct-overall-score-layer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	.ct-score-label,
	.ct-average-score {
		font-size: 14px;
		font-weight: 600;
	}

	.ct-average-score {
		margin: 0 5px;
		margin-inline-end: auto;
	}

	.star-rating {
		margin: 3px 0;
	}
}