/**
 * Reviews section.
 */

.sunny-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-6);
}

.sunny-reviews__summary h2 {
	margin-bottom: var(--space-3);
	font-size: var(--fs-heading-md);
}

.sunny-reviews__summary-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.sunny-reviews__average {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-display-md);
	line-height: 1;
}

.sunny-reviews__empty {
	color: var(--fg-secondary);
}

/* --- Distribution --- */

.sunny-reviews__distribution {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.sunny-reviews__dist-row {
	display: grid;
	grid-template-columns: 34px 1fr 28px;
	align-items: center;
	gap: var(--space-3);
	padding: 3px 0;
	color: var(--fg-secondary);
	font-size: var(--fs-body-sm);
}

.sunny-reviews__dist-row:hover {
	color: var(--fg-primary);
}

.sunny-reviews__dist-track {
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	overflow: hidden;
}

.sunny-reviews__dist-fill {
	display: block;
	height: 100%;
	background: var(--color-warning);
}

.sunny-reviews__dist-count {
	text-align: right;
}

/* --- Controls --- */

.sunny-reviews__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-default);
}

.sunny-reviews__sort {
	display: flex;
	gap: var(--space-4);
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
}

.sunny-reviews__sort .is-active {
	color: var(--fg-primary);
	font-weight: var(--fw-semibold);
}

/* --- List --- */

.sunny-reviews__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sunny-reviews__item {
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-default);
}

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

.sunny-reviews__item-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.sunny-reviews__item-content {
	margin: 0;
	color: var(--fg-primary);
	line-height: var(--lh-relaxed);
}

.sunny-reviews__item-images {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.sunny-reviews__item-image {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	object-fit: cover;
}

.sunny-reviews__item-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-3);
}

.sunny-reviews__item-author {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
}

.sunny-reviews__item-date {
	margin-left: var(--space-2);
	font-weight: var(--fw-regular);
	color: var(--fg-muted);
}

.sunny-reviews__helpful {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	padding: var(--space-1) var(--space-3);
	color: var(--fg-secondary);
	font-size: var(--fs-caption);
}

.sunny-reviews__helpful:hover {
	background: var(--surface-sunken);
}

.sunny-reviews__helpful.is-voted {
	border-color: var(--surface-brand);
	color: var(--brand-700);
}

.sunny-reviews__helpful:disabled {
	cursor: default;
}

.sunny-reviews__reply {
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--surface-brand);
	background: var(--surface-sunken);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.sunny-reviews__reply p {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-body-sm);
	color: var(--fg-secondary);
}

/* --- Pagination --- */

.sunny-reviews__pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

.sunny-reviews__pagination a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	font-size: var(--fs-body-sm);
}

.sunny-reviews__pagination a.is-current {
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	border-color: transparent;
}

/* --- Honeypot --- */

.sunny-review-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}

/* --- Two-column layout with the accordion tabs --- */

.sunny-reviews-and-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--space-10) var(--space-16);
	align-items: start;
	max-width: var(--container-max);
	margin: var(--rhythm-section-y-tight) auto 0;
	padding-inline: var(--container-pad);
}

/* minmax(min(100%, 320px), 1fr) is the usual "collapse to one column when
   there is no room" idiom, and it only works while the container has a
   definite inline size. This grid does not: it is itself an item of the
   div.product grid, and grid items default to min-width:auto, so each child
   here contributes its min-content width upwards, the 100% cannot resolve
   during track sizing, and auto-fit keeps laying out two 320px columns on a
   375px phone - 801px of content in a 375px viewport.
   Releasing the children's automatic minimum breaks that loop: contributions
   drop, the block gets its real width, and the 100% resolves against it. */
.sunny-reviews-and-tabs > * {
	min-width: 0;
}

/* .woocommerce-tabs normally carries its own max-width/margin/padding-inline
   (product.css) for the case where it stands alone full-width. Nested here as
   one column of a two-up grid, all three would double up with the wrapper's
   own sizing and indent its content a second time - reset every one of them
   rather than only the margin. */
.sunny-reviews-and-tabs .woocommerce-tabs {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Keep the document's natural reading order on narrow screens. Once the grid
   becomes a desktop two-column layout, the alternate setting moves reviews to
   the left without duplicating or re-rendering either block. */
@media (min-width: 48em) {
	.sunny-reviews-and-tabs--reviews-left .sunny-reviews {
		order: -1;
	}
}

/* ---------------------------------------------------------------------------
 * The review form, as a tab inside the accordion
 *
 * Lives inside a sunny-accordion__panel rather than a separate block — it is
 * a tab row in the accordion, sharing its disclosure model with Description
 * and Fabric and production. The tab title ("Write a review" / "Be the first
 * to review this product") is provided by the tab registration; the panel
 * holds only the form fields.
 * ------------------------------------------------------------------------ */

.sunny-review-form-in-accordion {
	padding: var(--space-4) 0 var(--space-5);
	max-width: 75ch;
}

.sunny-review-form__error {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--surface-accent);
	border-radius: var(--radius-md);
	background: var(--brand-50);
	color: var(--surface-accent);
	font-size: var(--fs-body-sm);
}

/* ---------------------------------------------------------------------------
 * The submission form
 *
 * Had no CSS at all: the file picker and the submit button were the browser's
 * own grey chrome sitting inside a designed card, which is what the rest of
 * this stylesheet exists to avoid. Same gap as the footer and the site header
 * before it - markup written, stylesheet never.
 * ------------------------------------------------------------------------ */

.sunny-review-form-in-accordion .comment-respond {
	margin-top: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-default);
}

.sunny-review-form-in-accordion .comment-reply-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-heading-sm);
	color: var(--fg-primary);
}

.sunny-review-form-in-accordion .comment-notes {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
}

.sunny-review-form-in-accordion .comment-form p {
	margin: 0 0 var(--space-4);
}

.sunny-review-form-in-accordion .comment-form label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
	color: var(--fg-primary);
}

.sunny-review-form-in-accordion .required {
	color: var(--surface-accent);
}

.sunny-review-form-in-accordion .comment-form input[type="text"],
.sunny-review-form-in-accordion .comment-form input[type="email"],
.sunny-review-form-in-accordion .comment-form select,
.sunny-review-form-in-accordion .comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--fg-primary);
	font: inherit;
	font-size: var(--fs-body-sm);
}

.sunny-review-form-in-accordion .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

.sunny-review-form-in-accordion .comment-form input:focus-visible,
.sunny-review-form-in-accordion .comment-form select:focus-visible,
.sunny-review-form-in-accordion .comment-form textarea:focus-visible {
	outline: 2px solid var(--brand-600);
	outline-offset: 1px;
	border-color: transparent;
}

/* The name and email fields are short and belong on one line where there
   is room for two. */
@media (min-width: 560px) {
	.sunny-review-form-in-accordion .comment-form-author,
	.sunny-review-form-in-accordion .comment-form-email {
		display: inline-block;
		width: calc(50% - var(--space-2));
		vertical-align: top;
	}

	.sunny-review-form-in-accordion .comment-form-author {
		margin-right: var(--space-3);
	}
}

/* --- The star picker ------------------------------------------------------

   WooCommerce's own script swaps the <select> for a row of links and then
   relies on its stylesheet to turn them into stars, using an icon font loaded
   by that same stylesheet. The theme dequeues it, so what reached the page was
   the accessible text of five links, verbatim: "1 of 5 stars 2 of 5 stars 3 of
   5 stars 4 of 5 stars 5 of 5 stars".

   Drawn here with a character rather than the theme's sprite, because these
   nodes are created by WooCommerce at runtime and there is nowhere to put an
   <svg> without re-implementing the widget. The link text stays in the DOM for
   screen readers and is sized to nothing visually. */

.sunny-review-form-in-accordion .comment-form-rating {
	margin-bottom: var(--space-4);
}

.sunny-review-form-in-accordion .stars {
	display: flex;
	gap: var(--space-1);
	margin: 0;
}

.sunny-review-form-in-accordion .stars span {
	display: flex;
	gap: var(--space-1);
}

.sunny-review-form-in-accordion .stars a {
	position: relative;
	width: 30px;
	height: 30px;
	font-size: 0;
	line-height: 0;
	color: var(--border-strong);
	text-decoration: none;
}

.sunny-review-form-in-accordion .stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: currentColor;
}

/* Hovering star four fills one to four: the row lights up, then everything
   after the pointer is put back. Same trick for the chosen value. */
.sunny-review-form-in-accordion .stars:hover a,
.sunny-review-form-in-accordion .stars.selected a {
	color: var(--surface-accent);
}

.sunny-review-form-in-accordion .stars a:hover ~ a,
.sunny-review-form-in-accordion .stars.selected a.active ~ a {
	color: var(--border-strong);
}

.sunny-review-form-in-accordion .stars a:focus-visible {
	outline: 2px solid var(--brand-600);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* --- The photo picker ---------------------------------------------------- */

/*
 * A file input cannot be styled: the button inside it is drawn by the browser
 * and the "no file chosen" text beside it is not addressable at all. ::file-
 * selector-button reaches the button in every engine this theme is tested in,
 * which is enough to make it look like the theme's other buttons; the status
 * text stays the browser's, which is the honest place for it - it is the only
 * thing that reports what is actually attached.
 */
.sunny-review-form-in-accordion .comment-form-photos input[type="file"] {
	width: 100%;
	padding: var(--space-3);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
	font-size: var(--fs-body-sm);
	color: var(--fg-secondary);
	cursor: pointer;
}

.sunny-review-form-in-accordion .comment-form-photos input[type="file"]::file-selector-button {
	margin-right: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-inverse);
	color: var(--neutral-0);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-sm);
	cursor: pointer;
}

.sunny-review-form-in-accordion .comment-form-photos input[type="file"]::file-selector-button:hover {
	background: var(--brand-600);
}

.sunny-review-form-in-accordion .comment-form-photos input[type="file"]:hover {
	border-color: var(--brand-600);
	background: var(--surface-card);
}

/* The consent checkbox is the one field whose label belongs beside the input
   rather than above it. */
.sunny-review-form-in-accordion .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.sunny-review-form-in-accordion .comment-form-cookies-consent input {
	flex: none;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--surface-brand);
}

.sunny-review-form-in-accordion .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-sm);
	color: var(--fg-secondary);
}

/* --- Submit -------------------------------------------------------------- */

.sunny-review-form-in-accordion .form-submit {
	margin-bottom: 0;
}

.sunny-review-form-in-accordion .comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--space-3) var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard);
}

.sunny-review-form-in-accordion .comment-form input[type="submit"]:hover {
	background: var(--surface-brand-hover);
}

.sunny-review-form-in-accordion .comment-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--fg-primary);
	outline-offset: 2px;
}

/* The honeypot is a real field with a real label; it must be unreachable
   rather than merely invisible, or a keyboard user will tab into it and fail
   the check it exists to run. */
.sunny-review-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sunny-review-form-in-accordion .comment-form input[type="submit"] {
		transition: none;
	}
}