/**
 * Product review list: review cards and the seller replies nested under them.
 *
 * Two things about the cascade here, both discovered rather than guessed:
 *
 * 1. The reply card sits *inside* the review's <li class="review">, so
 *    master.css's `.product-comment-form .commentlist .review .comment_container`
 *    (0,4,0) matches it too. Selectors below therefore carry four classes of
 *    their own and rely on this sheet loading after master.css.
 *
 * 2. main-style.css sets `ul { padding: 0 !important }`, so the thread indent
 *    is done with margin-left, which is not marked important anywhere.
 */

/* -------------------------------------------------------------------------
 * Review card
 *
 * Laid out like the marketplace review cards buyers are used to: a tinted
 * header strip carrying the rating on the left and the byline on the right,
 * then the review text below it.
 *
 * The markup comes from WooCommerce's review.php, which nests the rating, the
 * byline and the text inside .comment-text as siblings of the avatar.
 * Reparenting that would mean reimplementing the template and losing its action
 * hooks, so .comment-text is set to `display: contents` and its children are
 * placed directly on the card's grid instead.
 *
 * Every selector here uses child combinators from the review's own <li>. A
 * seller reply is itself a .comment_container nested inside that <li>, so a
 * descendant selector would restyle the reply as though it were a review.
 * ---------------------------------------------------------------------- */

.product-comment-form .commentlist > li.review > .comment_container {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	padding: 0;
	border: 1px solid #d3d3d3;
	border-radius: 8px;
	margin-bottom: 16px;
	overflow: hidden;
}

.product-comment-form .commentlist > li.review > .comment_container > .comment-text {
	display: contents;
}

/* Background for the header strip. A grid item of its own so the tint runs the
   full width of the card instead of stopping at each column. */
.product-comment-form .commentlist > li.review > .comment_container::before {
	content: "";
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: stretch;
	background: #f7f7fa;
	border-bottom: 1px solid #e9e9f0;
}

.product-comment-form .commentlist > li.review > .comment_container .wpbay-review-stars {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
	padding: 12px 16px;
}

.product-comment-form .commentlist > li.review > .comment_container > .avatar {
	grid-row: 1;
	grid-column: 2;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin: 0;
}

.product-comment-form .commentlist > li.review > .comment_container p.meta {
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	margin: 0;
	padding: 12px 16px 12px 8px;
	font-size: 14px;
	color: #6b6b7b;
	line-height: 1.4;
	white-space: nowrap;
}

.product-comment-form .commentlist > li.review > .comment_container .woocommerce-review__author {
	text-transform: capitalize;
	color: #111;
	font-weight: 600;
}

.product-comment-form .commentlist > li.review > .comment_container .woocommerce-review__verified {
	color: #2e7d32;
	font-style: normal;
	font-size: 13px;
}

.product-comment-form .commentlist > li.review > .comment_container .woocommerce-review__dash {
	display: none;
}

/* master.css sets this to display:block, which broke the byline onto a second
   line and made the header strip 63px tall instead of one row. */
.product-comment-form .commentlist > li.review > .comment_container .woocommerce-review__published-date {
	display: inline;
	font-size: 14px;
	color: #8a8a99;
}

.product-comment-form .commentlist > li.review > .comment_container .woocommerce-review__published-date::before {
	content: "·";
	margin: 0 6px;
	color: #c8c8d4;
}

/* Descendant, not child: .description sits inside .comment-text, which only
   loses its box to `display: contents` - it is still the DOM parent. Safe to
   widen here because the reply's own .description lives under the <ul class=
   "children"> that is a *sibling* of this container, not inside it. */
.product-comment-form .commentlist > li.review > .comment_container .description {
	grid-row: 2;
	grid-column: 1 / -1;
	padding: 16px;
	font-size: 15px;
	line-height: 24px;
	color: #000424;
}

.product-comment-form .commentlist > li.review > .comment_container .description p:last-child {
	margin-bottom: 0;
}

.wpbay-review-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
}

/* The byline is the first thing to run out of room on a phone. */
@media (max-width: 575px) {
	.product-comment-form .commentlist > li.review > .comment_container p.meta {
		white-space: normal;
		font-size: 13px;
	}

	.product-comment-form .commentlist > li.review > .comment_container .wpbay-review-stars,
	.product-comment-form .commentlist > li.review > .comment_container p.meta {
		padding-left: 12px;
		padding-right: 12px;
	}

	.product-comment-form .commentlist > li.review > .comment_container .description {
		padding: 12px;
	}
}

/* -------------------------------------------------------------------------
 * Version chip, helpfulness votes and the version filter
 * ---------------------------------------------------------------------- */

.wpbay-review-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.wpbay-review-filter__btn {
	padding: 5px 14px;
	border: 1px solid #d3d3d3;
	border-radius: 999px;
	background: #fff;
	color: #4a4a5a;
	font-size: 13px;
	line-height: 20px;
	cursor: pointer;
}

.wpbay-review-filter__btn:hover {
	border-color: #7047eb;
	color: #7047eb;
}

.wpbay-review-filter__btn.is-active {
	border-color: #7047eb;
	background: #7047eb;
	color: #fff;
}

.wpbay-review-filter__empty {
	margin: 0;
	flex-basis: 100%;
	color: #8a8a99;
	font-size: 14px;
}

/* Row three of the review card: the header strip is row one, the text row two. */
.product-comment-form .commentlist > li.review > .comment_container .wpbay-review-footer {
	grid-row: 3;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 10px 16px;
	border-top: 1px solid #f0f0f5;
}

.product-comment-form .commentlist > li.review > .comment_container .wpbay-review-footer__version {
	margin-right: auto;
}

.wpbay-review-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	white-space: nowrap;
}

.wpbay-review-chip.is-current {
	background: #eef4ec;
	color: #2e7d32;
}

/* Not a warning: an older review is still a fair review, it just describes a
   version that has moved on. */
.wpbay-review-chip.is-older {
	background: #f2f2f7;
	color: #6b6b7b;
}

.wpbay-review-votes {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.wpbay-review-votes__label,
.wpbay-review-votes__tally {
	color: #8a8a99;
	font-size: 13px;
}

.wpbay-review-vote {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid #d3d3d3;
	border-radius: 999px;
	background: #fff;
	color: #4a4a5a;
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
}

.wpbay-review-vote:hover:not(:disabled) {
	border-color: #7047eb;
	color: #7047eb;
}

.wpbay-review-vote:disabled {
	cursor: default;
	opacity: 0.7;
}

.wpbay-review-vote.is-chosen {
	border-color: #7047eb;
	background: #f3efff;
	color: #7047eb;
	opacity: 1;
}

.wpbay-review-vote__count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wpbay-review-votes__status {
	display: none;
	font-size: 12px;
	color: #2e7d32;
}

.wpbay-review-votes__status.is-visible {
	display: inline;
}

.wpbay-review-votes__status.is-error {
	color: #c62828;
}

@media (max-width: 575px) {
	.product-comment-form .commentlist > li.review > .comment_container .wpbay-review-footer {
		padding: 10px 12px;
	}

	.wpbay-review-votes__label {
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Seller reply, nested under its review
 * ---------------------------------------------------------------------- */

.product-comment-form .commentlist .children {
	list-style: none;
	margin: 0 0 0 40px;
}

.product-comment-form .commentlist .wpbay-seller-reply {
	margin: 0;
	border: 0;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container {
	display: flex;
	padding: 18px 20px;
	border: 1px solid #d3d3d3;
	border-left: 3px solid #7047eb;
	border-radius: 8px;
	background: #fafaff;
	margin-bottom: 16px;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container .avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin-right: 16px;
	flex-shrink: 0;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container .comment-text {
	min-width: 0;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 15px;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__meta .woocommerce-review__author {
	text-transform: capitalize;
	color: #111;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__meta .woocommerce-review__author a {
	color: inherit;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__meta .woocommerce-review__published-date {
	font-size: 14px;
	color: #6b6b7b;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	border-radius: 11px;
	background: #7047eb;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 18px;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container .description {
	font-size: 15px;
	line-height: 24px;
}

.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container .description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 575px) {
	.product-comment-form .commentlist .children {
		margin-left: 16px;
	}

	.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container {
		padding: 14px 16px;
	}

	.product-comment-form .commentlist .wpbay-seller-reply .wpbay-seller-reply__container .avatar {
		width: 36px;
		height: 36px;
		margin-right: 12px;
	}
}