/* =============================================================================
   reviews-premium.css — product reviews, Release 2 (2026-10-04)

   Linked from themes/hummingbird/modules/productcomments/views/templates/hook/
   product-comments-list.tpl (inside the reviews section), so it loads only where
   that section renders and the release does not touch catalog/product.tpl or
   product-premium.css. Loads after product-premium.css, whose §9 still styles the
   rest of the reviews section (cards, form, empty state, pager).

   Brand tokens only (theme-premium.css :root). Bump ?v= in the template with every
   edit: Cloudflare keeps theme assets for 7 days.
   See project-docs/THEME.md §8 and project-docs/review-audit.md.
   ========================================================================== */

/* ---- 1. No double separation inside the Reviews tab ---------------------
   §9b gives the section a 48px margin, 48px padding and a rule above it, sized
   for when reviews were the last block on the page. Inside the tab panel the tab
   bar is already the boundary, so that left a ~100px gap and a stray line under
   "Reviews". Scoped to the panel: without the tab script (fail-open) the section
   keeps its separation. §9b's margin is !important, hence this one. */
.page-product .sk-tabs__panel .product-comments-wrapper {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}

/* ---- 2. Rating overview: score | breakdown ------------------------------ */
.page-product .sk-rv-overview {
  display: grid;
  gap: var(--sk-4);
  margin: 0 0 var(--sk-5);
  padding: var(--sk-4) var(--sk-4);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-r-md);
  background: var(--sk-surface-2);
}

/* The summary: big score, stars, "Based on N reviews". On a phone the score sits
   left of the stars and the count, so the block costs two short lines. */
.page-product .sk-rv-overview .sk-rv-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "score stars" "score count";
  align-items: center;
  column-gap: var(--sk-4);
  row-gap: 2px;
}

.page-product .sk-rv-overview .sk-rv-summary__line {
  grid-area: score;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.page-product .sk-rv-overview .sk-rv-summary__score {
  color: var(--sk-ink);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.page-product .sk-rv-overview .sk-rv-summary__of {
  margin: 0;
  color: var(--sk-muted);
  font-size: .875rem;
  white-space: nowrap;
}

.page-product .sk-rv-overview .sk-rv-summary .comments-note {
  grid-area: stars;
}

.page-product .sk-rv-overview .sk-rv-summary__count {
  grid-area: count;
  margin: 0;
  color: var(--sk-muted);
  font-size: .875rem;
}

/* The breakdown: "5★ | bar | count | %", five rows, 5 stars first. */
.page-product .sk-rv-dist {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-product .sk-rv-dist__row {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem 2.75rem;
  align-items: center;
  column-gap: var(--sk-3);
  color: var(--sk-muted);
  font-size: .8125rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.page-product .sk-rv-dist__label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sk-ink);
  font-weight: 600;
}

.page-product .sk-rv-dist__star {
  flex: none;
  color: var(--sk-star);
}

/* Same colours as the stars beside it: gold for given, the empty-star tone for
   the rest of the track. */
.page-product .sk-rv-dist__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sk-star-off);
}

.page-product .sk-rv-dist__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sk-star);
}

.page-product .sk-rv-dist__count {
  color: var(--sk-ink);
  text-align: right;
}

.page-product .sk-rv-dist__pct {
  text-align: right;
}

/* Screen-reader sentence per row ("5 stars: 1 review, 100 percent"). The visible
   pieces are aria-hidden. Declared here as well in case the theme's
   .visually-hidden is ever renamed. */
.page-product .sk-rv-dist .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- 3. Tablet and up: score left, breakdown right ---------------------- */
@media (min-width: 768px) {
  /* The box hugs its two columns instead of running the full width with an
     empty half on the right. */
  .page-product .sk-rv-overview {
    grid-template-columns: auto minmax(0, 26rem);
    justify-content: start;
    align-items: center;
    column-gap: var(--sk-7);
    width: fit-content;
    max-width: 100%;
    padding: var(--sk-5) var(--sk-6);
  }

  .page-product .sk-rv-overview .sk-rv-summary {
    grid-template-columns: auto;
    grid-template-areas: "score" "stars" "count";
    justify-items: start;
    row-gap: var(--sk-2);
  }

  .page-product .sk-rv-overview .sk-rv-summary__score {
    font-size: 2.75rem;
  }
}