/*
 * Reviews — the reviews tab on the product page.
 *
 * Loaded by inc/reviews.php on is_product() only. The star markup itself is
 * styled globally in home.css, beside the product card's stars, so the two
 * cannot drift; everything here is the list and the form around them.
 */

/* --- summary rating, under the product title ---------------------- */

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--kk-gap-xs);
	margin: 0 0 var(--kk-gap-s);
	font-size: var(--kk-step--1);
}

.woocommerce-product-rating .kk-star { width: 15px; height: 15px; }

.woocommerce-review-link {
	color: var(--kk-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--kk-rule);
}

.woocommerce-review-link:hover {
	color: var(--kk-brown);
	border-bottom-color: var(--kk-gold);
}

/* --- the tab ------------------------------------------------------ */

#reviews .woocommerce-Reviews-title {
	font-family: var(--kk-display);
	font-weight: 400;
	font-size: var(--kk-step-2);
	color: var(--kk-brown);
	margin: 0 0 var(--kk-gap-m);
}

#reviews .woocommerce-Reviews-title span { font-style: italic; }

.woocommerce-noreviews {
	color: var(--kk-muted);
	margin: 0 0 var(--kk-gap-m);
}

/* --- review list -------------------------------------------------- */

#reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--kk-gap-l);
	padding: 0;
	display: grid;
	gap: var(--kk-gap-m);
	max-width: 62ch;
}

#reviews .commentlist li { margin: 0; }

#reviews .comment_container {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--kk-gap-s);
	align-items: start;
	padding-bottom: var(--kk-gap-m);
	border-bottom: 1px solid var(--kk-rule-soft);
}

#reviews .commentlist li:last-child .comment_container {
	padding-bottom: 0;
	border-bottom: 0;
}

#reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0;
	background: var(--kk-cream);
}

#reviews .comment-text { min-width: 0; }

#reviews .meta {
	margin: 0 0 .35rem;
	font-size: var(--kk-step--1);
	color: var(--kk-muted);
	line-height: 1.5;
}

#reviews .meta .woocommerce-review__author {
	display: block;
	font-size: var(--kk-step-0);
	font-weight: 500;
	color: var(--kk-brown);
}

#reviews .meta .woocommerce-review__published-date { color: var(--kk-faint); }

/* Core prints a bare "(verified owner)"; make it read as a mark of trust. */
#reviews .woocommerce-review__verified {
	display: inline-block;
	font-size: .68rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--kk-ok);
	background: #E4EFE8; /* fallback for WebViews without color-mix */
	background: color-mix(in srgb, var(--kk-ok) 10%, transparent);
	border-radius: var(--kk-radius);
	padding: .1rem .4rem;
	margin-left: .35rem;
	vertical-align: 1px;
}

#reviews .comment-text .star-rating { margin: 0 0 .4rem; }
#reviews .comment-text .kk-star { width: 14px; height: 14px; }

#reviews .description { color: var(--kk-text); }
#reviews .description p:last-child { margin-bottom: 0; }

/* --- the form ----------------------------------------------------- */

#review_form_wrapper {
	max-width: 62ch;
	padding-top: var(--kk-gap-m);
	border-top: 1px solid var(--kk-rule);
}

#reviews .comment-reply-title {
	display: block;
	font-family: var(--kk-display);
	font-size: var(--kk-step-1);
	color: var(--kk-brown);
	margin-bottom: var(--kk-gap-s);
}

#reviews .comment-form { display: grid; gap: var(--kk-gap-s); }

#reviews .comment-form p { margin: 0; }

#reviews .comment-form label {
	display: block;
	margin-bottom: .3rem;
	font-size: var(--kk-step--1);
	font-weight: 500;
	color: var(--kk-brown);
}

#reviews .comment-form .required { color: var(--kk-sale); }

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form select,
#reviews .comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: .55rem .7rem;
	font: inherit;
	color: var(--kk-text);
	background: var(--kk-white);
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
}

#reviews .comment-form textarea { min-height: 7rem; resize: vertical; }

#reviews .comment-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--kk-gold);
	outline-offset: 1px;
	border-color: var(--kk-gold);
}

/* The rating is the field that carries the most weight — give it the room. */
#reviews .comment-form-rating select { max-width: 16rem; }

#reviews .form-submit { margin: 0; }

#reviews .comment-form input[type="submit"] {
	padding: .7rem 1.6rem;
	font: inherit;
	font-weight: 500;
	color: var(--kk-shell);
	background: var(--kk-brown);
	border: 0;
	border-radius: var(--kk-radius);
	cursor: pointer;
	transition: background .18s var(--kk-ease);
}

#reviews .comment-form input[type="submit"]:hover { background: var(--kk-brown-deep); }

/* Shown instead of the form when the shopper has not bought the product. */
.woocommerce-verification-required {
	max-width: 62ch;
	margin: 0;
	padding: var(--kk-gap-s) var(--kk-gap-m);
	color: var(--kk-muted);
	background: var(--kk-cream);
	border-left: 2px solid var(--kk-gold);
	border-radius: var(--kk-radius);
}

@media (max-width: 480px) {
	#reviews .comment_container { grid-template-columns: 32px 1fr; }
	#reviews .comment_container img.avatar { width: 32px; height: 32px; }
}