{%- comment -%} MW · Stat Block — dark espresso card with oversized percentage stats. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --sb-bg:{{ section.settings.section_bg }}; --sb-card:{{ section.settings.card_bg }}; --sb-tile:{{ section.settings.tile_bg }}; --sb-num:{{ section.settings.number_color }}; --sb-head:{{ section.settings.heading_color }}; --sb-accent:{{ section.settings.accent_color }}; --sb-label:{{ section.settings.label_color }}; --sb-sub:{{ section.settings.sub_color }}; }
  .sb-{{ uid }}{ background:var(--sb-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .sb-{{ uid }} .sb__card{ max-width:{{ section.settings.max_width }}px; margin:0 auto; background:var(--sb-card); border-radius:{{ section.settings.card_radius }}px; padding:clamp(28px,5vw,56px) clamp(20px,4vw,52px) clamp(32px,5vw,60px); }
  .sb-{{ uid }} .sb__head{ text-align:center; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,3vw,34px); color:var(--sb-head); margin:0 auto clamp(28px,4vw,48px); max-width:640px; line-height:1.15; }
  .sb-{{ uid }} .sb__head .u{ color:var(--sb-accent); position:relative; }
  .sb-{{ uid }} .sb__head .u:after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--sb-accent); opacity:.75; }
  .sb-{{ uid }} .sb__grid{ display:grid; grid-template-columns:repeat({{ section.blocks.size }},1fr); gap:clamp(14px,2vw,24px); }
  .sb-{{ uid }} .sb__tile{ background:var(--sb-tile); border-radius:{{ section.settings.tile_radius }}px; padding:clamp(22px,3vw,34px) 20px; text-align:center; }
  .sb-{{ uid }} .sb__num{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(40px,5vw,60px); line-height:1; color:var(--sb-num); }
  .sb-{{ uid }} .sb__label{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:15px; color:var(--sb-label); margin:16px 0 6px; }
  .sb-{{ uid }} .sb__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:12.5px; line-height:1.5; color:var(--sb-sub); margin:0; }
  @media (max-width:720px){ .sb-{{ uid }} .sb__grid{ grid-template-columns:1fr; } }
{% endstyle %}
<div class="sb-{{ uid }}">
  <div class="sb__card">
    {%- if section.settings.heading != blank -%}<h2 class="sb__head">{{ section.settings.heading }}</h2>{%- endif -%}
    <div class="sb__grid">
      {%- for block in section.blocks -%}
        <div class="sb__tile" {{ block.shopify_attributes }}>
          <div class="sb__num">{{ block.settings.number | escape }}</div>
          <div class="sb__label">{{ block.settings.label | escape }}</div>
          <p class="sb__sub">{{ block.settings.sub | escape }}</p>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Stat Block",
  "tag": "section",
  "class": "mw-section mw-stat-block",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Wrap a word in <span class=\"u\">…</span> to underline-accent it.", "default": "Worn <span class=\"u\">more than twice</span>" },
    { "type": "range", "id": "max_width", "min": 800, "max": 1300, "step": 10, "unit": "px", "label": "Card width", "default": 1180 },
    { "type": "range", "id": "card_radius", "min": 0, "max": 32, "step": 1, "unit": "px", "label": "Card radius", "default": 16 },
    { "type": "range", "id": "tile_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Tile radius", "default": 10 },
    { "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": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "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": "Section background", "default": "#F4EEE9" },
    { "type": "color", "id": "card_bg", "label": "Card background", "default": "#3A3027" },
    { "type": "color", "id": "tile_bg", "label": "Tile background", "default": "#4A4034" },
    { "type": "color", "id": "number_color", "label": "Number", "default": "#E9DEC9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#F3ECE1" },
    { "type": "color", "id": "accent_color", "label": "Heading accent", "default": "#17324E" },
    { "type": "color", "id": "label_color", "label": "Label", "default": "#F3ECE1" },
    { "type": "color", "id": "sub_color", "label": "Sub text", "default": "#B7A992" }
  ],
  "blocks": [
    { "type": "stat", "name": "Stat", "settings": [
      { "type": "text", "id": "number", "label": "Number", "default": "62%" },
      { "type": "text", "id": "label", "label": "Label", "default": "wore it before 6pm" },
      { "type": "textarea", "id": "sub", "label": "Sub caption", "default": "Based on a wear survey of 500 customers" }
    ] }
  ],
  "max_blocks": 4,
  "presets": [ { "name": "MW · Stat Block", "blocks": [
    { "type": "stat", "settings": { "number": "62%", "label": "wore it before 6pm", "sub": "Based on a wear survey of 500 customers" } },
    { "type": "stat", "settings": { "number": "58%", "label": "kept their usual size", "sub": "Based on 4,000+ orders and size swaps" } },
    { "type": "stat", "settings": { "number": "43%", "label": "came back for a second colourway", "sub": "Based on repeat-purchase data over 6 months" } }
  ] } ]
}
{% endschema %}