{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

{%- comment -%} Load Material Symbols if any block uses an icon name and has no image override {%- endcomment -%}
{%- assign needs_material_icons = false -%}
{%- for block in section.blocks -%}
  {%- if block.settings.icon_name != blank and block.settings.icon_image == blank -%}
    {%- assign needs_material_icons = true -%}
  {%- endif -%}
{%- endfor -%}
{%- if needs_material_icons -%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
    rel="stylesheet"
  >
{%- endif -%}

{%- 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;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
    background-attachment: scroll !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}

  @media screen and (max-width: 750px) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
    }
  }

  @supports (-webkit-appearance: none) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }
  }

  /* ── Italic heading styling ── */
  #WorseThanMakeup-{{ section.id }} .worse-heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  {% if section.settings.enable_gradient %}
    #WorseThanMakeup-{{ section.id }} .worse-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Heading wrapper ── */
  #WorseThanMakeup-{{ section.id }} .worse-heading-wrapper {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: {{ section.settings.heading_bottom_spacing }}px;
  }

  #WorseThanMakeup-{{ section.id }} .worse-subtext {
    margin-top: {{ section.settings.subtext_top_margin }}px;
    font-size: {{ section.settings.subtext_size }}px;
  }

  /* ── 2-col grid. Vertical center line = border-left on even items ── */
  #WorseThanMakeup-{{ section.id }} .worse-blocks-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block-item {
    padding: {{ section.settings.card_padding_y }}px {{ section.settings.card_padding_x }}px;
    border-bottom: 1px solid {{ section.settings.divider_color }};
  }

  #WorseThanMakeup-{{ section.id }} .worse-block-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block-item:nth-child(even) {
    border-left: 1px solid {{ section.settings.divider_color }};
  }

  /* ── Individual card: icon left, text right ── */
  #WorseThanMakeup-{{ section.id }} .worse-block {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: {{ section.settings.card_gap }}px;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block__icon {
    flex-shrink: 0;
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block__icon .material-symbols-rounded {
    font-size: {{ section.settings.icon_size }}px;
    line-height: 1;
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
    overflow: hidden;
    max-width: unset;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block__content h3 {
    font-size: {{ section.settings.card_heading_size_desktop }}px;
    margin: 0 0 {{ section.settings.card_heading_bottom_margin }}px;
  }

  #WorseThanMakeup-{{ section.id }} .worse-block__content .rte {
    font-size: {{ section.settings.card_text_size_desktop }}px;
    margin: 0;
  }

  /* ── Mobile: single column ── */
  @media screen and (max-width: 749px) {
    #WorseThanMakeup-{{ section.id }} .worse-blocks-cover {
      grid-template-columns: 1fr;
    }

    #WorseThanMakeup-{{ section.id }} .worse-block-item {
      border-bottom: 1px solid {{ section.settings.divider_color }};
      border-left: none !important;
    }

    /* Restore bottom border that nth-last-child removed for 2-col */
    #WorseThanMakeup-{{ section.id }} .worse-block-item:nth-last-child(-n+2) {
      border-bottom: 1px solid {{ section.settings.divider_color }};
    }

    #WorseThanMakeup-{{ section.id }} .worse-block-item:last-child {
      border-bottom: none;
    }

    #WorseThanMakeup-{{ section.id }} .worse-block__content h3 {
      font-size: {{ section.settings.card_heading_size_mobile }}px;
    }

    #WorseThanMakeup-{{ section.id }} .worse-block__content .rte {
      font-size: {{ section.settings.card_text_size_mobile }}px;
    }
  }

  /* ── Button + badge wrapper: column flex so badge always sits below ── */
  #WorseThanMakeup-{{ section.id }} .worse-button-cover {
    display: flex;
    flex-direction: column;
    align-items: {{ section.settings.button_alignment | replace: 'left', 'flex-start' | replace: 'right', 'flex-end' | replace: 'center', 'center' }};
    margin-top: {{ section.settings.button_top_margin }}px;
  }

  /* Custom button overrides */
  {% if section.settings.enable_custom_button %}
    #WorseThanMakeup-{{ section.id }} .worse-button-cover .button {
      {% if section.settings.button_bg_color != blank %}
        background-color: {{ section.settings.button_bg_color }} !important;
        background: {{ section.settings.button_bg_color }} !important;
      {% endif %}
      {% if section.settings.button_text_color != blank %}
        color: {{ section.settings.button_text_color }} !important;
      {% endif %}
      border: 2px solid {{ section.settings.button_border_color }} !important;
      outline: none !important;
      box-shadow: none !important;
      border-radius: {{ section.settings.button_border_radius }}px !important;
      padding: {{ section.settings.button_padding_y }}px {{ section.settings.button_padding_x }}px !important;
      {% if section.settings.button_width == 'full' %}
        width: 100% !important;
        max-width: 500px !important;
      {% else %}
        width: auto !important;
        max-width: none !important;
      {% endif %}
    }
    #WorseThanMakeup-{{ section.id }} .worse-button-cover .button::before,
    #WorseThanMakeup-{{ section.id }} .worse-button-cover .button::after {
      display: none !important;
      content: none !important;
    }
  {% endif %}

  /* Badge below button */
  #WorseThanMakeup-{{ section.id }} .worse-icon-text-cover {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: {{ section.settings.badge_font_size }}px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: {{ section.settings.badge_text_color }};
    {% if section.settings.badge_style == 'bordered' %}
      border: 1px dashed {{ section.settings.badge_border_color }};
      border-radius: 4px;
      padding: 6px 12px;
    {% elsif section.settings.badge_style == 'solid' %}
      border: 1px solid {{ section.settings.badge_border_color }};
      border-radius: 4px;
      padding: 6px 12px;
    {% endif %}
  }

  #WorseThanMakeup-{{ section.id }} .worse-icon-text-cover img {
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }
{%- endstyle -%}

<div
  id="WorseThanMakeup-{{ section.id }}"
  class="worse-than-makeup color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {{ section.settings.visibility }} section-{{ section.id }}-margin"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank and section.settings.subtext == blank -%}
      <div class="worse-heading-wrapper animate-item animate-item--child" style="--index: 0;">
        {%- unless section.settings.title == blank -%}
          <h2
            class="{{ section.settings.heading_size }} title-with-highlight worse-heading"
            style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};"
          >
            {{ section.settings.title }}
          </h2>
        {%- endunless -%}
        {%- unless section.settings.subtext == blank -%}
          <div class="worse-subtext rte">{{ section.settings.subtext }}</div>
        {%- endunless -%}
      </div>
    {%- endunless -%}

    {%- if section.blocks.size > 0 -%}
      <div class="worse-blocks-cover animate-item animate-item--child" style="--index: 1;">
        {%- for block in section.blocks -%}
          {%- assign icon_color = block.settings.icon_color | default: 'currentColor' -%}
          {%- assign icon_fill = 0 -%}
          {%- if block.settings.icon_filled -%}{%- assign icon_fill = 1 -%}{%- endif -%}
          <div class="worse-block-item" {{ block.shopify_attributes }}>
            <div class="worse-block">
              {%- unless block.settings.icon_image == blank and block.settings.icon_name == blank -%}
                <div class="worse-block__icon">
                  {%- if block.settings.icon_image != blank -%}
                    <img
                      src="{{ block.settings.icon_image | image_url: width: 120 }}"
                      alt="{{ block.settings.icon_image.alt | default: block.settings.title | escape }}"
                      width="{{ section.settings.icon_size }}"
                      height="{{ section.settings.icon_size }}"
                      loading="lazy"
                    >
                  {%- elsif block.settings.icon_name != blank -%}
                    <span
                      class="material-symbols-rounded"
                      style="color: {{ icon_color }}; font-variation-settings: 'FILL' {{ icon_fill }}, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
                      aria-hidden="true"
                    >
                      {{- block.settings.icon_name -}}
                    </span>
                  {%- endif -%}
                </div>
              {%- endunless -%}

              <div class="worse-block__content">
                {%- unless block.settings.title == blank -%}
                  <h3>{{ block.settings.title }}</h3>
                {%- endunless -%}
                {%- unless block.settings.text == blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endunless -%}
              </div>
            </div>
          </div>
        {%- endfor -%}
      </div>
    {%- endif -%}

    {%- unless section.settings.button_label == blank -%}
      <div class="worse-button-cover animate-item animate-item--child" style="--index: 2;">
        <a
          class="button{% if section.settings.button_style_secondary %} button--secondary{% endif %}"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>

        {%- unless section.settings.badge_text == blank -%}
          <div class="worse-icon-text-cover">
            {%- unless section.settings.badge_icon == blank -%}
              <img
                src="{{ section.settings.badge_icon | image_url: width: 40 }}"
                alt=""
                loading="lazy"
                role="presentation"
              >
            {%- endunless -%}
            <span>{{ section.settings.badge_text | escape }}</span>
          </div>
        {%- endunless -%}
      </div>
    {%- endunless -%}
  </div>
</div>

{% schema %}
{
  "name": "Benefits grid",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Four Reasons You'll Never Go Back",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color. Use *italic* for styled italic text."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h0",
          "label": "X-Large"
        },
        {
          "value": "h1",
          "label": "Large"
        },
        {
          "value": "h2",
          "label": "Medium"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides solid highlight color with a gradient for bold text."
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled."
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed."
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        {
          "value": "italic",
          "label": "Normal Italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom Font Family"
        }
      ],
      "default": "underline",
      "info": "Choose to underline italic text or use a custom font family."
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected."
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected."
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
          "value": "custom_google_font",
          "label": "Custom Google Font"
        }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected."
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "Enter the exact Google Font name, e.g. 'Playfair Display'. Used when Custom Google Font is selected."
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic font weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (inherit)"
        },
        {
          "value": "400",
          "label": "Regular (400)"
        },
        {
          "value": "500",
          "label": "Medium (500)"
        },
        {
          "value": "600",
          "label": "Semi-bold (600)"
        },
        {
          "value": "700",
          "label": "Bold (700)"
        }
      ],
      "default": "inherit"
    },

    {
      "type": "richtext",
      "id": "subtext",
      "label": "Subtext",
      "default": "<p>We didn't just make another product. We made the one that actually works.</p>"
    },
    {
      "type": "range",
      "id": "subtext_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Subtext font size",
      "default": 16
    },
    {
      "type": "range",
      "id": "subtext_top_margin",
      "min": 0,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Subtext top margin",
      "default": 12
    },
    {
      "type": "range",
      "id": "heading_bottom_spacing",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Heading block bottom spacing",
      "default": 40
    },
    {
      "type": "header",
      "content": "Cards"
    },
    {
      "type": "color",
      "id": "divider_color",
      "label": "Divider color",
      "default": "#E0DDD8",
      "info": "Color of the horizontal row dividers and vertical center line between columns."
    },
    {
      "type": "range",
      "id": "card_padding_x",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Card horizontal padding",
      "default": 24
    },
    {
      "type": "range",
      "id": "card_padding_y",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Card vertical padding",
      "default": 28
    },
    {
      "type": "range",
      "id": "card_gap",
      "min": 0,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Gap between icon and text",
      "default": 20
    },
    {
      "type": "range",
      "id": "icon_size",
      "min": 16,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Icon size",
      "default": 48
    },
    {
      "type": "range",
      "id": "card_heading_size_desktop",
      "min": 12,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Card heading size — desktop",
      "default": 20
    },
    {
      "type": "range",
      "id": "card_heading_size_mobile",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Card heading size — mobile",
      "default": 17
    },
    {
      "type": "range",
      "id": "card_heading_bottom_margin",
      "min": 0,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Card heading bottom margin",
      "default": 6
    },
    {
      "type": "range",
      "id": "card_text_size_desktop",
      "min": 12,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Card text size — desktop",
      "default": 15
    },
    {
      "type": "range",
      "id": "card_text_size_mobile",
      "min": 12,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Card text size — mobile",
      "default": 14
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "SHOP NOW"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "label": "Use outline button style",
      "default": false
    },
    {
      "type": "select",
      "id": "button_alignment",
      "label": "Button alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "button_top_margin",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Button top margin",
      "default": 40
    },
    {
      "type": "checkbox",
      "id": "enable_custom_button",
      "label": "Enable custom button styles",
      "default": true
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#121212",
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button border color",
      "default": "#121212",
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Button border radius",
      "default": 50,
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "range",
      "id": "button_padding_x",
      "min": 8,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Button horizontal padding",
      "default": 30,
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "range",
      "id": "button_padding_y",
      "min": 4,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Button vertical padding",
      "default": 16,
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "select",
      "id": "button_width",
      "label": "Button width",
      "options": [
        {
          "value": "auto",
          "label": "Auto (content width)"
        },
        {
          "value": "full",
          "label": "Full width (capped at 500px)"
        }
      ],
      "default": "full",
      "visible_if": "{{ section.settings.enable_custom_button == true }}"
    },
    {
      "type": "header",
      "content": "Badge below button"
    },
    {
      "type": "image_picker",
      "id": "badge_icon",
      "label": "Badge icon image"
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge text",
      "default": "Buy 1 X, Get 1 Free"
    },
    {
      "type": "select",
      "id": "badge_style",
      "label": "Badge style",
      "options": [
        {
          "value": "plain",
          "label": "Plain text"
        },
        {
          "value": "bordered",
          "label": "Bordered (dashed)"
        },
        {
          "value": "solid",
          "label": "Solid border"
        }
      ],
      "default": "bordered"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge text color",
      "default": "#8A4C2D"
    },
    {
      "type": "color",
      "id": "badge_bg_color",
      "label": "Badge background color",
      "info": "Leave unset for transparent background."
    },
    {
      "type": "color",
      "id": "badge_border_color",
      "label": "Badge border color",
      "default": "#8A4C2D"
    },
    {
      "type": "range",
      "id": "badge_font_size",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Badge font size",
      "default": 14
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#121212",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#121212",
      "label": "Outline button"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 60
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "feature_card",
      "name": "Feature Card",
      "settings": [
        {
          "type": "header",
          "content": "Icon"
        },
        {
          "type": "text",
          "id": "icon_name",
          "label": "Material icon name",
          "info": "Enter a Material Symbols icon name, e.g. 'face_retouching_natural', 'spa', 'star'. Browse icons at fonts.google.com/icons. Overridden by custom image below.",
          "default": "spa"
        },
        {
          "type": "checkbox",
          "id": "icon_filled",
          "label": "Filled icon style",
          "default": false
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon color",
          "default": "#121212"
        },
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Custom icon image",
          "info": "Upload a custom image to override the Material icon above."
        },
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Feature Title",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Short description of this feature or benefit.</p>",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Benefits grid",
      "category": "Features",
      "blocks": [
        {
          "type": "feature_card",
          "settings": {
            "icon_name": "face_retouching_natural"
          }
        },
        {
          "type": "feature_card",
          "settings": {
            "icon_name": "spa"
          }
        },
        {
          "type": "feature_card",
          "settings": {
            "icon_name": "blur_on"
          }
        },
        {
          "type": "feature_card",
          "settings": {
            "icon_name": "check_circle"
          }
        }
      ]
    }
  ]
}
{% endschema %}
