/* Full width */
.rw-container { width:100%; max-width:none; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* Header */
.rw-header { display:flex; align-items:center; margin-bottom:16px; }
.rw-avg { display:flex; align-items:center; column-gap:4px; }
.rw-avg-score { font-size:28px; font-weight:700; color:#fff; }

/* total text smaller but bold */
.rw-total { color:#fff; font-size:12px; font-weight:600; opacity:0.95; }

/* Grid: 8px gaps, 4 per row on desktop */
.rw-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-column-gap:8px; grid-row-gap:8px; }
.rw-card {
  grid-column:1 / -1;
  background:#05071f;
  color:#fff;
  border:none;                       /* no borders */
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column;
}
@media (min-width:720px){ .rw-card{ grid-column:auto / span 6; } }   /* 2 per row tablet */
@media (min-width:1024px){ .rw-card{ grid-column:auto / span 3; } }  /* 4 per row desktop */

/* Card header */
.rw-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rw-user { display:flex; align-items:center; column-gap:10px; }

/* Avatar must be circular */
.rw-avatar { width:28px; height:28px; border-radius:50% !important; object-fit:cover; display:block; overflow:hidden; }

/* Username size; badge matches this */
.rw-name { font-weight:600; color:#fff; font-size:14px; }

/* Verified badge same size as username and bold */
.rw-badge { display:inline-flex; align-items:center; column-gap:6px; font-size:14px; }
.rw-badge img { width:16px; height:16px; display:block; }
.rw-badge span { color:#8597F7; font-weight:600; } /* bold "Verified" */

/* Review body */
.rw-body { line-height:1.45; margin:8px 0 12px; }
.rw-body img { max-width:100%; height:auto; border-radius:8px; display:block; }
.rw-body a { color:#8597F7; text-decoration:underline; }

/* Keep product block bottom-aligned */
.rw-spacer { margin-top:auto; }

/* Product block */
/* Product block - original style */
.rw-product {
  display:flex;
  align-items:center;
  column-gap:10px;
  padding-top:10px;
  border-top:1px solid #fff;
}

.rw-product-thumb {
  display:block;
  flex:0 0 100px;
}

.rw-product-thumb img {
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:8px;
}

.rw-product-title {
  color:#fff;
  text-decoration:none;
  font-weight:600;
}


/* Load more button */
.rw-load { margin:18px auto 0; display:block; padding:10px 16px; border-radius:10px; border:0; background:#8597F7; color:#fff; cursor:pointer; }
.rw-load:hover { background:#4a5bb9; color:#fff; }
.rw-load[disabled]{ opacity:.6; cursor:not-allowed; }

/* WooCommerce-like star rating 1:1 */
.star-rating { position:relative; display:inline-block; font-size:1em; line-height:1; width:5.4em; }
.star-rating:before { content:"★★★★★"; opacity:.25; }
.star-rating span { position:absolute; top:0; left:0; overflow:hidden; height:100%; }
.star-rating span:before { content:"★★★★★"; color:#ffd21e; }

/* Header stars same optical size as score */
.rw-stars-wc .star-rating { font-size:28px; }

/* Card stars slightly smaller */
.rw-rating .star-rating { font-size:14px; }

/* Väiksem vahe tähtede ja (reviews) vahel */
.rw-avg { gap:5px !important; }

@media (max-width:720px) {
  .rw-header {
    display:none !important;
  }
}

/*
/* Header row behaves as its own container */
.rw-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  container-type:inline-size;            /* key: measure actual row width */
  container-name:rwhead;
}

/* Left side: avatar + name + verified */
.rw-user{ display:flex; align-items:center; gap:10px; min-width:0; }
.rw-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover;
            flex:0 0 28px; }            /* fixes the “dot” issue */
.rw-name{ font-weight:600; color:#fff; font-size:14px;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rw-badge{ display:inline-flex; align-items:center; gap:6px; font-size:14px; }

/* Right side: stars never wrap */
.rw-rating{ flex:0 0 auto; white-space:nowrap; }

/* Only hide Verified when the row is truly cramped */
@container rwhead (max-width:300px){
  .rw-badge{ display:none; }
}

/* If you previously added this, delete it. It hides Verified on phones and on slight zoom. */
/*
@media (max-width:360px){
  .rw-badge{ display:none; }
}
*/