/* =========================
   Fonts
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Wrapper */
#vira-reviews.vr-reviews{
  margin: 18px 0 8px;
  padding: 0 16px;
}

/* Header row (Stars + count + chevron) */
.vr-headbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.vr-leftbar{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.vr-avgstars{
  display:flex;
  align-items:center;
  gap:2px;
  font-size:18px;
  line-height:1;
}

.vr-avgstars .s{
  color:#f5b301; /* loox gelb */
}

.vr-count{
  font-size:18px;
  font-weight:500;
  color:rgba(0,0,0,.85);
  white-space:nowrap;
}

.vr-chevron{
  font-size:18px;
  color:rgba(0,0,0,.65);
  transform: translateY(-1px);
}

/* Write review button */
.vr-write{
  width:100%;
  display:block;
  text-align:center;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:2px;
  background:#fff;
  font-weight:600;
  color:rgba(0,0,0,.85);
  margin: 8px 0 14px;
}

/* Masonry 2 columns like Loox */
.vr-masonry{
  column-count:2;
  column-gap:14px;
}

/* Card */
.vr-card{
  display:inline-block;
  width:100%;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  border:1px solid rgba(0,0,0,.14);
  border-radius:2px;
  background:#fff;
  padding:12px 12px 10px;
  margin: 0 0 14px;
}

/* Card top: name + verified */
.vr-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.vr-name{
  font-weight:800;
  font-size:16px;
  color:rgba(0,0,0,.9);
}

.vr-verified{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:rgba(0,0,0,.7);
  white-space:nowrap;
}
.vr-verified .dot{
  width:18px;height:18px;border-radius:999px;
  background:rgba(0,0,0,.06);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;
}

/* Stars in card */
.vr-card-stars{
  display:flex;
  gap:2px;
  font-size:18px;
  line-height:1;
  margin-bottom:8px;
}
.vr-card-stars .on{ color:#f5b301; }
.vr-card-stars .off{ color:rgba(0,0,0,.18); }

/* Review text */
.vr-text{
  font-size:15px;
  line-height:1.45;
  color:rgba(0,0,0,.82);
  white-space:pre-wrap;
}

/* Meta */
.vr-meta{
  margin-top:10px;
  font-size:13px;
  color:rgba(0,0,0,.35);
}
.vr-meta strong{
  color:rgba(0,0,0,.72);
  font-weight:600;
}

/* Bottom mini product row */
.vr-prod{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.vr-thumb{
  width:52px;height:52px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:2px;
  overflow:hidden;
  background:#f6f7fb;
  flex:0 0 auto;
}
.vr-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.vr-prodname{
  font-size:14px;
  font-weight:600;
  color:rgba(0,0,0,.75);
}

/* Optional: Load more */
.vr-more{
  margin: 10px 0 0;
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  border-radius:2px;
  background:#fff;
  padding:12px 14px;
  font-weight:600;
}

/* Desktop: 3 columns */
@media (min-width: 900px){
  #vira-reviews.vr-reviews{ padding: 0; }
  .vr-masonry{ column-count:3; }
}
/* großes Review-Bild oben */
.vr-review-image{
  width:100%;
  aspect-ratio: 4 / 5;
  border-radius:2px;
  overflow:hidden;
  margin:-12px -12px 12px; /* edge-to-edge wie Loox */
  background:#f4f5f7;
}

.vr-review-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Card Padding korrigieren wegen Bild */
.vr-card{
  padding:12px;
}
.vr-more-wrap{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.vr-more-btn{
  width:100%;
  max-width:360px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.vr-more-btn:disabled{
  opacity:.6;
  cursor:default;
}
.vr-more-info{
  font-size:12px;
  opacity:.7;
}
.vr-card-top{
  display:flex;
  flex-direction:column;   /* 👈 erzwingt neue Zeile */
  align-items:flex-start;
  gap:4px;
}

.vr-name{
  font-weight:800;
  font-size:16px;
  line-height:1.25;
  word-break:break-word;   /* 👈 lange Namen umbrechen sauber */
}

.vr-verified{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#6b6b6b;
  line-height:1.2;
}

.vr-verified .dot{
  display:inline-flex;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e5e5e5;
  color:#111;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
/* =====================================
   VIRA REVIEWS – FINAL LOX STYLE
   4 SPALTEN + MASONRY + LUFT
   ===================================== */

/* Section Breite */
#vira-reviews.vr-reviews{
  max-width:1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Masonry Layout wie Loox */
.vr-masonry{
  column-gap:20px;          /* ⬅ Luft zwischen Spalten */
}

/* Card Abstand nach unten */
.vr-card{
  margin-bottom:20px;      /* ⬅ Luft zwischen Cards */
}

/* Desktop: 4 Spalten */
@media (min-width: 1024px){
  .vr-masonry{
    column-count:4;        /* ⬅⬅⬅ HIER stellst du 3 / 4 / 5 ein */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px){
  .vr-masonry{
    column-count:3;
  }
}

/* Mobile */
@media (max-width: 767px){
  .vr-masonry{
    column-count:2;
  }
}
/* =========================
   Vira Reviews – Requested tweaks
   ========================= */

/* ⭐ Sterne immer #FAD738 (Header + Cards) */
.vr-avgstars .s,
.vr-card-stars .on{
  color:#FAD738 !important;
}
.vr-card-stars .off{
  color:rgba(0,0,0,.18) !important;
}

/* 👤 Kundenname: 16px Poppins + padding 0 10px */
.vr-name{
  font-family:'Poppins', sans-serif !important;
  font-size:16px !important;
  padding:0 10px !important;
  font-weight:800; /* bleibt loox-like */
}

/* 💬 Bewertungstext: Poppins 14px / 19px */
.vr-text{
  font-family:'Poppins', sans-serif !important;
  font-size:14px !important;
  line-height:19px !important;
}

/* ✅ Verifiziert badge: 12px Poppins */
.vr-verified{
  font-family:'Poppins', sans-serif !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

/* (optional) Auch Count/Button/Meta auf Poppins ziehen – wenn du alles einheitlich willst */
.vr-count,
.vr-write,
.vr-meta,
.vr-prodname,
.vr-more-btn,
.vr-more-info{
  font-family:'Poppins', sans-serif !important;
}
/* Fix: Name nicht nach rechts einziehen */
.vr-name{
  padding: 0 !important;
}
/* =========================
   Verified Badge – Black / White (clean)
   ========================= */

/* Text "Verifiziert" */
.vr-verified{
  color:#000 !important;
  font-size:12px !important;
  font-weight:500;
}

/* Schwarze Bubble */
.vr-verified .dot{
  width:12px !important;
  height:12px !important;
  background:#000 !important;
  color:#fff !important;
  font-size:9px !important;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Falls der Haken ein Icon/SVG ist */
.vr-verified .dot svg,
.vr-verified .dot path{
  fill:#fff !important;
  stroke:#fff !important;
}
/* =========================
   Name + Verified inline (smart)
   ========================= */

.vr-card-top{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;          /* 👈 erlaubt Umbruch wenn kein Platz */
}

/* Name darf umbrechen */
.vr-name{
  padding:0 !important;
  white-space:normal;
  word-break:break-word;
}

/* Verified sitzt hinter dem Namen */
.vr-verified{
  margin-left:2px;
  white-space:nowrap;      /* 👈 Badge bleibt zusammen */
}
/* =========================
   Verified – Feinjustierung
   ========================= */

/* Wrapper: Abstand reduzieren */
.vr-card-top{
  gap:4px !important;   /* vorher 6px → enger */
}

/* Text "Verifiziert" */
.vr-verified{
  font-weight:400 !important;     /* nicht fett */
  font-size:12px !important;
  color:#000 !important;
  display:inline-flex;
  align-items:center;             /* 👈 vertikal mittig zur Bubble */
  gap:4px !important;             /* Abstand Text ↔ Bubble */
  margin-left:0 !important;
}

/* Schwarze Bubble */
.vr-verified .dot{
  width:14px !important;
  height:14px !important;
  background:#000 !important;
  color:#fff !important;
  font-size:9px !important;
  border-radius:50%;
  display:inline-flex;
  align-items:center;             /* 👈 Haken mittig */
  justify-content:center;
  line-height:1;
}

/* Falls SVG-Haken */
.vr-verified .dot svg,
.vr-verified .dot path{
  fill:#fff !important;
  stroke:#fff !important;
}
/* =========================
   FIX: Verified direkt hinter Name (kein space-between)
   ========================= */
.vr-card-top{
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}

.vr-name{
  margin:0 !important;
  padding:0 !important;
}

.vr-verified{
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  font-weight:400 !important;
}
/* =========================
   Produktart – Typo & Zeilenumbruch
   ========================= */

/* Wrapper */
.vr-meta{
  font-size:11px !important;     /* kleiner Grundtext */
  line-height:1.35;
  margin-top:8px;
}

/* Label "Produktart:" */
.vr-meta{
  display:flex;
  flex-direction:column;         /* 👈 zwingt neue Zeile */
  gap:2px;
  color:rgba(0,0,0,.45);
}

/* Sorte (z.B. Secret Aura) */
.vr-meta strong{
  display:block;                 /* 👈 neue Zeile */
  font-size:12px !important;     /* leicht größer als Label */
  font-weight:500 !important;
  color:rgba(0,0,0,.75);
}
/* =========================
   Produktart – Linie full width (edge-to-edge)
   ========================= */

.vr-meta{
  padding-bottom:8px;
  margin-bottom:10px;

  border-bottom:1px solid rgba(0,0,0,.12);

  /* 🔥 zieht die Linie aus dem Card-Padding heraus */
  margin-left:-12px;
  margin-right:-12px;

  padding-left:12px;
  padding-right:12px;
}
/* =========================
   Produkt-Zeile unter der Linie
   ========================= */

/* Wrapper Produkt-Zeile */
.vr-prod{
  align-items:flex-start !important;   /* 👈 Text nach OBEN statt mittig */
  margin-top:10px;
}

/* Produktname / Brand-Text (z.B. Evance) */
.vr-prodname{
  font-size:12px !important;           /* wie Sorte */
  font-weight:500 !important;
  color:rgba(0,0,0,.75) !important;
  line-height:1.3;
  margin-top:2px;                      /* feiner Abstand zum Bildrand */
}
/* =========================
   Produktbild – Rand entfernen
   ========================= */

.vr-thumb{
  border:none !important;
}
/* =========================
   "Mehr Bewertungen anzeigen" – Clean Button
   ========================= */

.vr-more-btn{
  width:100%;
  max-width:420px;
  padding:12px 16px;

  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;

  font-family:'Poppins', sans-serif;
  font-size:14px;
  font-weight:500;
  color:rgba(0,0,0,.8);
  text-align:center;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

/* Hover wie im Bild: minimal dunkler */
.vr-more-btn:hover{
  background:#f7f7f7;
  border-color:rgba(0,0,0,.25);
}

/* Disabled State */
.vr-more-btn:disabled{
  opacity:.5;
  cursor:default;
}
/* =========================
   "Angezeigt: x von y" ausblenden
   ========================= */

.vr-more-info{
  display:none !important;
}
/* =========================
   Chevron (▾) entfernen
   ========================= */

.vr-chevron{
  display:none !important;
}
/* =========================
   Header-Sterne größer
   ========================= */

.vr-avgstars{
  font-size:24px !important;   /* vorher 18px → 20–24px sweet spot */
}

.vr-avgstars .s{
  line-height:1 !important;
}