/* ==========================================================================
   Widget 04 — Customer Reviews (v2)
   v1 → v2：居中标题 + 居中 tab + 居中箭头 → 左标题 / 右 tab / 右下箭头。
   Tab 选中态从"金色渐变实心胶囊"改成"下划线"，胶囊+渐变是模板信号。
   ★ 结构不变：一层 repeater，tab 由「平台」字段自动去重生成（免费版不能嵌套）
   控件：小标题 / 标题 / 总评分 / 总条数 / 评价(repeater) / 是否显示tab / 卡片宽度
   ========================================================================== */

.hpb-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--hpb-line);
}

/* 总评分：一行小字，不做成方框徽章 */
.hpb-ratingbar {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.hpb-ratingbar__score {
  font-family: var(--hpb-font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--hpb-champagne);
  line-height: 1;
}
.hpb-ratingbar__meta {
  font-size: var(--hpb-fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hpb-text-faint);
}
.hpb-ratingbar .hpb-stars { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Tab：下划线式
   -------------------------------------------------------------------------- */
.hpb-tabs { display: flex; flex-wrap: wrap; gap: 1.75rem; }

.hpb-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0 0.7rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--hpb-text-faint);
  font-size: var(--hpb-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--hpb-dur) var(--hpb-ease),
              border-color var(--hpb-dur) var(--hpb-ease);
}
.hpb-tab svg { width: 14px; height: 14px; }
.hpb-tab:hover { color: var(--hpb-text); }
.hpb-tab[aria-selected="true"] {
  color: var(--hpb-champagne);
  border-bottom-color: var(--hpb-brass);
}

/* --------------------------------------------------------------------------
   评价轨道
   -------------------------------------------------------------------------- */
.hpb-revwrap { position: relative; }

.hpb-revtrack {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--hpb-gutter) * -1);
  padding-inline: var(--hpb-gutter);
  scrollbar-width: none;
}
.hpb-revtrack::-webkit-scrollbar { display: none; }
.hpb-revpanel[hidden] { display: none; }

.hpb-revcard {
  flex: 0 0 clamp(280px, 30%, 370px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.85rem;
  background: var(--hpb-surface);
  border: 1px solid var(--hpb-line-soft);
  transition: border-color var(--hpb-dur) var(--hpb-ease),
              background-color var(--hpb-dur) var(--hpb-ease);
}
.hpb-revcard:hover { border-color: var(--hpb-line-strong); background: var(--hpb-surface-2); }

/* 引号装饰：衬线大引号，比图标更有质感 */
.hpb-revcard__quote {
  font-family: var(--hpb-font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--hpb-brass-dim);
  margin-bottom: 1.1rem;
}

.hpb-revcard__text {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--hpb-text);
}

.hpb-revcard__foot {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hpb-line-soft);
}

.hpb-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--hpb-line-strong);
  font-family: var(--hpb-font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hpb-brass);
}

.hpb-revcard__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hpb-revcard__date { font-size: var(--hpb-fs-2xs); color: var(--hpb-text-faint); }

.hpb-revcard__src { margin-left: auto; flex: none; color: var(--hpb-text-faint); }
.hpb-revcard__src svg { width: 15px; height: 15px; }

.hpb-stars { color: var(--hpb-brass); letter-spacing: 0.14em; line-height: 1; }

/* --------------------------------------------------------------------------
   箭头：方形细边，靠右
   -------------------------------------------------------------------------- */
.hpb-revnav { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 2rem; }

.hpb-arrow {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: transparent;
  color: var(--hpb-champagne);
  border: 1px solid var(--hpb-line-strong);
  border-radius: var(--hpb-radius);
  cursor: pointer;
  transition: background-color var(--hpb-dur) var(--hpb-ease),
              border-color var(--hpb-dur) var(--hpb-ease),
              opacity var(--hpb-dur) var(--hpb-ease);
}
.hpb-arrow:hover { background: rgba(193, 162, 101, 0.08); border-color: var(--hpb-brass); }
.hpb-arrow[disabled] { opacity: 0.22; cursor: default; }
.hpb-arrow svg { width: 15px; height: 15px; }

@media (max-width: 820px) {
  .hpb-reviews__head { flex-direction: column; align-items: stretch; gap: 1.75rem; }
}
@media (max-width: 620px) {
  .hpb-revcard { flex-basis: 84%; }
}