*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --color-bg: #fffbf0;
      --color-surface: #ffffff;
      --color-text-primary: #1a1a18;
      --color-text-secondary: #6b6b65;
      --color-text-muted: #9c9c94;
      --color-border: #e4e3de;
      --color-border-strong: #c8c7c0;
      --color-accent: #370325;
      --color-accent-light: #fffbf0;
      --color-accent-border: #fde7b1;
      --color-accent-text: #f5b23c;
      --color-star: #f5b23c;
      --color-google-blue: #4285F4;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
    }

    .rv-section {
      width: 100%;
      padding: 20px 0;
    }

    /* ── Header row ── */
    .rv-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }

    .rv-overall {
      display: flex;
      align-items: center;
      gap: 12px;
    } 

    .rv-score {
      font-size: 40px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--color-text-primary);
      line-height: 1;
    }

    .rv-score-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .rv-stars-row {
      display: flex;
      gap: 2px;
    }

    .rv-stars-row svg {
      width: 16px;
      height: 16px;
      fill: var(--color-star);
    }

    .rv-count {
      font-size: 12px;
      color: var(--color-text-muted);
    }

    .rv-google-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--color-text-secondary);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 5px 10px;
      background: var(--color-surface);
    }

    .rv-google-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* ── Grid ── */
    .rv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    @media (max-width: 860px) {
      .rv-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
      .rv-grid { grid-template-columns: 1fr; }
      .rv-score { font-size: 32px; }
    }

    /* ── Card ── */
    .rv-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }

    .rv-card:hover {
      border-color: var(--color-border-strong);
      transform: translateY(-2px);
    }

    /* ── Reviewer ── */
    .rv-reviewer {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .rv-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid var(--color-border);
      background: var(--color-bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rv-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
		margin: 0 !important;
    }

    .rv-avatar-initials {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-accent);
    }

    .rv-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-primary);
      line-height: 1.2;
    }

    .rv-date {
      font-size: 11px;
      color: var(--color-text-muted);
      margin-top: 2px;
    }

    /* ── Stars ── */
    .rv-card-stars {
      display: flex;
      gap: 2px;
    }

    .rv-card-stars svg {
      width: 14px;
      height: 14px;
      fill: var(--color-star);
    }

    /* ── Quote ── */
    .rv-quote {
      font-size: 13.5px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      flex: 1;
      position: relative;
      padding-left: 14px;
    }

    .rv-quote::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      width: 3px;
      background: var(--color-accent-border);
      border-radius: 2px;
    }

    /* ── Source tag ── */
    .rv-source {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: var(--color-text-muted);
      margin-top: 2px;
    }

    .rv-source svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }

    /* ── CTA ── */
    .rv-cta {
      text-align: center;
      margin-top: 28px;
    }

    .rv-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-accent);
      text-decoration: none;
      border: 1px solid var(--color-accent-border);
      background: var(--color-accent-light);
      padding: 9px 18px;
      border-radius: var(--radius-md);
      transition: background 0.15s ease;
    }

    .rv-cta-link:hover {
      background: #fef3c7;
    }

    .rv-cta-link svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }







/* ══ Review card layout variants ══════════════════════════════
   Additive only — extends .rv-grid, overrides nothing existing.
   Requires the modifier class on the wrapper:
     <div class="rv-grid rv-grid--single">
     <div class="rv-grid rv-grid--three">
   ═══════════════════════════════════════════════════════════ */

/* ── Variant: single review ── */
.rv-grid.rv-grid--single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.rv-grid.rv-grid--single .rv-card {
  padding: 26px;
}

.rv-grid.rv-grid--single .rv-quote {
  font-size: 14.5px;
}

/* ── Variant: three across, locked to one row ── */
.rv-grid.rv-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Keep the row intact a little longer, then step down gracefully */
@media (max-width: 860px) {
  .rv-grid.rv-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-grid.rv-grid--three .rv-card { padding: 18px; }
  .rv-grid.rv-grid--three .rv-quote { font-size: 13px; }
}

@media (max-width: 680px) {
  .rv-grid.rv-grid--three { grid-template-columns: minmax(0, 1fr); }
  .rv-grid.rv-grid--three .rv-card { padding: 22px; }
  .rv-grid.rv-grid--three .rv-quote { font-size: 13.5px; }
}

@media (max-width: 540px) {
  .rv-grid.rv-grid--single { grid-template-columns: minmax(0, 1fr); }
}