{%- comment -%} MW · Shoppable Slider — horizontal product carousel with quick add. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --sh-bg:{{ section.settings.section_bg }}; --sh-head:{{ section.settings.heading_color }}; --sh-accent:{{ section.settings.accent_color }}; --sh-accent2:{{ section.settings.accent_color_2 }}; --sh-sub:{{ section.settings.sub_color }}; --sh-card:{{ section.settings.card_bg }}; --sh-title:{{ section.settings.title_color }}; --sh-price:{{ section.settings.price_color }}; --sh-btn:{{ section.settings.button_bg }}; --sh-btntx:{{ section.settings.button_text }}; }
  .sh-{{ uid }}{ background:var(--sh-bg); padding:{{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; }
  .sh-{{ uid }} .sh__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; max-width:{{ section.settings.max_width }}px; margin:0 auto clamp(20px,3vw,32px); padding:0 {{ section.settings.side_padding }}px; }
  .sh-{{ uid }} .sh__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,32px); color:var(--sh-head); margin:0; line-height:1.12; }
  .sh-{{ uid }} .sh__h .ac{ color:var(--sh-accent); background:linear-gradient(99deg,var(--sh-accent) 0%,var(--sh-accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .sh-{{ uid }} .sh__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--sh-sub); margin:8px 0 0; }
  .sh-{{ uid }} .sh__nav{ display:flex; gap:8px; flex:none; }
  .sh-{{ uid }} .sh__nav button{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--mw-line,#E5DCCB); cursor:pointer; color:var(--sh-head); display:flex; align-items:center; justify-content:center; }
  .sh-{{ uid }} .sh__nav svg{ width:19px; height:19px; }
  .sh-{{ uid }} .sh__track{ display:flex; gap:{{ section.settings.gap }}px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px {{ section.settings.side_padding }}px; scrollbar-width:none; }
  .sh-{{ uid }} .sh__track::-webkit-scrollbar{ display:none; }
  .sh-{{ uid }} .sh__card{ flex:0 0 {{ section.settings.card_width }}px; max-width:78vw; scroll-snap-align:start; background:var(--sh-card); border-radius:{{ section.settings.card_radius }}px; overflow:hidden; position:relative; }
  .sh-{{ uid }} .sh__im{ display:block; width:100%; aspect-ratio:{{ section.settings.image_ratio }}; overflow:hidden; background:var(--mw-gold-tint,#e9dec9); }
  .sh-{{ uid }} .sh__im img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
  .sh-{{ uid }} .sh__card:hover .sh__im img{ transform:scale(1.04); }
  .sh-{{ uid }} .sh__info{ padding:13px 15px 16px; }
  .sh-{{ uid }} .sh__t{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:14px; color:var(--sh-title); margin:0 0 6px; text-decoration:none; display:block; }
  .sh-{{ uid }} .sh__pr{ display:flex; align-items:center; gap:8px; }
  .sh-{{ uid }} .sh__p{ font-weight:600; font-size:14px; color:var(--sh-price); }
  .sh-{{ uid }} .sh__c{ font-size:12.5px; color:#A89C8B; text-decoration:line-through; }
  .sh-{{ uid }} .sh__add{ width:100%; margin-top:12px; border:0; border-radius:6px; padding:11px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:13px; letter-spacing:.03em; text-transform:uppercase; background:linear-gradient(99deg,var(--sh-btn),color-mix(in srgb,var(--sh-btn),#fff 16%)); color:var(--sh-btntx); cursor:pointer; transition:filter .18s; }
  .sh-{{ uid }} .sh__add:hover{ filter:brightness(1.07); }
  @media (max-width:640px){ .sh-{{ uid }} .sh__nav{ display:none; } }
{% endstyle %}
{%- assign products = section.settings.collection.products -%}
<div class="sh-{{ uid }}" id="sh-{{ uid }}">
  <div class="sh__head">
    <div>
      {%- if section.settings.heading != blank -%}<h2 class="sh__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="sh__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
    </div>
    <div class="sh__nav"><button data-prev aria-label="Previous">{% render 'mw-icon', name: 'arrow-left' %}</button><button data-next aria-label="Next">{% render 'mw-icon', name: 'arrow-right' %}</button></div>
  </div>
  <div class="sh__track" data-track>
    {%- if products.size > 0 -%}
      {%- for product in products limit: section.settings.limit -%}
        <div class="sh__card">
          <a class="sh__im" href="{{ product.url }}">{% render 'mw-image', image: product.featured_image, alt: product.title, width: 500 %}</a>
          <div class="sh__info">
            <a class="sh__t" href="{{ product.url }}">{{ product.title | escape }}</a>
            <div class="sh__pr"><span class="sh__p">{{ product.price | money }}</span>{%- if product.compare_at_price > product.price -%}<span class="sh__c">{{ product.compare_at_price | money }}</span>{%- endif -%}</div>
            {%- if section.settings.show_add -%}
            <form method="post" action="{{ routes.cart_add_url }}">
              <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
              <button type="submit" class="sh__add"{% unless product.available %} disabled{% endunless %}>{% if product.available %}{{ section.settings.add_label | escape }}{% else %}Sold out{% endif %}</button>
            </form>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    {%- else -%}
      {%- for block in section.blocks -%}
        <div class="sh__card" {{ block.shopify_attributes }}>
          <a class="sh__im" href="{{ block.settings.url | default: '#' }}">{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, alt: block.settings.title, width: 500 %}</a>
          <div class="sh__info">
            <a class="sh__t" href="{{ block.settings.url | default: '#' }}">{{ block.settings.title | escape }}</a>
            <div class="sh__pr"><span class="sh__p">{{ block.settings.price | escape }}</span>{%- if block.settings.compare != blank -%}<span class="sh__c">{{ block.settings.compare | escape }}</span>{%- endif -%}</div>
            {%- if section.settings.show_add -%}<button type="button" class="sh__add">{{ section.settings.add_label | escape }}</button>{%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    {%- endif -%}
  </div>
</div>
<script>
(function(){var r=document.getElementById('sh-{{ uid }}');if(!r)return;var t=r.querySelector('[data-track]');
function step(d){var c=t.querySelector('.sh__card');var g=parseInt(getComputedStyle(t).columnGap)||18;var w=c?c.offsetWidth+g:280;t.scrollBy({left:d*w,behavior:'smooth'});}
r.querySelector('[data-prev]').addEventListener('click',function(){step(-1)});r.querySelector('[data-next]').addEventListener('click',function(){step(1)});})();
</script>
{% schema %}
{
  "name": "MW · Shoppable Slider",
  "tag": "section",
  "class": "mw-section mw-shoppable-slider",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "Shop the <span class=\"ac\">edit</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "Everything cut from the same yarn." },
    { "type": "collection", "id": "collection", "label": "Products from collection" },
    { "type": "range", "id": "limit", "min": 3, "max": 16, "step": 1, "label": "Max products", "default": 10 },
    { "type": "checkbox", "id": "show_add", "label": "Show quick-add button", "default": true },
    { "type": "text", "id": "add_label", "label": "Quick-add label", "default": "Add to cart" },
    { "type": "range", "id": "card_width", "min": 200, "max": 340, "step": 10, "unit": "px", "label": "Card width", "default": 260 },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "3/4", "options": [ {"value":"3/4","label":"3:4"}, {"value":"1/1","label":"Square"}, {"value":"4/5","label":"4:5"} ] },
    { "type": "range", "id": "card_radius", "min": 0, "max": 20, "step": 1, "unit": "px", "label": "Card radius", "default": 10 },
    { "type": "range", "id": "gap", "min": 8, "max": 32, "step": 2, "unit": "px", "label": "Gap", "default": 16 },
    { "type": "range", "id": "max_width", "min": 900, "max": 1400, "step": 10, "unit": "px", "label": "Header width", "default": 1250 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 64 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 64 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 80, "step": 2, "unit": "px", "label": "Side padding", "default": 40 },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n7" },
    { "type": "font_picker", "id": "body_font", "label": "Body font", "default": "inter_n4" },
    { "type": "color", "id": "section_bg", "label": "Background", "default": "#F4EEE9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#1A1A1A" },
    { "type": "color", "id": "accent_color", "label": "Accent (gradient start)", "default": "#B79B6E" },
    { "type": "color", "id": "accent_color_2", "label": "Accent (gradient end)", "default": "#D6C19E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" },
    { "type": "color", "id": "card_bg", "label": "Card", "default": "#FBF8F3" },
    { "type": "color", "id": "title_color", "label": "Title", "default": "#241C15" },
    { "type": "color", "id": "price_color", "label": "Price", "default": "#3A3027" },
    { "type": "color", "id": "button_bg", "label": "Add button", "default": "#3A3027" },
    { "type": "color", "id": "button_text", "label": "Add button text", "default": "#F3ECE1" }
  ],
  "blocks": [
    { "type": "product", "name": "Manual product", "settings": [
      { "type": "image_picker", "id": "image", "label": "Image" },
      { "type": "text", "id": "image_url", "label": "…or image URL" },
      { "type": "text", "id": "title", "label": "Title", "default": "Product title" },
      { "type": "text", "id": "price", "label": "Price", "default": "$29.95" },
      { "type": "text", "id": "compare", "label": "Compare price", "default": "$59.95" },
      { "type": "url", "id": "url", "label": "Link" }
    ] }
  ],
  "max_blocks": 16,
  "presets": [ { "name": "MW · Shoppable Slider", "blocks": [
    { "type": "product", "settings": { "title": "Aveline Mini Dress", "price": "$28.95", "compare": "$58.95" } },
    { "type": "product", "settings": { "title": "Everyday Knit Set", "price": "$34.95", "compare": "$69.95" } },
    { "type": "product", "settings": { "title": "Scarf Chain Top", "price": "$29.95", "compare": "$59.95" } },
    { "type": "product", "settings": { "title": "Onyx Slip Dress", "price": "$42.95", "compare": "$79.95" } },
    { "type": "product", "settings": { "title": "Knit Stole", "price": "$19.95", "compare": "$39.95" } }
  ] } ]
}
{% endschema %}