/*------------------------------------------------------------------------------*/
/* Product Rating
/*------------------------------------------------------------------------------*/

.ProductRating {
	--color-link: var(--color-text);
	--color-link-hover: var(--color-text);
	align-items: center;
	display: inline-flex;
	margin: var(--default-margin);
	position: relative;
	text-decoration: none;
	width: min-content;
}

.ProductRating[data-rating-text]::before {
	background: var(--background-color);
	border: 1px solid var(--border-color);
	bottom: calc(100% + 2rem); 
	content: attr(data-rating-text);
	font-size: var(--font-size-small);
	opacity: 0;
	padding: .5rem 1rem;
	position: absolute;
	transition: opacity .15s ease-in-out;
	visibility: hidden;
	width: max-content;
}

.ProductRating:hover::before {
	opacity: 1;
	visibility: visible;
}

.ProductRating[data-rating-count]::after {
	content: "(" attr(data-rating-count) ")";
	font-size: var(--font-size-large);
	margin-left: 1rem;
}

.ProductRatingNumber {
	font-size: var(--font-size-xlarge);
	font-weight: bold;
	margin-right: 1rem;
}

.ProductRatingStar {
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 110%;
	display: inline-flex;
	height: 2.5rem;
	position: relative;
	width: 2.5rem;
}

.ProductRatingStar::after {  
	content: "";
	height: 100%;
	left: 0;
	top: 0;
	width: 100%; 
}

.ProductRatingStar.FullStar {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" fill="%23ffd200"/></svg>');
}

.ProductRatingStar.HalfStar {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m480-299 157 95-42-178 138-120-182-16-71-168v387ZM233-80l65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" fill="%23ffd200"/></svg>');
}

.ProductRatingStar.EmptyStar {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m323-205 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178ZM233-80l65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Zm247-355Z" fill="%23ffd200"/></svg>');
}

/*------------------------------------------------------------------------------*/
/* List Product Ratings
/*------------------------------------------------------------------------------*/

.ListProduct .ProductRating::before,
.ListProduct .ProductRating::after {
	display: none;
}

.ListProduct .ProductRatingStar {
	height: 2rem;
	width: 2rem;
}

/*------------------------------------------------------------------------------*/
/* Product Reviews
/*------------------------------------------------------------------------------*/

.ProductReviews {
	background: var(--background-color-shade-1);
	border-radius: var(--border-radius);
	display: grid;
	gap: 0 var(--grid-gutter);
	grid-template-columns: minmax(200px, 1.3fr) 5fr; 
	margin-bottom: var(--margin-large);
	padding: var(--margin-large);
}

.ProductReviewsSummary {
	display: flex;
	flex-flow: column;
}

.ProductReview {
	border-top: 1px solid var(--border-color);
	padding-block: 2rem;
}

.ProductReview:first-child {
	border-top: 0;
	padding-top: 0;
}

.ProductReview:last-child {
	padding-bottom: 0;
}

.ProductReview .ProductRating {
	margin-bottom: 0;
}

.ProductReview .ProductRatingStar {
	height: 2rem;
	width: 2rem;
} 

.ProductReviewTitle {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.ProductReviewTitle h3 {
	margin-bottom: 0;
}

.ProductReviewComment {
	margin: 1rem 0; 
	max-width: 90ch;
}

.ProductReviewAuthor {
	align-items: center;
	color: var(--color-text-subtle);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-small);
	gap: .5rem 1rem;
}

.ProductReviewDate {
	color: var(--color-text-subtle);
}

.ProductReviewConfirmed svg {
	fill: var(--color-text-accent);
	height: 1.5rem;
	margin-right: .25rem;
	width: 1.5rem;
}

.ProductReviewConfirmed {
	align-items: center;
	color: var(--color-text-accent);
	display: flex;
	gap: .25rem;
}

.ProductReviewResponses {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

.ProductReviewResponse {
	background-color: var(--background-color);
	border-radius: var(--border-radius);
	max-width: 90ch;
	padding: 2rem;
}

.ProductReviewResponse > :last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 800px) {
	.ProductReviews {
		border-radius: 0;
		display: flex;
		flex-flow: column;
		margin-inline: calc(var(--container-page-margin) *-1);
		padding-inline: var(--container-page-margin);
	}

	.ProductReviewVariation {
		flex: 1 0 100%;
	}

	.ProductReviewResponse {
		padding: 1rem;
	}
}

@media screen and (min-width: 800px) {
	.ProductReviewsList {
		border-left: 1px solid var(--border-color);
		padding-left: var(--margin-large);
	}
}

/*------------------------------------------------------------------------------*/
/* Reviews Anchor
/*------------------------------------------------------------------------------*/

.ProductReviewsAnchorLink {
	inset: 0;
	position: absolute;
	z-index: 1;
}

/*------------------------------------------------------------------------------*/
/* Reviews Pagination
/*------------------------------------------------------------------------------*/

.ReviewsPagination .Pagination {
	border-top: 1px solid var(--border-color);
	margin-top: 0;
	padding-top: var(--margin-large);
}

.ReviewsPagination .Pagination li:not(.PreviousPageLink, .NextPageLink) {
	display: none;
}

.ReviewsPagination .Pagination li {
	background: var(--background-color);
}

.ReviewsPagination .Pagination .DisabledPageLink {
	display: none;
}

.ReviewsPagination .Pagination .NextPageLink > a::after,
.ReviewsPagination .Pagination .PreviousPageLink > a::after {
	display: none;
}

.ReviewsPagination .Pagination li a {
	font-size: var(--font-size-regular);
	position: relative;
}

@media screen and (max-width: 600px) {
	.ProductReviewsList .PaginationFormItem {
		align-items: flex-start;
	}
}