/* ===========================================================================
   The review wall — M6.5.

   Loaded three ways: by the storefront, by the dashboard's Display preview,
   and by the embed, which inlines this whole file into a shadow root on
   somebody else's page.

   That third one sets every rule below:

   - Nothing here inherits. A page we have never seen may set anything on
     `p`, `b`, `article` or `*`, so every property the wall depends on is
     stated rather than assumed — including font, line height and box-sizing.
   - No CSS variables from outside. The four themes define their own on `.rw`.
   - No `!important` anywhere. Inside a shadow root nothing is competing, and
     on the storefront this loads after the theme on purpose.
   =========================================================================== */

.rw, .rw *{box-sizing:border-box;margin:0;padding:0}

.rw{
  /* Light is the default; the three below only redefine these. */
  --rw-bg:transparent;
  --rw-card:#ffffff;
  --rw-line:#e4e9e7;
  --rw-ink:#101e1a;
  --rw-soft:#5f7a70;
  --rw-accent:#0e6b4f;
  --rw-star:#e0a100;
  --rw-radius:12px;

  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--rw-ink);
  background:var(--rw-bg);
  -webkit-font-smoothing:antialiased;
}

.rw-t-dark{
  --rw-bg:#14181b;--rw-card:#1c2226;--rw-line:#2a3237;
  --rw-ink:#eef1f0;--rw-soft:#9aa9a5;--rw-accent:#4fd1a5;
}
.rw-t-soft{
  --rw-bg:#fbf9fe;--rw-card:#ffffff;--rw-line:#ebe3f5;
  --rw-ink:#1e1630;--rw-soft:#5b4e73;--rw-accent:#7a3fa8;--rw-radius:18px;
}
.rw-t-paper{
  --rw-bg:#faf7f0;--rw-card:#ffffff;--rw-line:#e8e0d2;
  --rw-ink:#141414;--rw-soft:#5c5546;--rw-accent:#141414;--rw-radius:0px;
}

/* ── heading ─────────────────────────────────────────────────────────────── */

.rw-head{text-align:center;margin-bottom:18px}
.rw-h2{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--rw-ink)}
.rw-sub{font-size:14px;color:var(--rw-soft);margin-top:5px;line-height:1.5}

.rw-agg{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px;
        flex-wrap:wrap}
.rw-agg .rw-stars{color:var(--rw-star);font-size:16px;letter-spacing:2px}
.rw-score{font-size:20px;font-weight:800;color:var(--rw-ink);
          font-family:ui-monospace,Menlo,monospace}
.rw-count{font-size:13px;color:var(--rw-soft)}

/* ── the card, which every layout reuses ─────────────────────────────────── */

.rw-cards{display:grid;gap:12px}

.rw-card{background:var(--rw-card);border:1px solid var(--rw-line);
         border-radius:var(--rw-radius);padding:15px;break-inside:avoid}
.rw-card .rw-stars{color:var(--rw-star);font-size:13px;letter-spacing:2px;display:block;
                   margin-bottom:7px}
.rw-title{display:block;font-size:14px;font-weight:700;color:var(--rw-ink);margin-bottom:5px;
          line-height:1.3}
.rw-body{font-size:13.5px;line-height:1.6;color:var(--rw-ink);opacity:.88}

.rw-by{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.rw-av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
       justify-content:center;font-size:11px;font-weight:800;flex:none;
       background:color-mix(in srgb,var(--rw-accent) 15%,transparent);color:var(--rw-accent)}
.rw-name{font-size:12.5px;font-weight:700;color:var(--rw-ink)}

/* The badge nothing bolted on from outside can draw, because it does not hold
   the order. Deliberately the most confident thing on the card. */
.rw-verified{font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;
             border-radius:99px;background:var(--rw-accent);color:var(--rw-card);
             font-family:ui-monospace,Menlo,monospace;white-space:nowrap}

/* ── the twelve shapes ───────────────────────────────────────────────────── */

/* Board — masonry. `columns` rather than grid: the whole character of a board
   is uneven card heights packing together, which grid cannot do. */
.rw-board .rw-cards,
.rw-board-compact .rw-cards{display:block;columns:3;column-gap:12px}
.rw-board .rw-card,
.rw-board-compact .rw-card{margin-bottom:12px;display:inline-block;width:100%}
.rw-board-compact .rw-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                           overflow:hidden}

.rw-grid .rw-cards{grid-template-columns:repeat(3,minmax(0,1fr))}

.rw-list .rw-cards{grid-template-columns:1fr}
.rw-list .rw-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
                  align-items:start}
.rw-list .rw-stars{grid-column:2;margin-bottom:5px}
.rw-list .rw-title,.rw-list .rw-body{grid-column:2}
.rw-list .rw-by{grid-column:1;grid-row:1 / span 4;margin-top:0;display:block}
.rw-list .rw-av{width:38px;height:38px;font-size:14px}
.rw-list .rw-name,.rw-list .rw-verified{display:none}

/* Sliders. One scroll container, two card widths — nothing else differs, so
   nothing else is written twice. */
.rw-slider .rw-cards,
.rw-multi .rw-cards{grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;
                    padding-bottom:6px}
.rw-slider .rw-cards{grid-auto-columns:minmax(0,86%)}
/* The classic carousel: two at a time. */
.rw-classic .rw-cards{grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;
                      grid-auto-columns:minmax(0,48%);padding-bottom:6px}
.rw-classic .rw-card{scroll-snap-align:start}
.rw-multi .rw-cards{grid-auto-columns:minmax(0,44%)}
.rw-slider .rw-card,.rw-multi .rw-card{scroll-snap-align:start}

.rw-spotlight .rw-cards{grid-template-columns:1fr}
.rw-spotlight .rw-card{padding:28px 24px;text-align:center}
.rw-spotlight .rw-body{font-size:17px;line-height:1.6;opacity:1}
.rw-spotlight .rw-by{justify-content:center}
.rw-spotlight .rw-stars{font-size:16px}

.rw-quote .rw-cards{grid-template-columns:1fr}
.rw-quote .rw-card{background:none;border:0;padding:8px 0;text-align:center}
.rw-quote .rw-body{font-size:19px;line-height:1.55;font-style:italic;opacity:1}
.rw-quote .rw-by{justify-content:center}

.rw-avatars .rw-faces{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
                      margin-bottom:16px}
.rw-face{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;
         justify-content:center;font-size:13px;font-weight:800;
         background:color-mix(in srgb,var(--rw-accent) 15%,transparent);color:var(--rw-accent)}
.rw-avatars .rw-cards{grid-template-columns:1fr}
.rw-avatars .rw-card{text-align:center}
.rw-avatars .rw-by{justify-content:center}

/* Marquee. The animation is the layout, so a reader who has asked for less
   motion gets an ordinary scrolling strip instead — see the block at the end. */
.rw-marquee .rw-cards{grid-auto-flow:column;grid-auto-columns:minmax(0,260px);
                      overflow:hidden}
.rw-marquee .rw-cards>*{animation:rw-drift 42s linear infinite}
@keyframes rw-drift{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.rw-starbar .rw-agg{margin:0;background:var(--rw-card);border:1px solid var(--rw-line);
                    border-radius:var(--rw-radius);padding:13px}

.rw-video .rw-cards{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── narrower ────────────────────────────────────────────────────────────── */

@media (max-width:820px){
  .rw-board .rw-cards,.rw-board-compact .rw-cards{columns:2}
  .rw-grid .rw-cards,.rw-video .rw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rw-multi .rw-cards{grid-auto-columns:minmax(0,66%)}
}

@media (max-width:560px){
  .rw-board .rw-cards,.rw-board-compact .rw-cards{columns:1}
  .rw-grid .rw-cards,.rw-video .rw-cards{grid-template-columns:1fr}
  .rw-slider .rw-cards,.rw-multi .rw-cards{grid-auto-columns:minmax(0,88%)}
  .rw-h2{font-size:19px}
  .rw-spotlight .rw-body{font-size:15px}
  .rw-quote .rw-body{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  /* The marquee stops being a marquee rather than being removed: the reviews
     are the content, and taking them away would be worse than not moving. */
  .rw-marquee .rw-cards>*{animation:none}
  .rw-marquee .rw-cards{overflow-x:auto}
}

/* ── the section around it, on the storefront ────────────────────────────── */

/* The wall drops into a page that has its own rhythm, so the only thing said
   here is where it sits. Everything inside it is the `.rw` block above, which
   assumes nothing about what it landed in. */
.rw-section{margin:40px 0}

/* ── the video wall's tile, as the mockup draws it ── */
.rw-vid{padding:0;overflow:hidden}
.rw-vid .rw-vw{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:9/12;
               background:#0d1113;color:#fff;font-size:17px}
.rw-vid .rw-vw::after{content:'';position:absolute;inset:0;
               background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rw-accent) 34%,transparent),transparent 66%)}
.rw-vid .rw-by{margin:0;padding:9px}

/* Name and badge on one line, as the mockup's cards have them. */
.rw-by{flex-wrap:nowrap}
.rw-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-verified{flex:0 0 auto;white-space:nowrap}
.rw-card .rw-by{gap:7px}
.rw-card .rw-av{width:24px;height:24px;font-size:9.5px;flex:0 0 auto}
.rw-card .rw-name{font-size:11.5px;flex:1}
.rw-card .rw-verified{font-size:8px;padding:2px 6px}
.rw-spotlight .rw-name,.rw-quote .rw-name,.rw-avatars .rw-name{flex:0 1 auto}