.rvw.v1 {

    /* Local sizing tokens (px / 18 = rem). 88px headline. Scroller spans the full
       content; cards are ~394px so ~4 show across (artifact ReviewCards row). */
    --rvw-v1-rtng-s: var(--fnt-t-1-s);
    --rvw-v1-bx-w: 100rem;        /* effectively full content width (capped by .mn_) */
    --rvw-v1-card-w: 21.889rem;   /* 394px ÷18 — artifact card width */

    overflow: clip;

    /* Background photo: dim dark texture over the forest panel (artifact layers
       the photo at ~10–20% over var(--lt-txt)). PNG needs an explicit cover override
       (global.css forces object-fit:contain on PNGs). */
    picture.bg img {
        object-fit: cover;
        opacity: 0.2;
    }

    /* Big rating headline — reuse the display type role, scaled locally.
       Authored mixed-case (override the big-title uppercase), and base text
       in white (--text-color) so only the accent span reads lime. */
    .rvw-v1-rtng {
        font-size: var(--rvw-v1-rtng-s);
        line-height: 1; /* was 0.9 — policy: never < 1 */
        font-family: var(--fnt-t-big-ff, var(--fnt-t));
        font-weight: var(--fnt-t-big-w);
        letter-spacing: var(--fnt-t-big-ls);
        text-transform: none;
        color: var(--text-color);
    }

    /* Split coloring: "across" / "reviews." inherit white; only the count
       span flips to the lime accent via its .clr-acc --text-color override. */
    .rvw-v1-rtng span {
        color: var(--text-color);
    }

    .svg-con {
        line-height: 1;
    }

    /* Header lays out as a positioning context so the source pills can sit
       top-right next to the rating headline (artifact placement). */
    .rvw-v1-hd {
        position: relative;
    }

    /* Headline accent word ("2,400+") = lime. The .rvw-v1-rtng span rule paints
       all spans white, so this needs the extra specificity to win. */
    .rvw-v1-rtng span.rvw-v1-rtng-acc {
        color: var(--accent);
    }

    /* Top-right aside (artifact): two CTA buttons stacked over the source pills,
       right-aligned, top-aligned with the headline. */
    @media screen and (min-width: 1280px) {
        .rvw-v1-hd-aside {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1rem;
            margin-top: 0;
        }
        .rvw-v1-srcs,
        .rvw-v1-btns {
            justify-content: flex-end;
        }
    }

    /* "As seen on" source pills (Google / Yelp / Facebook). Mirrors the
       artifact: 16/8px padding, 16px gap, 32px icon, translucent off-white
       hairline border (same recipe as the review cards' .frst-bg). */
    .rvw-v1-src {
        padding: 0.444rem 0.889rem;
        --bdr-w: 1px;
        --bdr-clr-o: 0.5;
        --bdr-rds: 0.222rem;
    }

    .rvw-v1-src-icn {
        flex-shrink: 0;

        .icn {
            width: 1.778rem;
            height: 1.778rem;
            color: var(--text-color);
        }
    }

    /* Pill source NAME (Google / Yelp / Facebook). The fnt_t-itm class maps to
       --dk-h4 = LIME on the primary-dark base surface, but the artifact pill name
       is WHITE 16px SUSE-bold. Re-point --title-color to the section text color
       (white) and pin the exact size so the lime injection is undone. */
    .rvw-v1-src .fnt_t-itm {
        --title-color: var(--text-color);
    }

    /* Google source icon sizing in cards. svg default (global.css) is 1em×1em,
       so size directly via width/height instead of font-size to stay off the
       type ramp (this is icon sizing, not text). */
    .g-icn {
        flex-shrink: 0;
        width: 1.33rem;
        height: 1.33rem;
    }

    /* ── Review cards ──────────────────────────────────────────────────────
       The shared ReviewItemAlt card carries `bg-bx lk-bg frst-bg`. On this
       primary-dark section the `.lk-bg` flip lands the card in the alternate-
       dark (ORANGE) palette: --inner-theme = var(--lt-alt-accent) (so the frosted glass
       rendered ORANGE), fnt_t-itm = --dk-alt-h4 = LIME (so the quote rendered
       lime), and the shared star color is gold (#FFD80A). The artifact card is
       a faint CREAM glass on the forest band with WHITE quote text and LIME
       stars. Re-point the surface + type tokens locally to match exactly. */
    .rvw-card.frst-bg {
        /* Artifact: bg rgba(244,239,230,0.05), border rgba(244,239,230,0.6). */
        --frst-bg-clr: var(--inner-theme);   /* cream var(--lt-bg), not orange */
        --frst-bg-o: 0.05;
        --bdr-clr: var(--inner-theme);
        --bdr-clr-o: 0.6;
    }

    /* Quote: fnt_t-itm injects LIME (--dk-alt-h4); artifact is WHITE 18px. */
    .rvw-card .fnt_t-itm {
        --title-color: var(--text-color);
    }

    /* Stars: shared --rvw-str-clr is gold; artifact stars are LIME (var(--lt-accent)). */
    .rvw-card .strs {
        --rvw-str-clr: var(--accent);
        color: var(--accent);
    }

    /* ── Artifact card anatomy: stars / quote / avatar+name+LOCATION·VERIFIED ── */
    /* Card box — artifact: faint glass (0.05) + a hairline border (0.6) + 16px
       radius, on the forest panel. Keyed to var(--text-color) (the section ink —
       white on this primary-dark band) so the glass + border flip with the palette.
       Painted directly (the framework .frst-bg needs a .bg-bx companion to render,
       which we don't use here). */
    .rvw-card {
        padding: 1.778rem;   /* 32px */
        background-color: hsl(from var(--text-color) h s l / 0.05);
        border: 1px solid hsl(from var(--text-color) h s l / 0.6);
        border-radius: var(--bdr-rds);
    }

    .rvw-card-stars {
        color: var(--accent);
        /* size rides fnt_phn (template class) — nearest ramp size/line-height to the ~20px star row */
    }

    /* Quote — artifact: white 18px, leading 1.5. Pushes the author row to the foot. */
    .rvw-card-quote {
        margin: 0;
        flex: 1 1 auto;
        color: var(--text-color);
        font-family: var(--fnt-m);  /* SUSE */
        /* size/line-height ride fnt_cnt (template class) — matches 18px/1.5 exactly */
    }

    .rvw-card-author {
        align-items: center;
        margin-top: 0.444rem;
    }

    /* Avatar: 36px round; lime-tint placeholder when no photo. */
    .rvw-card-avatar {
        flex: 0 0 auto;
        display: block;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        overflow: hidden;
        background-color: hsl(from var(--accent) h s l / 0.25);
    }

    .rvw-card-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rvw-card-name {
        color: var(--text-color);
        font-family: var(--fnt-m);
        /* size/line-height ride fnt_atr (template class) — author role */
    }

    /* "ROUND ROCK · VERIFIED" — SUSE 13px, 0.26px tracking, uppercase, white. */
    .rvw-card-meta {
        color: var(--text-color);
        font-family: var(--fnt-m);
        text-transform: uppercase;
        /* size/line-height ride fnt_t-nt (template class) — note/small-label role */
        opacity: 0.85;
    }

    /* Pagination thumbs (SnapList-built) — artifact dots: translucent-white,
       active = lime. The <ul data-role="thumbList"> holds <li><button>. */
    .rvw-v1-thumbs {
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .rvw-v1-thumbs li {
        display: flex;
    }

    .rvw-v1-thumbs button {
        width: 0.444rem;            /* 8px dot */
        height: 0.444rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        background-color: hsl(from var(--text-color) h s l / 0.4);
        transition: background-color var(--g-trn-sp, 0.2s) ease, width var(--g-trn-sp, 0.2s) ease;
    }

    /* Active / hover thumb = lime, round (artifact: 1 lime + N translucent dots). */
    .rvw-v1-thumbs button:is(.s-active, :hover, :focus-visible) {
        background-color: var(--accent);
    }

    /* Prev/next scroll arrows flanking the pagination dots. These use the
       theme-routed <LeftArrow>/<RightArrow> snippets (BugOut → hexagon arrows),
       which are self-colored — so we only size them and dim/brighten on hover
       rather than recoloring their paths. */
    .rvw-v1-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: none;
        line-height: 0;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity var(--g-trn-sp, 0.2s) ease;
    }

    .rvw-v1-arrow:is(:hover, :focus-visible) {
        opacity: 1;
    }

    .rvw-v1-arrow .icn {
        width: 1.333rem;   /* ~24px — near the snippet's native 20×23 */
        height: auto;
        margin: 0;         /* neutralize the snippet's inline-with-text margins */
    }

    /* Only a scrollable (multi-page) list gets arrows — SnapList sets .s-active. */
    [data-role="scroller"]:not(.s-active) .rvw-v1-arrow {
        display: none;
    }

    /* Override off-scr to bleed relative to .bx, not mn_wd. */
    @media screen and (min-width: 1280px) {
        .bx {
            max-width: var(--rvw-v1-bx-w);
            margin-inline: auto;
            position: relative;
            width: 100%;
        }
    }
}