/**
 * Reviews — the widget (sections/product-reviews.php, woocommerce/single-product/
 * review*.php) and the preview badges (inc/card.php, inc/pdp.php), which reuse
 * Judge.me's class names so the harvested Expanse CSS and the stores' muscle
 * memory keep working. Every RULE here is ours, written against the live
 * widget's measured geometry (gotvape.com PDP, 2026-09-13: 16px dividers,
 * 3.2em initial circle, 120px picture thumbnails, centred pagination with the
 * current page at 150%; re-measured on all four live stores 2026-09-19 for
 * review row 7 "the review text is slightly smaller": badge and review stars
 * 18px, "Based on N reviews" 18px, review title 18px, histogram 14.4px on
 * 14px rows over a 140px bar, timestamps and histogram counts 14.4px #7b7b7b).
 * Judge.me's stylesheet is Judge.me's and none of it is copied; the stars are
 * a text glyph, not its icon font.
 *
 * The VALUES in :root are configuration, not copy: the seven custom properties
 * every DTC store's Judge.me settings set (`<style class='jdgm-settings-style'>`
 * on the live page), identical on all four — Judge.me's own variable names, so
 * a child theme overrides a colour by redeclaring the property, nothing else.
 *
 * Three more of those settings are behaviour, measured on all four stores
 * (wulfmods, exxusvape, sutravape, gotvape collection + product pages,
 * 2026-09-13) and reproduced or deliberately not:
 *   - `.jdgm-prev-badge[data-average-rating='0.00']{display:none}` — an
 *     unreviewed product showed NO badge. Reproduced: it is also what keeps
 *     GVWS (no reviews, and no Judge.me on its live cards) badge-free.
 *   - `.jdgm-rev-widg__title{visibility:hidden}` — the widget's "Customer
 *     Reviews" was invisible under the section's own "Reviews" heading.
 *     Reproduced as visually-hidden: one visible heading, the h2 still
 *     there for assistive tech.
 *   - `.jdgm-prev-badge__text{visibility:hidden}` and
 *     `.jdgm-rev-widg__summary-text{visibility:hidden}` — "17 reviews" and
 *     "Based on 17 reviews" were blank gaps. NOT reproduced: the count is
 *     rendered. A store that wants the live gap back adds those two rules.
 *
 * Theme tokens used: --color-primary (text), --gutter (30px),
 * --element-text-font-family--body, --element-text-font-size--body-md — all
 * from the harvested settings.css, each with the fallback it has there.
 *
 * Enqueued unconditionally after specs.css (functions.php); the child's
 * style.css loads after this one. bin/gv-css-guard.php fails the build if any
 * sheet under assets/css/ is route-gated.
 */

:root {
	--jdgm-primary-color: #f90;
	--jdgm-secondary-color: rgba(255, 153, 0, 0.1);
	--jdgm-star-color: #f90;
	--jdgm-write-review-bg-color: #FF9900;
	--jdgm-write-review-text-color: #111111; /* 076: white on the orange was 2.14:1; #111 is 8.82:1 */
	--jdgm-paginate-color: #111111; /* 076, RULED by Carlos 2026-09-24: ink + brand underline, the
	   house rule at a11y.css:42-50 — NOT a darkened orange. #f90 on white was 2.14:1. Missed by the
	   076 sweep because page_comments is '0' on every store, so gv_reviews_per_page() returned 0,
	   product-reviews.php set $pages = 1 and gv_reviews_pagination() returned '' — no markup at all.
	   #129 made it render and the dormant token became a live AA failure. #111111 on white is 18.88:1.

	   ⛔ THE UNDERLINE BELOW IS LOAD-BEARING, NOT DECORATION. Ink links are no longer distinguishable
	   from surrounding text by colour, so removing it trades an AA contrast failure (1.4.3) for an AA
	   "colour is not the only visual means" failure (1.4.1) — same standard, different clause. Any
	   change here has to keep BOTH the ratio and the underline.

	   ⛔ Contrast here is bound by 4.5:1, not 3:1. [aria-current] is 27px/700 and the arrows 23.4px/700
	   (large, 3:1), but the ordinary page links are 18px/400 (normal, 4.5:1). Do not "optimise" into
	   the 3:1..4.5:1 band: the big ones would pass while every ordinary link failed, and axe would not
	   tell you — it rules on only ONE of the six children (single-character links come back INCOMPLETE
	   as too short to judge, the dots are never evaluated, the arrow glyph is ::before content). */
	--jdgm-border-radius: 0;
	--jdgm-reviewer-name-color: #1a1a1a; /* 076: Judge.me's orange name on white was 2.14:1 — the largest contrast finding on every PDP */
	/* ours: the off-star grey, the hairline dividers, the initial circle */
	--jdgm-star-off-color: #c9c9c9;
	--jdgm-divider-color: rgba(128, 128, 128, 0.25);
	--jdgm-icon-bg-color: #e9e9e9;
	--jdgm-icon-text-color: #333;
	--jdgm-muted-text-color: #6d6d6d; /* live's timestamps and histogram counts were #7b7b7b = 4.23:1, just under AA; #6d6d6d is 5.0:1 */
}

/* ------------------------------------------------------------------ stars */

.jdgm-star {
	display: inline-block;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: var(--jdgm-star-color);
	padding-right: 0.2em;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
}

.jdgm-star:last-of-type {
	padding-right: 0;
}

.jdgm-star::before {
	content: "\2605"; /* ★ */
}

.jdgm-star.jdgm--off {
	color: var(--jdgm-star-off-color);
}

.jdgm-star.jdgm--half {
	background: linear-gradient(90deg, var(--jdgm-star-color) 50%, var(--jdgm-star-off-color) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* the clip box must stop at the glyph, so the padding moves to a margin */
	padding-right: 0;
	margin-right: 0.2em;
}

.jdgm-star.jdgm--half:last-of-type {
	margin-right: 0;
}

/* ---------------------------------------------------------- preview badge */

.jdgm-widget {
	display: block;
}

.jdgm-preview-badge {
	font-size: inherit; /* live: 18px — the body size — under the PDP title and on cards alike (measured on both; live hides the count text on cards, this theme shows it) */
	line-height: 1.4;
}

.jdgm-prev-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* no reviews, no badge — the stores' Judge.me setting (see the header) */
.jdgm-prev-badge[data-average-rating='0.00'] {
	display: none;
}

.jdgm-prev-badge__stars .jdgm-star {
	font-size: 18px; /* live: 18px on cards and the PDP badge alike */
}

.jdgm-prev-badge__text {
	color: inherit;
	opacity: 0.8;
}

/* the PDP badge is one link to #reviews; cards are already a link */
.jdgm-preview-badge--with-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.jdgm-preview-badge--with-link a:hover .jdgm-prev-badge__text,
.jdgm-preview-badge--with-link a:focus-visible .jdgm-prev-badge__text {
	text-decoration: underline;
}

/* ----------------------------------------------------------------- widget */

.product-reviews-section {
	padding-top: var(--gutter, 30px);
	padding-bottom: var(--gutter, 30px);
	color: var(--color-primary, #111);
	font-family: var(--element-text-font-family--body, inherit);
	font-size: var(--element-text-font-size--body-md, 1rem);
	line-height: 1.5;
}

.jdgm-rev-widg {
	display: block;
	clear: both;
}

/* header: title on its own line, then summary | histogram | write button */
.jdgm-rev-widg__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	padding-bottom: 16px;
}

/* the section's own <h2>Reviews</h2> sits above the widget; the widget's
   "Customer Reviews" was invisible on every live store (see the header) and
   stays out of sight here, readable to assistive tech */
.jdgm-rev-widg__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jdgm-rev-widg__summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: center;
}

.jdgm-rev-widg__summary-stars .jdgm-star {
	font-size: 18px;
}

.jdgm-rev-widg__summary-text {
	font-size: 1em; /* live: 18px, the body size */
}

.jdgm-write-rev-link {
	order: 2; /* after the histogram on wide screens */
	display: inline-block;
	margin-left: auto;
	align-self: center;
	padding: 10px 18px;
	border: 1px solid var(--jdgm-write-review-bg-color);
	border-radius: calc(var(--jdgm-border-radius) * 2.5px);
	background: var(--jdgm-write-review-bg-color);
	color: var(--jdgm-write-review-text-color);
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}

.jdgm-write-rev-link:hover,
.jdgm-write-rev-link:focus-visible {
	color: var(--jdgm-write-review-text-color);
	filter: brightness(0.92);
}

/* histogram: five rows of stars | bar | percentage | count */
.jdgm-histogram {
	order: 1; /* between the summary and the button on wide screens */
	padding: 4px 16px;
	border-left: 1px solid var(--jdgm-divider-color);
	border-right: 1px solid var(--jdgm-divider-color);
	font-size: 0.8em; /* live: 14.4px */
	line-height: 14px;
}

.jdgm-histogram__row {
	display: flex;
	align-items: center;
	height: 14px;
	margin-bottom: 5px;
	white-space: nowrap;
}

/*
 * ⛔ :last-child, NOT :last-of-type. `:last-of-type` matches per ELEMENT TYPE, and
 * the rows are now a mix of <a> (ratings with reviews) and <div> (ratings without).
 * On 68/15/0/4/1 the only <div> is the THREE-star row, so it was also the last
 * <div> and lost its margin in the MIDDLE of the histogram; on a product with only
 * five-star reviews the lone <a> is the TOP row and loses it there.
 */
.jdgm-histogram__row:last-child {
	margin-bottom: 0;
}

/*
 * A histogram row is a link when the rating has reviews (site-review row 104).
 * `color: inherit` and no underline keep the ported look exactly as it was as
 * a <div>; what changes is that it is reachable, focusable and states which
 * row is on. A row with no reviews stays a <div> and gets none of this.
 */
a.jdgm-histogram__row {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	border-radius: 2px;
}

a.jdgm-histogram__row:hover .jdgm-histogram__bar-content,
a.jdgm-histogram__row:focus-visible .jdgm-histogram__bar-content {
	filter: brightness(0.92);
}

a.jdgm-histogram__row:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.jdgm-histogram__row--active {
	font-weight: 600;
}

.jdgm-histogram__filtered {
	/* order 1, with the histogram: `.jdgm-write-rev-link` is also order 2, so an
	   equal order falls back to DOM order and put this AFTER the button — which
	   carries margin-left:auto and shoved it to the far right. */
	order: 1;
	flex-basis: 100%;
	margin: 8px 0 0;
	font-size: 0.8em;
	line-height: 1.4;
}

.jdgm-histogram__clear {
	white-space: nowrap;
}

.jdgm-histogram__star .jdgm-star {
	font-size: 13px; /* live: 13px */
	padding-right: 0.15em;
}

.jdgm-histogram__bar {
	position: relative;
	width: 140px; /* live: 140px */
	height: 100%;
	margin: 0 4px 0 8px;
	background: var(--jdgm-secondary-color);
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.jdgm-histogram__bar-content {
	height: 100%;
	background: var(--jdgm-primary-color);
}

.jdgm-histogram__percentage {
	width: 36px; /* "100%" at 14.4px Poppins is 33.6px */
	text-align: right;
}

.jdgm-histogram__frequency {
	margin-left: 4px;
	color: var(--jdgm-muted-text-color); /* live's gray, not an opacity */
}

/* ------------------------------------------------------------- one review */

.jdgm-rev-widg__body {
	position: relative;
}

.jdgm-rev {
	position: relative;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--jdgm-divider-color);
}

.jdgm-rev__header {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		"icon rating time"
		"icon author badge";
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	justify-items: start;
	margin-bottom: 8px;
}

.jdgm-rev__icon {
	grid-area: icon;
	align-self: start;
	width: 3.2em;
	height: 3.2em;
	border-radius: 50%;
	background: var(--jdgm-icon-bg-color);
	color: var(--jdgm-icon-text-color);
	font-weight: 600;
	line-height: 3.2em;
	text-align: center;
	text-transform: uppercase;
}

/* first row: stars then the date; second row: the name then the badge. The
   empty <div class='jdgm-rev__br'> was Judge.me's line break; the grid does it */
.jdgm-rev__rating {
	grid-area: rating;
	display: inline-flex;
	align-items: center;
	line-height: 1.4;
}

.jdgm-rev__rating .jdgm-star {
	font-size: 18px; /* live: 18px */
}

.jdgm-rev__timestamp {
	grid-area: time;
	font-size: 0.8em; /* live: 14.4px, muted */
	color: var(--jdgm-muted-text-color);
}

.jdgm-rev__br {
	display: none;
}

.jdgm-rev__author-wrapper {
	grid-area: author;
	font-weight: 700;
	color: var(--jdgm-reviewer-name-color);
}

.jdgm-rev__buyer-badge-wrapper {
	grid-area: badge;
}

.jdgm-rev__buyer-badge-wrapper:empty {
	display: none;
}

.jdgm-rev__buyer-badge {
	display: inline-block;
	padding: 3px 7px;
	border-radius: calc(var(--jdgm-border-radius) * 0.5px);
	background: var(--jdgm-primary-color);
	color: #111; /* 076: white on the orange badge was 2.14:1 */
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.jdgm-rev__awaiting-approval {
	font-size: 0.875em;
	opacity: 0.7;
}

.jdgm-rev__content {
	padding-left: calc(3.2em + 12px);
}

.jdgm-rev__title {
	display: block;
	margin-bottom: 4px;
	font-size: 1em; /* live: 18px bold, the body size */
	font-weight: 700;
}

.jdgm-rev__body {
	overflow-wrap: anywhere;
}

.jdgm-rev__body > p {
	margin: 0 0 16px;
}

.jdgm-rev__body > p:last-of-type {
	margin-bottom: 0;
}

.jdgm-rev__pics {
	display: flex;
	gap: 5px;
	margin-top: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.jdgm-rev__pic-link {
	display: block;
	flex: 0 0 auto;
	height: 120px;
	margin: 0 0 3px;
	overflow: hidden;
	border-radius: 4px;
}

.jdgm-rev__pic-link:hover {
	opacity: 0.7;
}

.jdgm-rev__pic-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	border-radius: 4px;
	object-fit: cover;
}

.jdgm-rev__actions {
	padding-left: calc(3.2em + 12px);
	margin-top: 8px;
	font-size: 0.8125em;
	opacity: 0.7;
}

/* ------------------------------------------------------------- pagination */

.jdgm-paginate {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	width: 100%;
	padding-top: 16px;
	color: var(--jdgm-paginate-color);
}

.jdgm-paginate__page {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.5em;
	color: var(--jdgm-paginate-color);
	line-height: 1.2;
	/* The brand stays, as the underline, so the row still reads as this store's without the accent
	   carrying the words — a11y.css:42-50. --gv-accent is per store (Wulf #e51414, Exxus #76c043,
	   Sutra #22b3f5, Got Vape / GVWS #ff8b00).

	   ⚠️ The underline itself paints below 3:1 on three of the four stores — Exxus 2.24:1, Got Vape
	   2.35:1, Sutra 2.38:1; only Wulf clears it at 4.73:1. Inherited from the a11y.css precedent and
	   ruled for, so it stands, but it means the 1.4.1 affordance is faint for the same low-vision
	   reader 1.4.3 protects. If that is ever revisited, the fix is the underline's colour, not the
	   ink. */
	text-decoration: underline;
	text-decoration-color: var(--gv-accent, currentColor);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Underline is now the resting state, so hover/focus has to differ some other way. */
.jdgm-paginate__page:hover,
.jdgm-paginate__page:focus-visible {
	text-decoration-thickness: 4px;
}

.jdgm-paginate__page[aria-current="page"] {
	font-size: 1.5em;
	font-weight: 700;
	cursor: default;
	text-decoration: none; /* the page you are on is not somewhere to go */
}

.jdgm-paginate__dots {
	/* 076: was opacity .6 on the paginate colour, which painted 1.60:1 over white and stays under
	   AA at any brand orange — #7a4900 (7.55:1 nominal) still paints 2.95:1 through it. axe never
	   flags it (a lone '…' is too short for it to rule on), so the nightly would not have caught
	   this; it is fixed because a sighted low-vision reader still has to see it. Same move this
	   file already makes at :341 — live's gray, not an opacity.

	   ⛔ text-decoration is NOT redundant here. The dots carry .jdgm-paginate__page (inc/reviews.php
	   emits class='jdgm-paginate__page jdgm-paginate__dots'), so they inherit the link underline
	   above — and that underline is the LINK AFFORDANCE. An aria-hidden ellipsis wearing it is the
	   affordance lying. Removing this line puts the underline back on a non-link. */
	color: var(--jdgm-muted-text-color);
	text-decoration: none;
}

.jdgm-paginate__prev-page::before {
	content: "\2039"; /* ‹ */
}

.jdgm-paginate__next-page::before {
	content: "\203A"; /* › */
}

.jdgm-paginate__prev-page,
.jdgm-paginate__next-page {
	font-size: 130%;
	font-weight: 700;
}

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

/* closed until the "Write a review" link targets it; no script, plain HTML */
.jdgm-form-wrapper {
	display: none;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--jdgm-divider-color);
}

.jdgm-form-wrapper:target {
	display: block;
}

.jdgm-form__title {
	display: block;
	margin-bottom: 12px;
	font-size: 1.125em;
	font-weight: 700;
}

.jdgm-form {
	max-width: 640px;
}

/* the outcome of a post (Reviews\Guard's ?review= flag) and the Turnstile slot ahead of Submit */
.jdgm-form__notice {
	max-width: 640px;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid var(--jdgm-primary-color);
	background: rgba(0, 0, 0, 0.04);
	font-size: 0.9375em;
}

.jdgm-form__notice--error {
	border-left-color: var(--color-error, #b3261e);
}

.jdgm-form__turnstile {
	margin: 0 0 14px;
	min-height: 65px;
}

.jdgm-form p,
.jdgm-form .comment-form-rating {
	margin: 0 0 14px;
}

.jdgm-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.875em;
	font-weight: 600;
}

.jdgm-form .required {
	color: var(--jdgm-primary-color);
}

.jdgm-form input[type="text"],
.jdgm-form input[type="email"],
.jdgm-form textarea,
.jdgm-form select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--jdgm-divider-color);
	border-radius: calc(var(--jdgm-border-radius) * 2px);
	background: transparent;
	color: inherit;
	font: inherit;
}

.jdgm-form textarea {
	min-height: 140px;
	resize: vertical;
}

.jdgm-form input:focus-visible,
.jdgm-form textarea:focus-visible,
.jdgm-form select:focus-visible {
	outline: 2px solid var(--jdgm-primary-color);
	outline-offset: 1px;
}

.jdgm-form select#rating {
	width: auto;
	min-width: 12em;
}

/* Woo's single-product.js hides the <select> and inserts
   <p class="stars"><span><a class="star-1">1</a> … <a class="star-5">5</a></span></p>,
   toggling .selected on the <p> and .active on the chosen <a>. Woo's
   stylesheet no longer loads on the product page, so the picker is drawn here:
   outline stars, filled up to the hovered or chosen one. */
.jdgm-form p.stars {
	display: inline-block;
	margin: 0 0 4px;
	line-height: 1;
}

.jdgm-form p.stars span {
	display: inline-flex;
}

.jdgm-form p.stars a {
	display: inline-block;
	width: 1.15em;
	font-size: 24px;
	line-height: 1;
	color: var(--jdgm-star-color);
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
	position: relative;
}

.jdgm-form p.stars a::before {
	content: "\2606"; /* ☆ */
	position: absolute;
	left: 0;
	top: 0;
	text-indent: 0;
}

.jdgm-form p.stars:hover a::before,
.jdgm-form p.stars.selected a.active::before,
.jdgm-form p.stars.selected a:not(.active)::before {
	content: "\2605"; /* ★ */
}

.jdgm-form p.stars.selected a.active ~ a::before,
.jdgm-form p.stars:hover a:hover ~ a::before {
	content: "\2606";
}

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

.jdgm-form .jdgm-form__submit {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid var(--jdgm-write-review-bg-color);
	border-radius: calc(var(--jdgm-border-radius) * 2.5px);
	background: var(--jdgm-write-review-bg-color);
	color: var(--jdgm-write-review-text-color);
	font: inherit;
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.jdgm-form .jdgm-form__submit:hover,
.jdgm-form .jdgm-form__submit:focus-visible {
	filter: brightness(0.92);
}

.jdgm-form .must-log-in a {
	color: var(--jdgm-primary-color);
}

.jdgm-form__verification-required {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.8;
}

/* ---------------------------------------------------------------- narrow */

@media only screen and (max-width: 768px) {
	.jdgm-rev-widg__header {
		gap: 16px 0;
	}

	.jdgm-rev-widg__summary {
		flex: 1 0 100%;
	}

	.jdgm-histogram {
		flex: 1 0 100%;
		order: 1;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.jdgm-histogram__row {
		height: 18px;
		margin-bottom: 12px;
	}

	.jdgm-histogram__star .jdgm-star {
		font-size: 16px;
	}

	.jdgm-histogram__bar {
		flex: 1 1 auto;
		width: auto;
		max-width: 200px;
	}

	.jdgm-write-rev-link {
		flex: 1 0 100%;
		order: 2;
		display: block;
		margin: 0;
	}

	.jdgm-rev__content,
	.jdgm-rev__actions {
		padding-left: 0;
	}
}

/* the 082 (6) line under the submit button; .jdgm-form p's margin would otherwise win */
.jdgm-form .jdgm-form__privacy { margin: 10px 0 0; }