/* The `[trustpilot]` / `[ekomi]` / `[facebook]` shortcode badge
   (src/views/site/shortcodes/ReviewBadge.tsx). */
.review-badge { display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius: var(--r-2xl);padding:16px 32px;box-shadow:0 20px 50px rgba(0,0,0,.15);text-decoration:none;color: var(--ink-800); }
.review-badge__top { display:flex;align-items:center;gap:14px; }
.review-badge__logo { height:32px;width:auto; }
.review-badge__score { font-size: var(--text-xl);font-weight:600; }
.review-badge__count { display:flex;align-items:center;gap:10px;font-size: var(--text-base);color: var(--ink-700); }
.review-badge__stars { height:17.6px;width:auto; }
/* Trustpilot: the score sits on the wordmark's baseline. Flex baseline
   alignment can't do it (an image's flex baseline is its border-box bottom, so a
   margin doesn't move it), so this row is a plain line of text: the image drops
   by the wordmark's descent (the PNG is 512×126, baseline at 108: 18/126 of the
   32 px height), which puts that baseline on the line's, where the score sits.
   inline-block because base.css makes every img a block, which would wrap. */
.review-badge--trustpilot .review-badge__top { display:block;white-space:nowrap; }
.review-badge--trustpilot .review-badge__logo { display:inline-block;vertical-align:-4.6px;margin-right:14px; }
