{%- comment -%} MW · UGC Reviews — row of tall image-testimonial cards (draggable slider). {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --uc-bg:{{ section.settings.section_bg }}; --uc-head:{{ section.settings.heading_color }}; --uc-accent:{{ section.settings.accent_color }}; --uc-sub:{{ section.settings.sub_color }}; --uc-card:{{ section.settings.card_bg }}; --uc-qt:{{ section.settings.quote_color }}; --uc-name:{{ section.settings.name_color }}; }
  .uc-{{ uid }}{ background:var(--uc-bg); padding:{{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; }
  .uc-{{ uid }} .uc__head{ max-width:640px; margin:0 auto clamp(24px,3vw,40px); padding:0 {{ section.settings.side_padding }}px; text-align:{{ section.settings.align }}; }
  .uc-{{ uid }} .uc__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.12; color:var(--uc-head); margin:0; }
  .uc-{{ uid }} .uc__h .ac{ color:var(--uc-accent); background:linear-gradient(99deg,var(--uc-accent) 0%,color-mix(in srgb,var(--uc-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .uc-{{ uid }} .uc__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--uc-sub); margin:10px 0 0; }
  .uc-{{ uid }} .uc__wrap{ position:relative; }
  .uc-{{ uid }} .uc__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; -webkit-overflow-scrolling:touch; }
  .uc-{{ uid }} .uc__track::-webkit-scrollbar{ display:none; }
  .uc-{{ uid }} .uc__card{ flex:0 0 {{ section.settings.card_width }}px; max-width:82vw; scroll-snap-align:start; background:var(--uc-card); border-radius:{{ section.settings.card_radius }}px; overflow:hidden; box-shadow:var(--mw-shadow-sm,0 1px 3px rgba(58,48,39,.08)); }
  .uc-{{ uid }} .uc__img{ width:100%; aspect-ratio:{{ section.settings.image_ratio }}; overflow:hidden; }
  .uc-{{ uid }} .uc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .uc-{{ uid }} .uc__body{ padding:16px 18px 20px; }
  .uc-{{ uid }} .uc__stars{ display:inline-flex; gap:1px; color:var(--mw-star,#E8B04B); margin-bottom:8px; }
  .uc-{{ uid }} .uc__stars svg{ width:14px; height:14px; }
  .uc-{{ uid }} .uc__q{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13.5px; line-height:1.55; color:var(--uc-qt); margin:0 0 12px; }
  .uc-{{ uid }} .uc__name{ display:flex; align-items:center; gap:6px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:13px; color:var(--uc-name); }
  .uc-{{ uid }} .uc__name svg{ width:14px; height:14px; color:var(--mw-verify,#2E7D32); }
  .uc-{{ uid }} .uc__name span{ font-weight:400; color:var(--uc-sub); }
  .uc-{{ uid }} .uc__nav{ position:absolute; top:calc(50% - 40px); width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--mw-line,#E5DCCB); box-shadow:var(--mw-shadow-md,0 8px 24px rgba(58,48,39,.10)); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--uc-head); z-index:2; }
  .uc-{{ uid }} .uc__nav svg{ width:20px; height:20px; }
  .uc-{{ uid }} .uc__nav--prev{ left:8px; } .uc-{{ uid }} .uc__nav--next{ right:8px; }
  @media (max-width:700px){ .uc-{{ uid }} .uc__nav{ display:none; } }
{% endstyle %}
<div class="uc-{{ uid }}" id="uc-{{ uid }}">
  <div class="uc__head">
    {%- if section.settings.heading != blank -%}<h2 class="uc__h">{{ section.settings.heading }}</h2>{%- endif -%}
    {%- if section.settings.sub != blank -%}<p class="uc__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
  </div>
  <div class="uc__wrap">
    <button class="uc__nav uc__nav--prev" data-prev aria-label="Previous">{% render 'mw-icon', name: 'arrow-left' %}</button>
    <div class="uc__track" data-track>
      {%- for block in section.blocks -%}
        <article class="uc__card" {{ block.shopify_attributes }}>
          <div class="uc__img">{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, alt: block.settings.name, width: 600 %}</div>
          <div class="uc__body">
            <span class="uc__stars">{% for i in (1..5) %}{% render 'mw-icon', name: 'star' %}{% endfor %}</span>
            <p class="uc__q">{{ block.settings.quote | escape }}</p>
            <div class="uc__name">{% if block.settings.verified %}{% render 'mw-icon', name: 'verified' %}{% endif %}{{ block.settings.name | escape }}{% if block.settings.meta != blank %}<span>| {{ block.settings.meta | escape }}</span>{% endif %}</div>
          </div>
        </article>
      {%- endfor -%}
    </div>
    <button class="uc__nav uc__nav--next" data-next aria-label="Next">{% render 'mw-icon', name: 'arrow-right' %}</button>
  </div>
</div>
<script>
(function(){var r=document.getElementById('uc-{{ uid }}');if(!r)return;var t=r.querySelector('[data-track]');
function step(d){var c=t.querySelector('.uc__card');var g=parseInt(getComputedStyle(t).columnGap)||20;var w=c?c.offsetWidth+g:320;t.scrollBy({left:d*w,behavior:'smooth'});}
var p=r.querySelector('[data-prev]'),n=r.querySelector('[data-next]');p&&p.addEventListener('click',function(){step(-1)});n&&n.addEventListener('click',function(){step(1)});})();
</script>
{% schema %}
{
  "name": "MW · UGC Reviews",
  "tag": "section",
  "class": "mw-section mw-ugc-reviews",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "Worn by <span class=\"ac\">real people</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "Over 4,000 dresses rated five stars." },
    { "type": "select", "id": "align", "label": "Header align", "default": "left", "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Center"} ] },
    { "type": "range", "id": "card_width", "min": 220, "max": 360, "step": 10, "unit": "px", "label": "Card width", "default": 280 },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "3/4", "options": [ {"value":"3/4","label":"3:4"}, {"value":"4/5","label":"4:5"}, {"value":"1/1","label":"1:1"}, {"value":"9/16","label":"9:16"} ] },
    { "type": "range", "id": "card_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Card radius", "default": 10 },
    { "type": "range", "id": "gap", "min": 8, "max": 40, "step": 2, "unit": "px", "label": "Card gap", "default": 16 },
    { "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", "default": "#B79B6E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" },
    { "type": "color", "id": "card_bg", "label": "Card", "default": "#FFFFFF" },
    { "type": "color", "id": "quote_color", "label": "Quote", "default": "#3A3027" },
    { "type": "color", "id": "name_color", "label": "Name", "default": "#241C15" }
  ],
  "blocks": [
    { "type": "review", "name": "Review", "settings": [
      { "type": "image_picker", "id": "image", "label": "Photo" },
      { "type": "text", "id": "image_url", "label": "…or photo URL" },
      { "type": "textarea", "id": "quote", "label": "Quote", "default": "The fit check that sold it. Skims everywhere it should and the lining means no slip." },
      { "type": "text", "id": "name", "label": "Name", "default": "Nora H." },
      { "type": "checkbox", "id": "verified", "label": "Verified", "default": true },
      { "type": "text", "id": "meta", "label": "Meta (variant/size)", "default": "Champagne, size S" }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "MW · UGC Reviews", "blocks": [
    { "type": "review", "settings": { "quote": "The fit check that sold it. Skims everywhere it should and the lining means no slip.", "name": "Nora H.", "meta": "Champagne, size S" } },
    { "type": "review", "settings": { "quote": "It actually moves. I have worn stiff sequin dresses before and this is nothing like them.", "name": "Juliet M.", "meta": "Champagne, size M" } },
    { "type": "review", "settings": { "quote": "Leather jacket, trainers, done. It stops being a going-out dress the second you dress it down.", "name": "Sofie L.", "meta": "Champagne, size S" } },
    { "type": "review", "settings": { "quote": "Fifteen minutes to get ready because the dress does all of the work.", "name": "Elin K.", "meta": "Champagne, size M" } }
  ] } ]
}
{% endschema %}