{%- comment -%} MW · Comparison — us-vs-others feature table with check/cross rows. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --cp-bg:{{ section.settings.section_bg }}; --cp-head:{{ section.settings.heading_color }}; --cp-accent:{{ section.settings.accent_color }}; --cp-accent2:{{ section.settings.accent_color_2 }}; --cp-sub:{{ section.settings.sub_color }}; --cp-card:{{ section.settings.card_bg }}; --cp-uscol:{{ section.settings.us_bg }}; --cp-ustx:{{ section.settings.us_text }}; --cp-row:{{ section.settings.row_color }}; --cp-line:{{ section.settings.line_color }}; --cp-yes:{{ section.settings.yes_color }}; --cp-no:{{ section.settings.no_color }}; }
  .cp-{{ uid }}{ background:var(--cp-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .cp-{{ uid }} .cp__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; }
  .cp-{{ uid }} .cp__head{ text-align:center; max-width:600px; margin:0 auto clamp(24px,4vw,44px); }
  .cp-{{ uid }} .cp__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.8vw,34px); color:var(--cp-head); margin:0; line-height:1.12; }
  .cp-{{ uid }} .cp__h .ac{ color:var(--cp-accent); background:linear-gradient(99deg,var(--cp-accent) 0%,var(--cp-accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .cp-{{ uid }} .cp__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; color:var(--cp-sub); margin:10px 0 0; }
  .cp-{{ uid }} .cp__table{ background:var(--cp-card); border:1px solid var(--cp-line); border-radius:16px; overflow:hidden; }
  .cp-{{ uid }} .cp__r{ display:grid; grid-template-columns:1.6fr 1fr 1fr; align-items:stretch; }
  .cp-{{ uid }} .cp__r + .cp__r{ border-top:1px solid var(--cp-line); }
  .cp-{{ uid }} .cp__c{ padding:15px 18px; display:flex; align-items:center; gap:8px; font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--cp-row); }
  .cp-{{ uid }} .cp__c--feat{ font-weight:500; color:var(--cp-head); }
  .cp-{{ uid }} .cp__c--us{ background:var(--cp-uscol); color:var(--cp-ustx); justify-content:center; }
  .cp-{{ uid }} .cp__c--them{ justify-content:center; }
  .cp-{{ uid }} .cp__head-row .cp__c{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:14px; }
  .cp-{{ uid }} .cp__head-row .cp__c--us{ background:linear-gradient(180deg,var(--cp-accent2),var(--cp-uscol)); color:var(--cp-ustx); }
  .cp-{{ uid }} .cp__ic{ width:20px; height:20px; }
  .cp-{{ uid }} .cp__c--us .cp__ic{ color:var(--cp-yes); } .cp-{{ uid }} .cp__c--them .cp__ic{ color:var(--cp-no); }
  @media (max-width:620px){ .cp-{{ uid }} .cp__r{ grid-template-columns:1.4fr .8fr .8fr; } .cp-{{ uid }} .cp__c{ padding:12px 10px; font-size:12.5px; } }
{% endstyle %}
<div class="cp-{{ uid }}">
  <div class="cp__wrap">
    <div class="cp__head">
      {%- if section.settings.heading != blank -%}<h2 class="cp__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="cp__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
    </div>
    <div class="cp__table">
      <div class="cp__r cp__head-row">
        <div class="cp__c cp__c--feat">{{ section.settings.feature_label | escape }}</div>
        <div class="cp__c cp__c--us">{{ section.settings.us_label | escape }}</div>
        <div class="cp__c cp__c--them">{{ section.settings.them_label | escape }}</div>
      </div>
      {%- for block in section.blocks -%}
        <div class="cp__r" {{ block.shopify_attributes }}>
          <div class="cp__c cp__c--feat">{{ block.settings.feature | escape }}</div>
          <div class="cp__c cp__c--us">{%- if block.settings.us_text != blank -%}{{ block.settings.us_text | escape }}{%- elsif block.settings.us -%}{% render 'mw-icon', name: 'check', class: 'cp__ic' %}{%- else -%}{% render 'mw-icon', name: 'x', class: 'cp__ic' %}{%- endif -%}</div>
          <div class="cp__c cp__c--them">{%- if block.settings.them_text != blank -%}{{ block.settings.them_text | escape }}{%- elsif block.settings.them -%}{% render 'mw-icon', name: 'check', class: 'cp__ic' %}{%- else -%}{% render 'mw-icon', name: 'x', class: 'cp__ic' %}{%- endif -%}</div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Comparison",
  "tag": "section",
  "class": "mw-section mw-comparison",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "Why it <span class=\"ac\">wins</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "How the knit compares to an ordinary sequin dress." },
    { "type": "text", "id": "feature_label", "label": "Feature column label" },
    { "type": "text", "id": "us_label", "label": "Us column label", "default": "AVELINE" },
    { "type": "text", "id": "them_label", "label": "Them column label", "default": "Others" },
    { "type": "range", "id": "max_width", "min": 700, "max": 1100, "step": 10, "unit": "px", "label": "Content width", "default": 900 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 72 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 72 },
    { "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": "Background", "default": "#EDE4DC" },
    { "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": "Table background", "default": "#FFFFFF" },
    { "type": "color", "id": "us_bg", "label": "Us column background", "default": "#3A3027" },
    { "type": "color", "id": "us_text", "label": "Us column text", "default": "#F3ECE1" },
    { "type": "color", "id": "row_color", "label": "Row text", "default": "#5C5449" },
    { "type": "color", "id": "line_color", "label": "Lines", "default": "#E5DCCB" },
    { "type": "color", "id": "yes_color", "label": "Yes icon", "default": "#D6C19E" },
    { "type": "color", "id": "no_color", "label": "No icon", "default": "#B9AE9C" }
  ],
  "blocks": [
    { "type": "row", "name": "Row", "settings": [
      { "type": "text", "id": "feature", "label": "Feature", "default": "Sequins knitted in, not glued" },
      { "type": "checkbox", "id": "us", "label": "Us: yes", "default": true },
      { "type": "text", "id": "us_text", "label": "Us: custom text (optional)" },
      { "type": "checkbox", "id": "them", "label": "Them: yes", "default": false },
      { "type": "text", "id": "them_text", "label": "Them: custom text (optional)" }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "MW · Comparison", "blocks": [
    { "type": "row", "settings": { "feature": "Sequins knitted in, never glued", "us": true, "them": false } },
    { "type": "row", "settings": { "feature": "Fully lined, no slip needed", "us": true, "them": false } },
    { "type": "row", "settings": { "feature": "Machine washable", "us": true, "them": false } },
    { "type": "row", "settings": { "feature": "Won't scratch or shed", "us": true, "them": false } },
    { "type": "row", "settings": { "feature": "Free size swaps", "us": true, "them": false } },
    { "type": "row", "settings": { "feature": "60-day returns", "us": true, "them": true } }
  ] } ]
}
{% endschema %}