/**
 * Customer reviews — product page.
 * ---------------------------------------------------------------------------
 * Deliberately NOT a new visual language. Every value here is lifted from the
 * warranty and shipping cards ported out of Shopify, so the three blocks under
 * the gallery read as one family:
 *
 *   card      18px radius, 30px padding, 1px rgba(184,134,47,.36),
 *             the same radial + linear background, the same 68x3 gold bar
 *   badge     11px / 600 / 1px uppercase, #8a6118 on a white pill
 *   heading   26px / 600 / -0.35px, #111
 *   item      14px radius, 17px padding, 1px rgba(17,17,17,.075)
 *   icon      36px gold-ringed disc
 *
 * What is new is the information design, which the WooCommerce default has
 * none of: an average with a 5→1 distribution, a verified-buyer chip, a real
 * empty state, and a rating control that can be operated with the keyboard.
 *
 * The one colour not from the warranty card is the star gold, #c4a055 —
 * that is --product-star-rating from Focal's own settings, the exact gold
 * Judge.me drew with on the Shopify storefront.
 *
 * @package wclocks
 */

.wcl-rv {
	max-width: 926px;      /* lines up with the tab strip directly above */
	margin: 34px auto 0;
	padding: 0 0 6px;
	font-family: inherit;
}

.wcl-rv * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * The card
 * ------------------------------------------------------------------------ */

.wcl-rv-card {
	position: relative;
	overflow: hidden;
	padding: 30px;
	border: 1px solid rgba(184, 134, 47, .36);
	border-radius: 18px;
	background:
		radial-gradient(circle at top right, rgba(174, 124, 38, .15), transparent 34%),
		linear-gradient(135deg, #fff 0%, #fff 72%, #f7f0e3 100%);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .045);
}

.wcl-rv-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	width: 68px;
	height: 3px;
	background: #b8862f;
}

.wcl-rv-head {
	max-width: 850px;
	margin-bottom: 24px;
}

.wcl-rv-badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: 12px;
	padding: 6px 11px;
	border: 1px solid rgba(184, 134, 47, .42);
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #8a6118;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.wcl-rv-head h3 {
	margin: 0;
	color: #111;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -.35px;
	text-transform: none;   /* base.css uppercases headings site-wide */
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Stars
 * ------------------------------------------------------------------------ */

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

.wcl-rv-star {
	width: 15px;
	height: 15px;
	fill: rgba(17, 17, 17, .16);
	flex: none;
}

.wcl-rv-star.is-on {
	fill: #c4a055;
}

.wcl-rv-stars--lg .wcl-rv-star {
	width: 20px;
	height: 20px;
}

/* ---------------------------------------------------------------------------
 * Summary: average score + distribution
 * ------------------------------------------------------------------------ */

.wcl-rv-summary {
	display: grid;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid rgba(17, 17, 17, .075);
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
}

.wcl-rv-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding-right: 26px;
	border-right: 1px solid rgba(17, 17, 17, .08);
	text-align: center;
}

.wcl-rv-score-num {
	color: #111;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.wcl-rv-score-meta {
	color: #666;
	font-size: 12.5px;
	line-height: 1.4;
}

.wcl-rv-bars {
	display: grid;
	gap: 7px;
}

.wcl-rv-bar {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) 28px;
	align-items: center;
	gap: 9px;
}

.wcl-rv-bar-label {
	color: #555;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wcl-rv-bar-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(17, 17, 17, .07);
	overflow: hidden;
}

.wcl-rv-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #8a6a35, #d8bd7a);
}

.wcl-rv-bar-count {
	color: #777;
	font-size: 12.5px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * The reviews themselves
 * ------------------------------------------------------------------------ */

.wcl-rv-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcl-rv-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcl-rv-item-inner {
	height: 100%;
	padding: 17px;
	border: 1px solid rgba(17, 17, 17, .075);
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.wcl-rv-item-inner:hover {
	transform: translateY(-2px);
	border-color: rgba(184, 134, 47, .45);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .06);
}

.wcl-rv-item-head {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 11px;
}

.wcl-rv-avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(184, 134, 47, .55);
	background: #fff;
	color: #8a6118;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.wcl-rv-item-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.wcl-rv-author {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	color: #111;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

.wcl-rv-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(46, 158, 123, .1);
	color: #24725a;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: nowrap;
}

.wcl-rv-verified svg {
	fill: #2e9e7b;
	flex: none;
}

.wcl-rv-date {
	display: block;
	margin-top: 2px;
	color: #8b8b8b;
	font-size: 12px;
}

.wcl-rv-item-head .wcl-rv-stars {
	margin-top: 3px;
}

/* The Judge.me headline. Sits between the meta row and the body, and is the
   thing a scanning reader actually reads, so it takes the weight. */
.wcl-rv-item-title {
	margin: 0 0 5px;
	color: #111;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.wcl-rv-text {
	color: #555;
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---- review photos -------------------------------------------------------
 * 16 of the 98 imported reviews carry one. Small, square, and quiet — they are
 * evidence, not the product gallery.
 * ------------------------------------------------------------------------ */

.wcl-rv-pics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.wcl-rv-pic {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 10px;
	border: 1px solid rgba(17, 17, 17, .1);
	overflow: hidden;
	background: #fff;
	transition: border-color .2s ease, transform .2s ease;
}

.wcl-rv-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcl-rv-pic:hover {
	transform: translateY(-2px);
	border-color: rgba(184, 134, 47, .6);
}

.wcl-rv-pic:focus-visible {
	outline: 2px solid #b8862f;
	outline-offset: 2px;
}

.wcl-rv-text p {
	margin: 0 0 9px;
}

.wcl-rv-text p:last-child {
	margin-bottom: 0;
}

.wcl-rv-pending {
	margin: 10px 0 0;
	color: #8a6118;
	font-size: 12.5px;
	font-style: italic;
}

.wcl-rv-pagination {
	margin-top: 16px;
	display: flex;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
}

.wcl-rv-pagination a,
.wcl-rv-pagination span {
	padding: 6px 11px;
	border-radius: 8px;
	color: #555;
	text-decoration: none;
}

.wcl-rv-pagination .current {
	background: #111;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Empty state
 *
 * The default reads "There are no reviews yet." — a statement of absence. This
 * asks for something instead, which is the only reason the block is there when
 * the count is zero.
 * ------------------------------------------------------------------------ */

.wcl-rv-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 34px 20px;
	border: 1px dashed rgba(184, 134, 47, .45);
	border-radius: 14px;
	background: rgba(255, 255, 255, .7);
	text-align: center;
}

.wcl-rv-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 3px;
	border-radius: 50%;
	border: 1px solid rgba(184, 134, 47, .5);
	background: #fff;
}

.wcl-rv-empty-icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #b8862f;
	stroke-width: 1.3;
	stroke-linejoin: round;
}

.wcl-rv-empty-title {
	margin: 0;
	color: #111;
	font-size: 17px;
	font-weight: 600;
}

.wcl-rv-empty-text {
	margin: 0;
	max-width: 46ch;
	color: #555;
	font-size: 13.8px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Write-a-review CTA
 *
 * Outlined, not solid. Add to Cart is the page's one solid gold button and a
 * second one down here would argue with it.
 * ------------------------------------------------------------------------ */

.wcl-rv-disclosure {
	margin-top: 18px;
}

.wcl-rv-open {
	width: fit-content;
	margin: 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	list-style: none;   /* Firefox marker */
	padding: 13px 24px;
	border: 1px solid rgba(184, 134, 47, .55);
	border-radius: 999px;
	background: #fff;
	color: #8a6118;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.wcl-rv-open:hover {
	background: #996c1a;
	border-color: #996c1a;
	color: #fff;
	transform: translateY(-1px);
}

.wcl-rv-open:focus-visible {
	outline: 2px solid #b8862f;
	outline-offset: 3px;
}

/* Safari still draws the disclosure triangle without this. */
.wcl-rv-open::-webkit-details-marker,
.wcl-rv-open::marker {
	display: none;
	content: "";
}

.wcl-rv-disclosure[open] > .wcl-rv-open {
	background: #996c1a;
	border-color: #996c1a;
	color: #fff;
}

.wcl-rv-disclosure[open] > .wcl-rv-open svg {
	transform: rotate(-12deg);
}

.wcl-rv-open svg {
	flex: none;
	transition: transform .22s ease;
}

/* ---------------------------------------------------------------------------
 * The form
 * ------------------------------------------------------------------------ */

.wcl-rv-formwrap {
	margin-top: 16px;
}

.wcl-rv-formbox,
#review_form .comment-respond {
	padding: 24px;
	border: 1px solid rgba(184, 134, 47, .42);
	border-radius: 14px;
	background: #fff;
}

.wcl-rv-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.wcl-rv-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wcl-rv-field--full,
.wcl-rv-field--rating,
.wcl-rv-actions,
.wcl-rv-form .comment-form-cookies-consent {
	grid-column: 1 / -1;
}

.wcl-rv-field label,
.wcl-rv-legend {
	color: #111;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.wcl-rv-field .req {
	color: #b8862f;
}

.wcl-rv-hint {
	color: #8b8b8b;
	font-size: 11.5px;
	line-height: 1.45;
}

.wcl-rv-form input[type="text"],
.wcl-rv-form input[type="email"],
.wcl-rv-form input[type="url"],
.wcl-rv-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(17, 17, 17, .14);
	border-radius: 10px;
	background: #fff;
	color: #111;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}

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

.wcl-rv-form input::placeholder,
.wcl-rv-form textarea::placeholder {
	color: #a9a9a9;
}

.wcl-rv-form input:focus,
.wcl-rv-form textarea:focus {
	outline: none;
	border-color: #b8862f;
	box-shadow: 0 0 0 3px rgba(184, 134, 47, .16);
}

/* ---- star input ----------------------------------------------------------
 * Five radios in reverse DOM order, flipped back with row-reverse. That way
 * `input:checked ~ label` reaches every star to the LEFT of the chosen one,
 * so the whole control works with CSS alone — and being real radios, it is
 * arrow-key navigable and announces itself correctly.
 * ------------------------------------------------------------------------ */

.wcl-rv-rating {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.wcl-rv-rating input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wcl-rv-rating label {
	display: inline-flex;
	padding: 2px;
	cursor: pointer;
	line-height: 0;
}

.wcl-rv-rating label svg {
	width: 30px;
	height: 30px;
	fill: rgba(17, 17, 17, .16);
	transition: fill .15s ease, transform .15s ease;
}

.wcl-rv-rating input:checked ~ label svg,
.wcl-rv-rating label:hover svg,
.wcl-rv-rating label:hover ~ label svg {
	fill: #c4a055;
}

.wcl-rv-rating label:hover svg,
.wcl-rv-rating label:hover ~ label svg {
	transform: scale(1.06);
}

.wcl-rv-rating input:focus-visible + label {
	outline: 2px solid #b8862f;
	outline-offset: 2px;
	border-radius: 4px;
}

.wcl-rv-rating-out {
	min-height: 17px;
	color: #8a6118;
	font-size: 12.5px;
	font-weight: 600;
}

/* ---- actions ------------------------------------------------------------- */

.wcl-rv-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wcl-rv-submit,
.wcl-rv-form input[type="submit"] {
	padding: 14px 30px;
	border: 0;
	border-radius: 2px;
	background: #996c1a;
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}

.wcl-rv-submit:hover,
.wcl-rv-form input[type="submit"]:hover {
	background: #7d5714;
}

.wcl-rv-submit:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

.wcl-rv-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	color: #666;
	font-size: 12.5px;
	line-height: 1.5;
}

.wcl-rv-form .comment-form-cookies-consent input {
	margin-top: 2px;
	accent-color: #996c1a;
}

.wcl-rv-form .comment-form-cookies-consent label {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #666;
}

.wcl-rv-closed {
	margin: 18px 0 0;
	color: #777;
	font-size: 13.5px;
	text-align: center;
}

/* WordPress prints this class in a few places; the theme may not define it. */
.wcl-rv .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------------ */

@media (max-width: 860px) {

	.wcl-rv-list,
	.wcl-rv-form {
		grid-template-columns: 1fr;
	}

	.wcl-rv-summary {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.wcl-rv-score {
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		gap: 12px;
		padding: 0 0 16px;
		border-right: 0;
		border-bottom: 1px solid rgba(17, 17, 17, .08);
	}

	.wcl-rv-score .wcl-rv-stars {
		align-self: center;
	}
}

@media (max-width: 600px) {

	.wcl-rv-card {
		padding: 22px 18px;
		border-radius: 14px;
	}

	.wcl-rv-card::before {
		left: 18px;
	}

	.wcl-rv-head h3 {
		font-size: 21px;
	}

	.wcl-rv-score-num {
		font-size: 38px;
	}

	.wcl-rv-formbox,
	#review_form .comment-respond {
		padding: 18px;
	}

	.wcl-rv-rating label svg {
		width: 34px;
		height: 34px;
	}

	.wcl-rv-open,
	.wcl-rv-submit {
		width: 100%;
		justify-content: center;
	}

	.wcl-rv-item-inner:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wcl-rv-item-inner,
	.wcl-rv-open,
	.wcl-rv-open svg,
	.wcl-rv-rating label svg {
		transition: none;
	}

	.wcl-rv-item-inner:hover,
	.wcl-rv-rating label:hover svg,
	.wcl-rv-rating label:hover ~ label svg {
		transform: none;
	}
}