/* Social Trust 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.
 */
.pb-st {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0.875rem 0;
  padding: var(--pb-st-pad-y) var(--pb-st-pad-x);
  border-radius: var(--pb-st-radius);
  background: var(--pb-st-fill);
  color: var(--pb-st-text);
  font-family: var(--pb-st-font, inherit);
  font-size: var(--pb-st-text-size);
  line-height: var(--pb-st-leading, 1.4);
  letter-spacing: var(--pb-st-tracking, 0);
}
.pb-st *,
.pb-st *::before,
.pb-st *::after { box-sizing: border-box; }

.pb-st--border-solid { border: var(--pb-st-border-w) solid var(--pb-st-border); }
.pb-st--border-dotted { border: var(--pb-st-border-w) dotted var(--pb-st-border); }
.pb-st--border-none { border: 0; }

/* ── The faces ─────────────────────────────────────────────────────────── */

/* They overlap by a third, which is what makes a row of five read as a group
   rather than a list. The row keeps the height of one face so a cycling photo
   cannot make the pill jump. */
.pb-st__faces {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--pb-st-avatar);
}
.pb-st__face {
  flex: 0 0 auto;
  width: var(--pb-st-avatar);
  height: var(--pb-st-avatar);
  border-radius: 50%;
  overflow: hidden;
  background: #E7E7EA;
  box-shadow: 0 0 0 var(--pb-st-ring-w) var(--pb-st-ring);
  display: block;
}
.pb-st__face + .pb-st__face { margin-left: calc(var(--pb-st-avatar) / -3); }
.pb-st__face img,
.pb-st__face svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── The sentence ──────────────────────────────────────────────────────── */
.pb-st__text { min-width: 0; }
/* Richtext arrives wrapped in paragraphs; inside a pill they should not add
   margins of their own. */
.pb-st__text p { margin: 0; }
.pb-st__text p + p { margin-top: 4px; }
.pb-st__text a { color: inherit; }

/* The tick sits on the text baseline rather than the line box, so it reads as
   part of the sentence instead of floating above it. */
.pb-st__check {
  width: var(--pb-st-check-size);
  height: var(--pb-st-check-size);
  display: inline-block;
  vertical-align: -0.14em;
  margin: 0 0.1em;
  fill: var(--pb-st-check);
  flex: 0 0 auto;
}
.pb-st__check .pb-st__tick {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Cycling ───────────────────────────────────────────────────────────── */

/* Only while the script is driving it: without JavaScript every face stays put
   and visible, which is the honest fallback for a row of customer photos.
 *
 * Every face is placed absolutely at a slot the script computes, rather than
 * left to flow with a reordered flex row. Reordering was the bug: the overlap
 * is a negative margin between DOM siblings, so shuffling the visual order left
 * the margin on whichever face happened to be second in the markup and the row
 * came apart. A slot is a number of pixels; it cannot land anywhere else. */
.pb-st--cycle[data-pb-st-ready] .pb-st__faces { position: relative; }
.pb-st--cycle[data-pb-st-ready] .pb-st__face {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.pb-st--cycle[data-pb-st-ready] .pb-st__face[hidden] {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

/* Sliding, the whole row steps across together, so the offset is animated too. */
.pb-st--slide[data-pb-st-ready] .pb-st__face { transition: opacity .3s ease, transform .3s ease, left .3s ease; }
.pb-st--slide[data-pb-st-ready] .pb-st__face[hidden] { transform: scale(.8); }

/* A queue reads as depth when the ones behind are smaller and dimmer, so each
   place further back is a step down and an arriving face grows into the row. */
.pb-st--depth[data-pb-st-ready] .pb-st__face[hidden] { transform: scale(.5); }
.pb-st--depth[data-pb-st-ready] .pb-st__face[data-pb-st-depth="1"] { transform: scale(.93); opacity: .88; }
.pb-st--depth[data-pb-st-ready] .pb-st__face[data-pb-st-depth="2"] { transform: scale(.86); opacity: .74; }
.pb-st--depth[data-pb-st-ready] .pb-st__face[data-pb-st-depth="3"] { transform: scale(.79); opacity: .6; }

@media (max-width: 480px) {
  .pb-st { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-st--cycle[data-pb-st-ready] .pb-st__face { transition: none; }
}