/* Trust Review block.
 *
 * A Trustpilot-shaped rating bar: five boxes, a white star cut out of each, the
 * filled part of the row painted in the brand green.
 *
 * Static by construction — no script at all. Every per-instance value rides on
 * the root element as an inline custom property, and the block is out of the
 * Liquid because a theme app extension caps its total Liquid at 100 KiB.
 *
 * The star shape lives HERE, as a mask-image data URI, rather than as SVG in
 * the Liquid: assets do not count against that cap, so the shape is free. A
 * custom star image overrides --pb-tr-m from the root's inline style, which
 * beats this rule on specificity.
 */
.pb-tr {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: var(--pb-tr-pt) 0 var(--pb-tr-pb);
  padding: var(--pb-tr-py) var(--pb-tr-px);
  border-radius: var(--pb-tr-rad);
  background: var(--pb-tr-fill);
  --pb-tr-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.00 1.60L14.81 8.13L21.89 8.79L16.55 13.48L18.11 20.41L12.00 16.78L5.89 20.41L7.45 13.48L2.11 8.79L9.19 8.13Z'/%3E%3C/svg%3E");
}
.pb-tr *,
.pb-tr *::before,
.pb-tr *::after { box-sizing: border-box; }

.pb-tr--al-left { justify-content: flex-start; }
.pb-tr--al-center { justify-content: center; }
.pb-tr--al-right { justify-content: flex-end; }

.pb-tr--b-solid { border: var(--pb-tr-bw) solid var(--pb-tr-bc); }
.pb-tr--b-dotted { border: var(--pb-tr-bw) dotted var(--pb-tr-bc); }
.pb-tr--shadow { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pb-tr--raised { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08); }

/* ── Stars ─────────────────────────────────────────────────────────────────
   One box per star. The box carries the fill: a hard-edged gradient stopping
   at --pb-tr-f, so 4.7 out of 5 leaves the fifth box 70% green and 30% grey.
   The star itself is a mask over that, which is what keeps it white across the
   seam instead of splitting with the background. */
.pb-tr__stars { display: flex; flex: 0 0 auto; }
/* A margin rather than the flex gap, because a gap cannot go below zero and
   the merchant needs to pull the boxes together — with no background behind
   them, the 18% the glyph leaves inside each box reads as too much air. */
.pb-tr__s + .pb-tr__s { margin-left: var(--pb-tr-gap); }
.pb-tr__s {
  --pb-tr-f: 100%;
  width: var(--pb-tr-sz);
  height: var(--pb-tr-sz);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, var(--pb-tr-on) var(--pb-tr-f), var(--pb-tr-off) var(--pb-tr-f));
}
.pb-tr__s i {
  width: 82%;
  height: 82%;
  background: var(--pb-tr-star);
  -webkit-mask: var(--pb-tr-m) center/contain no-repeat;
  mask: var(--pb-tr-m) center/contain no-repeat;
}

/* Fill: Star. The gradient moves from the box to the shape, and the box goes
   back to one flat colour — set it transparent and the row is bare stars, which
   is the only way a half star can read without a slab of grey behind it. */
.pb-tr--fill-star .pb-tr__s {
  background: var(--pb-tr-on);
}
.pb-tr--fill-star .pb-tr__s i {
  background: linear-gradient(90deg, var(--pb-tr-star) var(--pb-tr-f), var(--pb-tr-off) var(--pb-tr-f));
}

/* ── Avatars ───────────────────────────────────────────────────────────────
   Placed by flex order rather than by a second copy of the markup. */
.pb-tr__av { display: flex; flex: 0 0 auto; }
.pb-tr--av-last .pb-tr__av { order: 1; }
.pb-tr__av img {
  width: var(--pb-tr-asz);
  height: var(--pb-tr-asz);
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}
.pb-tr__av img + img { margin-left: calc(var(--pb-tr-asz) / -3); }

/* ── Text ──────────────────────────────────────────────────────────────────
   !important for the same reason the other blocks need it: a theme rule on
   paragraphs inside product content beats a single class. */
.pb-tr__t1 { font-size: var(--pb-tr-t1s); color: var(--pb-tr-t1); }
.pb-tr__t2 { font-size: var(--pb-tr-t2s); color: var(--pb-tr-t2); }
.pb-tr__t1, .pb-tr__t2 { min-width: 0; line-height: 1.4; }
.pb-tr p { margin: 0 !important; }
.pb-tr a { color: inherit; }