.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.reviews__summary { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.reviews__average { font-weight: 600; font-variant-numeric: tabular-nums; }
.reviews__count { color: var(--ink-faint); font-size: var(--step--1); }

.reviews__nav { display: flex; gap: var(--s-2); flex-shrink: 0; }
.reviews__btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line-firm);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.reviews__btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-wash); }
.reviews__btn:disabled { opacity: 0.35; cursor: default; }
.reviews__btn span[aria-hidden] {
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink);
  border-top: 1.8px solid var(--ink);
}
[data-reviews-prev] span[aria-hidden] { transform: rotate(-135deg); margin-left: 3px; }
[data-reviews-next] span[aria-hidden] { transform: rotate(45deg); margin-right: 3px; }

.reviews__viewport { overflow: hidden; }
.reviews__track {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.35s var(--ease);
}

.review {
  flex: 0 0 calc((100% - var(--s-5) * 2) / 3);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
}
.review__body {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: var(--track-tight);
}
.review__meta {
  display: grid;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.review__name { font-weight: 600; font-size: var(--step-0); }
.review__role, .review__detail { font-size: var(--step--1); color: var(--ink-faint); }
.review__stars { margin-bottom: var(--s-2); }

/* Stars. Drawn in CSS so there is no icon font and no image request. */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star { width: 15px; height: 15px; position: relative; display: block; }
.star::before,
.star__fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star { color: var(--line-firm); }
.star__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #c9962b;
}

.reviews__dots { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); }
.reviews__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-firm);
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.reviews__dot:hover { background: var(--ink-faint); }
.reviews__dot.is-active { background: var(--accent); transform: scale(1.3); }

@media (max-width: 980px) {
  .review { flex-basis: calc((100% - var(--s-5)) / 2); }
}
@media (max-width: 700px) {
  .review { flex-basis: 100%; padding: var(--s-5); }
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .reviews__nav { align-self: flex-end; }
}