SHOPIFY SECTIONS

{% schema %}
{
  "name": "AG Custom Font",
  "settings": [
    {
      "type": "header",
      "content": "Body Font"
    },
    {
      "type": "url",
      "id": "body_font_url",
      "label": "Body Font File URL"
    },
    {
      "type": "text",
      "id": "body_font_name",
      "label": "Body Font Family",
      "default": "MyBodyFont"
    },

    {
      "type": "header",
      "content": "Heading Font"
    },
    {
      "type": "url",
      "id": "heading_font_url",
      "label": "Heading Font File URL"
    },
    {
      "type": "text",
      "id": "heading_font_name",
      "label": "Heading Font Family",
      "default": "MyHeadingFont"
    },

    {
      "type": "header",
      "content": "Subheading Font"
    },
    {
      "type": "url",
      "id": "subheading_font_url",
      "label": "Subheading Font File URL"
    },
    {
      "type": "text",
      "id": "subheading_font_name",
      "label": "Subheading Font Family",
      "default": "MySubheadingFont"
    },

    {
      "type": "header",
      "content": "Accent Font"
    },
    {
      "type": "url",
      "id": "accent_font_url",
      "label": "Accent Font File URL"
    },
    {
      "type": "text",
      "id": "accent_font_name",
      "label": "Accent Font Family",
      "default": "MyAccentFont"
    }
  ],
  "presets": [
    {
      "name": "AG Custom Font"
    }
  ]
}
{% endschema %}

<style>
  {% if section.settings.body_font_url and section.settings.body_font_name %}
    @font-face {
      font-family: '{{ section.settings.body_font_name }}';
      src: url('{{ section.settings.body_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    body, p, span, .rte p, .product__description p {
      font-family: '{{ section.settings.body_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.heading_font_url and section.settings.heading_font_name %}
    @font-face {
      font-family: '{{ section.settings.heading_font_name }}';
      src: url('{{ section.settings.heading_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading, .title {
      font-family: '{{ section.settings.heading_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.subheading_font_url and section.settings.subheading_font_name %}
    @font-face {
      font-family: '{{ section.settings.subheading_font_name }}';
      src: url('{{ section.settings.subheading_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    h5, h6, .h5, .h6, .subheading, .subtitle {
      font-family: '{{ section.settings.subheading_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.accent_font_url and section.settings.accent_font_name %}
    @font-face {
      font-family: '{{ section.settings.accent_font_name }}';
      src: url('{{ section.settings.accent_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    a, button, .accent, .link, .menu-item {
      font-family: '{{ section.settings.accent_font_name }}', sans-serif !important;
    }
  {% endif %}
</style>

AG Custom Font Advanced

{%- style -%}
  .section-{{ section.id }} {
    
      background-color: {{ section.settings.background_color }};
      color: {{ section.settings.text_color }};
    
      color: rgb(var(--color-foreground));
    
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    padding-left: {{ section.settings.horizontal_padding_desktop }}px;
    padding-right: {{ section.settings.horizontal_padding_desktop }}px;
    border-top: {{ section.settings.border_top_thickness }}px solid {{ section.settings.border_top_color }};
    border-bottom: {{ section.settings.border_bottom_thickness }}px solid {{ section.settings.border_bottom_color }};
  }

  .section-{{ section.id }} .bc-collection-list {
    height: 50vw;
    justify-content: center;
    display: flex;
    gap: 20px;
  }

  .section-{{ section.id }} .bc-column {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  /* =========================================================
     NEW: Optional border around images/videos (theme editor)
     - Applies to BOTH .bc-image and .bc-video
     - box-sizing prevents border from breaking layout sizing
     ========================================================= */
  .section-{{ section.id }} .bc-image,
  .section-{{ section.id }} .bc-video {
    box-sizing: border-box;
    {% if section.settings.show_media_border %}
      border: {{ section.settings.media_border_thickness }}px solid {{ section.settings.media_border_color }};
    {% else %}
      border: none;
    {% endif %}
  }

  .section-{{ section.id }} .bc-column:nth-child(1) .bc-image {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: {{ section.settings.left_right_border_radius }}px;
    opacity: {{ section.settings.image_1_opacity }}%;
  }

  .section-{{ section.id }} .bc-column:nth-child(2) .bc-image {
    width: 95%;
    height: 90%;
    object-fit: cover;
    border-radius: 50%;
    opacity: {{ section.settings.image_2_opacity }}%;
  }

  .section-{{ section.id }} .bc-column:nth-child(3) .bc-image {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: {{ section.settings.left_right_border_radius }}px;
    opacity: {{ section.settings.image_3_opacity }}%;
  }

  .section-{{ section.id }} .bc-column:nth-child(1) .bc-video,
  .section-{{ section.id }} .bc-column:nth-child(3) .bc-video {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: {{ section.settings.left_right_border_radius }}px;
    opacity: {{ section.settings.video_opacity }}%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .section-{{ section.id }} .bc-column:nth-child(2) .bc-video {
    width: 95%;
    height: 85%;
    object-fit: cover;
    border-radius: 50%;
    opacity: {{ section.settings.video_opacity }}%;
    position: absolute;
    top: 7.5%;
    left: 2.5%;
  }

  .section-{{ section.id }} .bc-collection-title {
    color: {{ section.settings.text_color }};
    background-color: {{ section.settings.text_background_color }};
    border-radius: {{ section.settings.text_background_border_radius }}px;
    padding: 13px 15px 10px 15px;
    text-decoration: none;
    position: absolute;
    font-size: clamp({{ section.settings.text_font_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_font_size }}rem) !important;
    line-height: {{ section.settings.text_line_height }};
    max-width: {{ section.settings.text_max_width }}ch;
  }

  .section-{{ section.id }} .bc-collection-title * {
    font-size: clamp({{ section.settings.text_font_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_font_size }}rem) !important;
    line-height: {{ section.settings.text_line_height }};
    max-width: {{ section.settings.text_max_width }}ch;
    margin-top: 0;
    margin-bottom: 0;
  }

  @media screen and (max-width: 991px) {
    .section-{{ section.id }} {
      padding-left: {{ section.settings.horizontal_padding_tablet }}px;
      padding-right: {{ section.settings.horizontal_padding_tablet }}px;
    }

    .section-{{ section.id }} .bc-collection-list {
      height: 50vw;
    }

    .section-{{ section.id }} .bc-column:nth-child(2) .bc-image,
    .section-{{ section.id }} .bc-column:nth-child(2) .bc-video {
      width: 100%;
    }
  }

  @media screen and (max-width: 767px) {
    .section-{{ section.id }} {
      padding-left: {{ section.settings.horizontal_padding_mobile }}px;
      padding-right: {{ section.settings.horizontal_padding_mobile }}px;
    }

    .section-{{ section.id }} .bc-collection-list {
      height: auto;
      max-height: unset;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      overflow: hidden;
    }

    .section-{{ section.id }} .bc-column {
      width: 100%;
    }

    .section-{{ section.id }} .bc-column:nth-child(1) .bc-image,
    .section-{{ section.id }} .bc-column:nth-child(1) .bc-video {
      width: 100%;
      height: 120vw;
      border-radius: {{ section.settings.left_right_border_radius }}px;
      top: 0;
      left: 0;
    }

    .section-{{ section.id }} .bc-column:nth-child(2) .bc-image,
    .section-{{ section.id }} .bc-column:nth-child(2) .bc-video {
      width: 100%;
      height: 120vw;
      border-radius: 50%;
      top: 0;
      left: 0;
    }

    .section-{{ section.id }} .bc-column:nth-child(3) .bc-image,
    .section-{{ section.id }} .bc-column:nth-child(3) .bc-video {
      width: 100%;
      height: 120vw;
      border-radius: {{ section.settings.left_right_border_radius }}px;
      top: 0;
      left: 0;
    }
  }
{%- endstyle -%}

<div class="section-{{ section.id }} color-{{ section.settings.color_scheme }}">
  <div class="bc-collection-list">
    {% for i in (1..3) %}
      {% capture collection_key %}collection_{{ i }}{% endcapture %}
      {% capture image_key %}image_{{ i }}{% endcapture %}
      {% capture video_key %}video_{{ i }}{% endcapture %}
      {% capture text_key %}collection_{{ i }}_text{% endcapture %}
      {% assign collection = collections[section.settings[collection_key]] %}
      {% if collection %}
        <a href="{{ collection.url }}" class="bc-column">
          {% if section.settings[video_key] != blank %}
            {{
              section.settings[video_key]
              | video_tag:
                controls: false,
                autoplay: true,
                loop: true,
                muted: true,
                preload: 'auto',
                class: 'bc-video',
                loading: 'lazy'
            }}
          {% elsif section.settings[image_key] != blank %}
            <img
              src="{{ section.settings[image_key] | img_url: 'master' }}"
              loading="lazy"
              alt="{{ collection.title }}"
              class="bc-image"
            >
          {% elsif collection.image %}
            <img
              src="{{ collection.image | img_url: 'master' }}"
              loading="lazy"
              alt="{{ collection.title }}"
              class="bc-image"
            >
          {% endif %}

          <div class="bc-collection-title">
            {% if section.settings[text_key] != blank %}
              {{ section.settings[text_key] }}
            {% else %}
              Shop {{ collection.title }}
            {% endif %}
          </div>
        </a>
      {% endif %}
    {% endfor %}
  </div>
</div>


{% schema %}
{
  "name": "AG Collection Shapes",
  "settings": [
    {
      "type": "header",
      "content": "Colors"
    },
        
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_background_color",
      "label": "Text Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_top_color",
      "label": "Top Border Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_bottom_color",
      "label": "Bottom Border Color",
      "default": "#000000"
    },

    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom Padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "horizontal_padding_desktop",
      "label": "Horizontal Padding (Desktop)",
      "min": 0,
      "max": 150,
      "step": 5,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "horizontal_padding_tablet",
      "label": "Horizontal Padding (Tablet)",
      "min": 0,
      "max": 150,
      "step": 5,
      "default": 40,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "horizontal_padding_mobile",
      "label": "Horizontal Padding (Mobile)",
      "min": 0,
      "max": 150,
      "step": 5,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_top_thickness",
      "label": "Top Border Thickness",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_bottom_thickness",
      "label": "Bottom Border Thickness",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0,
      "unit": "px"
    },

    {
      "type": "range",
      "id": "text_background_border_radius",
      "label": "Text Background Border Radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "left_right_border_radius",
      "label": "Left & Right Images Border Radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 22,
      "unit": "px"
    },

    {
      "type": "header",
      "content": "Media Border"
    },
    {
      "type": "checkbox",
      "id": "show_media_border",
      "label": "Show border around images and videos",
      "default": false
    },
    {
      "type": "range",
      "id": "media_border_thickness",
      "label": "Border thickness",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 1,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "media_border_color",
      "label": "Border color",
      "default": "#000000"
    },

    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "richtext",
      "id": "collection_1_text",
      "label": "Collection 1 Text",
      "default": "<p>Shop Collection 1</p>",
      "info": "Leave blank to use default 'Shop [Collection Title]' text"
    },
    {
      "type": "richtext",
      "id": "collection_2_text",
      "label": "Collection 2 Text",
      "default": "<p>Shop Collection 2</p>",
      "info": "Leave blank to use default 'Shop [Collection Title]' text"
    },
    {
      "type": "richtext",
      "id": "collection_3_text",
      "label": "Collection 3 Text",
      "default": "<p>Shop Collection 3</p>",
      "info": "Leave blank to use default 'Shop [Collection Title]' text"
    },
    {
      "type": "range",
      "id": "text_font_size",
      "label": "Text Font Size",
      "min": 0.5,
      "max": 8,
      "step": 0.1,
      "default": 1.4,
      "unit": "rem",
      "info": "Font size in rem units (good for accessibility)"
    },
    {
      "type": "range",
      "id": "text_line_height",
      "label": "Text Line Height",
      "min": 1,
      "max": 2,
      "step": 0.1,
      "default": 1.4
    },
    {
      "type": "range",
      "id": "text_max_width",
      "label": "Text Max Width",
      "min": 10,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "ch"
    },
    {
      "type": "range",
      "id": "text_mobile_scale_ratio",
      "label": "Text Mobile Scale Ratio",
      "min": 0.5,
      "max": 1,
      "step": 0.1,
      "default": 1.0,
      "unit": "×",
      "info": "Controls how much text shrinks on smaller screens"
    },

    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "collection",
      "id": "collection_1",
      "label": "Collection 1"
    },
    {
      "type": "collection",
      "id": "collection_2",
      "label": "Collection 2"
    },
    {
      "type": "collection",
      "id": "collection_3",
      "label": "Collection 3"
    },
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Custom Image for Collection 1",
      "info": "Leave blank to use collection's featured image"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Custom Image for Collection 2",
      "info": "Leave blank to use collection's featured image"
    },
    {
      "type": "image_picker",
      "id": "image_3",
      "label": "Custom Image for Collection 3",
      "info": "Leave blank to use collection's featured image"
    },
    {
      "type": "video",
      "id": "video_1",
      "label": "Video for Collection 1",
      "info": "Video takes precedence over image if both are uploaded"
    },
    {
      "type": "video",
      "id": "video_2",
      "label": "Video for Collection 2",
      "info": "Video takes precedence over image if both are uploaded"
    },
    {
      "type": "video",
      "id": "video_3",
      "label": "Video for Collection 3",
      "info": "Video takes precedence over image if both are uploaded"
    },
    {
      "type": "range",
      "id": "image_1_opacity",
      "label": "Image 1 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "image_2_opacity",
      "label": "Image 2 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "image_3_opacity",
      "label": "Image 3 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "video_opacity",
      "label": "Video Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    }
  ],
  "presets": [
    {
      "name": "AG Collection Shapes"
    }
  ]
}
{% endschema %}

AG 3 Collection Shapes Horizon

{% schema %}
{
  "name": "AG Custom Font",
  "settings": [
    {
      "type": "header",
      "content": "Body Font"
    },
    {
      "type": "url",
      "id": "body_font_url",
      "label": "Body Font File URL"
    },
    {
      "type": "text",
      "id": "body_font_name",
      "label": "Body Font Family",
      "default": "MyBodyFont"
    },

    {
      "type": "header",
      "content": "Heading Font"
    },
    {
      "type": "url",
      "id": "heading_font_url",
      "label": "Heading Font File URL"
    },
    {
      "type": "text",
      "id": "heading_font_name",
      "label": "Heading Font Family",
      "default": "MyHeadingFont"
    },

    {
      "type": "header",
      "content": "Subheading Font"
    },
    {
      "type": "url",
      "id": "subheading_font_url",
      "label": "Subheading Font File URL"
    },
    {
      "type": "text",
      "id": "subheading_font_name",
      "label": "Subheading Font Family",
      "default": "MySubheadingFont"
    },

    {
      "type": "header",
      "content": "Accent Font"
    },
    {
      "type": "url",
      "id": "accent_font_url",
      "label": "Accent Font File URL"
    },
    {
      "type": "text",
      "id": "accent_font_name",
      "label": "Accent Font Family",
      "default": "MyAccentFont"
    }
  ],
  "presets": [
    {
      "name": "AG Custom Font"
    }
  ]
}
{% endschema %}

<style>
  {% if section.settings.body_font_url and section.settings.body_font_name %}
    @font-face {
      font-family: '{{ section.settings.body_font_name }}';
      src: url('{{ section.settings.body_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    body, p, span, .rte p, .product__description p {
      font-family: '{{ section.settings.body_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.heading_font_url and section.settings.heading_font_name %}
    @font-face {
      font-family: '{{ section.settings.heading_font_name }}';
      src: url('{{ section.settings.heading_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading, .title {
      font-family: '{{ section.settings.heading_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.subheading_font_url and section.settings.subheading_font_name %}
    @font-face {
      font-family: '{{ section.settings.subheading_font_name }}';
      src: url('{{ section.settings.subheading_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    h5, h6, .h5, .h6, .subheading, .subtitle {
      font-family: '{{ section.settings.subheading_font_name }}', sans-serif !important;
    }
  {% endif %}

  {% if section.settings.accent_font_url and section.settings.accent_font_name %}
    @font-face {
      font-family: '{{ section.settings.accent_font_name }}';
      src: url('{{ section.settings.accent_font_url }}');
      font-style: normal;
      font-weight: normal;
    }
    a, button, .accent, .link, .menu-item {
      font-family: '{{ section.settings.accent_font_name }}', sans-serif !important;
    }
  {% endif %}
</style>

AG Custom Font Advanced

{% comment %}
  Section: AG Image Mosaic
  - Mosaic grid with adjustable columns + row heights
  - Rounded corners control
  - Optional image border (size + color)
  - Full width OR inset (max width)
  - Per-block: hide on mobile
  - Optional: force all tiles to span 1 column
  Updates:
  - Card subtext can be a link + open in new tab toggle
  - Subtext no longer wraps on mobile; uses fluid font sizing to fit on one line
{% endcomment %}

<section
  id="ag-image-mosaic-{{ section.id }}"
  class="ag-image-mosaic"
  style="
    --agm-bg: {{ section.settings.section_bg }};
    --agm-gap: {{ section.settings.gap }}px;
    --agm-radius: {{ section.settings.radius }}px;

    --agm-img-border-size: {{ section.settings.image_border_size }}px;
    --agm-img-border-color: {{ section.settings.image_border_color }};
    --agm-img-border-on: {% if section.settings.show_image_border %}1{% else %}0{% endif %};

    --agm-columns-desktop: {{ section.settings.columns_desktop }};
    --agm-columns-tablet: {{ section.settings.columns_tablet }};
    --agm-columns-mobile: {{ section.settings.columns_mobile | plus: 0 }};

    --agm-row-desktop: {{ section.settings.row_height }}px;
    --agm-row-tablet: {{ section.settings.row_height_tablet }}px;
    --agm-row-mobile: {{ section.settings.row_height_mobile }}px;

    --agm-pad-y: {{ section.settings.padding_y }}px;
    --agm-pad-x: {{ section.settings.padding_x }}px;
    --agm-max: {{ section.settings.max_width }}px;
  "
>
  <div class="agm-outer {% if section.settings.full_width %}agm-full{% else %}agm-inset{% endif %}">
    <div class="agm-grid">
      {% for block in section.blocks %}
        {% liquid
          assign col_span = block.settings.col_span
          if section.settings.force_col_span_1
            assign col_span = 1
          endif
        %}

        {% case block.type %}

          {% when 'image' %}
            <div
              class="agm-item agm-item--image"
              style="
                --agm-col: {{ col_span }};
                --agm-row-span: {{ block.settings.row_span }};
              "
              data-hide-mobile="{% if block.settings.hide_on_mobile %}true{% else %}false{% endif %}"
              {{ block.shopify_attributes }}
            >
              <div class="agm-media">
                {% if block.settings.image != blank %}
                  <img
                    src="{{ block.settings.image | image_url: width: 2200 }}"
                    alt="{{ block.settings.image.alt | escape }}"
                    loading="lazy"
                  >
                {% else %}
                  <div class="agm-placeholder">Add an image</div>
                {% endif %}
              </div>
            </div>

          {% when 'card' %}
            <div
              class="agm-item agm-item--card"
              style="
                --agm-col: {{ col_span }};
                --agm-row-span: {{ block.settings.row_span }};
                --agm-card-bg: {{ block.settings.card_bg }};
                --agm-card-text: {{ block.settings.card_text }};
              "
              data-hide-mobile="{% if block.settings.hide_on_mobile %}true{% else %}false{% endif %}"
              {{ block.shopify_attributes }}
            >
              <div class="agm-card">
                {% if block.settings.heading != blank %}
                  <h3 class="agm-card-heading">{{ block.settings.heading }}</h3>
                {% endif %}

                {% if block.settings.subtext != blank %}
                  {% if block.settings.subtext_link != blank %}
                    <a
                      class="agm-card-subtext agm-card-link"
                      href="{{ block.settings.subtext_link }}"
                      {% if block.settings.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
                    >
                      {{ block.settings.subtext }}
                    </a>
                  {% else %}
                    <p class="agm-card-subtext">{{ block.settings.subtext }}</p>
                  {% endif %}
                {% endif %}
              </div>
            </div>

        {% endcase %}
      {% endfor %}
    </div>
  </div>
</section>

<style>
  #ag-image-mosaic-{{ section.id }}.ag-image-mosaic{
    background: var(--agm-bg);
    padding: var(--agm-pad-y) var(--agm-pad-x);
  }

  /* Full width vs inset */
  #ag-image-mosaic-{{ section.id }} .agm-outer.agm-full{
    width: 100%;
  }
  #ag-image-mosaic-{{ section.id }} .agm-outer.agm-inset{
    max-width: var(--agm-max);
    margin: 0 auto;
  }

  /* Grid */
  #ag-image-mosaic-{{ section.id }} .agm-grid{
    display: grid;
    grid-template-columns: repeat(var(--agm-columns-desktop), minmax(0, 1fr));
    gap: var(--agm-gap);
    grid-auto-flow: dense;
    grid-auto-rows: var(--agm-row-desktop);
    align-items: stretch;
  }

  /* Spans */
  #ag-image-mosaic-{{ section.id }} .agm-item{
    grid-column: span var(--agm-col);
    grid-row: span var(--agm-row-span);
    min-width: 0;
  }

  /* Image tile */
  #ag-image-mosaic-{{ section.id }} .agm-media{
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: var(--agm-radius);
    border: calc(var(--agm-img-border-on) * var(--agm-img-border-size)) solid var(--agm-img-border-color);
    background: rgba(0,0,0,0.03);
  }
  #ag-image-mosaic-{{ section.id }} .agm-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #ag-image-mosaic-{{ section.id }} .agm-placeholder{
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    font-size: 14px;
    opacity: 0.7;
    padding: 16px;
    text-align: center;
  }

  /* Text card tile */
  #ag-image-mosaic-{{ section.id }} .agm-card{
    height: 100%;
    width: 100%;
    border-radius: var(--agm-radius);
    background: var(--agm-card-bg);
    color: var(--agm-card-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 2.2vw, 34px);
  }

  #ag-image-mosaic-{{ section.id }} .agm-card-heading{
    margin: 0 0 10px 0;
    font-size: clamp(22px, 2.3vw, 40px);
    line-height: 1.05;
    font-weight: 500;

    /* avoids odd clipping if someone uses a long heading */
    overflow-wrap: anywhere;
  }

  /*
    Subtext behavior:
    - stays on ONE line (no wrapping)
    - scales down responsively on smaller screens to avoid cutoff
    - does NOT ellipsis by default, because you asked for “get smaller to fit”
  */
  #ag-image-mosaic-{{ section.id }} .agm-card-subtext{
    margin: 0;
    line-height: 1.2;
    opacity: 0.95;

    white-space: nowrap;

    /* This is the key: fluid font size that gets smaller as space gets tighter */
    font-size: clamp(12px, 3.4vw, 16px);
  }

  /* Link styling (inherits card color) */
  #ag-image-mosaic-{{ section.id }} .agm-card-link{
    color: inherit;
    text-decoration: none;
  }
  #ag-image-mosaic-{{ section.id }} .agm-card-link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Tablet */
  @media (max-width: 990px){
    #ag-image-mosaic-{{ section.id }} .agm-grid{
      grid-template-columns: repeat(var(--agm-columns-tablet), minmax(0, 1fr));
      grid-auto-rows: var(--agm-row-tablet);
    }
  }

  /* Mobile */
  @media (max-width: 640px){
    #ag-image-mosaic-{{ section.id }}.ag-image-mosaic{
      padding: {{ section.settings.padding_y | times: 0.8 | round }}px {{ section.settings.padding_x | times: 0.8 | round }}px;
    }

    #ag-image-mosaic-{{ section.id }} .agm-grid{
      grid-template-columns: repeat(var(--agm-columns-mobile), minmax(0, 1fr));
      grid-auto-rows: var(--agm-row-mobile);
    }

    /* Mobile visibility control */
    #ag-image-mosaic-{{ section.id }} .agm-item[data-hide-mobile="true"]{
      display: none !important;
    }

    /* Keep spans from breaking layout too much on small screens */
    #ag-image-mosaic-{{ section.id }} .agm-item{
      grid-column: span 1;
    }

    /* Give subtext a touch more room on mobile */
    #ag-image-mosaic-{{ section.id }} .agm-card-heading{
      margin-bottom: 8px;
    }
  }
</style>

{% schema %}
{
  "name": "AG Image Mosaic",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full width",
      "default": false
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Inset max width (px)",
      "min": 900,
      "max": 1800,
      "step": 20,
      "default": 1400
    },
    {
      "type": "color",
      "id": "section_bg",
      "label": "Section background",
      "default": "#f4eee6"
    },
    {
      "type": "range",
      "id": "padding_y",
      "label": "Vertical padding (px)",
      "min": 0,
      "max": 140,
      "step": 4,
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_x",
      "label": "Horizontal padding (px)",
      "min": 0,
      "max": 140,
      "step": 4,
      "default": 24
    },
    {
      "type": "range",
      "id": "gap",
      "label": "Grid gap (px)",
      "min": 0,
      "max": 40,
      "step": 2,
      "default": 14
    },
    {
      "type": "range",
      "id": "radius",
      "label": "Corner radius (px)",
      "min": 0,
      "max": 80,
      "step": 2,
      "default": 28
    },

    {
      "type": "header",
      "content": "Image borders"
    },
    {
      "type": "checkbox",
      "id": "show_image_border",
      "label": "Show border around images",
      "default": false
    },
    {
      "type": "color",
      "id": "image_border_color",
      "label": "Border color",
      "default": "#2f2a25"
    },
    {
      "type": "range",
      "id": "image_border_size",
      "label": "Border thickness (px)",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 1
    },

    {
      "type": "header",
      "content": "Grid layout"
    },
    {
      "type": "checkbox",
      "id": "force_col_span_1",
      "label": "Force tiles to span 1 column",
      "default": false
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "label": "Columns (desktop)",
      "min": 2,
      "max": 8,
      "step": 1,
      "default": 5
    },
    {
      "type": "range",
      "id": "columns_tablet",
      "label": "Columns (tablet)",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns (mobile)",
      "default": "1",
      "options": [
        { "value": "1", "label": "1" },
        { "value": "2", "label": "2" }
      ]
    },
    {
      "type": "range",
      "id": "row_height",
      "label": "Row height (desktop px)",
      "min": 90,
      "max": 240,
      "step": 5,
      "default": 140
    },
    {
      "type": "range",
      "id": "row_height_tablet",
      "label": "Row height (tablet px)",
      "min": 80,
      "max": 220,
      "step": 5,
      "default": 130
    },
    {
      "type": "range",
      "id": "row_height_mobile",
      "label": "Row height (mobile px)",
      "min": 160,
      "max": 360,
      "step": 10,
      "default": 240
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "checkbox",
          "id": "hide_on_mobile",
          "label": "Hide on mobile",
          "default": false
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Follow Along"
        },
        {
          "type": "text",
          "id": "subtext",
          "label": "Subtext",
          "default": "@ashaglenn.design"
        },
        {
          "type": "url",
          "id": "subtext_link",
          "label": "Subtext link"
        },
        {
          "type": "checkbox",
          "id": "open_in_new_tab",
          "label": "Open subtext link in new tab",
          "default": true
        },
        {
          "type": "color",
          "id": "card_bg",
          "label": "Card background",
          "default": "#7a4a35"
        },
        {
          "type": "color",
          "id": "card_text",
          "label": "Card text",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "col_span",
          "label": "Column span (desktop)",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 2
        },
        {
          "type": "range",
          "id": "row_span",
          "label": "Row span (desktop)",
          "min": 1,
          "max": 8,
          "step": 1,
          "default": 2
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "checkbox",
          "id": "hide_on_mobile",
          "label": "Hide on mobile",
          "default": false
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "col_span",
          "label": "Column span (desktop)",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 2
        },
        {
          "type": "range",
          "id": "row_span",
          "label": "Row span (desktop)",
          "min": 1,
          "max": 10,
          "step": 1,
          "default": 3
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "AG Image Mosaic",
      "blocks": [
        { "type": "card" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}

AG Image Mosiac Horizon

SHOPIFY SECTIONS

QUICK LINKS

RESOURCES

WEBSITES