dpw1

{% if section.settings.show_on_top_of_image_on_mobile_by_ezfycode %}
<style>
/* Custom code by ezfycode.com
Fix mobile banner and slideshow [start]
===================================== */
{% assign _mobile_banner_background = section.settings.mobile_banner_background | color_to_rgb %}
{% assign mobile_banner_background_opacity = section.settings.mobile_banner_background_opacity | prepend: ',.' | append: ')'  %}
{% capture mobile_banner_background %}
{% if section.settings.mobile_banner_background_opacity == 100 %}
{{ section.settings.mobile_banner_background }}

dpw1

{% assign variants_per_row_desktop = 4 %}
{% assign variants_per_row_mobile = 3 %}

<style>
    @media (min-width: 750px){
      [id*='ProductInfo-'] variant-radios fieldset,
  [id*='ProductInfo-'] variant-selects fieldset{
      display: grid;
       grid-template-columns: repeat(auto-fill, minmax(calc(100% / {{ variants_per_row_desktop }}), 1fr));
  }

dpw1

              
<a class="ezfy-clickable-banner" href="{{ block.settings.button_link_1 }}"></a>
<style>
[id*='{{ section.id }}'].banner{
position: relative;
  cursor: pointer;
}

</style>
<script>(() => {

dpw1

{% if template == 'product' %}
<script>
document.addEventListener('keydown', function (event) {

  function isThumbnailsOrArrows(){
    // has arrows
    if (window.getComputedStyle(document.querySelector(`.slider-buttons`)).display !== 'none'){
      return 'arrows';
    }

dpw1

{% comment %}
  Always visible search bar by ezfycode.com
{% endcomment %}

{% assign predictive_search_height = 500 %}
{% assign search_box_width = 350 %}

<div class="EzfyHeaderSearch EzfyHeaderSearch--{{ device }}">
  {%- if settings.predictive_search_enabled -%}
    <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">

dpw1

<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="text"
name="contact[first_name]"
class="field__input"
value=""
autocorrect="off"
autocapitalize="off"
{% if form.errors %}

dpw1

     {
    "type": "header",
    "content": "Custom options by [ezfycode.com](https://ezfycode.com)"
  },
  {
    "type": "checkbox",
    "id": "show_on_top_of_image_on_mobile_by_ezfycode",
    "label": "Show text on top of image on mobile",
    "default": true
  },

dpw1

{% comment %}Hide sold out variants by ezfycode.com [START]{% endcomment %}
{% assign all_products = null | sort %}
{% assign count = 0 %}

{% for each in section.settings.collection.products %}
{% if each.available %}
{% assign _product = each | sort %}
{% assign all_products = all_products | concat:_product %}
{% endif %}

dpw1

{% if settings.enable_ezfy_badges_color %}
  <style>
    {% comment %}EZFY Variables Liquid [start]{% endcomment %}
    {% assign sales_badge_background_color = settings.sales_badge_background_color %}
    {% assign sales_badge_text_color = settings.sales_badge_text_color %}
    {% assign sales_badge_text_size_desktop = settings.sales_badge_text_size_desktop %}
    {% assign sales_badge_text_size_mobile = settings.sales_badge_text_size_mobile %}
    {% assign sold_out_badge_background_color = settings.sold_out_badge_background_color %}
    {% assign sold_out_badge_text_color = settings.sold_out_badge_text_color %}
    {% assign sold_out_text_size_desktop = settings.sold_out_text_size_desktop %}

dpw1

,
  {
    "name": "Badge colors & font size",
    "settings": [
      {
        "type": "header",
        "content": "Custom badge colors by ezfycode.com"
      },
      {
        "type": "checkbox",