/**
 * Guest review system.
 *
 * Every colour, font and size comes from the theme variables
 * (style.css :root + inc/admin/css_inline.php). Nothing is hard-coded:
 * retheme the site and this file follows.
 */



/* ── shared atoms ─────────────────────────────────────────────── */

.jwshb-rv-eyebrow {
    display: block;
    font-weight: 700;
    color: var(--heading);
}

.jwshb-rv-icon {
    display: inline-flex;
    flex: none;
    line-height: 1;
}

.jwshb-rv-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--border-cl2);
}

.jwshb-rv-star.is-on {
    color: var(--main);
}

.jwshb-rv-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 39px;
    padding: 0 10px;
    font-family: var(--font2);
    font-size: var(--fs-medium2);
    line-height: 1;
    background: var(--main);
    color: var(--light);
    border-radius: 5px;
    font-weight: bold;
}

.jwshb-rv-chip--mid {
    background: var(--body);
    color: var(--light);
}

.jwshb-rv-chip--low {
    background: var(--border-cl2);
    color: var(--heading);
}

.jwshb-rv-avatar {
    display: block;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--secondary) center/cover no-repeat;
}


.jwshb-rv-verified {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-small2);
    color: var(--e-a-color-success);
}

/* topic pill — one look for the highlights (open the modal on a topic)
   and the filter panel (toggle a topic, .is-on); an optional count sits
   after the word */
.jwshb-rv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jwshb-rv-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--border-cl2);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--heading);
    text-transform: capitalize;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.jwshb-rv-tag:hover {
    border-color: var(--heading);
    background: var(--secondary);
}

.jwshb-rv-tag__count {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-tag.is-on,
.jwshb-rv-tag.is-on:hover {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-tag.is-on .jwshb-rv-tag__count {
    color: var(--background-body);
}

/* ── block shell ──────────────────────────────────────────────── */

.jwshb-rv__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.jwshb-rv__headings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jwshb-rv__title {
    margin: 0;
}

.jwshb-rv__intro {
    margin: 0;
    max-width: 62ch;
    color: var(--body);
}

.jwshb-rv__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jwshb-rv__summary {
    margin-bottom: 18px;
}

.jwshb-rv__body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

/* ── summary ──────────────────────────────────────────────────── */

.jwshb-rv-summary {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 10px;
}

/* categories + spread share one wrapper (the phone toggle hides it);
   out of the way here, so they stay the summary's grid cells */
.jwshb-rv-summary__details {
    display: contents;
}

.jwshb-rv-summary__caret {
    display: none;
}

.jwshb-rv-summary>*,
.jwshb-rv-summary__details>* {
    padding: 28px;
}

.jwshb-rv-summary__score,
.jwshb-rv-summary__cats {
    border-right: 1px solid var(--border-cl);
}

.jwshb-rv-summary__score {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jwshb-rv-summary__number {
    font-family: var(--font2);
    font-size: 62px;
    line-height: 1;
    color: var(--heading);
}

.jwshb-rv-summary__label {
    font-size: var(--fs-medium);
    color: var(--heading);
}

.jwshb-rv-summary__count {
    color: var(--body);
}

.jwshb-rv-summary__trust {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-cl);
    font-size: var(--fs-small2);
    line-height: 1.5;
    color: var(--e-a-color-success);
}

.jwshb-rv-summary__cats,
.jwshb-rv-summary__dist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jwshb-rv-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
}

.jwshb-rv-bar {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.jwshb-rv-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.jwshb-rv-bar__label {
    color: var(--heading);
}

.jwshb-rv-bar__value {
    color: var(--body);
}

.jwshb-rv-bar__track {
    height: 6px;
    background: var(--border-cl);
    border-radius: 6px;
}

.jwshb-rv-bar__fill {
    display: block;
    height: 6px;
    background: var(--main);
    border-radius: 6px;
}

.jwshb-rv-dist {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.jwshb-rv-dist__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 12px;
}

.jwshb-rv-dist__star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--heading);
}

.jwshb-rv-dist__track {
    height: 8px;
    background: var(--secondary);
    border-radius: 4px;
}

.jwshb-rv-dist__fill {
    display: block;
    height: 8px;
    background: var(--main);
    border-radius: 4px;
}

.jwshb-rv-dist__count {
    text-align: right;
    color: var(--body);
    font-size: var(--fs-small2);
}

.jwshb-rv-summary__reply-rate {
    margin: 6px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-cl);
    font-size: var(--fs-small2);
}

/* ── filters ──────────────────────────────────────────────────── */

.jwshb-rv-filters {
    background: var(--background-body);
    border: 1px solid var(--border-cl);
}

.jwshb-rv-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-cl);
    margin-bottom: 20px;
}

.jwshb-rv-filters__tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* closes the panel where it covers the list (see responsive) */
.jwshb-rv-filters__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--heading);
    cursor: pointer;
}

.jwshb-rv-filters__clear {
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-cl);
    font-size: var(--fs-small);
    color: var(--body);
    cursor: pointer;
}

.jwshb-rv-filters__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 25px 20px;
    border-bottom: 1px solid var(--border-cl);
}

.jwshb-rv-field--search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 20px;
    padding: 10px 12px;
    border: 1px solid var(--border-cl);
    margin: 0;
    border-radius: 8px;
}

.jwshb-rv-search {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--heading);
}

.jwshb-rv-search:focus {
    outline: none;
}

/* The hidden inputs below are absolutely positioned. Without a positioned
   label around them their containing block is the modal, not the panel
   that scrolls (.jwshb-rv__side, .jwshb-rv-form), so they stay put while
   it scrolls — and clicking one then yanks the panel back to wherever the
   input was laid out. Each label owns its input instead. */
.jwshb-rv-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.jwshb-rv-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.jwshb-rv-check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: none;
    border: 1px solid var(--border-cl2);
    color: transparent;
}

.jwshb-rv-check input:checked+.jwshb-rv-check__box {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-check input:focus-visible+.jwshb-rv-check__box {
    outline: 2px solid var(--main);
    outline-offset: 2px;
}

.jwshb-rv-check__label {
    flex: 1 1 auto;
    color: var(--heading);
}

.jwshb-rv-check__count {
    color: var(--body);
    font-size: var(--fs-small2);
}

.jwshb-rv-check--consent {
    align-items: flex-start;
}

.jwshb-rv-check--consent .jwshb-rv-check__label {
    font-size: var(--fs-small2);
    line-height: 1.7;
    color: var(--body);
}

.jwshb-rv-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
}

.jwshb-rv-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.jwshb-rv-toggle__label {
    color: var(--heading);
}

.jwshb-rv-toggle__track {
    display: flex;
    align-items: center;
    width: 40px;
    height: 22px;
    flex: none;
    padding: 2px;
    background: var(--border-cl);
    transition: background .25s ease;
    border-radius: 30px;
}

.jwshb-rv-toggle__knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--background-body);
    transition: transform .25s ease;
}

.jwshb-rv-toggle input:checked+.jwshb-rv-toggle__track {
    background: var(--main);
}

.jwshb-rv-toggle input:checked+.jwshb-rv-toggle__track .jwshb-rv-toggle__knob {
    transform: translateX(18px);
}

/* ── list ─────────────────────────────────────────────────────── */

.jwshb-rv-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jwshb-rv-list.is-loading {
    opacity: .45;
    pointer-events: none;
}

.jwshb-rv-list__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Narrow screens stack the filters above the list, so this opens them instead.
   Shown only in the responsive blocks at the end of this file. */
.jwshb-rv-filters-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    order: -1;
    min-height: 35px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border-cl);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-small2);
    color: var(--heading);
    cursor: pointer;
}

.jwshb-rv-filters-toggle .jwshb-rv-icon {
    color: var(--main);
}

.jwshb-rv-filters-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--heading);
    border-radius: 999px;
    color: var(--background-body);
    font-size: var(--fs-small2);
    line-height: 1;
}

.jwshb-rv-filters-toggle__count[hidden] {
    display: none;
}

.jwshb-rv-list__count strong {
    color: var(--heading);
}

.jwshb-rv-sort {
    display: inline-flex;
    align-items: center;
}

.jwshb-rv-list__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jwshb-rv-more {
    align-self: stretch;
}

.jwshb-rv-list__spinner {
    display: none;
}

.jwshb-rv-list.is-loading .jwshb-rv-list__spinner {
    display: block;
    position: absolute;
    inset: 0;
}

/* ── numbered pager (modal) ───────────────────────────────────── */

/* The wrapper is always printed so a filter change can fill it again;
   with a single page it holds nothing, so keep it out of the column. */
.jwshb-rv-list__pager:empty,
.jwshb-rv-list__pager:not(:has(.jwshb-rv-pager)) {
    display: none;
}

.jwshb-rv-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.jwshb-rv-pager__pages {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jwshb-rv-pager__page,
.jwshb-rv-pager__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--border-cl);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-small2);
    line-height: 1;
    color: var(--heading);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.jwshb-rv-pager__page:hover,
.jwshb-rv-pager__arrow:not(:disabled):hover {
    border-color: var(--heading);
}

.jwshb-rv-pager__page.is-current {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
    cursor: default;
}

.jwshb-rv-pager__arrow:disabled {
    opacity: .4;
    cursor: default;
}

/* one caret icon serves both arrows — it points down, so turn it */
.jwshb-rv-pager__arrow--prev .jwshb-rv-icon {
    transform: rotate(90deg);
}

.jwshb-rv-pager__arrow--next .jwshb-rv-icon {
    transform: rotate(-90deg);
}

.jwshb-rv-pager__gap {
    padding: 0 2px;
    font-size: var(--fs-small2);
    color: var(--body);
}

/* ── one review ───────────────────────────────────────────────── */

.jwshb-rv-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 10px;
}

.jwshb-rv-item__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.jwshb-rv-item__who {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.jwshb-rv-item__name {
    color: var(--heading);
    font-weight: 500;
}

.jwshb-rv-item__meta {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-item__score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
}

.jwshb-rv-item__date {
    font-size: var(--fs-small2);
    color: var(--body3);
}

.jwshb-rv-item__title {
    color: var(--heading);
    font-weight: 600;
}

.jwshb-rv-item__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jwshb-rv-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
}

.jwshb-rv-note .jwshb-rv-icon {
    margin-top: 4px;
}

.jwshb-rv-note--liked {
    color: var(--heading);
}

.jwshb-rv-note--liked .jwshb-rv-icon {
    color: var(--e-a-color-success);
}

.jwshb-rv-note--disliked {
    color: var(--body);
}

.jwshb-rv-note--disliked .jwshb-rv-icon {
    color: var(--border-cl2);
}

.jwshb-rv-item__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jwshb-rv-photo {
    position: relative;
    display: block;
    width: 104px;
    height: 78px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
}

.jwshb-rv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.jwshb-rv-photo:hover img {
    transform: scale(1.06);
}

/* beyond the fourth: carried for the lightbox, not drawn in the row */
.jwshb-rv-photo.is-extra {
    display: none;
}

.jwshb-rv-photo--more::after {
    content: attr(data-count);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--heading);
    opacity: .78;
    color: var(--background-body);
    font-size: var(--fs-small);
}

/* lightGallery ships at z-index 1080; the review overlays sit at 9999 */
.lg-backdrop {
    z-index: 10040;
}

.lg-outer {
    z-index: 10050;
}

.jwshb-rv-reply {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px;
    background: var(--secondary);
    border-left: 2px solid var(--main);
}

.jwshb-rv-reply__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jwshb-rv-reply__head .jwshb-rv-eyebrow {
    color: var(--main);
}

.jwshb-rv-reply__head time {
    font-size: var(--fs-small2);
    color: var(--body3);
}

.jwshb-rv-reply p {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--body);
}

.jwshb-rv-reply__author {
    color: var(--heading);
}

.jwshb-rv-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border-cl);
}

.jwshb-rv-item__helpful-label {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-votes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jwshb-rv-vote {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 35px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border-cl);
    font-family: inherit;
    font-size: var(--fs-small2);
    color: var(--heading);
    cursor: pointer;
    border-radius: 30px;
}

.jwshb-rv-vote:hover {
    border-color: var(--heading);
}

.jwshb-rv-vote.is-active {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-vote.is-done {
    cursor: default;
}

.jwshb-rv-vote.is-done:not(.is-active) {
    opacity: .55;
}

.jwshb-rv-report {
    padding: 0 4px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-small2);
    color: var(--body);
    cursor: pointer;
}

.jwshb-rv-report:hover {
    color: var(--heading);
}

.jwshb-rv-report.is-done {
    color: var(--body3);
    cursor: default;
}

/* ── empty ────────────────────────────────────────────────────── */

.jwshb-rv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 46px 24px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    text-align: center;
    color: var(--body);
}

.jwshb-rv-empty .jwshb-rv-icon {
    color: var(--border-cl2);
}

.jwshb-rv-empty__title {
    margin: 0;
    font-family: var(--font2);
    font-size: var(--fs-medium2);
    color: var(--heading);
}

.jwshb-rv-empty__text {
    margin: 0;
    max-width: 42ch;
}

.jwshb-rv-empty .jwshb-rv-btn {
    margin-top: 6px;
}

/* ── modal ────────────────────────────────────────────────────── */

body.jwshb-rv-open {
    overflow: hidden;
}

.jwshb-rv-modal,
.jwshb-rv-form-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    transition: opacity .2s ease;
}

.jwshb-rv-modal.jwshb-is-open,
.jwshb-rv-form-wrap.jwshb-is-open {
    opacity: 1;
}

/* A class selector beats the browser's [hidden] rule, so state it here:
   the overlays must stay out of the page until the script opens them. */
.jwshb-rv-modal[hidden],
.jwshb-rv-form-wrap[hidden] {
    display: none;
}

.jwshb-rv-modal__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--heading);
    opacity: .64;
}

.jwshb-rv-modal__dialog,
.jwshb-rv-form {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    max-height: 100%;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    overflow: hidden;
    transform: translateY(12px);
    transition: transform .25s ease;
}

.jwshb-rv-modal.jwshb-is-open .jwshb-rv-modal__dialog,
.jwshb-rv-form-wrap.jwshb-is-open .jwshb-rv-form {
    transform: none;
}

/* both overlays are full-height panels against the right edge */
.jwshb-rv-modal,
.jwshb-rv-form-wrap {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
}

.jwshb-rv-modal .jwshb-rv-modal__dialog,
.jwshb-rv-form-wrap .jwshb-rv-form {
    height: 100%;
    max-height: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateX(40px);
}

.jwshb-rv-modal .jwshb-rv-modal__dialog {
    width: min(1180px, 100%);
}

.jwshb-rv-modal__head,
.jwshb-rv-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex: none;
    padding: 20px 28px;
    background: var(--background-body);
    border-bottom: 1px solid var(--border-cl);
}

.jwshb-rv-modal__titles {
    display: flex;
    align-items: center;
    gap: 5px 16px;
    flex-wrap: wrap;
}

.jwshb-rv-modal__title {
    margin: 0;
}

.jwshb-rv-modal__sub {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-modal__tools {
    display: flex;
    align-items: center;
    gap: 16px;
}

.jwshb-rv-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    background: transparent;
    border: 0;
    color: var(--heading);
    cursor: pointer;
}


.jwshb-rv-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.jwshb-rv-modal__body .jwshb-rv {
    flex: 1 1 auto;
    min-height: 0;
}

/* shown until the body arrives over AJAX on first open */
.jwshb-rv-modal__loading {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 24px;
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-modal__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border-cl);
    border-top-color: var(--main);
    border-radius: 50%;
    animation: jwshb-rv-spin .8s linear infinite;
}

.jwshb-rv-modal__body.is-error .jwshb-rv-modal__spinner {
    display: none;
}

@keyframes jwshb-rv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* modal layout: summary + filters pinned left, list scrolls right */
.jwshb-rv--modal .jwshb-rv__body {
    grid-template-columns: 336px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    align-items: stretch;
}

.jwshb-rv--modal .jwshb-rv__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: var(--background-body);
    border-right: 1px solid var(--border-cl);
    overflow-y: auto;
}

.jwshb-rv--modal .jwshb-rv__main {
    padding: 20px 24px;
    overflow-y: auto;
}

/* modal summary: above the list — score chip on top, then the score
   spread beside the category bars. Sized by its own width (container
   queries), since the column is narrower with the filters beside it. */
.jwshb-rv__overview {
    container-type: inline-size;
    margin-bottom: 24px;
}

.jwshb-rv--modal .jwshb-rv-summary {
    display: block;
    padding-bottom: 24px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-cl);
    border-radius: 0;
}

.jwshb-rv--modal .jwshb-rv-summary>*,
.jwshb-rv--modal .jwshb-rv-summary__details>* {
    padding: 0;
    border: 0;
}

.jwshb-rv--modal .jwshb-rv-summary__details {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 32px;
}

.jwshb-rv--modal .jwshb-rv-summary .jwshb-rv-eyebrow {
    display: none;
}

.jwshb-rv--modal .jwshb-rv-summary__score {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 14px;
    margin-bottom: 24px;
}

/* the stars repeat what the chip says */
.jwshb-rv--modal .jwshb-rv-summary__score>:not(.jwshb-rv-summary__number):not(.jwshb-rv-summary__label):not(.jwshb-rv-summary__count):not(.jwshb-rv-summary__trust) {
    display: none;
}

.jwshb-rv--modal .jwshb-rv-summary__number {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    background: var(--third);
    border-radius: 5px;
    font-size: var(--fs-medium2);
    font-weight: bold;
    color: var(--light);
}

.jwshb-rv--modal .jwshb-rv-summary__label {
    grid-column: 2;
    grid-row: 1;
    font-weight: 500;
    line-height: 1.3;
}

.jwshb-rv--modal .jwshb-rv-summary__count {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-small2);
    line-height: 1.3;
}

.jwshb-rv--modal .jwshb-rv-summary__trust {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    padding: 0;
    border: 0;
}

/* spread on the left, categories on the right (the reverse of source order) */
.jwshb-rv--modal .jwshb-rv-summary__dist {
    grid-column: 1;
    grid-row: 1;
    padding-right: 32px;
    border-right: 1px solid var(--border-cl);
}

.jwshb-rv--modal .jwshb-rv-summary__cats {
    grid-column: 2;
    grid-row: 1;
}

.jwshb-rv--modal .jwshb-rv-dist__row {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
}

.jwshb-rv--modal .jwshb-rv-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 18px 28px;
}

.jwshb-rv--modal .jwshb-rv-bar__label,
.jwshb-rv--modal .jwshb-rv-bar__value {
    font-weight: 500;
    color: var(--heading);
}



@container (max-width: 760px) {
    .jwshb-rv--modal .jwshb-rv-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* stack: chip, spread, categories */
@container (max-width: 560px) {
    .jwshb-rv--modal .jwshb-rv-summary__details {
        grid-template-columns: minmax(0, 1fr);
    }

    .jwshb-rv--modal .jwshb-rv-summary__cats {
        grid-column: 1;
        grid-row: 2;
    }

    .jwshb-rv--modal .jwshb-rv-summary__trust {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 12px;
    }

    .jwshb-rv--modal .jwshb-rv-summary__dist {
        margin-bottom: 20px;
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid var(--border-cl);
    }
}

@container (max-width: 360px) {
    .jwshb-rv--modal .jwshb-rv-bars {
        grid-template-columns: minmax(0, 1fr);
    }
}

.jwshb-rv--modal .jwshb-rv-filters {
    border: 0;
}

/* pinned to the top of the panel while it scrolls; pulled up into the
   panel's 24px padding so nothing shows above it once stuck */
.jwshb-rv--modal .jwshb-rv-filters__head {
    padding: 10px 0 10px;
    background: var(--background-body);
}

.jwshb-rv--modal .jwshb-rv-filters__group,
.jwshb-rv--modal .jwshb-rv-toggle {
    padding-inline: 0;
}

/* ── write-a-review form ──────────────────────────────────────── */

.jwshb-rv-form {
    width: min(1040px, 100%);
    /* the whole sheet scrolls — an inner scroll panel left an empty strip
       under the footer whenever the dialog was taller than the panel. */
    overflow: hidden auto;
}

.jwshb-rv-form .jwshb-rv-form__head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.jwshb-rv-form .jwshb-rv-form__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.jwshb-rv-form__titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jwshb-rv-form__title {
    margin: 0;
}

.jwshb-rv-form__stay {
    margin: 0;
    color: var(--heading);
}

.jwshb-rv-form__hint {
    margin: 0;
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-form__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    background: var(--secondary);
}

.jwshb-rv-form__two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.jwshb-rv-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 24px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 10px;
}

.jwshb-rv-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-medium);
    color: var(--heading);
}

.jwshb-rv-card__title--liked .jwshb-rv-icon {
    color: var(--e-a-color-success);
}

.jwshb-rv-card__title--disliked .jwshb-rv-icon {
    color: var(--border-cl2);
}

.jwshb-rv-card__optional {
    color: var(--body);
}

.jwshb-rv-card__hint {
    margin: 0;
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-card__foot {
    display: flex;
    justify-content: flex-end;
}

.jwshb-rv-counter {
    font-size: var(--fs-small2);
    color: var(--body3);
}

.jwshb-rv-card textarea,
.jwshb-rv-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    font-family: inherit;
    font-size: var(--fs-small);
    line-height: 1.75;
    color: var(--heading);
    resize: vertical;
}

.jwshb-rv-card textarea:focus,
.jwshb-rv-input:focus {
    outline: none;
    border-color: var(--heading);
}

.jwshb-rv-card--overall {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jwshb-rv-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jwshb-rv-rate__star,
.jwshb-rv-rate__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--border-cl2);
}

/* The rate widget picks the stay's score: outline until chosen, solid after. */
.jwshb-rv-rate__star .jwshb-rv-icon:before {
    content: '\e812';
}

.jwshb-rv-rate__star.is-on .jwshb-rv-icon:before,
.jwshb-rv-rate__star.is-hover .jwshb-rv-icon:before {
    content: '\e813';
}

.jwshb-rv-rate__star.is-on {
    color: var(--main);
}

.jwshb-rv-rate__star.is-hover {
    color: var(--border-cl2);
}

.jwshb-rv-rate__dot {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-cl2);
    border-radius: 50%;
}

.jwshb-rv-rate__dot.is-on {
    background: var(--third);
    border-color: var(--third);
}

.jwshb-rv-rate__dot.is-hover {
    border-color: var(--heading);
}

.jwshb-rv-rate__read {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 10px;
    min-width: 96px;
}

.jwshb-rv-rate__value {
    font-family: var(--font2);
    font-size: var(--fs-medium2);
    color: var(--heading);
}

.jwshb-rv-rate__label {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 40px;
}

.jwshb-rv-cats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-cl);
}

.jwshb-rv-cats__label {
    color: var(--heading);
}

.jwshb-rv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jwshb-rv-chip-radio {
    position: relative;
}

.jwshb-rv-chip-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.jwshb-rv-chip-radio span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--border-cl2);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--heading);
    text-transform: capitalize;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.jwshb-rv-chip-radio input:checked+span {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-upload {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jwshb-rv-upload__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 18px;
    background: var(--secondary);
    border: 1px dashed var(--border-cl2);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.jwshb-rv-upload__drop:hover,
.jwshb-rv-upload__drop:focus-within,
.jwshb-rv-upload.is-dragging .jwshb-rv-upload__drop {
    border-color: var(--main);
    background: var(--background-body);
}

/* kept in the layout so it stays keyboard reachable */
.jwshb-rv-upload__drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.jwshb-rv-upload__drop .jwshb-rv-icon {
    color: var(--main);
}

.jwshb-rv-upload__lead {
    font-size: var(--fs-small);
    color: var(--heading);
}

.jwshb-rv-upload__hint {
    font-size: var(--fs-small2);
    color: var(--body3);
}

.jwshb-rv-upload__previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}

/* photos the review already carries, shown while it is being rewritten */
.jwshb-rv-upload__kept {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}

.jwshb-rv-upload__kept-item {
    position: relative;
    overflow: hidden;
    background: var(--secondary);
    border: 1px solid var(--border-cl);
    border-radius: 8px;
}

.jwshb-rv-upload__kept-item img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.jwshb-rv-upload__drop-photo {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 50%;
    color: var(--heading);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.jwshb-rv-upload__drop-photo:hover {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-upload__previews:empty {
    display: none;
}

.jwshb-rv-upload__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--secondary);
    border: 1px solid var(--border-cl);
    border-radius: 8px;
}

.jwshb-rv-upload__thumb {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.jwshb-rv-upload__name {
    display: block;
    overflow: hidden;
    padding: 6px 8px;
    font-size: var(--fs-small2);
    color: var(--body);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jwshb-rv-upload__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 50%;
    color: var(--heading);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.jwshb-rv-upload__remove:hover {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--background-body);
}

.jwshb-rv-upload__status {
    margin: 0;
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-upload__status:empty {
    display: none;
}

.jwshb-rv-upload__status.is-error {
    color: var(--e-a-color-danger);
}

.jwshb-rv-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.jwshb-rv-identity__fields {
    display: flex;
    gap: 12px;
    flex: 1 1 320px;
}

.jwshb-rv-identity .jwshb-rv-toggle {
    padding: 0;
}

.jwshb-rv-form__locked {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 28px;
    text-align: center;
    color: var(--body);
}

.jwshb-rv-form__locked .jwshb-rv-icon {
    color: var(--e-a-color-success);
}

.jwshb-rv-form__locked p {
    margin: 0;
    max-width: 52ch;
}

.jwshb-rv-form__locked-title {
    font-weight: 700;
    color: var(--heading);
    font-size: var(--fs-medium2);
    line-height: var(--fh-medium);
}

.jwshb-rv-form__locked-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* A guest who may rewrite their review gets both halves in the page: the panel
   that says one exists, and the filled-in fields. Only one shows at a time —
   "Edit your review" adds .is-editing and they swap. */
.jwshb-rv-form--editable:not(.is-editing) .jwshb-rv-form__body,
.jwshb-rv-form--editable:not(.is-editing) .jwshb-rv-form__foot {
    display: none;
}

.jwshb-rv-form--editable.is-editing .jwshb-rv-form__locked {
    display: none;
}

/* the review this guest already wrote */
.jwshb-rv-mine {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--secondary);
    border: 1px solid var(--border-cl);
    border-radius: 8px;
    text-align: left;
}

.jwshb-rv-mine__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jwshb-rv-mine__text strong {
    font-weight: 500;
    color: var(--heading);
}

.jwshb-rv-mine__text time {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    flex: none;
    padding: 18px 28px;
    background: var(--background-body);
    border-top: 1px solid var(--border-cl);
}

.jwshb-rv-form__note {
    margin: 0;
    max-width: 56ch;
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-form__submit {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* sits in the pinned footer, so it is read without scrolling */
.jwshb-rv-form__message {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 100%;
    padding: 12px 14px;
    border-left: 3px solid var(--border-cl2);
    background: var(--secondary);
    font-size: var(--fs-small2);
    color: var(--heading);
}

.jwshb-rv-form__message:empty {
    display: none;
}

.jwshb-rv-form__message.is-busy {
    border-left-color: var(--main);
    color: var(--body);
}

.jwshb-rv-form__message.is-success {
    border-left-color: var(--e-a-color-success);
    color: var(--e-a-color-success);
}

.jwshb-rv-form__message.is-error {
    border-left-color: var(--e-a-color-danger);
    color: var(--e-a-color-danger);
}

/* the field the message is about */
.jwshb-rv-card.is-invalid {
    border-color: var(--e-a-color-danger);
}

.jwshb-rv-check--consent.is-invalid {
    flex-wrap: wrap;
}

.jwshb-rv-check--consent.is-invalid .jwshb-rv-check__box {
    border-color: var(--e-a-color-danger);
}

.jwshb-rv-error {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: var(--fs-small2);
    color: var(--e-a-color-danger);
}

.jwshb-rv-card--overall .jwshb-rv-error {
    flex: 1 0 100%;
    margin-top: 0;
}

.jwshb-rv-form.is-sending {
    opacity: .6;
    pointer-events: none;
}

/* after a successful send only the confirmation is left standing */
.jwshb-rv-form.is-sent .jwshb-rv-form__body,
.jwshb-rv-form.is-sent .jwshb-rv-form__note,
.jwshb-rv-form.is-sent .jwshb-rv-form__submit {
    display: none;
}

.jwshb-rv-form.is-sent .jwshb-rv-form__foot {
    border-top: 0;
}

.jwshb-rv-form.is-sent .jwshb-rv-form__message {
    padding: 22px 20px;
    font-size: var(--fs-small);
}

/* ── section highlights: topic shortcuts + quote slider ───────── */

.jwshb-rv-highlights {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.jwshb-rv-highlights__group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.jwshb-rv-highlights__title {
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--heading);
}

.jwshb-rv-slider__viewport {
    position: relative;
}

.jwshb-rv-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.jwshb-rv-slider__track::-webkit-scrollbar {
    display: none;
}

.jwshb-rv-quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
    padding: 18px;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 8px;
    scroll-snap-align: start;
}

.jwshb-rv-quote__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.jwshb-rv-quote__head .jwshb-rv-avatar {
    width: 36px;
    height: 36px;
}

.jwshb-rv-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main);
    color: var(--btn-color);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1;
}

.jwshb-rv-quote__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.jwshb-rv-quote__name {
    overflow: hidden;
    font-weight: 500;
    color: var(--heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jwshb-rv-quote__country {
    font-size: var(--fs-small2);
    color: var(--body);
}

.jwshb-rv-quote__text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--heading);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.jwshb-rv-quote__more {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-small);
    color: var(--main);
    cursor: pointer;
}

.jwshb-rv-quote__more:hover {
    color: var(--heading);
    text-decoration: underline;
}

.jwshb-rv-slider__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--background-body);
    border: 1px solid var(--border-cl);
    border-radius: 50%;
    color: var(--heading);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--heading) 14%, transparent);
    transform: translateY(-50%);
    cursor: pointer;
}

.jwshb-rv-slider__btn:hover {
    border-color: var(--heading);
}

.jwshb-rv-slider__btn[hidden] {
    display: none;
}

.jwshb-rv-slider__btn--prev {
    left: -20px;
}

.jwshb-rv-slider__btn--next {
    right: -20px;
}

.jwshb-rv-slider__btn--prev .jwshb-rv-icon {
    transform: rotate(90deg);
}

.jwshb-rv-slider__btn--next .jwshb-rv-icon {
    transform: rotate(-90deg);
}

/* the review a "Read more" link jumped to, inside the modal */
.jwshb-rv-item.is-focus {
    border-color: var(--main);
    box-shadow: 0 0 0 1px var(--main);
}

/* ── responsive ───────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .jwshb-rv-summary {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .jwshb-rv-summary__dist {
        grid-column: span 2;
        border-top: 1px solid var(--border-cl);
    }

    .jwshb-rv-summary__cats {
        border-right: 0;
    }

    .jwshb-rv__body {
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 24px;
    }

    .jwshb-rv-slider__btn--prev {
        left: 6px;
    }

    .jwshb-rv-slider__btn--next {
        right: 6px;
    }
}

@media (max-width: 1024px) {
    .jwshb-rv--modal .jwshb-rv__body {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .jwshb-rv--modal .jwshb-rv-filters__head {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .jwshb-rv--modal .jwshb-rv__main {
        overflow: visible;
    }

    .jwshb-rv-modal__dialog {
        overflow-y: auto;
    }

    /* the whole dialog scrolls here, so pin the head (title + close) */
    .jwshb-rv-modal__head {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    /* hidden while the filters panel is open: its own controls sit right
       under the head, and the close button is an easy mis-tap. The panel
       closes from the X in its own head (Esc still closes the modal). */
    .jwshb-rv-modal__dialog:has(.is-filters-open) .jwshb-rv-modal__head {
        display: none;
    }

    /* filters slide in over the whole screen, opened from the list bar.
       Fixed rather than absolute: absolute made it as tall as the list, so
       the dialog scrolled instead of the panel and its head could not pin.
       Slid with `left`, not a transform: a transformed scroll container
       stops the sticky head from pinning. */
    .jwshb-rv--modal .jwshb-rv__side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: 100%;
        z-index: 5;
        border-right: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: left .25s ease;
    }

    .jwshb-rv--modal.is-filters-open .jwshb-rv__side {
        left: 0;
    }

    .jwshb-rv--modal .jwshb-rv-filters-toggle,
    .jwshb-rv--modal .jwshb-rv-filters__close {
        display: inline-flex;
    }
}

@media (max-width: 991px) {
    .jwshb-rv__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .jwshb-rv-filters-toggle {
        display: inline-flex;
    }

    .jwshb-rv:not(.jwshb-rv--modal) .jwshb-rv__side {
        display: none;
    }

    .jwshb-rv:not(.jwshb-rv--modal).is-filters-open .jwshb-rv__side {
        display: block;
    }

    .jwshb-rv:not(.jwshb-rv--modal) .jwshb-rv-filters__close {
        display: inline-flex;
    }

    .jwshb-rv-slider__track {
        grid-auto-columns: calc((100% - 16px) / 2);
    }

    .jwshb-rv-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .jwshb-rv-summary>*,
    .jwshb-rv-summary__details>* {
        border-right: 0;
        border-bottom: 1px solid var(--border-cl);
    }

    .jwshb-rv-summary__dist {
        grid-column: auto;
        border-bottom: 0;
    }

    .jwshb-rv-form__two,
    .jwshb-rv-cats {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .jwshb-rv-item {
        padding: 18px;
    }

    /* no room beside the filters button and the count; "Most relevant" stays */
    .jwshb-rv-list__count {
        display: none;
    }

    .jwshb-rv-slider__track {
        grid-auto-columns: 85%;
    }

    .jwshb-rv-quote {
        min-height: 200px;
    }

    .jwshb-rv__head,
    .jwshb-rv__summary {
        margin-bottom: 18px;
    }

    .jwshb-rv-modal,
    .jwshb-rv-form-wrap {
        padding: 0;
    }

    .jwshb-rv-modal__dialog,
    .jwshb-rv-form {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
    }

    .jwshb-rv-modal__head,
    .jwshb-rv-form__head {
        padding: 16px 18px;
    }

    .jwshb-rv-modal__tools .jwshb-rv-btn {
        display: none;
    }

    .jwshb-rv-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
    }

    /* Two columns this narrow wrap the longer labels ("Value for
       money"), which pushed that cell's track below its neighbour's.
       Stretch the cells and pin the track to the bottom so every
       track in a row keeps one line. */
    .jwshb-rv-bars .jwshb-rv-bar {
        height: 100%;
        justify-content: space-between;
    }

    /* touch sizes for the two controls a reader taps most here */
    .jwshb-rv-tag {
        min-height: 40px;
    }

    .jwshb-rv-quote__more {
        padding-block: 9px;
    }

    .jwshb-rv-summary>*,
    .jwshb-rv-summary__details>* {
        padding: 20px 18px;
    }

    .jwshb-rv-summary__number {
        font-size: 46px;
    }

    /* the score opens the details (reviews.js adds .is-open) */
    .jwshb-rv-summary__score {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .jwshb-rv-summary:not(.is-open) .jwshb-rv-summary__details {
        display: none;
    }

    .jwshb-rv-summary:not(.is-open) .jwshb-rv-summary__score {
        border-bottom: 0;
    }

    /* jws-icon-caret-down after the review count: the hint to tap */
    .jwshb-rv-summary__caret {
        display: inline-block;
        margin-left: 4px;
        font-size: 12px;
        line-height: 1;
        vertical-align: middle;
        color: var(--heading);
        transition: transform .2s ease;
    }

    .jwshb-rv-summary.is-open .jwshb-rv-summary__caret {
        transform: rotate(180deg);
    }

    .jwshb-rv--modal .jwshb-rv-summary:not(.is-open) .jwshb-rv-summary__score {
        margin-bottom: 0;
    }

    .jwshb-rv-item__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .jwshb-rv-photo {
        width: calc(33.333% - 6px);
        height: 74px;
    }

    .jwshb-rv-card--overall {
        flex-direction: column;
        align-items: flex-start;
    }

    .jwshb-rv-rate--lg {
        justify-content: space-between;
        width: 100%;
    }

    .jwshb-rv-form__body {
        padding: 18px;
    }

    .jwshb-rv-form__foot {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
    }

    .jwshb-rv-form__submit {
        flex-direction: column-reverse;
    }

    .jwshb-rv-form__submit .jwshb-rv-btn {
        width: 100%;
    }
}

@media (max-width: 479px) {

    /* ~145px a column: not enough for a category name and its score
       on one line, so give each its own row. */
    .jwshb-rv-bars {
        grid-template-columns: minmax(0, 1fr);
    }
}