/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 74:0 Unexpected "<"

**/
<div class="customer-reviews-section">
  <h2 class="section-title">What Our Customers Are Saying</h2>

  <div class="review-item">
    <div class="review-label">💖 98% say our products improved their daily life</div>
    <div class="progress-bar">
      <div class="progress" data-percentage="98">0%</div>
    </div>
  </div>

  <div class="review-item">
    <div class="review-label">✨ 95% would recommend us to a friend</div>
    <div class="progress-bar">
      <div class="progress" data-percentage="95">0%</div>
    </div>
  </div>

  <div class="review-item">
    <div class="review-label">🌟 97% rated us 5 stars</div>
    <div class="progress-bar">
      <div class="progress" data-percentage="97">0%</div>
    </div>
  </div>
</div>

<style>
.customer-reviews-section {
  max-width: 600px;
  margin: 40px auto;
  font-family: inherit;
  text-align: left;
}

.customer-reviews-section .section-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

.review-item {
  margin-bottom: 25px;
}

.review-label {
  font-size: 16px;
  margin-bottom: 6px;
}

.progress-bar {
  background-color: #eee;
  border-radius: 20px;
  overflow: hidden;
  height: 20px;
}

.progress {
  background-color: #ffb6c1; /* Light pink to match your palette */
  height: 100%;
  width: 0;
  line-height: 20px;
  text-align: right;
  padding-right: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  transition: width 1.5s ease-out;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const progressBars = document.querySelectorAll('.progress');

  function animateProgress() {
    progressBars.forEach(bar => {
      const rect = bar.getBoundingClientRect();
      const inView = rect.top < window.innerHeight && rect.bottom > 0;
      if (inView && !bar.classList.contains('filled')) {
        let percentage = parseInt(bar.dataset.percentage);
        let count = 0;
        let counter = setInterval(() => {
          if (count <= percentage) {
            bar.textContent = count + '%';
            bar.style.width = count + '%';
            count++;
          } else {
            clearInterval(counter);
          }
        }, 15);
        bar.classList.add('filled');
      }
    });
  }

  window.addEventListener('scroll', animateProgress);
  animateProgress();
});
</script>