/* Review Carousel block.
 *
 * Static by construction: every per-instance value rides on the root element as
 * an inline custom property. Out of the Liquid because a theme app extension
 * caps its total Liquid at 100 KiB.
 *
 * The carousel is a scroll container with snap points, not a transform-driven
 * slider. That way a shopper can swipe it on a phone, drag it with a trackpad,
 * tab into it and use the arrow keys, and it still works with the script
 * blocked — the script only adds the buttons' behaviour and the dots.
 */
.pb-rv {
  box-sizing: border-box;
  position: relative;
  display: block;
  margin: 0.875rem 0;
}
.pb-rv *,
.pb-rv *::before,
.pb-rv *::after { box-sizing: border-box; }

/* The list resets are !important for the reason the other blocks' are: a theme
   rule on lists inside product content beats one class and pads the left only,
   which shifts the whole row and reads as off-centre. */
.pb-rv__track {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: var(--pb-rv-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Firefox and the rest; the WebKit bar is hidden below. */
  scrollbar-width: none;
}
.pb-rv__track::-webkit-scrollbar { display: none; }
.pb-rv__track:focus-visible { outline: 2px solid var(--pb-rv-star); outline-offset: 3px; }

.pb-rv__slide {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.pb-rv__card {
  height: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: var(--pb-rv-pad-y) var(--pb-rv-pad-x);
  border-radius: var(--pb-rv-radius);
  background: var(--pb-rv-card);
}
/* Centred means centred on the card's own height, which is what lines a short
   review up with its photo instead of hanging it from the top. */
.pb-rv--align-center .pb-rv__card { align-items: center; }
.pb-rv--align-right .pb-rv__card { align-items: flex-end; }
.pb-rv--framed.pb-rv--solid .pb-rv__card { border: var(--pb-rv-border-w) solid var(--pb-rv-border); }
.pb-rv--framed.pb-rv--dotted .pb-rv__card { border: var(--pb-rv-border-w) dotted var(--pb-rv-border); }
.pb-rv--raised .pb-rv__card { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06); }

.pb-rv__photo {
  flex: 0 0 auto;
  width: var(--pb-rv-photo);
  height: var(--pb-rv-photo);
  border-radius: var(--pb-rv-photo-radius);
  object-fit: cover;
  display: block;
}

.pb-rv__body { min-width: 0; flex: 1 1 auto; }

.pb-rv__head {
  margin: 0 0 4px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pb-rv__name {
  font-size: var(--pb-rv-name-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pb-rv-name);
}

.pb-rv__badge {
  width: calc(var(--pb-rv-name-size) * 1.15);
  height: calc(var(--pb-rv-name-size) * 1.15);
  flex: 0 0 auto;
  display: block;
  fill: var(--pb-rv-badge);
  margin-left: -2px;
}
.pb-rv__badge .pb-rv__tick {
  fill: none;
  stroke: var(--pb-rv-card);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Five glyphs with a hard-edged gradient across them, so a rating of seven out
   of ten paints three and a half stars without a second set of shapes. */
.pb-rv__stars {
  flex: 0 0 auto;
  font-size: var(--pb-rv-star-size);
  line-height: 1;
  letter-spacing: 0.08em;
  background-image: linear-gradient(
    to right,
    var(--pb-rv-star) 0 var(--pb-rv-fill),
    var(--pb-rv-star-off) var(--pb-rv-fill) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pb-rv__text {
  font-size: var(--pb-rv-text-size);
  line-height: 1.5;
  color: var(--pb-rv-text);
}
.pb-rv__text p { margin: 0 !important; }
.pb-rv__text p + p { margin-top: 6px !important; }
.pb-rv__text a { color: inherit; }

/* ── Arrows and dots ───────────────────────────────────────────────────── */
.pb-rv__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--pb-rv-arrow-bg);
  color: var(--pb-rv-arrow);
  cursor: pointer;
}
.pb-rv--arrow-framed .pb-rv__nav { border: 1px solid var(--pb-rv-border); }
.pb-rv__nav svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Outside the card, which is where the reference puts them and what keeps them
   off the words. */
.pb-rv__nav--prev { left: -17px; }
.pb-rv__nav--next { right: -17px; }
.pb-rv__nav[disabled] { opacity: .35; cursor: default; }
/* Only the chosen control shows, and neither shows until the script can drive
   it — an arrow that does nothing is worse than no arrow. */
.pb-rv__nav,
.pb-rv__dots { display: none; }
.pb-rv--arrows[data-pb-rv-ready] .pb-rv__nav { display: flex; }
.pb-rv--dots[data-pb-rv-ready] .pb-rv__dots { display: flex; }

.pb-rv__dots {
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.pb-rv__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pb-rv-star-off);
  cursor: pointer;
}
.pb-rv__dot[aria-current="true"] { background: var(--pb-rv-star); }

@media (max-width: 640px) {
  .pb-rv__name { font-size: var(--pb-rv-name-size-m); }
  .pb-rv__text { font-size: var(--pb-rv-text-size-m); }
  .pb-rv__stars { font-size: var(--pb-rv-star-size-m); }
  /* Inside the card on a phone: there is no room beside it. */
  .pb-rv__nav--prev { left: 2px; }
  .pb-rv__nav--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-rv__track { scroll-behavior: auto; }
}