/** Shopify CDN: Minification failed

Line 11:62 Unexpected "*"
Line 11:92 Unterminated string token
Line 13:93 Unterminated string token
Line 18:97 Unterminated string token
Line 20:97 Unterminated string token
Line 24:90 Unterminated string token

**/
/* Custom restyle of Judge.me's real review widget (jdgm-*/jm-* classes are Judge.me's own).

   IMPORTANT: Judge.me's review_widget renders as a Vue app that replaces its server-rendered
   placeholder HTML the moment its JS runs — verified with a real headless-browser render, not
   just curl (curl only sees the pre-hydration placeholder, which uses different class names
   entirely and is misleading to build CSS against).

   Given that, this file avoids reaching into Judge.me's internal Vue component tree (fragile —
   an app update could rename/restructure it at any time). Instead:
   1. Layout: place our own content and Judge.me's whole widget as two top-level grid columns —
      we never touch what's inside the widget's own DOM.
   2. Color: Judge.me drives its whole palette through CSS custom properties it sets inline
      (--jm-review-widget-button-color etc.) — overriding those variables at a stable outer
      selector is robust because Vue's own style bindings read the *cascaded* value, not a
      snapshot, so our override flows through everywhere the widget uses that variable. */

.judgeme-reviews-tab {
  display: grid;
  grid-template-columns: minmax(24rem, 30rem) 1fr;
  column-gap: 4.8rem;
  row-gap: 1.6rem;
  align-items: start;
}

.judgeme-reviews-tab > .jdgm-rating-tile {
  grid-column: 1;
}

.judgeme-reviews-tab > [data-block-handle] {
  grid-column: 2;
}

.judgeme-reviews-tab .jdgm-rating-tile__label {
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.75);
  margin: 0 0 0.4rem;
}

.judgeme-reviews-tab .jdgm-rating-tile__value {
  font-size: 3.6rem;
  font-weight: 600;
  color: #000000;
  line-height: 1;
}

/* Not part of this design */
.judgeme-reviews-tab [data-block-handle='verified_badge'] {
  display: none !important;
}

/* Judge.me's real color tokens, overridden at the widget root so every internal Vue component
   (stars, histogram, buttons) that reads var(--jm-review-widget-*) picks up our brand color
   instead of Judge.me's default teal. !important is required here because Judge.me sets these
   as an inline style on the widget's own root element, which otherwise always wins. */
#judgeme_product_reviews .jm-review-widget,
#judgeme_product_reviews .jm-box {
  --jm-review-widget-star-and-histogram-color: #997A51 !important;
  --jm-review-widget-button-color: #997A51 !important;
  --jm-review-widget-button-text-color: #ffffff !important;
  --jm-review-widget-form-button-color: #997A51 !important;
  --jm-review-widget-form-button-text-color: #ffffff !important;
  --jm-widget-primary-color: #997A51 !important;
}

@media screen and (max-width: 989px) {
  .judgeme-reviews-tab {
    grid-template-columns: 1fr;
  }
}