/** Shopify CDN: Minification failed

Line 8:0 Unexpected "<"
Line 71:49 Expected identifier but found "*"
Line 77:0 Unexpected "<"

**/
<div class="rating-wrapper">
  <div class="rating" role="img" aria-label="5.0 out of 5.0 stars">
    <span aria-hidden="true" class="rating-star" style="--rating: 5; --rating-max: 5.0; --rating-decimal: 0;"></span>
  </div>
  <p class="rating-text caption">
    <!-- Hidden -->
    <span aria-hidden="true">5.0 / 5.0</span>
  </p>
  <p class="rating-count caption">
    <span aria-hidden="true">(1)</span>
    <span class="visually-hidden">1 total reviews</span>
  </p>
</div>

<style>
  /* Make the wrapper a flex container to align stars and count side-by-side */
  .rating-wrapper {
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
  }

  .rating {
    display: inline-flex;
    align-items: center;
  }

  /* Star styling */
  .rating-star {
    --color-rating-star: #ECAB02;
    /* --letter-spacing: 0.3; */
    --font-size: 2.5; /* Adjust size as needed */
    letter-spacing: calc(var(--letter-spacing) * 1rem);
    /* font-size: calc(var(--font-size) * 1rem); */
    line-height: 1;
    display: inline-block;
    font-family: Arial, sans-serif;
    margin: 0;
    vertical-align: middle;
  }
  
  .rating-star::before {
    content: '★★★★★';
    background: linear-gradient(
      90deg,
      var(--color-rating-star) calc(var(--rating) / var(--rating-max) * 100%),
      rgba(255,215,0,0.3) calc(var(--rating) / var(--rating-max) * 100%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
  }

  /* Hide the rating-text entirely */
  .rating-text {
    display: none;
  }

  /* Style and align the rating count */
  .rating-count {
    display: inline-block;
    /* font-size: 1.5rem; /* Adjust as needed */ */
    line-height: 1;
    /* vertical-align: middle; */
    margin: 0;
    padding: 0;
  }
</style>