/* ============================================================
   Product reviews — pagination spacing, clickable photo reviews,
   and the per-review image slideshow modal. Tokens only.
   (Base review card styles live in main-product.css.)
   ============================================================ */
.lh-pdp-reviews__pagination { margin-top: var(--space-6); }

/* Clickable reviews that have photos */
.lh-pdp-review--has-media { cursor: pointer; }
.lh-pdp-review__media[role="button"] { cursor: pointer; border-radius: var(--radius-sm); }
.lh-pdp-review__media[role="button"]:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-md); }

.lh-pdp-review__media-cell { position: relative; display: inline-flex; }
.lh-pdp-review__media-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(var(--lh-stone-900-rgb), 0.55);
  color: var(--lh-white);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
}

/* ---- Photo gallery strip (product-page-3) ---- */
.lh-pdp-reviews__gallery {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lh-pdp-reviews__gallery::-webkit-scrollbar { display: none; }
.lh-pdp-reviews__gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--lh-img-loader-sm, none), var(--surface-image);
  cursor: pointer;
}
.lh-pdp-reviews__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base) var(--ease-standard); }
.lh-pdp-reviews__gallery-item:hover img { transform: scale(1.05); }
.lh-pdp-reviews__gallery-item:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (min-width: 768px) {
  .lh-pdp-reviews__gallery-item { width: 132px; height: 132px; }
}

/* ---- Review slideshow modal (product-page-2) ---- */
.lh-review-modal { position: fixed; inset: 0; z-index: 1000; }
.lh-review-modal[hidden] { display: none; }
.lh-review-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--lh-stone-900-rgb), 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lh-review-modal.is-open .lh-review-modal__overlay { opacity: 1; }

.lh-review-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(94vw, 900px);
  max-height: 90vh;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-emphasis);
}
.lh-review-modal.is-open .lh-review-modal__dialog { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.lh-review-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.92);
  color: var(--text-heading);
  cursor: pointer;
}
/* The media arrows live INSIDE the stage, so 50% is the middle of the picture
   itself — no measured offset, and correct in both the single-column phone
   layout and the two-column desktop one. Held at dialog level they needed a
   JS-measured --rm-nav-top to avoid a portrait video's own play/pause strip,
   and on desktop the "next" arrow still landed over the review text. */
.lh-review-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.92);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-review-modal__nav:hover { color: var(--color-primary); }
.lh-review-modal__nav--prev { left: var(--space-3); }
.lh-review-modal__nav--next { right: var(--space-3); }
.lh-review-modal__nav[hidden] { display: none; }

.lh-review-modal__body { display: grid; grid-template-columns: 1fr; max-height: 90vh; }

/* Media column */
.lh-review-modal__media {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
}
/* min-height keeps the stage open so the loading skeleton is visible on first
   open (before the image has any intrinsic height). */
.lh-review-modal__stage { position: relative; display: grid; place-items: center; width: 100%; flex: 1; min-height: clamp(220px, 42vh, 480px); }
.lh-review-modal__img { width: 100%; max-height: 46vh; object-fit: contain; display: block; transition: opacity var(--duration-base) var(--ease-standard); }

/* Loader/skeleton shown over the photo until it has loaded (first open). */
.lh-review-modal__skeleton {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--surface-image) 30%, rgba(var(--lh-white-rgb), 0.55) 50%, var(--surface-image) 70%);
  background-size: 200% 100%;
  animation: lh-review-skeleton 1.2s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}
/* The brand mark rides on its own layer: the sweep above animates
   background-position/size, which would drag and stretch a shared layer. */
.lh-review-modal__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lh-img-loader, none);
}
.lh-review-modal__stage.is-loading .lh-review-modal__skeleton { opacity: 1; }
.lh-review-modal__stage.is-loading .lh-review-modal__img { opacity: 0; }
@keyframes lh-review-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-review-modal__skeleton { animation: none; }
}
.lh-review-modal__dots { display: flex; gap: 6px; justify-content: center; padding: var(--space-3); }
.lh-review-modal__dot {
  width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-stone-900-rgb), 0.25);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-review-modal__dot.is-active { width: 20px; border-radius: var(--radius-pill); background: var(--color-primary); }

/* Content column */
.lh-review-modal__content { padding: var(--space-6); overflow-y: auto; }
.lh-review-modal__rhead { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.lh-review-modal__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.lh-review-modal__rwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-review-modal__rwho .lh-pdp-review__author { font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-review-modal__rwho .lh-pdp-review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-caption); color: var(--color-instock); }
.lh-review-modal__rrating { margin-top: 2px; }
.lh-review-modal__rmeta { margin-left: auto; font-size: var(--font-caption); color: var(--text-muted); white-space: nowrap; }
.lh-review-modal__rtitle { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-review-modal__rbody { font-size: var(--font-body-md); color: var(--text-body); line-height: var(--leading-body); }
.lh-review-modal__thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.lh-review-modal__thumb {
  width: 56px; height: 56px; padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--lh-img-loader-sm, none), var(--surface-image);
  cursor: pointer;
}
.lh-review-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-review-modal__thumb.is-active { border-color: var(--color-primary); }

/* A review sent as clips rather than stills: the stage carries a real player,
   and its thumb wears a play badge so the rail reads at a glance. */
.lh-review-modal__video {
  width: 100%;
  max-height: 46vh;
  display: block;
  border-radius: var(--radius-md);
  background: var(--lh-black);
}
/* ---- Circular playback progress — TOP-LEFT of the stage ----
   Same ring the product gallery paints at top-right (lh-video.css). It sits on
   the opposite corner here because the modal stage is a portrait clip letterboxed
   on a dark ground: top-right is where the eye already goes for the close button,
   and the bottom band belongs to the browser's own control bar. pointer-events
   stays off so nothing of ours can swallow a tap meant for the video. */
.lh-review-modal__progress {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-stone-900-rgb), 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
/* Revealed only once a real duration has been read, so it never shows an empty
   ring over a clip that is still resolving. */
.lh-review-modal__progress.is-live { opacity: 1; }
.lh-review-modal__ring { display: block; transform: rotate(-90deg); } /* fill starts at 12 o'clock */
.lh-review-modal__ring-track { stroke: rgba(var(--lh-white-rgb), 0.35); stroke-width: 3; }
.lh-review-modal__ring-fill {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;  /* pathLength=100 → dashoffset is the unplayed remainder */
  stroke-dashoffset: 100;
}
@media (prefers-reduced-motion: reduce) {
  .lh-review-modal__progress { transition: none; }
}

/* ---- Review pager — the OTHER navigation axis ----
   Arrows on the picture move that review's media; this moves between reviews.
   It carries a label because two identical arrow pairs on one dialog are
   indistinguishable, which is the confusion this split exists to end. */
.lh-review-modal__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.lh-review-modal__pager-label {
  font-size: var(--font-caption);
  color: var(--text-muted);
  white-space: nowrap;
}
.lh-review-modal__pager-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-review-modal__pager-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.lh-review-modal__thumb--video { position: relative; }
.lh-review-modal__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lh-white);
  background: rgba(var(--lh-black-rgb), 0.32);
  pointer-events: none;
}

@media (min-width: 768px) {
  .lh-review-modal__body { grid-template-columns: 1.05fr 1fr; }
  .lh-review-modal__media { max-height: 90vh; }
  /* The media shares its 90vh column with the dot strip, so it may only claim
     what the dots leave. At a flat 90vh the video overran the column and the
     dots were painted across its bottom edge — over the browser's own
     play/pause control, which a viewer then could not hit. A percentage cap is
     no good here: the column's height is a max rather than a definite length,
     so `max-height: 100%` resolves to none and the video grows unbounded.
     --rm-dots-h is measured from the live strip by product-reviews.js. */
  .lh-review-modal__img,
  .lh-review-modal__video { max-height: calc(90vh - var(--rm-dots-h, 44px)); }
  .lh-review-modal__content { max-height: 90vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-review-modal__overlay,
  .lh-review-modal__dialog { transition: none; }
  .lh-review-modal__dialog { transform: translate(-50%, -50%); }
}

/* Review card (owner, 2026-10-28): the reviewer + stars line as before; under it the photo (date
   under it) on the left and the title + text on the right. */
.lh-pdp-review__content { display: grid; gap: var(--space-2); }
.lh-pdp-review__content--photo { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.lh-pdp-review__aside { display: grid; justify-items: center; gap: var(--space-2); }
.lh-pdp-review__photo { position: relative; display: block; width: 88px; height: 88px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.lh-pdp-review__photo .lh-pdp-review__media-img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; transition: transform var(--duration-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lh-pdp-review--has-media:hover .lh-pdp-review__photo .lh-pdp-review__media-img { transform: scale(1.04); } }
.lh-pdp-review__photo .lh-pdp-review__media-more { inset: auto 4px 4px auto; width: auto; height: auto; padding: 2px 6px; border-radius: var(--radius-pill); font-size: var(--font-caption); }
.lh-pdp-review__date { font-size: var(--font-caption); color: var(--text-muted); text-align: center; white-space: nowrap; }
.lh-pdp-review__main { display: grid; gap: var(--space-2); min-width: 0; }
.lh-pdp-review__main .lh-pdp-review__title, .lh-pdp-review__main .lh-pdp-review__body { margin: 0; }
@media (min-width: 750px) {
  .lh-pdp-review__content--photo { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-5); }
  .lh-pdp-review__photo { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) { .lh-pdp-review__photo .lh-pdp-review__media-img { transition: none; } }

/* Room between the reviews' pagination and the next section's border (it sat right on it, phones). */
.lh-pdp-reviews { padding-bottom: var(--space-10); }
/* The review photo's top meets the cap line of the first text line (title, or the body when there is
   no title): no inherited `.lh-pdp-review__media` margin above the photo, and the first line's
   leading trimmed off where the browser can (text-box), a nudge where it cannot. */
.lh-pdp-review__content--photo .lh-pdp-review__photo { margin-top: 0; }
.lh-pdp-review__content--photo .lh-pdp-review__title { line-height: 1.3; }
.lh-pdp-review__content--photo .lh-pdp-review__main > :first-child { text-box: trim-start cap alphabetic; }
@supports not (text-box: trim-start cap alphabetic) {
  .lh-pdp-review__content--photo .lh-pdp-review__main > :first-child { margin-top: -4px; }
}

/* ============================================================
   LH-Reviews (owner, 2026-10-31): snippets/lh-reviews-body (overview, tools, results + pager),
   lh-review-card (product) and lh-service-review-card (service). Tokens only.
   ============================================================ */
/* Overview: the score on the left, the 5..1 bars on the right (stacked on phones). */
.lh-reviews-overview {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center;
  max-width: 980px; margin: 0 auto var(--space-6); padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
@media (min-width: 750px) {
  .lh-reviews-overview { gap: var(--space-10); padding: var(--space-6) var(--space-8); }
  .lh-reviews-overview__avg { font-size: var(--font-h1); }
}
@media (max-width: 749px) {
  .lh-reviews-overview__count { font-size: var(--font-caption); max-width: 7em; }
  .lh-reviews-dist__row { gap: var(--space-2); padding-inline: var(--space-1); grid-template-columns: 2.2em minmax(0, 1fr) 1.8em; }
}
.lh-reviews-overview__score { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.lh-reviews-overview__avg { font-family: var(--font-display); font-size: var(--font-h2); line-height: 1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.lh-reviews-overview__count { font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-reviews-dist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lh-reviews-dist__row {
  display: grid; grid-template-columns: 2.5em minmax(0, 1fr) 2.5em; align-items: center; gap: var(--space-3);
  padding: 5px var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--font-body-sm); color: var(--text-body); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
a.lh-reviews-dist__row:focus-visible { outline: none; box-shadow: var(--ring-focus); }
@media (hover: hover) and (pointer: fine) {
  a.lh-reviews-dist__row:hover { background: var(--surface-sunken); color: var(--text-heading); }
}
.lh-reviews-dist__row.is-active { background: var(--color-primary-tint); color: var(--color-primary); font-weight: var(--weight-semibold); }
.lh-reviews-dist__row.is-empty { color: var(--text-subtle); }
.lh-reviews-dist__label { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.lh-reviews-dist__label .lh-icon { color: var(--color-rating); }
.lh-reviews-dist__track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.lh-reviews-dist__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--lh-dist, 0%); border-radius: inherit; background: var(--color-rating);
}
.lh-reviews-dist__row.is-active .lh-reviews-dist__fill { background: var(--color-primary); }
.lh-reviews-dist__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* Tools: filter chips on the left, the sort menu on the right. */
.lh-reviews-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  max-width: 980px; margin: 0 auto var(--space-4);
}
.lh-reviews-tools__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lh-reviews-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-card);
  font-size: var(--font-body-sm); font-weight: var(--weight-medium); color: var(--text-body); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.lh-reviews-chip .lh-icon { flex: none; }
.lh-reviews-chip__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .lh-reviews-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } }
.lh-reviews-chip.is-active { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); }
.lh-reviews-chip.is-active .lh-reviews-chip__n { color: inherit; }
.lh-reviews-chip.is-removable .lh-icon:first-of-type { color: var(--color-rating); }
.lh-reviews-tools__sort { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.lh-reviews-tools__sort-label { font-size: var(--font-body-sm); color: var(--text-muted); white-space: nowrap; }
.lh-reviews-tools__select { position: relative; display: inline-flex; align-items: center; }
.lh-reviews-tools__select select {
  appearance: none; -webkit-appearance: none; min-height: 36px; padding: 0 calc(var(--space-3) + 18px) 0 var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-card);
  font: inherit; font-size: var(--font-body-sm); font-weight: var(--weight-medium); color: var(--text-heading); cursor: pointer;
}
.lh-reviews-tools__select select:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-focus); }
.lh-reviews-tools__select .lh-icon { position: absolute; right: var(--space-3); pointer-events: none; color: var(--text-muted); }
@media (max-width: 749px) {
  .lh-reviews-tools { flex-direction: column; align-items: stretch; }
  .lh-reviews-tools__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px calc(-1 * var(--space-4)); padding: 2px var(--space-4); }
  .lh-reviews-tools__chips::-webkit-scrollbar { display: none; }
  .lh-reviews-chip { flex: none; }
  .lh-reviews-tools__sort { justify-content: flex-end; }
  .lh-reviews-tools__select select { font-size: 16px; } /* no iOS focus zoom */
}
.lh-reviews-tools__go { margin-left: var(--space-2); }

/* Results: status line, the swap's loading dim, the empty filter result, the pager. */
.lh-reviews-results__status { max-width: 980px; margin: 0 auto var(--space-3); font-size: var(--font-caption); color: var(--text-muted); }
.lh-reviews-results__status:focus { outline: none; }
.lh-service-reviews--lh .lh-reviews-results__status, .lh-service-reviews--lh .lh-reviews-tools, .lh-service-reviews--lh .lh-reviews-overview { max-width: none; }
.lh-reviews-results .lh-pdp-reviews__list, .lh-reviews-results .lh-service-reviews__grid { transition: opacity var(--duration-fast) var(--ease-out); }
.lh-reviews-results.is-loading .lh-pdp-reviews__list, .lh-reviews-results.is-loading .lh-service-reviews__grid, .lh-reviews-results.is-loading .lh-reviews-pager { opacity: 0.45; pointer-events: none; }
.lh-reviews-results__empty { display: grid; justify-items: center; padding: var(--space-8) 0; }
.lh-reviews-pager { margin-top: var(--space-6); }

/* Card extras: the option bought, the shop's reply, the Helpful vote, a clip's play badge. */
.lh-pdp-review__variant { margin: 0; font-size: var(--font-caption); color: var(--text-muted); }
.lh-pdp-review__reply {
  margin-top: var(--space-1); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); border-left: 2px solid var(--color-primary); border-radius: var(--radius-sm);
}
.lh-pdp-review__reply-label { margin: 0 0 2px; font-size: var(--font-caption); font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-pdp-review__reply-text { margin: 0; font-size: var(--font-body-sm); color: var(--text-body); }
.lh-service-reviews__reply { margin: var(--space-1) 0 0; }
.lh-pdp-review__foot, .lh-service-reviews__foot { display: flex; justify-content: flex-start; }
.lh-service-reviews__foot { margin-top: auto; padding-top: var(--space-2); } /* the card's own padding is the inset */
.lh-review-helpful {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent;
  font: inherit; font-size: var(--font-caption); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .lh-review-helpful:not(.is-voted):hover { border-color: var(--color-primary); color: var(--color-primary); } }
.lh-review-helpful:active:not(:disabled) { transform: scale(0.97); }
.lh-review-helpful.is-voted { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); cursor: default; }
.lh-review-helpful__count { font-variant-numeric: tabular-nums; }
.lh-pdp-review__play {
  position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--radius-circle); background: rgba(var(--lh-stone-900-rgb), 0.55); color: var(--lh-white); pointer-events: none;
}
.lh-pdp-review__play-icon path { fill: currentColor; }
.lh-pdp-reviews__gallery-item.is-video { position: relative; }
.lh-pdp-reviews__gallery-item.is-video::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--lh-white);
  filter: drop-shadow(0 1px 2px rgba(var(--lh-stone-900-rgb), 0.5));
}
.lh-pdp-reviews__gallery-set[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lh-reviews-dist__row, .lh-reviews-chip, .lh-review-helpful, .lh-reviews-results .lh-pdp-reviews__list, .lh-reviews-results .lh-service-reviews__grid { transition: none; }
}