.ff-reviews {
	margin-block: 3rem;
}

.ff-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.5rem;
}

.ff-review {
	padding: 1.5rem;
	border: 1px solid currentColor;
}

.ff-review__quote {
	margin: 0 0 1rem;
}

.ff-reviews__summary,
.ff-review__rating {
	margin: 0 0 .75rem;
}

.ff-reviews__summary-score,
.ff-review__rating-value {
	color: var(--ff-navy, #14366a);
	font-weight: 700;
}

.ff-reviews__stars,
.ff-review__stars {
	color: var(--ff-gold, #947238);
	letter-spacing: .08em;
	white-space: nowrap;
}

.ff-reviews__stars {
	position: relative;
	display: inline-block;
}

.ff-reviews__stars > span:first-child {
	opacity: .35;
}

.ff-reviews__stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
}

.ff-reviews__rating {
	padding: 0;
	border: 0;
}

.ff-reviews__rating legend {
	margin-bottom: .35rem;
	font-weight: 600;
}

.ff-reviews__rating-options {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: .25rem;
}

.ff-reviews__rating-options label {
	color: var(--ff-gold, #947238);
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: .5rem;
	opacity: .4;
}

.ff-reviews__rating-options input {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.ff-reviews__rating-options label:has(input:checked),
.ff-reviews__rating-options label:has(~ label input:checked) {
	opacity: 1;
}

.ff-reviews__rating-options input:focus-visible + span[aria-hidden="true"] {
	outline: 2px solid var(--ff-navy, #14366a);
	outline-offset: 3px;
}

.ff-review__quote p {
	margin: 0;
}

.ff-review__context {
	margin: .75rem 0;
	color: var(--ff-muted, #69645d);
	font-size: .84rem;
	line-height: 1.5;
}

.ff-review__author {
	margin: 0;
	font-weight: 600;
}

.ff-review__label {
	display: inline-block;
	margin-top: .5rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.ff-reviews__form {
	display: grid;
	gap: .75rem;
	max-width: 42rem;
	margin-top: 2rem;
}

.ff-reviews__form textarea {
	min-height: 9rem;
}

.ff-reviews__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.ff-reviews__notice,
.ff-reviews__empty,
.ff-reviews__signin {
	margin-block: 1rem;
}