/** 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 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:12 Unexpected "{"
Line 20:21 Expected ":"
... and 81 more hidden warnings

**/
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.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 .card__description,
  .pairs-well-with-section .card--simple .price {
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }
  
  .pairs-well-with-section .quick-view-button {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.2rem;
    font-size: 1.4rem;
    text-align: center;
    background-color: transparent;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }

  .pairs-well-with-section .quick-view-button:hover {
    background-color: #f0f0f0;
  }
  
  .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>
                  {% if product.metafields.my_fields.bamboo_seamfree != blank %}
                  <p class="card__description">{{ product.metafields.my_fields.bamboo_seamfree }}</p>
                  {% endif %}
                  {% render 'price', product: product %}
                  <button type="button" class="quick-view-button">Quick View</button>
                </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>
                          <p class="card__description">Product description</p>
                          <div class="price">
                              <span class="price-item price-item--regular">$0.00</span>
                          </div>
                           <button type="button" class="quick-view-button">Quick View</button>
                      </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": "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 %}