/* Guest reviews.
 *
 * The Reviews design: a slim bar with the crumb and a verified count, a
 * mono kicker over "Reviews", the average as a big number beside a
 * tap-to-filter histogram, a ruled list head with sort chips, hairline
 * review rows (stars, product, date, body, who), and a sticky
 * "write a review" strip.
 *
 * Own id (`shop-reviews`) so the blanket "[id*=modal]" repaints and the
 * button-safety sheet never touch it; colors still carry the id and
 * !important against the `[data-theme="light"] *` rules.
 */
html body #shop-reviews {
    --rv-ink: #0d0f0e;
    --rv-body: #3f403e;
    --rv-mute: #9a9a93;
    --rv-label: #8b8b85;
    --rv-hair: #e6e6e2;
    --rv-rule: #dcdcd6;
    --rv-paper: #ffffff;
    --rv-accent: #3d7a56;
    --rv-accent: oklch(0.52 0.09 152);
    --rv-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Full screen, over the header and the nav, like the ticket sheet. Sitting
       between them leaked the page in above (once the header had tucked
       away) and below (around the translucent nav pill). */
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--rv-paper) !important;
    color: var(--rv-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

html body #shop-reviews,
html body #shop-reviews * {
    box-sizing: border-box;
}

html body #shop-reviews .rv-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}

/* Bar */
html body #shop-reviews .rv-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.93) !important;
    border-bottom: 1px solid var(--rv-hair);
}

html body #shop-reviews .rv-bar-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

html body #shop-reviews .rv-back {
    width: 26px;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-crumb {
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #shop-reviews .rv-verified {
    flex: 0 0 auto;
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-accent) !important;
    -webkit-text-fill-color: var(--rv-accent) !important;
}

/* Loading */
html body #shop-reviews .rv-skeleton {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html body #shop-reviews .rv-skeleton span {
    display: block;
    height: 14px;
    background: #f2f2f0 !important;
}

html body #shop-reviews .rv-skeleton span:first-child { width: 40%; height: 30px; }
html body #shop-reviews .rv-skeleton span:nth-child(2) { width: 70%; }
html body #shop-reviews .rv-skeleton span:nth-child(3) { width: 90%; }

/* Intro + summary */
html body #shop-reviews .rv-intro {
    padding: 30px 20px 0;
}

html body #shop-reviews .rv-kicker {
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
}

html body #shop-reviews .rv-intro h1 {
    margin: 12px 0 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-summary {
    margin-top: 24px;
    padding: 0 20px;
    display: flex;
    align-items: flex-end;
    gap: 22px;
}

html body #shop-reviews .rv-avg {
    font-size: 56px;
    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-avg-stars {
    margin-top: 10px;
}

html body #shop-reviews .rv-stars {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}

html body #shop-reviews .rv-star {
    display: block;
    background: var(--rv-rule) !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

html body #shop-reviews .rv-star.on {
    background: var(--rv-ink) !important;
}

html body #shop-reviews .rv-count {
    margin-top: 10px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    white-space: nowrap;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

/* Histogram */
html body #shop-reviews .rv-hist {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 4px;
}

html body #shop-reviews .rv-histrow {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    cursor: pointer;
}

html body #shop-reviews .rv-hist-n,
html body #shop-reviews .rv-hist-c {
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-hist-n { width: 10px; }
html body #shop-reviews .rv-hist-c { width: 22px; }

html body #shop-reviews .rv-histrow.active .rv-hist-n,
html body #shop-reviews .rv-histrow.active .rv-hist-c {
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-track {
    flex: 1;
    position: relative;
    height: 4px;
    background: var(--rv-hair) !important;
}

html body #shop-reviews .rv-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--rv-ink) !important;
}

html body #shop-reviews .rv-fill.dim {
    background: #b6b6ae !important;
}

/* List head + sorts */
html body #shop-reviews .rv-listhead {
    margin-top: 30px;
    padding: 0 20px 13px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--rv-ink);
    font-family: var(--rv-mono);
}

html body #shop-reviews .rv-list-title {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-shown {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-sorts {
    display: flex;
    border-bottom: 1px solid var(--rv-hair);
    overflow-x: auto;
    scrollbar-width: none;
}

html body #shop-reviews .rv-sorts::-webkit-scrollbar { display: none; }

html body #shop-reviews .rv-sorts button {
    flex: 1 0 auto;
    padding: 11px 14px;
    border: 0;
    border-right: 1px solid var(--rv-hair);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    white-space: nowrap;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-sorts button.on {
    background: var(--rv-ink) !important;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
}

/* Reviews */
html body #shop-reviews .rv-review {
    padding: 22px 20px 20px;
    border-bottom: 1px solid var(--rv-hair);
}

html body #shop-reviews .rv-rtop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

html body #shop-reviews .rv-rscore {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-rtitle {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: pretty;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-rdate {
    padding-top: 2px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-rbody {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--rv-body) !important;
    -webkit-text-fill-color: var(--rv-body) !important;
}

html body #shop-reviews .rv-rfoot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html body #shop-reviews .rv-who {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

html body #shop-reviews .rv-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--rv-ink) !important;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
}

html body #shop-reviews .rv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #shop-reviews .rv-author {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-prov {
    margin-top: 2px;
    font-family: var(--rv-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-prov.ok {
    color: var(--rv-accent) !important;
    -webkit-text-fill-color: var(--rv-accent) !important;
}

/* Empty + more */
html body #shop-reviews .rv-empty {
    padding: 44px 20px;
    text-align: center;
}

html body #shop-reviews .rv-empty-msg {
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-empty button {
    margin-top: 16px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid var(--rv-ink);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-more-wrap {
    padding: 24px 20px 0;
}

html body #shop-reviews .rv-more {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--rv-ink);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

/* Sticky write strip */
html body #shop-reviews .rv-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid var(--rv-ink);
}

html body #shop-reviews .rv-cta-meta {
    font-family: var(--rv-mono);
    font-size: 9px;
    letter-spacing: 0.13em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-cta-sub {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-cta-btn {
    flex: 0 0 auto;
    padding: 14px 20px;
    border: 0;
    border-radius: 0;
    background: var(--rv-ink) !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
    cursor: pointer;
}