/* ============================================================
   Judge.me — theme styling
   ------------------------------------------------------------
   The Judge.me Core app embed injects its own markup into every
   .jdgm-preview-badge / .jdgm-review-widget div. These rules pull
   that markup back to the look the old Reviews.io rating-snippet
   had: amber (#B8520A) stars, compact inline layout, our fonts.

   Star colour is ALSO settable in Judge.me → Settings → Widget;
   we force it here so the theme stays the source of truth.
   ============================================================ */

/* ── Keep the rating placeholder alive while it's empty ──────
   base.css ships `div:empty { display: none }`. Our rating div starts empty
   (JS fills it), so that rule hides it — and a display:none element has no
   layout box, so IntersectionObserver never fires and the fetch never runs:
   a deadlock where the badge stays empty forever.

   Force a box. Specificity (0,2,0) beats `div:empty` (0,1,1) so this wins
   without !important. An empty flex row with no children takes ~0 space, so
   there's no visual placeholder before the stars land. */
.sks-prod-card__reviews[data-sks-rating] {
  display: flex;
}

/* ── Un-hide our deliberately-placed badges ──────────────────
   Judge.me ships this rule when its "Star Rating Badge" widget isn't
   marked installed in their admin (preview_badge_*_install_preference):

     .jdgm-preview-badge[data-template="product"]{display:none!important}
     .jdgm-preview-badge[data-template="collection"]{...}
     .jdgm-preview-badge[data-template="index"]{...}

   Their JS still populates the badge (it stamps data-template on it) — it's
   only hidden. We place these divs on purpose, so re-show them. Scoped to our
   two placements only, and one class deeper than their rule (0,3,0 > 0,2,0)
   so it wins regardless of stylesheet order. */
.sks-det-meta .jdgm-preview-badge[data-template],
.sks-prod-card__reviews .jdgm-preview-badge[data-template] {
  display: inline-flex !important;
}

/* ── Stars: amber, matching the old Reviews.io colour ── */
.jdgm-widget .jdgm-star,
.jdgm-prev-badge .jdgm-star {
  color: #B8520A !important;
}

/* Empty/half stars: same hue, faded (old widget used showEmptyStars:false,
   so faded rather than solid keeps the row visually identical in width). */
.jdgm-widget .jdgm-star.jdgm--off {
  color: rgba(184, 82, 10, 0.28) !important;
}

/* ── Preview badge: compact inline row (stars + count) ── */
.jdgm-prev-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.jdgm-prev-badge__stars {
  display: inline-flex;
  line-height: 1;
}

.jdgm-prev-badge__text {
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  color: #9A9088;
  white-space: nowrap;
}

/* Never render an empty badge (product with no reviews) — the old
   Reviews.io snippet hid itself in this case. */
.jdgm-prev-badge[data-number-of-reviews="0"],
.jdgm-prev-badge[data-number-of-reviews=""] {
  display: none !important;
}

/* ── Product card context ── */
.sks-prod-card__reviews .jdgm-prev-badge__stars {
  font-size: 11px;
}

/* ── PDP context (sits in .sks-det-meta next to the SKU) ──
   Product cards use 11px stars; the product page needs them larger. */
.sks-det-meta .sks-prod-card__reviews {
  gap: 7px;
}

.sks-det-meta .sks-prod-card__stars {
  font-size: 17px;
  gap: 2px;
}

.sks-det-meta .sks-prod-card__rev-count {
  font-size: 13px;
}

/* Jump-to-reviews affordance. The [data-sks-jump] flag is set by
   sks-product-main.js only once the badge has a rating AND a reviews
   section exists to scroll to, so the badge never looks clickable when
   clicking it would do nothing. */
.sks-det-meta [data-sks-jump] {
  cursor: pointer;
}

.sks-det-meta [data-sks-jump] .sks-prod-card__rev-count {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.18s;
}

.sks-det-meta [data-sks-jump]:hover .sks-prod-card__rev-count,
.sks-det-meta [data-sks-jump]:focus-visible .sks-prod-card__rev-count {
  text-decoration-color: currentColor;
}

.sks-det-meta [data-sks-jump]:focus-visible {
  outline: 2px solid #b8520a;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Review widget (full list) — keep it inside our container width
   and use the theme's typography. ── */
.jdgm-review-widget,
.jdgm-all-reviews-widget {
  font-family: 'Jost', sans-serif;
}

.jdgm-widget .jdgm-rev__title,
.jdgm-widget .jdgm-rev-widg__title {
  font-family: 'Playfair Display', Georgia, serif;
  color: #1A1A1A;
}