/* SMS Storetraffic — server-rendered reviews.
   Type scale is taken from the live theme, measured rather than guessed:
     body copy  "Brown Regular" 16px/24px  #54657e
     headings   "Brown Bold"    45px       #465060
   The theme's base font-size is 20px and its reset pushes headings to a system
   stack, so family and size are set explicitly here — inheriting either breaks
   this component. */

/* root font-size here is 22px, so rem spacing inflates ~37% — spacing is px on purpose.
   The section below carries its own padding, so no bottom padding is needed on desktop. */
.st-rv-wrap { margin-left: auto; margin-right: auto; padding-bottom: 0; }
.st-rv-wrap .st-rv-wrap { max-width: none; margin: 0; }

.st-rv {
  --rv-red:   #e2231a;
  --rv-star:  #f5a623;
  --rv-head:  #465060;   /* theme heading colour */
  --rv-body:  #54657e;   /* theme body colour */
  --rv-mute:  #8794a6;
  --rv-card:  #f5f7f9;
  --rv-font:  "Brown Regular", "Brown", -apple-system, BlinkMacSystemFont, sans-serif;
  --rv-bold:  "Brown Bold", "Brown", -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--rv-font);
  color: var(--rv-body);
  font-size: 16px; line-height: 1.5;
  margin: 0;
}
.st-rv *, .st-rv *::before, .st-rv *::after { box-sizing: border-box; }

.st-rv-h { font-family: var(--rv-bold); font-size: 32px; line-height: 1.2; font-weight: 700;
  color: var(--rv-head); margin: 0 0 8px; }
.st-rv-lead { font-size: 16px; line-height: 24px; color: var(--rv-body); margin: 0 0 22px; max-width: 68ch; }

/* ---------- rating strip ---------- */
.st-rv-sources { list-style: none; margin: 0 0 24px; padding: .85rem .5rem;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .25rem;
  background: var(--rv-card); border-radius: 14px; }
.st-rv-source { flex: 1 1 0; min-width: 150px; display: flex; }
.st-rv-source > a { display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: inherit;
  width: 100%; min-width: 0; transition: background .15s ease; }
.st-rv-source > a:hover { background: #fff; }
.st-rv-src-name   { font-family: var(--rv-bold); font-size: 16px; font-weight: 700; color: var(--rv-head); }
.st-rv-src-rating { font-family: var(--rv-bold); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--rv-head); }
.st-rv-src-rating small { font-size: 13px; font-weight: 400; color: var(--rv-mute); }
.st-rv-src-count  { font-size: 13px; color: var(--rv-mute); }
.st-rv-src-note   { font-size: 12px; color: var(--rv-mute); }
/* margin-top:auto keeps every link on one baseline even when a platform
   shows no star row (Amazon) */
.st-rv-src-link   { font-size: 13px; font-weight: 700; color: var(--rv-red);
  margin-top: auto; padding-top: .3rem; text-align: center; overflow-wrap: anywhere; }

/* ---------- stars ---------- */
.st-rv-stars { display: inline-flex; gap: 1px; line-height: 1; white-space: nowrap; font-size: 15px; }
.st-rv-star { color: #d5dae1; }
.st-rv-star.is-on { color: var(--rv-star); }
.st-rv-star.is-half { background: linear-gradient(90deg, var(--rv-star) 50%, #d5dae1 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- cards ---------- */
.st-rv-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.st-rv-list[data-cols="1"] { grid-template-columns: 1fr; }
.st-rv-list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-rv-list[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.st-rv-item { background: var(--rv-card); border: 0; border-radius: 14px;
  padding: 1.15rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .6rem; }

.st-rv-item-head { display: flex; align-items: center; gap: .65rem; }
.st-rv-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--rv-bold); font-size: 17px; font-weight: 700; }
.st-rv-who { display: flex; flex-direction: column; min-width: 0; }
.st-rv-author { font-family: var(--rv-bold); font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--rv-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rv-when { font-size: 13px; color: var(--rv-mute); }

.st-rv-title { font-family: var(--rv-bold); font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--rv-head); margin: 0; }

/* clamped for equal card height; full text stays in the HTML */
.st-rv-body { font-size: 16px; line-height: 24px; color: var(--rv-body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.st-rv-item-foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; font-size: 13px; }
.st-rv-readmore { font-weight: 700; color: var(--rv-red); text-decoration: none; white-space: nowrap; }
.st-rv-readmore:hover { text-decoration: underline; }
.st-rv-via { color: var(--rv-mute); }

/* platform-required note, inside the card it applies to */
.st-rv-note { margin: .5rem 0 0; font-size: 11.5px; line-height: 1.45;
  color: var(--rv-mute); opacity: .9; }

.st-rv-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: .2rem .7rem; font-size: 13px; color: var(--rv-mute); }
.st-rv-meta span { font-weight: 700; }

.st-rv-more { margin: 14px 0 0; }
.st-rv-more a { font-family: var(--rv-bold); font-size: 16px; font-weight: 700; color: var(--rv-red);
  text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.st-rv-more a:hover { opacity: .8; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .st-rv-list[data-cols="3"], .st-rv-list[data-cols="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-rv-h { font-size: 28px; }
}
@media (max-width: 680px) {
  /* Even side gutters on mobile. The Elementor column hosting this block pads its
     sides unevenly and differently per template - 0 left / 24 right on the home and
     pricing pages, an even 10/10 on the reviews page - so the block sat flush against
     the left edge on the first two. Adding padding to the block itself cannot fix both
     cases at once (it would over-indent the reviews page), so normalise the host
     container instead, scoped with :has() to only the containers that hold this block.
     Browsers without :has() simply keep the theme's own padding. */
  .elementor-widget-wrap:has(.st-rv-wrap) { padding-left: 20px !important; padding-right: 20px !important; }

  .st-rv-list, .st-rv-list[data-cols="2"], .st-rv-list[data-cols="3"],
  .st-rv-list[data-cols="4"] { grid-template-columns: 1fr; }
  .st-rv-h { font-size: 24px; }
  .st-rv-item { padding: 1rem 1.05rem .9rem; }
  .st-rv-body { -webkit-line-clamp: 8; }
  .st-rv-wrap { padding-bottom: 44px; }
  .st-rv-more { margin-top: 12px; }

  /* the strip becomes one compact row per platform — five tall stacked cells
     is far too much vertical space on a phone. The row itself is the link. */
  .st-rv-sources { padding: .35rem .3rem; gap: .1rem; }
  .st-rv-source { flex: 1 1 100%; min-width: 100%; }
  .st-rv-source > a { flex-direction: row; align-items: center; justify-content: flex-end;
    gap: .55rem; padding: .55rem .7rem; text-align: left; }
  .st-rv-src-name   { flex: 1 1 auto; font-size: 15px; }
  .st-rv-src-rating { font-size: 18px; }
  .st-rv-src-count  { font-size: 12px; white-space: nowrap; }
  .st-rv-stars      { font-size: 13px; }
  .st-rv-src-link   { display: none; }
  .st-rv-src-note   { display: none; }
  /* literal UTF-8 arrow — CSS escapes were being double-escaped in transit */
  .st-rv-source > a::after { content: "→"; color: var(--rv-red); font-weight: 700;
    font-size: 15px; line-height: 1; margin-left: .15rem; font-family: sans-serif; }
}