/**
 * Comments and reviews.
 *
 * One stylesheet for both, because they're the same object twice: a blog
 * post's comment list (comments.php + WordPress's default walker) and a
 * product's review list (WooCommerce's review templates) share most of
 * their markup and all of their form. Differences are isolated at the
 * bottom of each block.
 *
 * Enqueued on single posts and single products only — see functions.php.
 *
 * Reviews matter here for a second reason: this theme dequeues
 * WooCommerce's own stylesheets (inc/performance.php), so anything Woo
 * styled itself — the rating star links most of all — arrives with no
 * styling at all unless it's rebuilt here.
 *
 * @package ProfHairClub_shop
 */

/* -------------------------------------------------------------
   Shared shell
   ------------------------------------------------------------- */
.comments-area,
.woocommerce-Reviews {
	margin-top: clamp(2.4rem, 5vw, 4rem);
}

.comments-area {
	padding-top: clamp(1.6rem, 3vw, 2.4rem);
	border-top: 1px solid var(--phc-mist);
	max-width: 68ch;
}

.comments-title,
.woocommerce-Reviews-title {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 2.3vw, 1.55rem);
	margin: 0 0 1.6rem;
}

/* WordPress wraps the post title in a <span> inside the comments title;
   on a long article title that dominates the heading, so it steps back. */
.comments-title span {
	color: var(--phc-stone);
	font-style: italic;
}

.no-comments,
.woocommerce-noreviews {
	margin: 0;
	padding: 1.1rem 1.3rem;
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	color: var(--phc-graphite);
	font-size: 0.92rem;
}

/* -------------------------------------------------------------
   Lists
   `ol.comment-list` is the blog's (comments.php), `ol.commentlist` is
   WooCommerce's — no underscore, no hyphen, easy to mistype.
   ------------------------------------------------------------- */
.comment-list,
.woocommerce-Reviews ol.commentlist {
	list-style: none;
	margin: 0 0 2.4rem;
	padding: 0;
}

.comment-list li,
.woocommerce-Reviews ol.commentlist li {
	list-style: none;
}

/* Threaded replies: indent, with a hairline to carry the eye down the
   thread rather than relying on whitespace alone. */
.comment-list .children {
	list-style: none;
	margin: 0 0 0 clamp(0.9rem, 3vw, 2rem);
	padding-left: clamp(0.9rem, 3vw, 1.6rem);
	border-left: 1px solid var(--phc-mist);
}

.comment-body,
.woocommerce-Reviews .comment_container {
	position: relative;
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--phc-mist);
}

.comment-list > li:first-child > .comment-body,
.woocommerce-Reviews ol.commentlist > li:first-child .comment_container {
	border-top: 1px solid var(--phc-mist);
}

/* Avatars. WooCommerce puts the avatar and .comment-text side by side
   inside .comment_container; the blog's default walker leaves the avatar
   floated inside .comment-author, so both are handled as a small grid
   instead of relying on floats. */
.woocommerce-Reviews .comment_container {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
}

img.avatar,
.woocommerce-Reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--phc-mist);
	float: none;
	margin: 0;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.9rem;
}

.comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: var(--phc-ink);
}

.comment-author .says {
	/* "говорит:" adds nothing next to a name in a bordered block. */
	display: none;
}

.comment-metadata,
.woocommerce-Reviews .meta {
	margin-top: 0.15rem;
	font-size: 0.74rem;
	color: var(--phc-stone);
}

.comment-metadata a,
.woocommerce-Reviews .meta a {
	color: inherit;
	text-decoration: none;
}

.comment-metadata a:hover {
	color: var(--phc-ink);
}

/* WooCommerce prints the reviewer name in a <strong class="woocommerce-review__author">
   inside .meta, so it needs lifting back out of the meta type size. */
.woocommerce-review__author {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--phc-ink);
	margin-bottom: 0.1rem;
}

.woocommerce-review__dash {
	display: none;
}

.woocommerce-review__published-date {
	font-size: 0.74rem;
	color: var(--phc-stone);
}

.comment-content,
.woocommerce-Reviews .description {
	margin-top: 0.6rem;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--phc-graphite);
}

.comment-content p,
.woocommerce-Reviews .description p {
	margin: 0 0 0.7rem;
}

.comment-content p:last-child,
.woocommerce-Reviews .description p:last-child {
	margin-bottom: 0;
}

/* A review's own star rating reuses .star-rating from woocommerce.css
   (which already rebuilds Woo's icon-font stars with a plain ★), it just
   needs placing. */
.woocommerce-Reviews .comment-text > .star-rating {
	float: none;
	margin-bottom: 0.5rem;
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--phc-yellow-deep);
}

.reply {
	margin-top: 0.6rem;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--phc-graphite);
	text-decoration: none;
	border-bottom: 1px solid var(--phc-mist);
	padding-bottom: 1px;
}

.comment-reply-link:hover {
	color: var(--phc-ink);
	border-bottom-color: var(--phc-yellow);
}

.comment-navigation,
.comments-pagination {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.8rem;
	font-size: 0.85rem;
}

/* -------------------------------------------------------------
   The form (shared by both)
   ------------------------------------------------------------- */
#respond {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: clamp(1.2rem, 3vw, 1.8rem);
}

.comment-reply-title {
	display: block;
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.25;
	margin-bottom: 0.9rem;
}

/* "Отменить ответ" rides along inside the title as a <small>. */
.comment-reply-title small {
	display: inline-block;
	margin-left: 0.6rem;
	font-family: var(--phc-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.comment-reply-title small a {
	color: var(--phc-stone);
	text-decoration: none;
	border-bottom: 1px solid var(--phc-mist);
}

.comment-notes,
.logged-in-as,
.comment-form-cookies-consent label {
	font-size: 0.78rem;
	color: var(--phc-stone);
	line-height: 1.5;
}

.comment-notes,
.logged-in-as {
	margin: 0 0 1.1rem;
}

.comment-form .required {
	color: var(--phc-yellow-deep);
}

.comment-form p {
	margin: 0 0 1rem;
}

.comment-form label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--phc-stone);
	margin-bottom: 0.35rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	background: var(--phc-paper);
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--phc-ink);
	transition: border-color 0.25s var(--phc-ease);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--phc-ink);
}

.comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

/* Name + email side by side; the comment field and the consent row keep
   the full width. */
@media (min-width: 620px) {
	.comment-form-author,
	.comment-form-email {
		display: inline-block;
		width: calc(50% - 0.5rem);
	}

	.comment-form-author {
		margin-right: 1rem;
	}
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.comment-form-cookies-consent input {
	margin-top: 0.25em;
	flex: none;
}

.comment-form-cookies-consent label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.form-submit {
	margin-bottom: 0;
}

.comment-form input[type="submit"],
#respond #submit {
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	border-radius: 999px;
	padding: 0.9em 2.1em;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease);
}

.comment-form input[type="submit"]:hover,
#respond #submit:hover {
	background: var(--phc-yellow-deep);
}

/* -------------------------------------------------------------
   Review rating picker

   WooCommerce's single-product.js hides the <select id="rating"> and
   inserts `p.stars` — five anchors whose visible text is "1 из 5 звёзд"
   … "5 из 5 звёзд". Woo's own stylesheet turns those into stars using
   its bundled icon font; with that stylesheet dequeued they arrive as
   five plain text links. This rebuilds them with a plain ★ glyph, the
   same approach .star-rating already uses in woocommerce.css, so no
   icon font is needed.

   The JS state to hook into: clicking a star adds `.active` to that
   anchor (siblings lose it) and `.selected` to the `p.stars` container.
   Only the chosen anchor gets a class, so filling the ones before it
   needs `:has()` — where that isn't supported the chosen star still
   fills on its own, which reads correctly, just less richly.
   ------------------------------------------------------------- */
.comment-form-rating {
	margin-bottom: 1.2rem;
}

.comment-form-rating label[for="rating"] {
	margin-bottom: 0.5rem;
}

/* Every rule below is scoped to `#respond` on purpose, not for tidiness.
   style.css carries a broad `.site-main a:not(.phc-btn):not(.phc-product-card__media)`
   link colour at specificity (0,3,1); a plain `p.stars a` is only (0,1,2),
   so the global rule won and painted all five stars gold whether or not
   anything was chosen. `#respond` is the form's real wrapper — WooCommerce's
   own JS binds to `#respond p.stars a` — so it beats the global rule
   decisively instead of stacking `:not()`s. Same class of bug as the other
   specificity notes in this theme; check for it first when a colour is
   "right in the CSS but wrong on screen". */
#respond p.stars {
	display: inline-flex;
	gap: 0.1em;
	margin: 0;
	line-height: 1;
}

#respond p.stars > span {
	display: inline-flex;
	gap: 0.1em;
}

#respond p.stars a {
	position: relative;
	display: block;
	width: 1.7rem;
	height: 1.7rem;
	/* Push the label text out of sight but keep it for screen readers —
	   these anchors carry the only accessible name for each rating. */
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	color: var(--phc-mist);
	text-decoration: none;
	transition: color 0.15s var(--phc-ease);
}

#respond p.stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-indent: 0;
	font-size: 1.35rem;
	color: currentColor;
}

/* Chosen: the active star and everything before it. `:has()` is the only
   way to reach *preceding* siblings, and WooCommerce marks just the one
   clicked anchor. Where :has() is unsupported the whole selector list is
   dropped, so the chosen star alone stays filled — still legible, and
   aria-checked keeps carrying the real state either way. */
#respond p.stars a.active,
#respond p.stars a:has(~ a.active) {
	color: var(--phc-yellow-deep);
}

/* While pointing, the hover preview takes over from the stored choice —
   blank the row first, then fill up to the hovered star. */
#respond p.stars:hover a {
	color: var(--phc-mist);
}

#respond p.stars a:hover,
#respond p.stars a:has(~ a:hover) {
	color: var(--phc-yellow);
}

#respond p.stars a:focus-visible {
	outline: 2px solid var(--phc-yellow-deep);
	outline-offset: 2px;
	border-radius: var(--phc-radius-s);
}

/* If JS never runs, the <select> stays visible and must look like the
   theme's other selects rather than a raw browser control. */
.comment-form-rating select#rating {
	padding: 0.7em 2.2em 0.7em 1em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	background: var(--phc-paper);
	font-family: inherit;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------
   Reviews block spacing inside the product tab
   ------------------------------------------------------------- */
.woocommerce-Reviews {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.2rem);
	max-width: 68ch;
	margin-top: 0;
}

.woocommerce-Reviews #comments,
.woocommerce-Reviews #review_form_wrapper {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	#respond p.stars a {
		transition: none;
	}
}