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

<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

              
<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 section.settings.link != blank %}

<a class="ezfy-custom-link" 
   href="{{ section.settings.link }}"
   {% if section.settings.new_tab %}target="_blank"{% endif %}
   ></a>
<style>
.image-banner-section{
    position: relative;
}

dpw1

{% if section.settings.enable %}
  <style data-custom-fonts>
    {% assign items = section.blocks | reverse  %}



      {% for block in items %}

      {% assign name = block.settings.name %}
      {% assign url = block.settings.custom_font_url  %}

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

{% 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

   <div class="menu__hamburguer--container" >
        <span>
            {% render 'icon-hamburger' %}
            {% render 'icon-close' %}
        </span>
        <span class="menu__hamburguer--text">Menu</span>
      </div>
<style>
.menu__hamburguer--container{
  position: relative;

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

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

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