/*
 * Product reviews — section + write modal.
 *
 * Scoped entirely under .fs-rv / .fs-rv-modal so nothing here can reach the
 * rest of the storefront. Colours are custom properties with literal fallbacks,
 * so a merchant can retheme the section from custom.css without touching this
 * file, and the section still renders if the properties are never set.
 *
 * Star colours are deliberately NOT set here: the markup reuses the theme's own
 * .rating-stars, so the merchant's rating colour settings keep applying.
 */

/* Several blocks below set display:flex/grid, which outranks the UA rule for
   the [hidden] attribute — a "hidden" pending banner or load-error panel would
   render anyway. Every toggle in this component is the hidden attribute, so it
   is enforced once, here. */
.fs-rv [hidden],
.fs-rv-modal [hidden] {
  display: none !important;
}

/* Carries nothing but the state reviews.js reads when a product has no review
   section to hang it on. Belt and braces over the hidden attribute, which the
   theme's display rules outrank often enough that it is not worth trusting. */
.fs-rv--headless {
  display: none !important;
}

.fs-rv {
  /* --j-surface*: a converted theme's scheme colours (core ColorSchemes); unset everywhere else, so the
     literal applies. Muted text keeps its own grey: it reads on light and dark cards alike, where a scheme's
     muted colour can be too light for text (plan 14 §13.9). The write modal keeps its own white panel. */
  --fs-rv-line: var(--j-surface-line, rgba(0, 0, 0, .1));
  --fs-rv-muted: #767676;
  --fs-rv-surface: rgba(0, 0, 0, .025);
  --fs-rv-accent: #238CD2;
  --fs-rv-danger: #b02a24;
  --fs-rv-radius: 6px;

  margin: 0 0 10px;
}

/* ----------------------------------------------------------------- pending */

.fs-rv__pending {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px dashed #d9a441;
  background: rgba(217, 164, 65, .09);
  border-radius: var(--fs-rv-radius);
  font-size: 13px;
  line-height: 1.5;
}

.fs-rv__pending b {
  display: block;
  margin-bottom: 2px;
}

/* ----------------------------------------------------------------- summary */

.fs-rv__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv__score {
  text-align: center;
  min-width: 110px;
}

.fs-rv__score-value {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fs-rv__score .rating {
  justify-content: center;
  margin: 6px 0 0;
}

.fs-rv__score-count {
  font-size: 12px;
  color: var(--fs-rv-muted);
  margin-top: 4px;
}

.fs-rv__bars {
  flex: 1 1 240px;
  display: grid;
  gap: 4px;
  min-width: 200px;
  /* Capped: on a full-width product layout the bars would otherwise run the
     whole container and the distribution becomes unreadable as a shape. */
  max-width: 360px;
}

.fs-rv__bar-row {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  gap: 8px;
  align-items: center;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 12px;
  color: var(--fs-rv-muted);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.fs-rv__bar-row:hover .fs-rv__bar,
.fs-rv__bar-row.is-on .fs-rv__bar {
  background: rgba(0, 0, 0, .12);
}

.fs-rv__bar-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fs-rv__bar {
  height: 7px;
  border-radius: 100px;
  background: var(--fs-rv-surface);
  overflow: hidden;
}

.fs-rv__bar > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: currentColor;
  opacity: .55;
}

.fs-rv__bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fs-rv__cta {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: center;
}

.fs-rv__cta-hint {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-top: 6px;
}

/* -------------------------------------------------------------- photostrip */

.fs-rv__photostrip {
  padding: 16px 0;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv__photostrip-title {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------------- filters */

.fs-rv__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 16px 0;
}

.fs-rv__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid var(--fs-rv-line);
  background: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.fs-rv__chip-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}

/* The theme sets `.fa-star { color: gold }`. Left alone, the glyph reads as a
   second rating display sitting inside a filter control; `inherit` at two
   classes outranks it and folds the star into the chip's own colour. */
.fs-rv__chip .fa {
  font-size: 11px;
  color: inherit;
}

.fs-rv__chip-count {
  font-weight: 600;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

.fs-rv__chip:hover {
  border-color: var(--fs-rv-accent);
  color: var(--fs-rv-accent);
}

/* Painted explicitly. This used to be `background: currentColor` with the same
   token as `color`, so the fill and the text were literally the same colour:
   only the children that were force-set to white survived, and the chip's own
   label ("All", or the rating digit) rendered invisible against it. */
.fs-rv__chip.is-on {
  background: var(--fs-rv-accent);
  border-color: var(--fs-rv-accent);
  color: #fff;
}

.fs-rv__chip.is-on .fs-rv__chip-count {
  opacity: .75;
}

.fs-rv__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fs-rv__sort {
  margin-bottom: 0;
  font-weight: 400;
}

.fs-rv__sort select {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--fs-rv-radius);
  border: 1px solid var(--fs-rv-line);
  background: none;
  color: inherit;
}

/* List / grid switcher. Painted explicitly in every state for the same reason
   as .fs-rv__chip.is-on: fill and icon must never resolve to one colour. */
.fs-rv__views {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
}

.fs-rv__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--fs-rv-muted);
  cursor: pointer;
}

.fs-rv__view svg {
  display: block;
  fill: currentColor;
}

.fs-rv__view:hover,
.fs-rv__view:focus {
  background: none;
  color: var(--fs-rv-accent);
}

.fs-rv__view.is-on,
.fs-rv__view.is-on:hover,
.fs-rv__view.is-on:focus {
  background: var(--fs-rv-accent);
  color: #fff;
}

.fs-rv__view:focus-visible {
  outline: 2px solid var(--fs-rv-accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------- cards */

.fs-rv__list.is-busy {
  opacity: .7;
}

.fs-rv__cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fs-rv__card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__card.is-highlighted {
  background: rgba(35, 140, 210, .07);
  box-shadow: 0 0 0 8px rgba(35, 140, 210, .07);
  border-radius: var(--fs-rv-radius);
}

.fs-rv__avatar {
  width: 38px;
  height: 38px;
  border-radius: 100px;
  background: var(--fs-rv-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
}

/* The list shows one letter, a grid card two (see the grid block below). */
.fs-rv__initials {
  display: none;
}

.fs-rv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.fs-rv__author {
  font-weight: 600;
}

/* The star row moves to the top of the card. It used to render below the
   review body and below the photos, which is last place for the one thing a
   shopper scans for. */
.fs-rv__head .rating {
  margin: 0;
}

/* Switched-off reviews — rendered only for a signed-in admin (see
   ModelCatalogReview::canSeeDisabledReviews). A small amber pill beside the author,
   and the text dimmed, so the merchant can tell at a glance what shoppers don't see. */
.fs-rv__disabled {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.fs-rv__card--disabled .fs-rv__text,
.fs-rv__card--disabled .fs-rv__thumbs {
  opacity: .7;
}

.fs-rv__admin-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed #fcd34d;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}

.fs-rv__date {
  margin-left: auto;
  font-size: 12px;
  color: var(--fs-rv-muted);
  font-variant-numeric: tabular-nums;
}

.fs-rv__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fs-rv__text.is-short,
.fs-rv__text.is-expanded {
  display: block;
  overflow: visible;
}

.fs-rv__more {
  background: none;
  border: 0;
  padding: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-rv-accent);
  cursor: pointer;
}

.fs-rv__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.fs-rv__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--fs-rv-radius);
  overflow: hidden;
  border: 1px solid var(--fs-rv-line);
  background: var(--fs-rv-surface);
}

.fs-rv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-rv__thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-rv-muted);
  cursor: pointer;
}

/* --------------------------------------------------------------- skeletons */

/* Placeholder rows mirror the card grid but carry their own class, so nothing
   counting .fs-rv__card ever sees them. */
.fs-rv__skel-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--fs-rv-line);
  pointer-events: none;
}

@media (max-width: 600px) {
  .fs-rv__skel-card {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }
}

.fs-rv__skel {
  display: block;
  height: 11px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: var(--fs-rv-surface);
  animation: fs-rv-pulse 1.4s ease-in-out infinite;
}

@keyframes fs-rv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-rv__skel { animation: none; }
}

/* ------------------------------------------------------------ empty states */

.fs-rv__empty {
  text-align: center;
  padding: 36px 16px;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__empty h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.fs-rv__empty p {
  font-size: 13px;
  color: var(--fs-rv-muted);
  max-width: 38ch;
  margin: 0 auto 16px;
}

.fs-rv__empty-glyph {
  opacity: .28;
  margin-bottom: 10px;
}

.fs-rv__empty-glyph .rating {
  justify-content: center;
}

.fs-rv__notice {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--fs-rv-radius);
  background: var(--fs-rv-surface);
  font-size: 13px;
}

/* --------------------------------------------------------- foot / failures */

.fs-rv__foot {
  text-align: center;
  padding: 18px 0 4px;
  border-top: 1px solid var(--fs-rv-line);
}

.fs-rv__showing {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.fs-rv__loaderror {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  font-size: 13px;
}

/* The legacy pagination links are only for the old .load() path — the section
   pages with its own button. */
.fs-rv .fs-rv__legacy-pagination {
  display: none;
}

/* ------------------------------------------------------------------ button */

.fs-rv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--fs-rv-radius);
  border: 1px solid var(--fs-rv-accent);
  background: var(--fs-rv-accent);
  color: #fff;
  cursor: pointer;
}

.fs-rv__btn:hover,
.fs-rv__btn:focus {
  color: #fff;
  filter: brightness(.94);
}

.fs-rv__btn--ghost {
  background: none;
  color: var(--fs-rv-accent);
}

.fs-rv__btn--ghost:hover,
.fs-rv__btn--ghost:focus {
  color: var(--fs-rv-accent);
}

.fs-rv__btn--block {
  display: flex;
  width: 100%;
  margin-top: 8px;
}

.fs-rv__btn.is-loading {
  opacity: .65;
  pointer-events: none;
}

/* ================================================================== modal */

.fs-rv-modal-source {
  display: none;
}

.popup-wrapper.popup-review .popup-container {
  width: 460px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 8px;
}

/* The theme's own close button is absolutely positioned over the container's
   top-right corner and swallows clicks meant for the modal's header close.
   This popup carries its own labelled close in the header, so the theme's is
   hidden rather than fought with. journal.js still closes via the backdrop,
   which is what [data-rv-close] triggers. */
.popup-wrapper.popup-review > .popup-container > .popup-close {
  display: none;
}

.fs-rv-modal {
  --fs-rv-line: rgba(0, 0, 0, .1);
  --fs-rv-muted: #767676;
  --fs-rv-accent: #238CD2;
  --fs-rv-danger: #b02a24;
  --fs-rv-radius: 6px;

  text-align: left;
  font-size: 14px;
}

.fs-rv-modal__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--fs-rv-line);
}

.fs-rv-modal__img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--fs-rv-radius);
  overflow: hidden;
  border: 1px solid var(--fs-rv-line);
}

.fs-rv-modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-rv-modal__title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
}

.fs-rv-modal__product {
  font-size: 12px;
  color: var(--fs-rv-muted);
}

.fs-rv-modal__x {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--fs-rv-muted);
  cursor: pointer;
  padding: 0 2px;
}

.fs-rv-modal__body {
  padding: 16px 18px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.fs-rv-modal__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid var(--fs-rv-line);
  background: rgba(0, 0, 0, .02);
}

.fs-rv-modal__hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--fs-rv-muted);
}

.fs-rv-modal__hint.is-error {
  color: var(--fs-rv-danger);
  font-weight: 600;
}

/* Panes. Exactly one is visible at a time, driven by data-rv-state. */
.fs-rv-modal [data-rv-pane] { display: none; }
.fs-rv-modal[data-rv-state="form"] [data-rv-pane="form"] { display: block; }
.fs-rv-modal[data-rv-state="gate"] [data-rv-pane="gate"] { display: block; }
.fs-rv-modal[data-rv-state="done"] [data-rv-pane="done"] { display: block; }

/* ------------------------------------------------------------------ fields */

.fs-rv-field {
  margin-bottom: 16px;
}

.fs-rv-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.fs-rv-req {
  color: var(--fs-rv-danger);
}

.fs-rv-optional {
  font-weight: 400;
  color: var(--fs-rv-muted);
}

.fs-rv-input {
  width: 100%;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

textarea.fs-rv-input {
  min-height: 92px;
  resize: vertical;
}

.fs-rv-field.has-error .fs-rv-input {
  border-color: var(--fs-rv-danger);
  background: rgba(176, 42, 36, .04);
}

.fs-rv-error {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fs-rv-danger);
  margin-top: 5px;
}

.fs-rv-error--form {
  margin-top: 0;
  padding: 10px 12px;
  border-radius: var(--fs-rv-radius);
  background: rgba(176, 42, 36, .07);
}

.fs-rv-counter {
  font-size: 11px;
  color: var(--fs-rv-muted);
  text-align: right;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.fs-rv-note {
  font-size: 11px;
  color: var(--fs-rv-muted);
  margin-top: 2px;
}

/* ------------------------------------------------------------------- stars */

/* Rebuilt as buttons. The previous control was radio inputs with
   text-indent: 9999px inside a direction: rtl wrapper, which had no accessible
   name and inverted a second time inside an already-RTL document. */
.fs-rv-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fs-rv-star {
  background: none;
  border: 0;
  padding: 2px;
  font-size: 26px;
  line-height: 1;
  color: rgba(0, 0, 0, .18);
  cursor: pointer;
}

/* The theme sets `.fa-star { color: gold }`, so the icon has its own colour
   declaration and never inherits the button's. Two classes outrank that one,
   and `inherit` then routes every state below through the button. */
.fs-rv-star .fa {
  color: inherit;
}

.fs-rv-star.is-on,
.fs-rv-star.is-hover {
  color: #f0b429;
}

.fs-rv-star:focus-visible {
  outline: 2px solid var(--fs-rv-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.fs-rv-stars__label {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-rv-accent);
}

.fs-rv-field.has-error .fs-rv-star {
  color: rgba(176, 42, 36, .45);
}

/* ------------------------------------------------------------------ photos */

.fs-rv-dropzone {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px dashed var(--fs-rv-line);
  border-radius: var(--fs-rv-radius);
  background: none;
  color: var(--fs-rv-muted);
  font-size: 12.5px;
  cursor: pointer;
}

.fs-rv-dropzone:hover {
  border-color: var(--fs-rv-accent);
}

.fs-rv-dropzone b {
  color: var(--fs-rv-accent);
}

.fs-rv-uppy .uppy-Dashboard-inner {
  border-radius: var(--fs-rv-radius);
}

/* ----------------------------------------------------------------- captcha */

.fs-rv-field--captcha .form-group {
  margin-bottom: 0;
}

.fs-rv-captcha img {
  max-width: 100%;
  border-radius: var(--fs-rv-radius);
}

/* -------------------------------------------------------------- gate/done */

.fs-rv-modal__gate,
.fs-rv-modal__done {
  padding: 22px 18px 20px;
  text-align: center;
}

.fs-rv-modal__gate p {
  font-size: 13.5px;
  margin: 0 0 14px;
}

.fs-rv-modal__tick {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--fs-rv-accent);
  background: rgba(35, 140, 210, .12);
}

.fs-rv-modal__done h5 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.fs-rv-modal__done p {
  font-size: 13px;
  color: var(--fs-rv-muted);
  max-width: 34ch;
  margin: 0 auto 16px;
}

/* The photo upload is a second request the shopper used to never see. */
.fs-rv-upload {
  max-width: 280px;
  margin: 0 auto 16px;
  text-align: left;
}

.fs-rv-upload__label {
  font-size: 11.5px;
  color: var(--fs-rv-muted);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.fs-rv-upload__bar {
  height: 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}

.fs-rv-upload__bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fs-rv-accent);
  transition: width .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .fs-rv-upload__bar > i { transition: none; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 600px) {
  .fs-rv__summary {
    gap: 16px;
  }

  .fs-rv__score {
    flex: 1 1 100%;
    text-align: left;
  }

  .fs-rv__score .rating,
  .fs-rv__empty-glyph .rating {
    justify-content: flex-start;
  }

  .fs-rv__cta {
    flex: 1 1 100%;
    text-align: left;
  }

  .fs-rv__tools {
    margin-left: 0;
    width: 100%;
  }

  .fs-rv__sort {
    flex: 1 1 auto;
  }

  .fs-rv__sort select {
    width: 100%;
  }

  .fs-rv__card {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

  .fs-rv__date {
    margin-left: 0;
    flex: 1 1 100%;
  }

  .fs-rv-modal__body {
    max-height: calc(100vh - 220px);
  }
}

/* RTL: the layout mirrors from the document direction alone. Nothing here
   flips a second time, which is what the old star control did. */
[dir="rtl"] .fs-rv__date,
[dir="rtl"] .fs-rv__tools,
[dir="rtl"] .fs-rv__cta {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .fs-rv-modal,
[dir="rtl"] .fs-rv-dropzone {
  text-align: right;
}

[dir="rtl"] .fs-rv-modal__x {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .fs-rv-stars__label {
  margin-left: 0;
  margin-right: 8px;
}

/* ==================================================================== grid */

/* Everything below is scoped to .fs-rv--grid and sits LAST in the file: the
   card reuses the list's markup and has to outrank the list's responsive and
   RTL rules at equal specificity. RTL needs nothing of its own here — grid
   columns already follow the document direction. */

.fs-rv--grid {
  --fs-rv-card-bg: var(--j-surface, #fff);
  --fs-rv-card-radius: 14px;
  --fs-rv-card-gap: 16px;
}

.fs-rv--grid .fs-rv__list {
  padding-top: 18px;
}

/* The filters row already carries its own bottom padding. */
.fs-rv--grid .fs-rv__filters ~ .fs-rv__list {
  padding-top: 2px;
}

/* Fluid columns, but never more than three: the minimum track is at least a
   third of the row, so a wide full-width product layout still gets cards and
   not a strip of narrow tiles. The first declaration is the fallback for
   browsers without max(). */
.fs-rv--grid .fs-rv__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 2 * var(--fs-rv-card-gap)) / 3)), 1fr));
  gap: var(--fs-rv-card-gap);
}

/* A load-more appends skeletons as a second list; keep it off the one above.
   `~`, not `+`: the hidden legacy pagination sits between the two. */
.fs-rv--grid .fs-rv__cards ~ .fs-rv__cards {
  margin-top: var(--fs-rv-card-gap);
}

/* Header row: avatar · name · date, then stars, text and photos full width.
   The list's body and head wrappers are dissolved so their children can sit
   on the card's own grid. */
.fs-rv--grid .fs-rv__card,
.fs-rv--grid .fs-rv__skel-card {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 12px;
  row-gap: 0;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--fs-rv-line);
  border-radius: var(--fs-rv-card-radius);
  background: var(--fs-rv-card-bg);
}

.fs-rv--grid .fs-rv__skel-card {
  grid-template-columns: 44px minmax(0, 1fr);
}

.fs-rv--grid .fs-rv__card .fs-rv__body,
.fs-rv--grid .fs-rv__card .fs-rv__head {
  display: contents;
}

.fs-rv--grid .fs-rv__card.is-highlighted {
  border-color: var(--fs-rv-accent);
  box-shadow: 0 0 0 3px rgba(35, 140, 210, .18);
}

.fs-rv--grid .fs-rv__avatar {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  font-size: 15px;
  letter-spacing: .02em;
  color: #fff;
  background: #6b7280;
}

.fs-rv--grid .fs-rv__initial {
  display: none;
}

.fs-rv--grid .fs-rv__initials {
  display: inline;
}

/* One tone per author, chosen server-side from the name. White initials on
   each of these stay legible; they are decorative (aria-hidden) either way. */
.fs-rv--grid .fs-rv__avatar[data-tone="0"] { background: #d9653b; }
.fs-rv--grid .fs-rv__avatar[data-tone="1"] { background: #3f7fae; }
.fs-rv--grid .fs-rv__avatar[data-tone="2"] { background: #3a9a6b; }
.fs-rv--grid .fs-rv__avatar[data-tone="3"] { background: #7048d8; }
.fs-rv--grid .fs-rv__avatar[data-tone="4"] { background: #c4477f; }
.fs-rv--grid .fs-rv__avatar[data-tone="5"] { background: #b7791f; }
.fs-rv--grid .fs-rv__avatar[data-tone="6"] { background: #2f8f9d; }
.fs-rv--grid .fs-rv__avatar[data-tone="7"] { background: #5561c9; }

.fs-rv--grid .fs-rv__skel-card .fs-rv__avatar {
  background: var(--fs-rv-surface);
}

.fs-rv--grid .fs-rv__author {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fs-rv--grid .fs-rv__date {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.fs-rv--grid .fs-rv__head .rating {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 14px 0 0;
}

/* The admin-only "Disabled" pill. With the head dissolved it is a card grid item
   like its siblings, and without a placement it auto-placed into the first free
   cell — the 44px avatar column — where a grid item stretches to the track, so
   the pill's background was 44px wide and its nowrap label ran out past it.
   Its own full-width row under the stars, shrunk to its label; allowed to wrap
   rather than overflow on a card narrower than the label. */
.fs-rv--grid .fs-rv__disabled {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  margin-top: 10px;
  white-space: normal;
}

.fs-rv--grid .fs-rv__text,
.fs-rv--grid .fs-rv__more,
.fs-rv--grid .fs-rv__thumbs {
  grid-column: 1 / -1;
}

.fs-rv--grid .fs-rv__text {
  margin-top: 10px;
  line-height: 1.6;
}

.fs-rv--grid .fs-rv__more {
  justify-self: start;
}

.fs-rv--grid .fs-rv__skel-card .fs-rv__body {
  align-self: center;
}

.fs-rv--grid .fs-rv__foot {
  margin-top: 18px;
}

@media (max-width: 600px) {
  .fs-rv--grid .fs-rv__card {
    padding: 16px;
  }
}