/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'component-card.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-price.css'"
Line 18:0 Unexpected "{"
Line 18:1 Unexpected "{"
Line 18:3 Expected identifier but found "'component-rating.css'"
Line 20:0 Unexpected "{"
... and 81 more hidden warnings

**/
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  @media screen and (max-width: 749px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top_mobile }}px;
      padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
    }
  }

  .pairs-well-with-section .slider-wrapper {
    position: relative;
  }

  .pairs-well-with-section .slider-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    padding-bottom: 1.5rem; /* Space for scrollbar if it appears */
  }

  .pairs-well-with-section .slider-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }

  .pairs-well-with-section .slide {
    flex: 0 0 50%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  @media screen and (min-width: 750px) {
    .pairs-well-with-section .slide {
      flex-basis: calc(100% / 3); /* 3 items on desktop */
    }
  }

  @media screen and (min-width: 990px) {
    .pairs-well-with-section .slide {
      flex-basis: calc(100% / {{ section.settings.columns_desktop }});
    }
  }

  .pairs-well-with-section .card--simple .card__content {
    padding: 1rem 0;
    text-align: left;
  }

  .pairs-well-with-section .card--simple .card__heading {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
  }

  .pairs-well-with-section .card--simple .price {
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }

  .pairs-well-with-section .rating {
    margin-top: 0.5rem;
  }
  
  .pairs-well-with__heading {
    margin-bottom: 2.5rem;
    text-align: left;
  }

  .slider-button {
    display: none; /* Hidden on mobile */
  }

  @media screen and (min-width: 750px) {
    .slider-button {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid #e0e0e0;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 10;
    }
    .slider-button--prev {
      left: -20px;
    }
    .slider-button--next {
      right: -20px;
    }
  }

{%- endstyle -%}

<div class="pairs-well-with-section section-{{ section.id }}-padding">
  <div class="page-width">
    {% if section.settings.heading != blank %}
      <h2 class="h2 pairs-well-with__heading">{{ section.settings.heading | escape }}</h2>
    {% endif %}
    
    <div class="slider-wrapper">
      <div class="slider-container" id="Slider-{{ section.id }}">
        {%- for product in section.settings.products -%}
          <div class="slide">
            <div class="card-wrapper">
              <div class="card card--simple">
                <a href="{{ product.url }}">
                  <div class="card__media">
                    <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.featured_image.alt | escape }}" loading="lazy">
                  </div>
                </a>
                <div class="card__content">
                  <h3 class="card__heading">
                    <a href="{{ product.url }}">{{ product.title }}</a>
                  </h3>
                  {% render 'price', product: product %}
                  {%- if section.settings.show_rating and product.metafields.reviews.rating.value != blank -%}
                    <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                      <span aria-hidden="true" class="rating-star" style="--rating: {{ product.metafields.reviews.rating.value.rating }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ product.metafields.reviews.rating.value.rating | modulo: 1 }};"></span>
                    </div>
                    <span class="rating-text caption">
                      ({{ product.metafields.reviews.rating_count }})
                    </span>
                  {%- endif -%}
                </div>
              </div>
            </div>
          </div>
        {%- else -%}
          {%- for i in (1..section.settings.columns_desktop) -%}
            <div class="slide">
              <div class="card-wrapper">
                  <div class="card card--simple card--placeholder">
                      <div class="card__media">
                          {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                      <div class="card__content">
                          <h3 class="card__heading">{{ 'onboarding.product_title' | t }}</h3>
                          <div class="price">
                              <span class="price-item price-item--regular">$0.00</span>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
          {%- endfor -%}
        {%- endfor -%}
      </div>
      
      {%- if section.settings.products.size > section.settings.columns_desktop -%}
      <button type="button" class="slider-button slider-button--prev" aria-label="Previous slide" onclick="slide('Slider-{{ section.id }}', 'prev')">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
      </button>
      <button type="button" class="slider-button slider-button--next" aria-label="Next slide" onclick="slide('Slider-{{ section.id }}', 'next')">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
      </button>
      {%- endif -%}
    </div>
  </div>
</div>

<script>
  function slide(sliderId, direction) {
    const slider = document.getElementById(sliderId);
    const slideWidth = slider.querySelector('.slide').offsetWidth;
    if (direction === 'next') {
      slider.scrollLeft += slideWidth;
    } else {
      slider.scrollLeft -= slideWidth;
    }
  }
</script>

{% schema %}
{
  "name": "Pairs Well With",
  "tag": "section",
  "class": "product-recommendations",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Also Comfy",
      "label": "Heading"
    },
    {
      "type": "product_list",
      "id": "products",
      "label": "Products",
      "limit": 12
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Number of columns on desktop"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": true,
      "label": "Show product rating"
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_top_mobile",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Top padding - mobile",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom_mobile",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Bottom padding - mobile",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Pairs Well With"
    }
  ]
}
{% endschema %}