/* WC Pretty Reviews — flex 1-rij + modal */
.wcpr{
  --gap:18px; --muted:#667085; --bg:#fff; --ring:rgba(0,0,0,.06); --shadow:0 6px 18px rgba(16,24,40,.06);
  margin:32px 0; padding:24px; border-radius:16px; background:var(--bg); box-shadow:var(--shadow);
}
.single-product .wcpr{ clear:both; width:100%; display:block; }

.wcpr-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.wcpr-title-row{ display:flex; align-items:center; gap:12px; }
.wcpr-badge{ display:inline-flex; align-items:center; font-weight:700; font-size:18px; padding:6px 10px; border-radius:8px; background:#E8F5E9; }
.wcpr-sub{ color:var(--muted); font-size:14px; }

.wcpr-stars{ line-height:1; }
.wcpr-stars .wcpr-star{ font-size:22px; opacity:.28; display:inline-block; margin-right:2px; }
.wcpr-stars.small .wcpr-star{ font-size:16px; }
.wcpr-stars .wcpr-star.full{ opacity:1; }
.wcpr-stars .wcpr-star.half{ background:linear-gradient(90deg, rgba(0,0,0,1) 50%, rgba(0,0,0,.28) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.wcpr .wcpr-star, .wcpr .wcpr-star.full{ color:#28a745; }

.wcpr-grid{ display:flex; gap:var(--gap); overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.wcpr-grid::-webkit-scrollbar{ height:8px; }
.wcpr-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:8px; }

.wcpr-card{ flex:0 0 calc((100% - 2*var(--gap))/3); border:1px solid var(--ring); border-radius:14px; padding:16px; background:#fff; scroll-snap-align:start; }
@media (max-width:1024px){ .wcpr-card{ flex-basis: calc((100% - var(--gap))/2); } }
@media (max-width:640px){  .wcpr-card{ flex-basis:100%; } }

.wcpr-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wcpr-verified{ font-size:12px; font-weight:600; color:#2E7D32; background:#E8F5E9; padding:2px 8px; border-radius:999px; }
.wcpr-text{ color:#0b1220; font-size:15px; }
.wcpr-card-foot{ margin-top:12px; color:var(--muted); font-size:13px; display:flex; align-items:center; gap:6px; }
.wcpr-dot{ opacity:.6; }

.wcpr-footer{ margin-top:16px; }
.wcpr-link{ font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; }

@media (prefers-reduced-motion:no-preference){ .wcpr-grid{ scroll-behavior:smooth; } }

/* Modal */
.wcpr-modal[hidden]{ display:none !important; }
.wcpr-modal{ position:fixed; inset:0; z-index:9999; }
.wcpr-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.wcpr-modal__dialog{ position:relative; z-index:1; max-width:960px; width:90%; margin:5vh auto; background:#fff; border-radius:16px; padding:24px; box-shadow:0 20px 40px rgba(0,0,0,.2); max-height:90vh; overflow:auto; }
.wcpr-modal__close{ position:absolute; top:12px; right:12px; font-size:24px; line-height:1; background:transparent; border:0; cursor:pointer; }
.wcpr-modal__title{ margin:0 0 12px; }
.wcpr-list{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.wcpr-list-item{ border:1px solid var(--ring); border-radius:14px; padding:16px; background:#fff; }
/* Mobiel: badge boven sterren */
@media (max-width: 640px) {
  .wcpr-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
  }

  .wcpr-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .wcpr-stars {
    margin-top: 2px;
  }
}
/* Zorg dat de sectie niet onder je sticky header verdwijnt bij anchors */
.wcpr{ scroll-margin-top: 80px; } /* pas 80px aan naar hoogte van je sticky header */

/* Optioneel: smooth scroll overal */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}


/* -------- Full-bleed achtergrond voor WCPR -------- */
.wcpr {
  position: relative; /* nodig voor de pseudo-achtergrond */
}

/* kies je lichte achtergrondkleur hier */
:root {
  /* Pas deze aan naar smaak/branding */
  --wcpr-bg: #F7F8FA;   /* neutraal lichtgrijs (veilig) */
  /* voorbeelden:
     #F6F5F3 (warm lichtbeige)
     #F5F8FF (koel lichtblauw)
     #F3FAF7 (heel licht mint)
     #F7F8FA;   /* neutraal lichtgrijs (veilig) */
}

.wcpr--fullbleed {
  /* laat het paneel zelf transparant zijn; kaarten blijven wit */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding-block: 32px;        /* verticale ruimte */
}

/* full-bleed achtergrond, rekt over volledige viewportbreedte */
.wcpr--fullbleed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--wcpr-bg);
}

/* optioneel: iets meer binnenruimte horizontaal op kleine schermen */
@media (max-width: 640px){
  .wcpr--fullbleed { padding-block: 24px; }
}