<div class='flex items-center justify-center size-full h-[300px]'>
  {% render 'cart.mini-cart-element', cart: cart %}
</div>


<div
  x-data='{ isScrolled: window.scrollY > 0 }'
  @scroll.window.debounce='isScrolled = window.scrollY > 0'
  x-show='$store.cart.visible'
  @keydown.escape.window='$store.cart.toggleCart(false)'
  x-cloak
  class='mini-cart'
>
  
  <div
    class='fixed inset-0 z-40 bg-black/50 sm:z-50'
    @click='$store.cart.toggleCart(false)'
    x-show='$store.cart.visible'
    x-transition:enter='transition-opacity ease-out duration-300'
    x-transition:enter-start='opacity-0'
    x-transition:enter-end='opacity-100'
    x-transition:leave='transition-opacity ease-in duration-200'
    x-transition:leave-start='opacity-100'
    x-transition:leave-end='opacity-0'
  ></div>
  
  <div
    class='fixed right-0 top-0 z-50 flex h-dvh w-full flex-col items-center justify-end sm:w-[33.75rem] sm:justify-center'
    x-show='$store.cart.visible'
    x-transition:enter='transform transition ease-out duration-300'
    x-transition:enter-start='translate-x-full'
    x-transition:enter-end='translate-x-0'
    x-transition:leave='transform transition ease-in duration-200'
    x-transition:leave-start='translate-x-0'
    x-transition:leave-end='translate-x-full'
  >
    
    <div
      class='z-20 flex w-full flex-col bg-[#FFF] pt-6 shadow-lg h-dvh sm:w-full'
    >
      
      <div class='flex flex-shrink-0 items-center justify-between px-4 lg:px-6 pb-3'>
        <p class='text-2xl font-semibold tracking-[-0.06em] text-gray-900'>Your Cart</p>
        <button
          type='button'
          class='flex size-10 cursor-pointer items-center justify-center border-none bg-transparent text-gray-200 transition-colors hover:!bg-transparent hover:text-gray-800'
          aria-label='Close cart'
          @click='$store.cart.toggleCart(false)'
        >
          <span class='sr-only' x-text='`Close cart`'> </span>
          {% render 'icon-close', class: 'w-3 h-3 text-gray-700' %}
        </button>
      </div>
      <div class='px-4 lg:px-6 pb-5'>
        {% render 'cart.free-shipping-threshold' %}
      </div>

      
      <div
        x-show='$store.cart.cart.item_count === 0 && $store.cart.cart?.token'
        x-cloak
        class='flex h-[200px] items-center justify-center'
      >
        <span class='p-4'>Your cart is empty</span>
      </div>

      
      <div class='flex-1 overflow-y-auto' x-show='$store.cart.cart.item_count > 0'>
        <template x-for='item in $store.cart.cart.items' :key='item.key'>
          {% render 'cart.mini-cart-item' %}
        </template>
        {% for block in section.blocks %}
          {% if block.type == 'recommended-products' %}
            {% if block.settings.products != empty %}
              {% assign ids = '' %}
              {% for product in block.settings.products %}
                {% if forloop.last %}
                  {% assign ids = ids | append: product.id %}
                {% else %}
                  {% assign ids = ids | append: product.id | append: ',' %}
                {% endif %}
              {% endfor %}

              <div
                class='p-4'
                x-show='!`{{ ids }}`.split(`,`).every(id => $store.cart.cart.items.some(cartItem => cartItem.product_id == id))'
              >
                <p class='text-base text-center font-semibold mb-1'>{{ block.settings.title }}</p>
                <div class='flex-col flex gap-2'>
                  {% for product in block.settings.products %}
                    {% assign initialVariant = product.selected_or_first_available_variant %}
                    <div
                      class='bg-gray-100 flex items-center p-2 gap-3'
                      x-show='!$store.cart.cart.items.some(cartItem => cartItem.product_id === {{ product.id }})'
                      x-cloak
                      x-data='recommendedProduct({{ product.selected_or_first_available_variant.id }})'
                      x-init='compare_at_price = `{{ initialVariant.compare_at_price }}`'
                    >
                      <a href='{{ product.url }}' class='size-24 shrink-0'>
                        {% if product.featured_image %}
                          <img
                            src='{{ product.featured_image | img_url: '200x' }}'
                            alt='{{ product.title }}'
                            class='size-24'
                          >
                        {% endif %}
                      </a>
                      <div class='w-full'>
                        <a href='{{ product.url }}' class='text-sm font-semibold line-clamp-1'>{{ product.title }}</a>

                        <div class='text-sm font-semibold gap-3 flex items-center my-1'>
                          <div>
                            <span class='sr-only'>{{ 'products.product.price.regular_price' | t }}</span>
                            <span
                              x-currency='price || {{ initialVariant.price }}'
                              :class="compare_at_price && compare_at_price > price ? 'text-green-500' : ''"
                            >
                              {{ initialVariant.price | money }}
                            </span>
                          </div>
                          <div x-show='compare_at_price && compare_at_price > price'>
                            <span class='sr-only'>{{ 'products.product.price.sale_price' | t }}</span>
                            <s
                              class='text-base text-gray-400'
                              x-currency='compare_at_price'
                            >
                              {{ initialVariant.compare_at_price | money }}
                            </s>
                          </div>
                        </div>

                        <div class='flex gap-2'>
                          {% if product.variants.size > 1 %}
                            <div class='relative w-full'>
                              <select
                                name='selectedVariant'
                                x-model='selectedVariant'
                                @change='selectedVariant = parseInt($event.target.value); price = parseInt($event.target.options[$event.target.selectedIndex].dataset.price); compare_at_price = parseInt($event.target.options[$event.target.selectedIndex].dataset.priceCompare)'
                                class='w-full p-2 text-sm pr-10 border border-gray-300 rounded-lg bg-white appearance-none focus:border-orange-700 focus:ring-1 focus:ring-orange-700 focus:outline-none transition-colors font-semibold'
                              >
                                {% for variant in product.variants %}
                                  <option
                                    value='{{ variant.id }}'
                                    data-price='{{ variant.price }}'
                                    data-price-compare='{{ variant.compare_at_price }}'
                                  >
                                    {{ variant.title }}
                                  </option>
                                {% endfor %}
                              </select>
                              <div class='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
                                <svg
                                  class='w-5 h-5 text-gray-400'
                                  fill='none'
                                  stroke='currentColor'
                                  viewBox='0 0 24 24'
                                  xmlns='http://www.w3.org/2000/svg'
                                >
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                              </div>
                            </div>
                          {% endif %}
                          <button
                            class='h-[38px] w-full cursor-pointer rounded-md bg-red-600  text-center text-sm font-semibold text-white transition-colors hover:bg-gray-900'
                            @click.prevent='addToCart'
                          >
                            <span x-show='!processing'>Add</span>
                            <span x-cloak x-show='processing' class='flex items-center justify-center gap-2'>
                              {% render 'icon-loader', class: 'w-4 h-4 text-white' %}
                              Adding..
                            </span>
                          </button>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>

      
      <div
        class='mt-auto w-full flex-shrink-0 bg-gray-50'
      >
        <div class='flex items-center justify-between gap-4 border-t border-solid border-gray-300 px-4 lg:px-6 pt-5 sm:pt-6 pb-1 sm:pb-2'>
          <div>
            <p class='text-text-md mb-1 font-semibold text-gray-950'>Subtotal</p>
            <p class='text-md  font-normal text-gray-800'>
              {% if taxes_shipping_checkout != blank %}
                {{ taxes_shipping_checkout }}
              {% else %}
                Shipping calculated at checkout
              {% endif %}
            </p>
          </div>
          <p
            class='text-wrap text-xl font-semibold text-gray-900'
            x-currency='$store.cart.cart?.total_price !== undefined ? $store.cart.cart.total_price : {{ cart.total_price }}'
          >
            {{ cart.total_price | money_with_currency }}
          </p>
        </div>

        <div class='flex items-center justify-between gap-2 px-4 lg:px-6 py-5 sm:py-6'>
          <a
            href='/cart/checkout'
            id='checkout-button'
            @click='$store.cart.isCheckingOut = true'
            class='relative w-full transform overflow-hidden rounded-full border-none bg-primary-400  py-4  text-center text-lg font-semibold text-white shadow-md transition-colors duration-300 ease-in-out bg-red-600 hover:bg-red-700 hover:shadow-lg'
            :class="
              {'!bg-gray-500 cursor-not-allowed pointer-events-none !text-white hover:!text-white': $store.cart.isCheckingOut || $store.cart.cart.item_count === 0,
              }
            "
          >
            <span x-show='!$store.cart.isCheckingOut'>Checkout</span>
            <div
              x-show='$store.cart.isCheckingOut'
              x-cloak
              class='flex items-center justify-center gap-3 !text-white'
            >
              {% render 'icon-loader', class: 'w-4 h-4' %}
              Processing...
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    setTimeout(() => {
      Alpine.store('cart').visible = true;
    }, 500);
  });
</script>

{% schema %}
{
  "name": "Mini Cart",
  "class": "mini-cart",
  "max_blocks": 7,
  "settings": [],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "free-shipping-progress",
      "name": "Free Shipping Progress",
      "settings": []
    },
    {
      "type": "cart-product-list",
      "name": "Product List",
      "settings": [
        {
          "type": "text",
          "id": "empty_text",
          "label": "Empty Cart Text",
          "default": "Your cart is empty"
        }
      ]
    },
    {
      "type": "gwp-banners",
      "name": "GWP Banners",
      "limit": 1
    },
    {
      "type": "banner",
      "name": "Banner",
      "settings": [
        {
          "type": "image_picker",
          "id": "banner",
          "label": "Banner"
        },
        {
          "type": "url",
          "id": "banner_link",
          "label": "Banner Link"
        }
      ]
    },
    {
      "type": "cart-button",
      "name": "Cart Buttons",
      "settings": []
    },
    {
      "type": "recommended-products",
      "name": "Recommended Products",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Other parents also bought..."
        },
        {
          "type": "product_list",
          "id": "products",
          "label": "Select Recommended Products"
        }
      ]
    },
    {
      "type": "cart-subtotal",
      "name": "Subtotal",
      "settings": []
    },
    {
      "type": "cart-info",
      "name": "Information",
      "settings": [
        {
          "type": "text",
          "id": "info",
          "label": "Additional information",
          "default": "Free Returns • Satisfaction Guarantee • Flat-Rate Shipping"
        }
      ]
    }
  ]
}
{% endschema %}

<section class='{% render 'fn.get_section_padding', section: section %}' {{ section.shopify_attributes }}>
  <div class='container mx-auto'>
    <div class='text-center max-w-2xl mx-auto'>
      <h2 class='font-bold text-4xl lg:text-6xl mb-3 -tracking-[0.06em] text-brown'>
        {{ section.settings.title }}
      </h2>
      {% if section.settings.content %}
        <p class='text-lg'>{{ section.settings.content }}</p>
      {% endif %}
    </div>

    <div class='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10'>
      {% for block in section.blocks %}
        <a
          href='{{ block.settings.link }}'
          class='!bg-black !flex items-end p-8 aspect-[464/367] relative group overflow-hidden rounded-md'
        >
          {% if block.settings.image %}
            {{
              block.settings.image
              | image_url: width: 800, format: 'webp'
              | image_tag:
                loading: 'lazy',
                class: 'absolute left-0 top-0 w-full max-w-none h-full object-cover object-center group-hover:scale-105 transition-transform duration-300'
            }}
          {% endif %}
          <div
            class='absolute top-0 left-0 bg-gradient-to-tr from-[#000]/95 to-[#000]/10  w-full h-full'
          ></div>
          <div class='relative z-10'>
            <span class='text-3xl font-bold uppercase text-white -tracking-[0.04em]'>
              {{ block.settings.title }}
            </span>
            {% if block.settings.content %}
              <p class='!text-white opacity-65 !text-base'>{{ block.settings.content }}</p>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Collections Grid",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Shop by category"
    },
    {
      "type": "text",
      "id": "content",
      "label": "Content",
      "default": "Your Go-To Spot for Awesome Overlanding and Camping Gear!"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "blocks": [
    {
      "type": "link",
      "name": "Link",
      "settings": [
        {
          "id": "image",
          "label": "Image",
          "type": "image_picker"
        },
        {
          "id": "title",
          "label": "Title",
          "type": "text",
          "default": "Title"
        },
        {
          "id": "content",
          "label": "Content",
          "type": "text"
        },
        {
          "id": "link",
          "label": "Link",
          "type": "url"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections Grid",
      "settings": {
        "title": "Popular categories",
        "content": "Explore these popular categories to find the right gear for your next adventure.",
        "padding_top": "base",
        "padding_bottom": "lg"
      },
      "blocks": [
        {
          "type": "link",
          "settings": {
            "image": "https://images.unsplash.com/photo-1651223482179-def9cefe9925?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            "title": "Rooftop Tents",
            "content": "",
            "link": "shopify://collections/rooftop-tents"
          }
        },
        {
          "type": "link",
          "settings": {
            "image": "https://images.unsplash.com/photo-1641333229364-0a60a8b22cfc?q=80&w=2215&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            "title": "Accessories",
            "content": "",
            "link": "shopify://collections/gear-accessories"
          }
        },
        {
          "type": "link",
          "settings": {
            "image": "https://images.unsplash.com/photo-1598833775803-99eea89ad6a1?q=80&w=2336&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            "title": "Campfires",
            "content": "",
            "link": "shopify://collections/fire"
          }
        }
      ]
    }
  ]
}
{% endschema %}

<div class='tw-container-sm {% render 'fn.get_section_padding', section: section %}'>
  <div
    class='
      tw-flex tw-flex-col tw-justify-between tw-gap-[40px]
      {% if section.settings.reversed -%} lg:tw-flex-row-reverse {%- else -%} lg:tw-flex-row {% endif %}
    '
  >
    <div class='relative order-1 w-full rounded-3xl lg:tw-w-1/2'>
      {% if section.settings.image != blank %}
        {{
          section.settings.image
          | image_url: width: 1200
          | image_tag:
            loading: 'eager',
            width: section.settings.icon.width,
            height: section.settings.image.height,
            sizes: image_sizes,
            class: 'tw-w-full tw-h-full tw-object-cover tw-object-center tw-rounded-[20px]'
        }}
      {% endif %}
    </div>

    <div class='tw-order-2 tw-flex tw-w-full lg:tw-w-1/2 tw-flex-col tw-gap-5 lg:tw-max-w-[512px] lg:tw-py-[100px]'>
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {% when 'title' %}
            <h2 class='tw-text-[32px] lg:tw-text-[48px] tw-font-sans tw-leading-[1.16em] tw-mb-[16px] tw-font-bold tw-text-zinc-900'>
              {{ block.settings.title }}
            </h2>
          {% when 'content' %}
            <div class='tw-text-[18px] tw-mb-[16px] tw-leading-normal tw-text-zinc-600'>
              {{ block.settings.content }}
            </div>
          {% when 'checklist' %}
            {%- liquid
              assign lines = block.settings.content | strip | replace: '<ul>', '' | replace: '</ul>', '' | replace: '</p>', '' | replace: '</p>', '' | replace: '<li>', '' | split: '</li>' | compact
            -%}
            <div class='tw-flex tw-flex-col tw-gap-[8px] tw-mt-[24px]'>
              {% for line in lines %}
                <div class='tw-flex tw-items-top tw-gap-[10px]'>
                  {% render 'icons.checkmark' %}
                  <div class='tw-text-[16px] tw-leading-normal tw-tracking-normal tw-font-bold tw-text-zinc-900'>
                    {{ line }}
                  </div>
                </div>
              {% endfor %}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Content / Image",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    },
    {
      "type": "checkbox",
      "id": "reversed",
      "label": "Reverse"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "t:sections.rich-text.blocks.heading.name",
      "limit": 3,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Talk about your brand",
          "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "content",
      "name": "Content",
      "limit": 3,
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>",
          "label": "t:sections.rich-text.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "checklist",
      "name": "Checklist",
      "limit": 3,
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "default": "<ul><li>Check</li><li>Check 2</li><li>Check 3</li></ul>",
          "label": "Content"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Content / Image",
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "content"
        }
      ]
    }
  ]
}
{% endschema %}

<div class='{% render 'fn.get_section_padding', section: section %}'>
  <div class='container'>
    <h2 class='mb-5 text-3xl font-semibold text-gray-950 lg:mb-6 lg:text-5xl'>
      {{ section.settings.title }}
    </h2>
    <div class='w-full lg:flex lg:gap-x-11'>
      {% assign half = section.settings.faqs.count | divided_by: 2 | ceil %}

      <div class='flex w-full flex-col lg:w-1/2'>
        {% for faq in section.settings.faqs limit: half %}
          {% render 'faq.item', faq: faq %}
        {% endfor %}
      </div>

      <div class='flex w-full flex-col lg:w-1/2'>
        {% for faq in section.settings.faqs offset: half %}
          {% render 'faq.item', faq: faq %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script type='application/ld+json'>
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {% for faq in section.settings.faqs %}
        {
          "@type": "Question",
          "name": {{ faq.question | strip_html | strip_newlines | json }},
          "acceptedAnswer": {
            "@type": "Answer",
            "text": {{ faq.answer | metafield_text | json }}
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  }
</script>

{% schema %}
{
  "name": "FAQ",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Frequently Asked Questions"
    },
    {
      "type": "metaobject_list",
      "id": "faqs",
      "label": "FAQs",
      "metaobject_type": "faq"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "category": "Text",
      "settings": {
         "title": "Frequently Asked Questions",
         "padding_bottom": "lg",
         "padding_top": "lg"
      }
    }
  ]
}
{% endschema %}

<section class="">
  <div class="container">
    {{ section.settings.image | image_tag: size: '1024x', class: 'w-full', alt: 'Image' }}
  </div>
</section>

{% schema %}
  {
    "name": "Image",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "header",
        "content": "Image"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "Image",
        "default": "https://images.unsplash.com/photo-1719937206255-cc337bccfc7d?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      }
    ],
    "presets": [
      {
        "name": "Image",
        "settings": {
          "image": "https://images.unsplash.com/photo-1719937206255-cc337bccfc7d?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        }
      }
    ]
  }
{% endschema %}

<section
  class='{% render 'fn.get_section_padding', section: section %} relative container mx-auto'
  {{ section.shopify_attributes }}
>
  {% assign alignment_class = '' %}
  {% case section.settings.alignment %}
    {% when 'left' %}
      {% assign alignment_class = 'text-left items-start' %}
    {% when 'center' %}
      {% assign alignment_class = 'text-center items-center' %}
    {% when 'right' %}
      {% assign alignment_class = 'text-right items-end' %}
  {% endcase %}

  <div class='flex flex-col {{ alignment_class }}'>
    {% if section.settings.headline %}
      <p class='uppercase font-semibold text-xs text-gray-600 mb-2'>{{ section.settings.headline }}</p>
    {% endif %}
    {% if section.settings.title %}
      <h2 class='font-bold text-4xl lg:text-5xl mb-3 -tracking-[0.06em] text-brown'>
        {{ section.settings.title }}
      </h2>
    {% endif %}
    {% if section.settings.content %}
      <p class='text-lg text-gray-800'>{{ section.settings.content }}</p>
    {% endif %}
    {% if section.settings.button_text and section.settings.button_link %}
      <a
        href='{{ section.settings.button_link }}'
        class='bg-red-500 text-white rounded-lg px-6 py-2 inline-block mt-4 lg:mt-5'
      >
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Page Title",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Your Page Title"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "textarea",
      "id": "content",
      "label": "Content"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "presets": [
    {
      "name": "Page Title",
      "settings": {
        "headline": "Welcome",
        "title": "Discover Our Story",
        "alignment": "left",
        "content": "Learn more about our mission and values.",
        "button_text": "Read More",
        "button_link": "/about",
        "padding_top": "base",
        "padding_bottom": "base"
      }
    }
  ]
}
{% endschema %}

<section class='{% render 'fn.get_section_padding', section: section %} relative' {{ section.shopify_attributes }}>
  <div class='container'>
    <div class='flex flex-wrap divide-gray-300 divide-y sm:divide-y-0 lg:divide-x items-center justify-center'>
      {%- for block in section.blocks -%}
        <div
          class='flex w-full sm:w-1/2 lg:w-1/4 flex-col items-center text-center py-5 lg:p-4'
          {{ block.shopify_attributes }}
        >
          {%- if block.settings.icon -%}
            <div class='mb-2.5'>
              <img
                src='{{ block.settings.icon | image_url: width: 60 }}'
                alt='{{ block.settings.title }}'
                width='24'
                height='24'
                loading='lazy'
                class='block size-6'
              >
            </div>
          {%- endif -%}

          {%- if block.settings.title != blank -%}
            <h2
              class='text-[15px] font-semibold'
            >
              {{ block.settings.title }}
            </h2>
          {%- endif -%}
          {%- if block.settings.description != blank -%}
            <p
              class='text-gray-700 text-[15px]'
            >
              {{ block.settings.description }}
            </p>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Perks",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "padding_top",
      "label": "Top padding",
      "options": [
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Medium"
        },
        {
          "value": "md",
          "label": "Large"
        },
        {
          "value": "lg",
          "label": "Extra Large"
        }
      ],
      "default": "sm"
    },
    {
      "type": "select",
      "id": "padding_bottom",
      "label": "Bottom padding",
      "options": [
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Medium"
        },
        {
          "value": "md",
          "label": "Large"
        },
        {
          "value": "lg",
          "label": "Extra Large"
        }
      ],
      "default": "sm"
    }
  ],
  "blocks": [
    {
      "type": "perk",
      "name": "Perk",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Free Shipping"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description",
          "default": "On all U.S. Orders Over $30"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Perks",
      "settings": {
        "padding_top": "base",
        "padding_bottom": "base"
      },
      "blocks": [
        {
          "type": "perk",
          "settings": {
            "title": "Free shipping",
            "description": "On all U.S. Orders Over $30"
          }
        },
        {
          "type": "perk",
          "settings": {
            "title": "60 Day Returns",
            "description": "Try our bottles risk-free!"
          }
        },
        {
          "type": "perk",
          "settings": {
            "title": "Premium Quality",
            "description": "Premium quality"
          }
        }
      ]
    }
  ]
}
{% endschema %}

<!-- routes.search_url -->
{% assign search_results_url = '/search' %}

<header
  id='header'
  class='flex h-[70px] items-center border-b border-gray-300 bg-white lg:h-20'
  @click="dispatchEvent(new CustomEvent('close-popup', { bubbles: true }))"
>
  <div class='page-width flex w-full items-center justify-between lg:relative'>
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'image' %}
          <a href='/' class='absolute left-1/2 z-30 shrink-0 -translate-x-1/2 lg:static lg:translate-x-0'>
            {{
              block.settings.logo
              | image_url: width: 200
              | image_tag:
                loading: 'eager',,
                width: block.settings.logo.width,
                height: block.settings.logo.height,
                class: 'w-[86px] md:w-[102px]'
            }}
            <div class='sr-only'>{{ shop.name }}</div>
          </a>
        {% when 'menu' %}
          <nav role='navigation' class='order-first lg:order-none'>
            {% render 'nav-mobile-trigger' %}
            {% render 'nav-desktop', block: block %}
          </nav>
        {% when 'cart_account_search' %}
          <div class='flex items-center space-x-5 lg:space-x-8'>
            <form action='{{ search_results_url }}' class='relative hidden items-center lg:flex'>
              <input
                placeholder='Search...'
                name='q'
                class='kuSearchInput w-full rounded-md border border-gray-300 p-2.5 pr-8 text-sm leading-5 text-gray-500 focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 lg:block'
              >
              <div class='right-2.5 w-4 text-blue-900 lg:absolute lg:text-black'>
                {% render 'icon-search' %}
              </div>
            </form>
            <button
              class='right-2.5 block w-4 text-blue-900 lg:hidden'
              
              @click='
                $store.nav.toggleSearch();
                setTimeout(() => {
                  if ($store.nav.isSearchVisible) $refs.searchInput.focus();
                }, 100);
              '
            >
              {% render 'icon-search' %}
            </button>
            {% render 'mini-cart-element' %}
          </div>
      {% endcase %}
    {% endfor %}
  </div>
</header>
<div
  class='z-10 block w-full lg:hidden'
  x-show='$store.nav.isSearchVisible'
  x-collapse
  x-cloak
>
  <div class='bg-white py-3'>
    <div
      class='page-width mb-1'
      @keyup.escape.window='$store.nav.closeSearch()'
    >
      <form action='{{ search_results_url }}'>
        <div class='flex w-full justify-between gap-6'>
          <input
            placeholder='Search...'
            x-ref='searchInput'
            name='q'
            class='kuSearchInput !focus:outline-none !focus:ring-0 w-full border-0 pr-8 text-lg leading-5 text-gray-500 lg:block'
          >
          <button type='button' @click='$store.nav.toggleSearch()'>{% render 'icon-close' %}</button>
        </div>
      </form>
    </div>
  </div>
</div>



{% schema %}
{
  "name": "Header",
  "blocks": [
    {
      "type": "image",
      "name": "Logo",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "logo",
          "label": "Logo or image"
        }
      ]
    },
    {
      "type": "menu",
      "name": "Menu",
      "limit": 1,
      "settings": [
        {
          "label": "Main Menu",
          "id": "main_linklist",
          "type": "link_list"
        },
        {
          "label": "Featured Size Size",
          "id": "featured_section_size",
          "type": "select",
          "options": [
            {
              "value": "16.66%",
              "label": "1/6"
            },
            {
              "value": "25%",
              "label": "1/4"
            },
            {
              "value": "33%",
              "label": "1/3"
            },
            {
              "value": "auto",
              "label": "Auto"
            }
          ],
          "default": "16.66%"
        }
      ]
    },
    {
      "type": "cart_account_search",
      "limit": 1,
      "name": "Cart Account Search"
    }
  ],
  "settings": [
    {
      "label": "Mobile Menu",
      "id": "mobile_menu",
      "type": "link_list"
    }
  ]
}
{% endschema %}

{%- comment -%}
  How this works:
  - If we only have one image, we want it to be full width
  - If we have two images, we want them to be 50% width each
  - If we have a mobile image, we want to hide the desktop image on mobile
  - The first mobile image will be the size of the hero on mobile (only if there is one mobile image)
  - If we have a second mobile image, the two mobile images are put together to make the hero on mobile
{%- endcomment -%}

{%- style -%}
  #Banner-{{ section.id }} .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }}
    ;
  }
{%- endstyle -%}

{%- liquid
  if section.settings.image_2 != blank
    assign image_sizes = '50%'
  else
    assign image_sizes = '100%'
  endif

  if section.settings.mobile_image != blank
    assign image_classes = 'hidden sm:block object-cover w-full h-full'
  else
    assign image_classes = 'object-cover w-full h-full object-bottom'
  endif
-%}
<section
  id='Banner-{{ section.id }}'
  data-block='hero'
  class='{{ section.settings.padding_top }} {{ section.settings.padding_bottom }}'
>
  {% if section.settings.hero_link != blank %}
    <a href='{{ section.settings.hero_link }}' class='block'>
  {% endif %}

  <div
    class='hero relative grid grid-cols-1 overflow-hidden {{ section.settings.width }}'
  >
    <div
      class='
        col-start-1 row-start-1 grid h-full sm:auto-cols-fr sm:grid-flow-col md:max-h-[1200px]
        {%- if section.settings.image != blank and section.settings.image_2 != blank %} md:grid-cols-2 {%- endif-%}
      '
    >
      {%- if section.settings.image != blank -%}
        {{
          section.settings.image
          | image_url: width: 1920
          | image_tag:
            loading: 'eager',
            width: section.settings.image.width,
            height: section.settings.image.height,
            sizes: image_sizes,
            class: image_classes,
            widths: '2560, 1920, 1536, 1080, 750, 640, 360'
        }}
      {%- else -%}
        <div class='w-full bg-slate-800 md:aspect-video'></div>
      {% endif %}
      {%- if section.settings.image_2 != blank -%}
        {{
          section.settings.image_2
          | image_url: width: 1920
          | image_tag:
            loading: 'eager',
            width: section.settings.image_2.width,
            height: section.settings.image_2.height,
            sizes: image_sizes,
            class: image_classes,
            widths: '2560, 1920, 1536, 1080, 750, 640, 360'
        }}
      {%- endif -%}
      {%- if section.settings.mobile_image != blank -%}
        {{
          section.settings.mobile_image
          | image_url: width: 700
          | image_tag: loading: 'eager', width: 700, height: 700, class: 'sm:hidden w-full h-full object-cover'
        }}
      {%- endif -%}
    </div>

    <div class='z-10 col-start-1 row-start-1 flex items-center justify-center px-5 py-12 md:px-12 {{ section.settings.desktop_content_position }}'>
      <div class='max-w-2xl text-white lg:max-w-4xl {{ section.settings.content_alignment }}'>
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'heading' -%}
              <div>
                <h2
                  class='{{ block.settings.heading_size }} inline-block font-bold'
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.heading }}
                </h2>
              </div>
            {%- when 'text' -%}
              <div
                class='content-minimal mt-2 {{ block.settings.width }} {{ block.settings.text_style }} {{ block.settings.text_size }}'
                {{ block.shopify_attributes }}
              >
                {{ block.settings.text }}
              </div>
            {%- when 'buttons' -%}
              <div
                class='mt-10 inline-flex flex-wrap gap-5 {{ block.settings.position }}'
                {{ block.shopify_attributes }}
              >
                {%- if block.settings.button_label_1 != blank -%}
                  {% render 'button-link',
                    variant: block.settings.button_style_1,
                    text: block.settings.button_label_1,
                    href: block.settings.button_link_1
                  %}
                {%- endif -%}
                {%- if block.settings.button_label_2 != blank -%}
                  {% render 'button-link',
                    variant: block.settings.button_style_2,
                    text: block.settings.button_label_2,
                    href: block.settings.button_link_2
                  %}
                {%- endif -%}
              </div>
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
  {% if section.settings.hero_link != blank %}
    </a>
  {% endif %}
</section>

{% schema %}
{
  "name": "Hero",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "options": [
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-right",
          "label": "Right"
        },
        {
          "value": "text-left",
          "label": "Left"
        }
      ],
      "default": "text-center",
      "label": "Content Alignment"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "lg:items-start lg:justify-start",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "lg:items-start lg:justify-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "lg:items-start lg:justify-end",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "lg:items-center lg:justify-start",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "lg:items-center lg:justify-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "lg:items-center lg:justify-end",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "lg:items-end lg:justify-start",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "lg:items-end lg:justify-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "lg:items-end lg:justify-end",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "lg:items-center lg:justify-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Section Width",
      "options": [
        {
          "value": "",
          "label": "Full Width"
        },
        {
          "value": "mx-auto max-w-[1450px]",
          "label": "Page Width"
        }
      ],
      "default": ""
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "t:sections.all.padding.padding_top",
      "options": [
        {
          "value": "pt-0",
          "label": "None"
        },
        {
          "value": "pt-9",
          "label": "Small"
        },
        {
          "value": "pt-14",
          "label": "Normal"
        },
        {
          "value": "pt-28",
          "label": "Large"
        }
      ],
      "default": "pt-0"
    },
    {
      "type": "select",
      "label": "t:sections.all.padding.padding_bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "pb-0",
          "label": "None"
        },
        {
          "value": "pb-9",
          "label": "Small"
        },
        {
          "value": "pb-14",
          "label": "Normal"
        },
        {
          "value": "pb-28",
          "label": "Large"
        }
      ],
      "default": "pb-0"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "url",
      "id": "hero_link",
      "label": "Link for hero section (optional)"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "First Mobile Image"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_2",
      "label": "Second Mobile Image"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 3,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "!font-medium text-lg",
              "label": "Extra Small"
            },
            {
              "value": "text-3xl lg:text-4xl",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "text-4xl lg:text-5xl",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "text-5xl lg:text-6xl",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "text-4xl lg:text-5xl",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 3,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Give customers details about the banner image(s) or content on the template.</p>",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_size",
          "options": [
            {
              "value": "text-base",
              "label": "Base"
            },
            {
              "value": "text-lg",
              "label": "Large"
            },
            {
              "value": "text-xl",
              "label": "Extra Large"
            },
            {
              "value": "text-2xl",
              "label": "2 Extra Large"
            },
            {
              "value": "text-3xl",
              "label": "3 Extra Large"
            }
          ],
          "default": "text-base",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "position",
          "label": "Buttons Position",
          "options": [
            {
              "value": "justify-center",
              "label": "Center"
            },
            {
              "value": "justify-end",
              "label": "Right"
            },
            {
              "value": "justify-start",
              "label": "Left"
            }
          ],
          "default": "justify-center"
        },
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "select",
          "id": "button_style_1",
          "label": "First button style",
          "options": [
            {
              "value": "primary",
              "label": "Primary"
            },
            {
              "value": "secondary",
              "label": "Secondary"
            },
            {
              "value": "tertiary",
              "label": "Tertiary"
            },
            {
              "value": "transparent",
              "label": "Transparent"
            }
          ],
          "default": "primary"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "select",
          "id": "button_style_2",
          "label": "Second button style",
          "options": [
            {
              "value": "primary",
              "label": "Primary"
            },
            {
              "value": "secondary",
              "label": "Secondary"
            },
            {
              "value": "tertiary",
              "label": "Tertiary"
            }
          ],
          "default": "primary"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero",
      "blocks": [
        {
          "type": "heading",
          "settings": {
            "heading": "I'm changing it again",
            "heading_size": "text-5xl lg:text-6xl"
          }
        },
        {
          "type": "text",
          "settings": {
            "text": "<p>Give customers details about the banner image(s) or content on the template.</p>",
            "text_size": "text-3xl"
          }
        },
        {
          "type": "buttons"
        }
      ],
      "settings": {
        "content_alignment": "text-left",
        "desktop_content_position": "lg:items-center lg:justify-center",
        "width": "",
        "padding_top": "pt-0",
        "padding_bottom": "pb-0",
        "hero_link": "shopify://products/deck-sandal-sand",
        "image": "https://images.unsplash.com/photo-1738447429433-69e3ecd0bdd0?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        "image_overlay_opacity": 50
      }
    }
  ]
}
{% endschema %}