{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Product highlights: short icon-and-line points about a product (material, care, origin, fit,
  warranty) for the area under the buy box. Each point is a block whose title and text can be
  typed or connected to a product metafield in the theme editor (dynamic sources); a point whose
  text and title are empty for a product is left out, so one template serves products with
  different details. List or grid, plain, card or divided. Pure Liquid and CSS; no JavaScript.
  Depends on: nothing
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign shown = 0
  for block in section.blocks
    if block.settings.title != blank or block.settings.text != blank
      assign shown = shown | plus: 1
    endif
  endfor
-%}

{%- if shown > 0 or request.design_mode -%}
  <div
    class="lib-highlights lib-highlights--{{ s.section_width }}"
    {% if s.anchor_id != blank %}
      id="{{ s.anchor_id | handleize }}"
    {% endif %}
    data-show="{{ s.show_on }}"
    data-layout="{{ s.layout }}"
    data-style="{{ s.item_style }}"
    {% if s.animate %}
      data-animate
    {% endif %}
    style="
      --lib-bg: {{ s.color_bg }};
      {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
      --lib-text: {{ s.color_text }};
      --lib-accent: {{ s.color_accent }};
      --lib-card: {{ s.color_card }};
      --lib-border: {{ s.color_border }};
      --lib-cols: {{ s.columns }};
      --lib-cols-m: {{ s.columns_mobile }};
      --lib-icon: {{ s.icon_size }}px;
      --lib-pt: {{ s.padding_top }}px;
      --lib-pb: {{ s.padding_bottom }}px;
      --lib-pt-m: {{ s.padding_top_mobile }}px;
      --lib-pb-m: {{ s.padding_bottom_mobile }}px;
    "
  >
    <div class="lib-highlights__inner" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.heading != blank -%}
        <{{ heading_tag }} class="lib-highlights__heading lib-highlights__heading--{{ s.heading_size }}">
          {{- s.heading -}}
        </{{ heading_tag }}>
      {%- endif -%}

      <ul class="lib-highlights__list" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          {%- if b.title != blank or b.text != blank -%}
            <li class="lib-highlights__item" {{ block.shopify_attributes }}>
              {%- if b.icon != 'none' or b.icon_image != blank -%}
                <span class="lib-highlights__icon" aria-hidden="true">
                  {%- if b.icon_image != blank -%}
                    {{ b.icon_image | image_url: width: 96 | image_tag: class: 'lib-highlights__icon-img', loading: 'lazy', alt: '' }}
                  {%- else -%}
                    <svg viewBox="0 0 24 24" width="24" height="24" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                      {%- case b.icon -%}
                        {%- when 'hand' -%}
                          <path d="M8 12V5.5a1.5 1.5 0 0 1 3 0V11M11 10V4.5a1.5 1.5 0 0 1 3 0V11M14 10.5V6a1.5 1.5 0 0 1 3 0v7c0 4-2.5 7-6.5 7S5 17.5 4.5 15L3.6 12a1.5 1.5 0 0 1 2.8-1.1L8 14"/>
                        {%- when 'drop' -%}
                          <path d="M12 3.5s6 6.4 6 10.5a6 6 0 0 1-12 0c0-4.1 6-10.5 6-10.5z"/>
                        {%- when 'wash' -%}
                          <path d="M3 7h18l-2 12H5z"/><path d="M6 11c1.5 1 3 1 4.5 0s3-1 4.5 0 3 1 4.5 0"/>
                        {%- when 'heat' -%}
                          <path d="M10 14.5V5a2 2 0 0 1 4 0v9.5a4 4 0 1 1-4 0z"/><path d="M12 9v7"/>
                        {%- when 'recycle' -%}
                          <path d="m7 19-3-5 3-5M4 14h9M17 5l3 5-3 5M20 10h-9M10 4.5 12 3l2 1.5"/>
                        {%- when 'thread' -%}
                          <path d="M7 3h10M7 21h10M8 3v18M16 3v18M8 7l8 3M8 11l8 3M8 15l8 3"/>
                        {%- when 'globe' -%}
                          <circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.5 3.5 5.5 3.5 8.5s-1 6-3.5 8.5c-2.5-2.5-3.5-5.5-3.5-8.5s1-6 3.5-8.5"/>
                        {%- when 'ruler' -%}
                          <rect x="2.5" y="8" width="19" height="8" rx="1.5"/><path d="M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5"/>
                        {%- when 'shield' -%}
                          <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z"/><path d="m9 12 2 2 4-4"/>
                        {%- when 'sun' -%}
                          <circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/>
                        {%- when 'check' -%}
                          <circle cx="12" cy="12" r="8.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/>
                        {%- else -%}
                          <path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14M5 19l7-7"/>
                      {%- endcase -%}
                    </svg>
                  {%- endif -%}
                </span>
              {%- endif -%}
              <div class="lib-highlights__body">
                {%- if b.title != blank -%}
                  <p class="lib-highlights__title">{{ b.title }}</p>
                {%- endif -%}
                {%- if b.text != blank -%}
                  <p class="lib-highlights__text">{{ b.text }}</p>
                {%- endif -%}
              </div>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    </div>
  </div>
{%- endif -%}

{% stylesheet %}
  .lib-highlights {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-highlights__inner { max-width: 1200px; margin: 0 auto; }
  .lib-highlights--full .lib-highlights__inner { max-width: none; }
  .lib-highlights[data-layout='list'] .lib-highlights__inner { max-width: 36rem; margin-inline: 0; }
  @media (max-width: 749px) {
    .lib-highlights { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-highlights[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-highlights[data-show='mobile'] { display: none; }
  }

  .lib-highlights__heading { margin: 0 0 1rem; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
  .lib-highlights__heading--small { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .lib-highlights__heading--large { font-size: clamp(1.75rem, 3vw, 2.5rem); }

  .lib-highlights__list {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    gap: clamp(0.875rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-highlights[data-layout='list'] .lib-highlights__list { grid-template-columns: 1fr; gap: 0.75rem; }
  @media (max-width: 749px) {
    .lib-highlights[data-layout='grid'] .lib-highlights__list { grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  }
  .lib-highlights__item { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
  .lib-highlights[data-style='card'] .lib-highlights__item {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--lib-card);
  }
  .lib-highlights[data-style='divided'] .lib-highlights__list { gap: 0; }
  .lib-highlights[data-style='divided'] .lib-highlights__item { padding-block: 0.75rem; border-top: 1px solid var(--lib-border); }
  .lib-highlights[data-style='divided'] .lib-highlights__item:last-child { border-bottom: 1px solid var(--lib-border); }
  .lib-highlights[data-style='divided'][data-layout='grid'] .lib-highlights__list { column-gap: 1.5rem; }

  .lib-highlights__icon { flex: none; display: grid; place-items: center; width: var(--lib-icon); height: var(--lib-icon); color: var(--lib-accent); }
  .lib-highlights__icon svg,
  .lib-highlights__icon-img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .lib-highlights__body { min-width: 0; padding-top: 0.1rem; }
  .lib-highlights__title { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
  .lib-highlights__text { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.5; opacity: 0.82; }
  .lib-highlights__title:only-child,
  .lib-highlights__text:only-child { margin: 0; }
  .lib-highlights__text a { color: inherit; text-underline-offset: 0.2em; }
  .lib-highlights__text a:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }

  .lib-highlights__inner[data-align='center'] { text-align: center; }
  .lib-highlights__inner[data-align='center'] .lib-highlights__item { flex-direction: column; align-items: center; }
  @media (max-width: 749px) {
    .lib-highlights__inner[data-align-m='left'] { text-align: left; }
    .lib-highlights__inner[data-align-m='left'] .lib-highlights__item { flex-direction: row; align-items: flex-start; }
    .lib-highlights__inner[data-align-m='center'] { text-align: center; }
    .lib-highlights__inner[data-align-m='center'] .lib-highlights__item { flex-direction: column; align-items: center; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-highlights[data-animate] .lib-highlights__item {
        animation: lib-highlights-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
  @keyframes lib-highlights-rise {
    from { opacity: 0; transform: translateY(12px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Product highlights",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 12,
  "settings": [
    { "type": "paragraph", "content": "On a product template, connect a point's title or text to a product metafield with the dynamic source button. Points that are empty for a product are left out." },
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "small"
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "info": "List suits the area under the buy box; grid suits a full-width row.",
      "options": [
        { "value": "list", "label": "List" },
        { "value": "grid", "label": "Grid" }
      ],
      "default": "list"
    },
    {
      "type": "select",
      "id": "item_style",
      "label": "Point style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "card", "label": "Card" },
        { "value": "divided", "label": "Divided" }
      ],
      "default": "divided"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop (grid)", "min": 2, "max": 4, "step": 1, "default": 3 },
    { "type": "range", "id": "columns_mobile", "label": "Columns on mobile (grid)", "min": 1, "max": 2, "step": 1, "default": 1 },
    { "type": "range", "id": "icon_size", "label": "Icon size", "min": 16, "max": 40, "step": 2, "unit": "px", "default": 22 },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Alignment on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFFFF" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1F1B17" },
    { "type": "color", "id": "color_accent", "label": "Icons", "default": "#7A5A3A" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAF6F1" },
    { "type": "color", "id": "color_border", "label": "Dividers", "default": "#E7E0D8" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 24 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 24 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 20 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 20 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Fade points in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "point",
      "name": "Point",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Icon",
          "options": [
            { "value": "leaf", "label": "Leaf (natural)" },
            { "value": "hand", "label": "Hand (handmade)" },
            { "value": "thread", "label": "Fabric" },
            { "value": "drop", "label": "Drop (water)" },
            { "value": "wash", "label": "Washing" },
            { "value": "heat", "label": "Heat" },
            { "value": "sun", "label": "Sun" },
            { "value": "recycle", "label": "Recycled" },
            { "value": "globe", "label": "Origin" },
            { "value": "ruler", "label": "Size" },
            { "value": "shield", "label": "Warranty" },
            { "value": "check", "label": "Check" },
            { "value": "none", "label": "No icon" }
          ],
          "default": "leaf"
        },
        { "type": "image_picker", "id": "icon_image", "label": "Custom icon", "info": "Optional. Replaces the icon above." },
        { "type": "inline_richtext", "id": "title", "label": "Title", "default": "Highlight" },
        { "type": "inline_richtext", "id": "text", "label": "Text", "info": "Connect a metafield for details that differ per product." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Product highlights",
      "blocks": [
        { "type": "point", "settings": { "icon": "hand", "title": "Made by hand", "text": "Each piece varies a little." } },
        { "type": "point", "settings": { "icon": "wash", "title": "Dishwasher safe", "text": "Hand washing keeps the glaze bright." } },
        { "type": "point", "settings": { "icon": "globe", "title": "Made in our studio", "text": "Thrown, glazed and fired in-house." } }
      ]
    }
  ]
}
{% endschema %}