/* ==========================================================================
   WV Reviews Section — Static Draft
   --------------------------------------------------------------------------
   Display-only pass: summary bar (heading + aggregate + sort), stacked
   review list, Load More button. Reviews hardcoded in the PHP for this
   pass; YITH Advanced Reviews Premium integration (WC comment query,
   AJAX Load More, sort/filter, schema.org JSON-LD) is a follow-up.
   ========================================================================== */

.wv-reviews-section {
  /* Transparent outer — consumer template owns the backdrop. */
  background: transparent;
  /* NEEDS DESIGNER REVIEW: section vertical padding */
  padding: 80px 0;
  /* Hairline rules top + bottom (desktop and mobile) framing the
     section against neighboring sections. User direction 2026-06-05. */
  border-top: 1px solid var(--wv-color-surface-2);
  border-bottom: 1px solid var(--wv-color-surface-2);
}

.wv-reviews-section__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  /* NEEDS DESIGNER REVIEW: horizontal padding */
  padding: 0 80px;
}

/* ── Summary bar ─────────────────────────────────────────────────── */

.wv-reviews-section__summary {
  /* Mobile-first: single-column stacked. Tablet+ (min-width: 768)
     restores 3-column grid: heading left / aggregate centered /
     sort right. NEEDS DESIGNER REVIEW: column layout + gap. */
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.wv-reviews-section__heading {
  color: var(--wv-color-text-primary);
  margin: 0;
}

.wv-reviews-section__aggregate {
  /* Mobile-first: wrap + left-aligned. Tablet+ unwraps + centers. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.wv-reviews-section__rating {
  color: var(--wv-color-text-primary);
}

.wv-reviews-section__stars,
.wv-reviews-section__review-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.wv-reviews-section__stars img,
.wv-reviews-section__review-stars img {
  /* NEEDS DESIGNER REVIEW: star size */
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.wv-reviews-section__count {
  color: var(--wv-color-text-secondary);
  /* Uppercase on local selector — wv-label-small is not uppercase. */
  text-transform: uppercase;
}

.wv-reviews-section__filters {
  /* Mobile-first: left-aligned (single-column stacking).
     Tablet+ right-aligns within its grid cell. */
  justify-self: start;
}

.wv-reviews-section__sort {
  /* NEEDS DESIGNER REVIEW: sort dropdown styling. Using default select
     render with a subtle pill frame; designer may want custom chevron
     or fully custom dropdown. */
  color: var(--wv-color-text-primary);
  background: transparent;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  padding: 8px 16px;
  cursor: pointer;
}

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

.wv-reviews-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wv-reviews-section__review {
  /* Hairline divider between reviews. */
  border-top: 1px solid var(--wv-color-border);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  /* NEEDS DESIGNER REVIEW: gap between review elements */
  gap: 8px;
}

.wv-reviews-section__review:last-child {
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-reviews-section__review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wv-reviews-section__reviewer {
  color: var(--wv-color-text-primary);
}

.wv-reviews-section__badge {
  /* Verified-buyer pill — olive fill with cream text. NEEDS DESIGNER
     REVIEW: exact padding and pill styling. */
  display: inline-block;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  padding: 4px 12px;
  text-transform: uppercase;
}

.wv-reviews-section__review-title {
  color: var(--wv-color-text-primary);
  margin: 0;
}

.wv-reviews-section__review-body {
  color: var(--wv-color-text-secondary);
  margin: 0;
}

/* ── Load More — mirrors shop's "+ Load More" pattern (2026-06-02) ── */

.wv-reviews-section__load-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.wv-reviews-section__load-more-btn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--wv-transition-base);
}

.wv-reviews-section__load-more-btn svg {
  display: block;
  flex-shrink: 0;
}

.wv-reviews-section__load-more-btn:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-reviews-section__load-more-icon svg {
  width: 35px;
  height: 35px;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .wv-reviews-section__summary {
    grid-template-columns: auto 1fr auto;
    gap: 32px;
  }

  .wv-reviews-section__aggregate {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .wv-reviews-section__filters {
    justify-self: end;
  }
}

/* ==========================================================================
   MOBILE — 1-up swipe carousel (archetype #7)
   --------------------------------------------------------------------------
   Per MOBILE-LAYOUT-DISCIPLINE.md archetype #7 (Carousel): at mobile
   the review list switches from a vertical stack to a horizontal
   1-up swipe track — one review fills the viewport, user swipes
   left/right to advance. Tablet+ restores the vertical stack with
   hairline dividers.

   Load More button still appends to the same list — new reviews
   add to the right of the existing swipe track, the user can swipe
   further to read them. JS untouched.
   ========================================================================== */

.wv-reviews-section__list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar across browsers — swipe is the interaction. */
  scrollbar-width: none;
}

.wv-reviews-section__list::-webkit-scrollbar {
  display: none;
}

.wv-reviews-section__review {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* Drop the vertical-stack hairlines — they don't translate to a
     horizontal carousel. */
  border-top: none;
}

.wv-reviews-section__review:last-child {
  border-bottom: none;
}

/* Load More button hidden at mobile — wv-pdp-reviews.js auto-loads
   the next batch via IntersectionObserver when the user swipes to
   the last review card. User direction 2026-06-05. */
.wv-reviews-section__load-more {
  display: none;
}

@media (min-width: 768px) {
  /* Restore vertical stack with dividers at tablet+. */
  .wv-reviews-section__list {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 0;
  }

  .wv-reviews-section__review {
    flex: revert;
    scroll-snap-align: revert;
    border-top: 1px solid var(--wv-color-border);
  }

  .wv-reviews-section__review:last-child {
    border-bottom: 1px solid var(--wv-color-border);
  }

  /* Load More button visible at tablet+. */
  .wv-reviews-section__load-more {
    display: flex;
  }
}