/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:2 Unexpected "<"
Line 21:31 Unexpected "{"
Line 21:38 Expected ":"
Line 21:41 Unexpected "<"
... and 1 more hidden warnings

**/
{% assign audio_url = product.metafields.custom.audio_sample_10 %}
{% assign title = product.metafields.custom.title_10 %}

{% if audio_url != blank %}
  <div class="sample-track">
    <div class="sample-title">{{ title }}</div>
    <div class="sample-inner">
      <button class="play-button" data-audio="{{ audio_url | file_url }}" data-waveform="waveform10">▶</button>
      <div class="waveform" id="waveform10"></div>
    </div>
  </div>
{% endif %}


.custom-audio-wrapper {
  display: flex;
  gap: var(--container-gap, 40px);
  flex-wrap: wrap;
  margin: 40px auto;
  justify-content: center;
}

.custom-audio-left {
  overflow: hidden;  /* Ensure the image stays within the rounded container */
  border-radius: 20px;  /* Apply rounded corners to the container */
}

.custom-audio-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensure the image covers the entire area of the container */
  display: block;
}

.custom-audio-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 20px;  /* This will give more rounded corners */
}

.custom-audio-heading {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 0px;
}
.custom-audio-subtitle {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.sample-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px;
}

.sample-track {
  background: transparent;
  border: none; /* Border around the player */
  box-shadow: none;
  padding: 2px;
  border-radius: 20px;
}

.sample-title {
  font-size: 14px;
  margin-bottom: 0px;
  text-align: center;
}

.sample-inner {
  display: flex;
  align-items: center;
  gap: 5px;
}

.waveform {
  height: 40px; /* Adjust the height as needed */
  margin: 10px 0;
  border-radius: 4px;
  width: 100%;
  display: block;
}

.play-button {
  font-size: 14px;
  padding: 8px 10px;
  background: transparent;
  color: black;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .custom-audio-wrapper {
    flex-direction: column;
  }

  .sample-wrapper {
    grid-template-columns: 1fr;
  }
}