/* Load after styles.css. All rules stay within the review enhancement. */
.review-carousel {
  --reviews-per-view: 3;
  --review-gap: 38px;
  --review-card-size: calc((100vw - 2 * var(--gutter, 24px) - 2 * var(--review-gap)) / 3);
  min-width: 0;
}
.review-carousel :focus-visible { outline: 2px solid #743922; outline-offset: 4px; }
.review-carousel .review-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  padding: 4px 0 18px;
  scrollbar-width: thin;
  scrollbar-color: #8b785c transparent;
  scroll-behavior: auto;
  direction: ltr;
}
.review-carousel[data-review-state="running"] .review-viewport { scrollbar-color: transparent transparent; }
/* Only explicit browsing snaps. Visibility, keyboard-focus and hover changes
   retain their exact position, so entering/leaving the loop cannot jump. */
.review-carousel[data-review-state="paused"][data-review-browse="true"] .review-viewport {
  scroll-snap-type: x mandatory;
}
.review-carousel .review-viewport::-webkit-scrollbar { height: 7px; }
.review-carousel .review-viewport::-webkit-scrollbar-track { background: transparent; }
.review-carousel .review-viewport::-webkit-scrollbar-thumb { background: #8b785c; }
.review-carousel[data-review-state="running"] .review-viewport::-webkit-scrollbar-thumb { background: transparent; }
.review-carousel .review-track,
.review-carousel .review-set {
  display: flex;
  align-items: stretch;
  gap: var(--review-gap);
  width: max-content;
  min-width: 0;
}
.review-carousel .review-set { flex: 0 0 auto; }
.review-carousel[data-review-state="running"] .review-track { will-change: transform; }
.review-carousel .customer-review {
  width: var(--review-card-size);
  flex: 0 0 var(--review-card-size);
  min-width: 0;
  margin: 0;
  padding: 25px 4px 7px;
  border-top: 1px solid #a89577;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.review-carousel .customer-review blockquote {
  font-family: var(--display, 'Arial Narrow', Arial, sans-serif);
  font-size: clamp(27px, 2.3vw, 33px);
  font-weight: 600;
  line-height: 1.16;
  margin: 19px 0 27px;
  max-width: 30ch;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.review-carousel .customer-review figcaption { margin-top: auto; }
.review-carousel .customer-review figcaption > a {
  line-height: 1.5;
  padding: 4px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 150ms ease-out;
}
.review-carousel .customer-review figcaption > a:active { color: #743922; }
.review-carousel .review-stars { white-space: nowrap; }
/* Keep the quote at full width; the customer's photo sits beside their credit. */
.review-carousel .has-review-photo figcaption {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.review-carousel .review-credit {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.review-carousel .review-credit > span { color: #636251; font-size: 13px; }
.review-carousel .review-credit > a {
  margin-top: 10px;
  border-bottom: 1px solid #a08e70;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 150ms ease-out;
}
.review-carousel .customer-review figcaption > .review-photo {
  flex: 0 0 90px;
  width: 90px;
  margin: 0;
  padding: 4px;
  border: 1px solid #a89577;
  background: #e6dcc8;
  line-height: 0;
}
.review-carousel .review-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 112px;
  object-fit: contain;
}
.review-carousel .review-credit > a:active { color: #743922; }

@media (hover: hover) and (pointer: fine) {
  .review-carousel .customer-review figcaption > a:hover,
  .review-carousel .review-credit > a:hover { color: #743922; }
  .review-carousel .review-photo:hover { border-color: #743922; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .review-carousel {
    --reviews-per-view: 2;
    --review-gap: 28px;
    --review-card-size: calc((100vw - 2 * var(--gutter, 24px) - var(--review-gap)) / 2);
  }
}
@media (max-width: 760px) {
  .review-carousel {
    --reviews-per-view: 1;
    --review-gap: 24px;
    --review-card-size: calc(100vw - 2 * var(--gutter, 23px));
  }
  .review-carousel .customer-review { padding-top: 23px; }
  .review-carousel .customer-review blockquote { font-size: 32px; line-height: 1.14; }
}