/* The Reviews panel of a product page (theme 0.36.0, Rayan 10 Oct 2026: direction C with B's photo strip). Loaded only
   on a product that has approved reviews (inc/reviews.php). The voxels themselves (.rv-vox) live in foundations.css,
   since the cards use them too. */

.rv-meta { margin: 0; color: var(--ecc-ink-2); font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); letter-spacing: var(--ecc-ls-label); text-transform: uppercase; }
.rv-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--ecc-ink); }
.rv-badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.rv-badge--store::before { background: var(--ecc-ink-2); }

.rv-c { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }

/* the summary: a dark panel in both themes */
.rv-c__sum { position: sticky; top: 96px; display: grid; gap: 16px; padding: 22px; border: 1px solid var(--ecc-panel-border); border-radius: var(--ecc-r); background: var(--ecc-panel); color: var(--ecc-on-panel); }
.rv-c__sum .rv-meta { color: var(--ecc-on-panel-2); }
.rv-c__score { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rv-c__num { font-family: var(--ecc-f-dot); font-variation-settings: var(--ecc-dot-settings); font-weight: var(--ecc-fw-dot); font-size: 4rem; line-height: 1; letter-spacing: .04em; color: var(--ecc-lime); }
.rv-c__sum .rv-vox i:not(.on):not(.half) { background: color-mix(in srgb, var(--ecc-on-panel) 18%, transparent); }
.rv-c__sum .rv-vox i.half { background: linear-gradient(90deg, var(--ecc-lime) 50%, color-mix(in srgb, var(--ecc-on-panel) 18%, transparent) 50%); }
.rv-c__led { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rv-c__led li { display: grid; grid-template-columns: 2em minmax(0, 1fr) 2em; gap: 10px; align-items: center; color: var(--ecc-on-panel-2); font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); }
.rv-c__led li > span:nth-child(3) { text-align: right; }
.rv-c__cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.rv-c__cells i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--ecc-on-panel) 14%, transparent); }
.rv-c__cells i.on { background: var(--ecc-lime); }
.rv-c__sum .ecc-btn { justify-self: start; }

/* the list */
.rv-c__list, .rv-c__entries { display: grid; gap: 12px; min-width: 0; }
.rv-c__entry { position: relative; padding: 18px 20px 18px 24px; border: 1px solid var(--ecc-line); border-radius: var(--ecc-r); background: var(--ecc-surface); }
.rv-c__entry::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ecc-line-strong); }
.rv-c__entry[data-verified]::before { background: var(--ecc-lime); }
.rv-c__entry h4 { margin: 10px 0 4px; font-size: var(--ecc-t-body-lg); }
.rv-c__entry > p { margin: 6px 0 10px; max-width: 64ch; }
.rv-c__entry > .rv-meta { margin: 4px 0 0; }
.rv-c__entry.is-later { display: none; }

.rv-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-photos a { display: block; border-radius: var(--ecc-r-sm); }
.rv-photos img { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--ecc-line); border-radius: var(--ecc-r-sm); background: var(--ecc-surface-2); }
.rv-reply { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--ecc-spark); border-radius: 0 var(--ecc-r-sm) var(--ecc-r-sm) 0; background: var(--ecc-wash); }
.rv-reply b { display: block; margin-bottom: 2px; font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); font-weight: 500; letter-spacing: var(--ecc-ls-label); text-transform: uppercase; }

.rv-sort { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-more { margin: 4px 0 0; }

/* B's strip: the customers' photos, 4:5, in a row that snaps */
.rv-c__shots { display: grid; gap: 10px; min-width: 0; }
.rv-c__shots h4 { margin: 0; }
.rv-b__strip { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 12px; margin: 0; padding: 0 0 6px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.rv-b__shot { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ecc-r); background: var(--ecc-surface-2); scroll-snap-align: start; }
.rv-b__shot a, .rv-b__shot img { display: block; width: 100%; height: 100%; }
.rv-b__shot img { object-fit: cover; }
.rv-b__shot figcaption { position: absolute; inset: auto 8px 8px 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--ecc-r-sm); background: color-mix(in srgb, var(--ecc-canvas) 88%, transparent); font-size: var(--ecc-t-small); pointer-events: none; }

@media (max-width: 860px) {
	.rv-c { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.rv-c__sum { position: static; }
	.rv-b__strip { grid-auto-columns: 70%; }
}

/* "What riders say": the AI summary above the reviews (ecc-core's AI summaries, 21 Oct 2026). Labelled as AI, drawn
   only from the product's own reviews (template-parts/product-review-summary.php). */
.rv-ai { position: relative; display: grid; gap: 12px; min-width: 0; margin: 0 0 20px; padding: 18px 20px 18px 24px; border: 1px solid var(--ecc-line); border-radius: var(--ecc-r); background: var(--ecc-surface); }
.rv-ai::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ecc-lime); }
.rv-ai__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.rv-ai__h { margin: 0; font-size: var(--ecc-t-body-lg); }
.rv-ai__label { display: inline-flex; align-items: center; gap: 8px; }
.rv-ai__tag { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: var(--ecc-r-voxel); background: var(--ecc-ink); color: var(--ecc-lime); font-size: 10px; letter-spacing: .06em; }
.rv-ai__text { margin: 0; max-width: 68ch; }
.rv-ai__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.rv-ai__cols h4 { margin: 0 0 6px; }
.rv-ai__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rv-ai__list li { position: relative; padding-left: 18px; overflow-wrap: anywhere; }
.rv-ai__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.rv-ai__list--cons li::before { background: var(--ecc-ink-2); }
@media (max-width: 860px) {
	.rv-ai { padding: 16px 16px 16px 20px; }
	.rv-ai__cols { grid-template-columns: minmax(0, 1fr); }
}