/* ═══════════════════════════════════════════════════════════════════
   Google reviews rail

   Real reviews read from the shop's own TrustIndex widget. §9.4 —
   more than a couple means a contained horizontal scroller.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google reviews ─────────────────────────────────────────────── */
.reviews{background:var(--surface-2);color:var(--ink-2)}
.reviews h2{color:var(--ink)}
.rev-head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  margin-bottom:var(--sp-5)}
.rev-score{display:flex;align-items:center;gap:var(--sp-3)}
.rev-score .big{font-size:2.75rem;font-weight:900;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.stars{display:flex;gap:2px;color:var(--brand)}
.stars .ico{width:20px;height:20px;fill:currentColor;stroke:none}
.rev-meta{font-size:.9375rem;color:var(--ink-3)}
.rev-google{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:.875rem;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-full);
  padding:var(--sp-2) var(--sp-4);background:var(--surface);min-height:var(--tap)}
.rev-google .g{width:22px;height:22px;flex:0 0 auto}
/* §9.4 — many reviews means a scrollable rail, not a truncated list.

   align-items:stretch, and the tiles are one size on purpose.

   THIS REVERSES AN EARLIER CALL, so here is why. The rail used to be
   align-items:flex-start, because reviews run from six words to fifty
   and stretching them all to the tallest left a card with one short
   quote carrying a third of its height as empty ground. That was the
   right fix for cards whose text was unbounded. The text is bounded
   now: every quote is clamped to three lines and every quote box
   RESERVES three lines, so the cards are identical by construction and
   there is no tallest to stretch to. Stretch stays only as a
   belt-and-braces — a sub-pixel difference in the name row equalises
   instead of showing. Measured before: seven different card heights
   between 141px and 281px in one rail. */
.rev-rail{display:flex;align-items:stretch;gap:var(--sp-3);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:var(--sp-2);scroll-snap-type:x mandatory}
.rev-rail::-webkit-scrollbar{display:none}

/* THE WHOLE TILE IS A LINK now, so it needs the states a link needs.
   Nothing about it is smaller than it was except the padding and the
   avatar: the quote went UP to 16px, which is the §9.2 body floor it
   had been sitting under at 15px. Compact is a layout decision here,
   never a type-size one. */
.rev-card{flex:0 0 78%;min-width:0;scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-2);
  color:inherit;transition:border-color .15s ease,background-color .15s ease}
.rev-card:hover{border-color:var(--brand);background:var(--surface-2)}
.rev-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.rev-card .who{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.rev-card .idn{min-width:0}
.rev-card .avatar{width:34px;height:34px;border-radius:var(--r-full);flex:0 0 auto;
  background:var(--brand);color:var(--logo-ink);font-weight:800;font-size:.9375rem;
  display:flex;align-items:center;justify-content:center}
/* One line, cut with an ellipsis. A wrapped name was the other thing
   making the tiles different heights. */
.rev-card .nm{font-size:.9375rem;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Stars and date share the meta line — the stars used to cost a whole
   row of their own. 15px is a rating graphic, not an icon beside a
   label, so §9.3's 22px floor for a pair does not apply; .stars carries
   role="img" and its own aria-label. */
.rev-card .dt{display:flex;align-items:center;gap:var(--sp-2);
  font-size:.75rem;color:var(--ink-3);min-width:0}
.rev-card .dt .stars{flex:0 0 auto}
.rev-card .dt .stars .ico{width:15px;height:15px}
.rev-card .dt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* THREE LINES, ALWAYS — clamped with an ellipsis when there is more, and
   the box reserved when there is less. 4.5em at 1rem/1.5 is exactly
   three lines, which is what makes every tile the same height without a
   magic pixel number that a font change would break.

   line-clamp needs display:-webkit-box, and an engine too old for it
   drops that declaration and falls back to display:block — where the
   height and overflow:hidden still cut the quote at three lines, just
   without the ellipsis. Content is hidden either way, never revealed,
   so §10.7 is satisfied: the modern property decorates the cut, it does
   not perform it. And the full review is one tap away regardless. */
.rev-card p{font-size:1rem;line-height:1.5;color:var(--ink-2);
  height:4.5em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3}

@media (min-width:480px){ .rev-card{flex:0 0 56%} }
@media (min-width:640px){ .rev-card{flex:0 0 40%} }
@media (min-width:768px){ .rev-card{flex:0 0 30%} }
@media (min-width:900px){ .rev-card{flex:0 0 23%} }
@media (min-width:1100px){ .rev-card{flex:0 0 19%} }