/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-multicolumn.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-slider.css'"
Line 19:0 Unexpected "<"
Line 31:12 Unexpected "{"
Line 31:21 Expected ":"
Line 32:12 Expected identifier but found whitespace
... and 63 more hidden warnings

**/
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

<style>
  /* ====== 基础变量 ====== */
  :root {
    --gold: #D69E2E;
    --gold-light: #F6E05E;
    --dark: #1A202C;
    --darker: #0F131A;
    --light: #FFFFFF;
    --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ====== 主容器 ====== */
  .section-{{ section.id }}-padding {
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
    background: linear-gradient(135deg, var(--darker), var(--dark));
  }

  /* ====== 区块标题 ====== */
  .multicolumn__title .title {
    font-family: var(--font-heading-family);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--light);
    text-align: center;
    margin: 0 auto 3rem;
    position: relative;
    letter-spacing: 0.05em;
  }

  .multicolumn__title .title::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gold);
  }

  /* ====== 卡片样式 ====== */
  .multicolumn-card {
    position: relative;
    height: 100%;
    background: rgba(31, 41, 55, 0.8);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-top: 1px solid rgba(214, 158, 46, 0.2);
  }

  .multicolumn-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(214, 158, 46, 0.2);
  }

  /* ====== 列内标题 ====== */
  .multicolumn-card__info h3 {
    font-family: var(--font-heading-family);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--light);
    margin: 1.5rem 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
  }

  .multicolumn-card__info h3::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gold);
    transition: var(--transition);
  }

  .multicolumn-card:hover h3::after {
    width: 100px;
    background: var(--gold-light);
  }

  /* ====== 图片容器 ====== */
  .multicolumn-card__image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
  }

  .multicolumn-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
  }

  .multicolumn-card:hover .multicolumn-card__image {
    transform: scale(1.08);
  }

  /* ====== 内容区域 ====== */
  .multicolumn-card__info {
    padding: 2rem;
    text-align: center;
  }

  .multicolumn-card__info .rte {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* ====== 按钮 ====== */
  .gushin-explore-btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .gushin-explore-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(214, 158, 46, 0.1), transparent);
    transition: 0.6s;
    z-index: -1;
  }

  .gushin-explore-btn:hover {
    background: var(--gold);
    color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(214, 158, 46, 0.3);
  }

  .gushin-explore-btn:hover::before {
    left: 100%;
  }

  .gushin-explore-btn .icon-arrow {
    margin-left: 0.75rem;
    transition: var(--transition);
  }

  .gushin-explore-btn:hover .icon-arrow {
    transform: translateX(4px);
  }

  /* ====== 响应式 ====== */
  @media (max-width: 749px) {
    .section-{{ section.id }}-padding {
      padding: {{ section.settings.padding_top | divided_by: 2 }}px 0 {{ section.settings.padding_bottom | divided_by: 2 }}px;
    }
    .multicolumn-card__info h3 {
      font-size: clamp(1.8rem, 6vw, 2.2rem);
    }
    .multicolumn-card__info {
      padding: 1.5rem;
    }
    .gushin-explore-btn {
      padding: 0.75rem 1.5rem;
    }
  }
</style>

<div class="multicolumn color-{{ section.settings.color_scheme }} gradient">
  <div class="page-width section-{{ section.id }}-padding isolate">
    {%- if section.settings.title != blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile multicolumn__title">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
      </div>
    {%- endif -%}

    <slider-component class="slider-mobile-gutter">
      <ul class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop"
          id="Slider-{{ section.id }}" role="list">
        {%- for block in section.blocks -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="multicolumn-list__item grid__item" {{ block.shopify_attributes }}>
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank -%}
                <div class="multicolumn-card__image-wrapper">
                  {{ block.settings.image | image_url: width: 1000 | image_tag:
                    loading: 'lazy',
                    class: 'multicolumn-card__image',
                    width: block.settings.image.width,
                    height: block.settings.image.height
                  }}
                </div>
              {%- endif -%}

              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3>{{ block.settings.title }}</h3>
                {%- endif -%}

                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}

                {%- if block.settings.link_label != blank -%}
                  <a class="gushin-explore-btn" href="{{ block.settings.link | default: '#' }}">
                    {{ block.settings.link_label | escape }}
                    <svg class="icon-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1 7H13M13 7L7 1M13 7L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </a>
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>
    </slider-component>
  </div>
</div>

{% schema %}
{
  "name": "Premium Multi Columns",
  "class": "section",
  "tag": "section",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "OUR COLLECTIONS",
      "label": "Heading"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {"value": "h2", "label": "Medium"},
        {"value": "h1", "label": "Large"},
        {"value": "h0", "label": "Extra Large"}
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Columns on desktop"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "Mobile layout"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {"value": "1", "label": "1 column"},
        {"value": "2", "label": "2 columns"}
      ],
      "default": "1",
      "label": "Columns on mobile"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 60
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "CATEGORY NAME",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Premium product description</p>",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "link_label",
          "default": "EXPLORE",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Premium Multi Columns",
      "blocks": [
        {
          "type": "column",
          "settings": {
            "title": "TACTICAL GEAR",
            "text": "<p>High-performance tactical equipment</p>",
            "link_label": "DISCOVER"
          }
        },
        {
          "type": "column",
          "settings": {
            "title": "PRECISION OPTICS",
            "text": "<p>Crystal clear vision technology</p>",
            "link_label": "VIEW"
          }
        },
        {
          "type": "column",
          "settings": {
            "title": "ELITE APPAREL",
            "text": "<p>Technical wear for professionals</p>",
            "link_label": "SHOP"
          }
        }
      ]
    }
  ]
}
{% endschema %}