/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 24:9 Expected identifier but found "%"
Line 25:10 Unexpected "<"
Line 27:19 Unexpected "{"
Line 27:26 Expected ":"
Line 27:48 Unexpected "<"
Line 29:9 Expected identifier but found "%"
Line 30:6 Unexpected "<"
Line 111:0 Unexpected "<"
Line 115:7 Expected ":"
... and 7 more hidden warnings

**/
<section class="shop-concerns">
  <div class="page-width">
    <h2 class="section-title">Shop by Concerns</h2>

    <div class="slider-wrapper">
      <button class="nav-arrow left" onclick="scrollConcerns(-1)">❮</button>

      <div class="concerns-container" id="concernsContainer">
        {% for block in section.blocks %}
          <a href="{{ block.settings.link }}" class="concern-card">
            <img src="{{ block.settings.image | img_url: '600x' }}" alt="">
            <span>{{ block.settings.title }} →</span>
          </a>
        {% endfor %}
      </div>

      <button class="nav-arrow right" onclick="scrollConcerns(1)">❯</button>
    </div>
  </div>
</section>

<style>
.shop-concerns {
  padding: 40px 0;
}

.section-title {
  font-size: 28px;
  margin-bottom: 20px;
}

.slider-wrapper {
  position: relative;
}

.concerns-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.concerns-container::-webkit-scrollbar {
  display: none;
}

.concern-card {
  min-width: 240px;
  flex-shrink: 0;
  text-decoration: none;
  color: #000;
}

.concern-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.concern-card span {
  display: block;
  margin-top: 10px;
  font-weight: 500;
}

.nav-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 2;
}

.nav-arrow.left {
  left: -15px;
}

.nav-arrow.right {
  right: -15px;
}

@media (max-width: 768px) {
  .nav-arrow {
    display: none;
  }
}
</style>

<script>
function scrollConcerns(direction) {
  const container = document.getElementById('concernsContainer');
  container.scrollBy({
    left: direction * 300,
    behavior: 'smooth'
  });
}
</script>

{% schema %}
{
  "name": "Shop by Concerns",
  "blocks": [
    {
      "type": "concern",
      "name": "Concern Item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Shop by Concerns"
    }
  ]
}
{% endschema %}