/* Etsy review carousel -- card layout modelled on the TrustIndex widget it replaces. */

.tprs-reviews {
	--tprs-er-gap: 16px;
	--tprs-er-per-view: 4;
	--tprs-er-star: #f6bb06;
	--tprs-er-star-off: #dcdcdc;
	--tprs-er-card: #f9f9f9;
	--tprs-er-muted: #8c8c8c;
	--tprs-er-date: #5f5f5f;
	--tprs-er-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--tprs-er-arrow: #999;
}
.tprs-reviews__carousel {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tprs-reviews__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}
.tprs-reviews__track {
	display: flex;
	align-items: flex-start;
	gap: var(--tprs-er-gap);
	margin: 0;
	/* Room for the cards' drop shadow -- the viewport clips anything outside the track. */
	padding: 4px 6px 12px;
	list-style: none;
	overflow-x: auto;
	scroll-padding-inline: 6px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.tprs-reviews__track::-webkit-scrollbar {
	display: none;
}
.tprs-reviews__track:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Card */
.tprs-reviews__card {
	flex: 0 0 calc((100% - (var(--tprs-er-per-view) - 1) * var(--tprs-er-gap)) / var(--tprs-er-per-view));
	min-width: 0;
	margin: 0;
	padding: 20px;
	border-radius: 6px;
	background: var(--tprs-er-card);
	box-shadow: var(--tprs-er-shadow);
	scroll-snap-align: start;
	font-size: 14px;
	line-height: 1.5;
}
.tprs-reviews__card[hidden] {
	display: none;
}
.tprs-reviews__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.tprs-reviews__avatar {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* Pastel background, initial in a darker shade of the same hue (--tprs-er-hue set per card). */
	background: hsl(var(--tprs-er-hue, 0) 65% 88%);
	color: hsl(var(--tprs-er-hue, 0) 45% 30%);
	font-size: 17px;
	font-weight: 600;
}
.tprs-reviews__who {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}
.tprs-reviews__name {
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tprs-reviews__date {
	color: var(--tprs-er-date);
	font-size: 12px;
}
.tprs-reviews__platform {
	flex: 0 0 20px;
	align-self: flex-start;
	width: 20px;
	height: 20px;
	border-radius: 4px; /* icon file is square-cornered */
}
.tprs-reviews__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}
.tprs-reviews__star {
	fill: var(--tprs-er-star);
}
.tprs-reviews__star.is-off {
	fill: var(--tprs-er-star-off);
}
.tprs-reviews__text {
	display: -webkit-box;
	/* Always exactly 3 lines tall, so every card in a row is the same height. */
	height: 4.5em; /* 3 x line-height 1.5 */
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
.tprs-reviews__card.is-expanded .tprs-reviews__text {
	display: block;
	height: auto;
}
.tprs-reviews__more {
	display: block;
	height: 1.5em;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tprs-er-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.tprs-reviews__more.is-unneeded {
	visibility: hidden; /* keeps its row, so cards without it stay the same height */
}
.tprs-reviews__more:hover {
	text-decoration: underline;
}

/* Chevron arrows (TrustIndex-style grey) */
.tprs-reviews__arrow {
	position: relative;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.tprs-reviews__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border: solid var(--tprs-er-arrow);
	border-width: 0 2px 2px 0;
}
.tprs-reviews__arrow--prev::before {
	transform: translate(-30%, -50%) rotate(135deg);
}
.tprs-reviews__arrow--next::before {
	transform: translate(-70%, -50%) rotate(-45deg);
}
.tprs-reviews__arrow:hover::before {
	border-color: #0a0a0a;
}
.tprs-reviews__arrow:focus-visible {
	outline: 2px solid #000;
}
.tprs-reviews.is-static .tprs-reviews__arrow {
	visibility: hidden;
}

/* Rating summary footer */
.tprs-reviews__summary {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
}
.tprs-reviews__summary span {
	white-space: nowrap;
}
.tprs-reviews__summary a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.tprs-reviews {
		--tprs-er-per-view: 2;
	}
}
@media (max-width: 600px) {
	.tprs-reviews {
		--tprs-er-per-view: 1;
	}
	.tprs-reviews__arrow {
		flex-basis: 24px;
		width: 24px;
	}
}

/* Product-page section: spaced like the "Related products" section below it. */
.tprs-reviews-section {
	margin: 0 0 40px;
}