{%- liquid
    case section.settings.icon_format  
    when 'numbered'
    assign icon_format = 'numbered'
    when 'alphabets'
    assign icon_format = 'alphabets'
    when 'simple-round' 
    assign icon_format = 'simple-round'
    when 'icon'
    assign icon_format = 'icon'
    endcase
-%}

{{ 'section-hotspot.css' | asset_url | stylesheet_tag }}
{{ 'magnific-popup.css' | asset_url | stylesheet_tag }}
<script src="{{ 'magnific-popup.js' | asset_url }}" defer="defer"></script>
{{ 'product-card.css' | asset_url | stylesheet_tag }}


{%- if section.settings.enable_quick_add or settings.enable_quickview -%}
  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}



{%- style -%}
  .hotspot-block-section{overflow:hidden} 
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.50 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.50 | round: 0 }}px;
  }
   @media screen and (min-width: 576px) and (max-width: 749px){
   .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
   }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
  {% for block in section.blocks %}
    .hotspot-block-section .dt-sc-hotspot-item{{forloop.index}}, .hotspot-block-section .dt-sc-hotspot-icon{{forloop.index}} {
      top: {{ block.settings.top_position }}%;
      left: {{ block.settings.left_position }}%;
      transform: translate(-{{ block.settings.top_position }}%, -{{ block.settings.left_position }}%); }
    
    .hotspot-block-section .dt-sc-hotspot-item2.block-type-product{ z-index:1 !important;}
    .hotspot-block-section .dt-sc-hotspot-item{{forloop.index}}.block-type-product.open { z-index: 999;}
    {% endfor %}

   /* .hotspot-block-section .dt-sc-hotspot-item { width: {{ section.settings.hotspot_size }}px; height: {{ section.settings.hotspot_size }}px; } */
    .hotspot-block-section .dt-sc-hotspot-item,
    .hotspot-block-section .dt-sc-hotspot-marker span { width: {{ section.settings.hotspot_size }}px;
      height: {{ section.settings.hotspot_size }}px; line-height: {{ section.settings.hotspot_size }}px; font-size: var(--font-base-size); }
  
    .hotspot-block-section  .dt-sc-hotspot-marker span:after { width: {{ section.settings.hotspot_size | plus: 4 }}px;
      height: {{ section.settings.hotspot_size | plus: 4 }}px;
      border: {{ section.settings.hotspot_outer_size }}px solid;
      border: {{ section.settings.hotspot_outer_size }}px solid;
        color: {{ section.settings.hotspot_outer_color }};
        margin: -{{ section.settings.hotspot_size | plus: 4 | divided_by: 2 }}px auto auto -{{ section.settings.hotspot_size | plus: 4 | divided_by: 2 }}px;
        }
    .hotspot-block-section  .dt-sc-hotspot-marker.style-2 span:after { width: {{ section.settings.hotspot_size | plus: 8 }}px;
       height: {{ section.settings.hotspot_size | plus: 8 }}px;
        border: {{ section.settings.hotspot_outer_size }}px dashed {{ section.settings.hotspot_outer_color }}; height: {{ section.settings.hotspot_size | plus: 8 }}px;
        margin: -{{ section.settings.hotspot_size | plus: 8 | divided_by: 2 }}px auto auto -{{ section.settings.hotspot_size | plus: 8 | divided_by: 2 }}px;
        }

    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-marker.style-3 span {
      /* box-shadow: 0 0 0 {{ section.settings.hotspot_outer_size }}px var(--DTPrimaryColor);
        box-shadow: 0 0 0 {{ section.settings.hotspot_outer_size }}px {{ section.settings.hotspot_outer_color }}; */  position: absolute; display: inline-flex; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1); width: 25px; height: 25px; border-radius: 50%; z-index: -1; background: rgba(var(--color-background)); transition: all .3s linear; align-items: center; justify-content: center; }
    .hotspot-block-section .dt-sc-hotspot-icon.style-3:hover span[class*="fa-plus"]{transform:translate(-50%,-50%) scale(1);}
  .hotspot-block-section .dt-sc-hotspot-content a[title] {display:inline-block;}
    .hotspot-block-section .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size }}px; }
   .hotspot-block-section .dt-sc-hotspot-content .products .product-detail{padding:30px 0 0;}
   .hotspot-block-section .dt-sc-hotspot-content{margin:0;padding:0;} 
   .hotspot-block-section .dt-sc-hotspot-content .products .product-detail a.dt-sc-btn{display:flex;}
   .mfp-content .dt-sc-hotspot-content{padding:0;}
   button.mfp-close:before{ content: ''; display: block; height: 18px; width: 18px; margin:auto; -webkit-mask:url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100'  xml:space='preserve'> <path d='M57,50l35.2-35.2c1.9-1.9,1.9-5.1,0-7c-1.9-1.9-5.1-1.9-7,0L50,43L14.8,7.7c-1.9-1.9-5.1-1.9-7,0c-1.9,1.9-1.9,5.1,0,7 L43,50L7.7,85.2c-1.9,1.9-1.9,5.1,0,7c1,1,2.2,1.5,3.5,1.5s2.5-0.5,3.5-1.5L50,57l35.2,35.2c1,1,2.2,1.5,3.5,1.5s2.5-0.5,3.5-1.5 c1.9-1.9,1.9-5.1,0-7L57,50z'/></svg>"); 
                           background: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 10px; }
   button.mfp-close{background:rgba(var(--color-button));color:rgba(var(--color-button-text));border:none;}
   button.mfp-close:hover{background:rgba(var(--color-secondary-button-text));color:rgba(var(--color-secondary-button));}

    .hotspot-block-section .dt-sc-hotspot-popup.on-right.dt-sc-popup-open { left: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot-popup.on-left.dt-sc-popup-open { right: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot-popup.on-bottom.dt-sc-popup-open { top: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot-popup.on-top.dt-sc-popup-open { bottom: calc({{ section.settings.hotspot_size }}px + 10px); }
     
  
    .hotspot-block-section .dt-sc-hotspot.style-2 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-right { left: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-2 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-left { right: calc({{ section.settings.hotspot_size }}px + 10px) ; }
    .hotspot-block-section .dt-sc-hotspot.style-2 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-bottom { top: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-2 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-top { bottom: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-2 .dt-sc-hotspot-item .dt-sc-hotspot-popup { opacity: 1; visibility: visible; }
    
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-right { left: {{ section.settings.hotspot_size }}px; }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-left { right: {{ section.settings.hotspot_size }}px; }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-bottom { top: {{ section.settings.hotspot_size }}px; }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-top { bottom: {{ section.settings.hotspot_size }}px; }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-right { left: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-left { right: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-bottom { top: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-top { bottom: calc({{ section.settings.hotspot_size }}px + 10px); }
    .hotspot-block-section .dt-sc-hotspot-content p{line-height:normal;}

  
  @media (max-width: 1540px) {
      .hotspot-block-section .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size_laptop }}px; padding: 1.5em; }
      .hotspot-block-section .dt-sc-hotspot-popup .dt-sc-hotspot-content-title { font-size: var(--font-h5-size); }
    }
   
    @media only screen and (max-width: 1199px) {
   
      .hotspot-block-section .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size_tablet }}px; padding: 1.25em; }
      .hotspot-block-section .dt-sc-hotspot-popup .dt-sc-hotspot-content-title { font-size: var(--font-h6-size); }
      .hotspot-block-section .dt-sc-hotspot-content .products .product-detail{padding:15px 0 0;}
    }
 
    @media (max-width: 767px) {
      .hotspot-block-section .dt-sc-hotspot-item {
        width: calc(.75 * {{ section.settings.hotspot_size }}px); height: calc(.75 * {{ section.settings.hotspot_size }}px);
      }
      .hotspot-block-section .dt-sc-hotspot-item,
      .hotspot-block-section .dt-sc-hotspot-icon span { width: calc(.75 * {{ section.settings.hotspot_size }}px); height: calc(.75 * {{ section.settings.hotspot_size }}px);
        font-size: calc(.75* {{ section.settings.hotspot_icon_text_size }}px); }
      .hotspot-block-section .dt-sc-hotspot-icon span:after {
        width: calc(.65* {{ section.settings.hotspot_size | plus: 4 }}px); height: calc(.65* {{ section.settings.hotspot_size | plus: 4 }}px);
        margin: calc(.65* -{{ section.settings.hotspot_size | plus: 4 | divided_by: 2 }}px) auto auto calc(.65* -{{ section.settings.hotspot_size | plus: 4 | divided_by: 2 }}px);
      }
      .mfp-content .dt-sc-hotspot-popup { opacity: 1; visibility: visible; width: 50%;padding:20px; }
      .mfp-content .dt-sc-hotspot-popup[class*="on-"] { left: 0; right: 0;  margin: 0 auto;
            background: rgb(var(--color-background));
          {% if section.settings.enable_box_shadow %} box-shadow: var(--DTboxShadow); {% endif %} border-radius: var(--DTRadius);
            border-radius: {{ section.settings.border_radius}}px;
            }
      .mfp-content .dt-sc-hotspot-content .products .product-detail{padding:15px 0 0;}
      .dt-sc-hotspot-popup:before{display:none;}
    }
    @media (max-width: 576px) {
      .mfp-content .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size_mobile }}px; padding: 20px; }
      .dt-sc-hotspot-content-title { font-size: var(--font-h5-size); }
      .mfp-content .dt-sc-hotspot-content{margin:0;} 
      
  }
  
  .dt-sc-hotspot-icon {
    height: 100%;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;}
  .dt-sc-hotspot.hotspot-type-list .dt-sc-hotspot-popup{ width: {{ section.settings.hotspot_content_size }}px;}
       @media (max-width: 1540px) {
    .dt-sc-hotspot.hotspot-type-list .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size_laptop }}px; } 
       }
    @media (max-width: 1199px) {
    .dt-sc-hotspot.hotspot-type-list .dt-sc-hotspot-popup { width: {{ section.settings.hotspot_content_size_tablet }}px; } 
       }
     @media (max-width: 750px) {
       .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-marker.style-3 span{height:18px;width:18px;}
      .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-right{left:-60px}
       .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-right{left:-50px;}
       .hotspot-block-section .dt-sc-hotspot-popup.on-right {    top: 30%;transform: translateY(-70%);}
       .hotspot-block-section .dt-sc-hotspot-popup{padding:1rem}
     .dt-sc-hotspot.hotspot-type-list .dt-sc-hotspot-popup{  width: {{ section.settings.hotspot_content_size_mobile }}px;}
     }
    @media (max-width: 450px) {
       .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-marker.style-3 span{height:15px;width:15px;}
      .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item .dt-sc-hotspot-popup.on-right{left:-80px}
       .hotspot-block-section .dt-sc-hotspot.style-3 .dt-sc-hotspot-item:hover .dt-sc-hotspot-popup.on-right{left:-90px;}
    }
{%- endstyle -%}  

<div class="hotspot-block-section color-{{ section.settings.color_scheme }} gradient {{ section.settings.custom_class_name }} {% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div class="{% if section.settings.page_full_width %} page-full-width {% else %} page-width {% endif %} {% if section.settings.page_full_width_spacing %} page-full-width_spacing {% endif %}section-{{ section.id }}-padding isolate">
    <div class="row">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin content-align--{{ section.settings.column_alignment }}">
         {%- if section.settings.sub_heading != blank -%}  
         <h6 class="sub-heading">{{ section.settings.sub_heading | escape }}</h6>
         {%- endif -%} 
         {%- if section.settings.title != blank -%}  
          <h2 class="title {{ section.settings.heading_size }}">
            {{ section.settings.title | escape }}
          </h2>
          {%- endif -%} 
          {%- if section.settings.description != blank -%}  
          <p class="description">{{ section.settings.description }}</p>
          {%- endif -%}   
          {%- if section.settings.button_label != blank -%}
            <a {% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %} class="button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ section.settings.button_label | escape }}</a>
          {%- endif -%}
        </div>
    {%- endunless -%}
      <div class="dt-sc-hotspot  {{icon_format}} {{section.settings.hotspot_tooltip_style}} tool-tip-{{section.settings.hotspot_tooltip_style}} {{ section.settings.hotspot_style }} {{hotspot_overlay}} hotspot-type-{{ section.settings.hotspot_type }}">        
  {%- if section.settings.spot_image != blank %}  
  <img
              srcset="{%- if section.settings.spot_image.width >= 375 -%}{{ section.settings.spot_image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 550 -%}{{ section.settings.spot_image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 750 -%}{{ section.settings.spot_image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 1100 -%}{{ section.settings.spot_image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 1500 -%}{{ section.settings.spot_image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 1780 -%}{{ section.settings.spot_image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 2000 -%}{{ section.settings.spot_image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 3000 -%}{{ section.settings.spot_image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if section.settings.spot_image.width >= 3840 -%}{{ section.settings.spot_image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ section.settings.spot_image | image_url }} {{ section.settings.spot_image.width }}w"
              sizes="100vw"
              src="{{ section.settings.spot_image | image_url: width: 1500 }}"
              loading="lazy"
              class="dt-sc-hotspot-image"
              alt="{{ section.settings.spot_image.alt | escape }}"
              width="{{ section.settings.spot_image.width }}"
              height="{{ section.settings.spot_image.height }}"
            >  
           {%- else -%}
           {{ 'hero-apparel-1' | placeholder_svg_tag }}  
    {%  endif %}
        {% for block in section.blocks %} 
        {% if block.type == 'product' %} 
        {% if block.settings.product != blank %}
        {% assign product = all_products[block.settings.product] %}        
        <div class="dt-sc-hotspot-item dt-sc-hotspot-item{{forloop.index}} block-type-{{block.type}}">
           <a class="dt-sc-hotspot-marker dt-sc-hotspot-icon  {{section.settings.hotspot_style}}" href="#dt-sc-hotspot-marker-{{forloop.index}}"><span class="fa fa-plus"></span></a>   
          <div id="dt-sc-hotspot-marker-{{forloop.index}}" class="dt-sc-hotspot-popup {{block.settings.text_position}}">
            <ul class="dt-sc-hotspot-content {{ block.settings.content_alignment}}">
           {% render 'card-product-5',
              card_product: product,
              media_aspect_ratio: block.settings.image_ratio,
              show_secondary_image: block.settings.show_secondary_image,
              show_vendor: block.settings.show_vendor,
              show_rating: block.settings.show_rating,
              show_quick_add: block.settings.enable_quick_add,
              show_new_tag: block.settings.show_new_tag,
              section_id: block.id
            %}
            </ul>
          </div>
         
        </div>
          {% else %}
          <div class="dt-sc-hotspot-item dt-sc-hotspot-item{{forloop.index}} block-type-{{block.type}}">
           <a class="dt-sc-hotspot-marker dt-sc-hotspot-icon  {{section.settings.hotspot_style}}" href="#dt-sc-hotspot-marker-{{forloop.index}}"><span class="fa fa-plus"></span></a>   
          <div id="dt-sc-hotspot-marker-{{forloop.index}}" class="dt-sc-hotspot-popup {{block.settings.text_position}}">
            <ul class="dt-sc-hotspot-content {{ block.settings.content_alignment}}">
          {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
              {% render 'card-product', show_vendor: section.settings.show_vendor, placeholder_image: placeholder_image %}
            </ul>
          </div>
          </div>
        {% endif %}
        {% endif %}

        {% if block.type == 'content' %}    
        <div class="dt-sc-hotspot-item dt-sc-hotspot-item{{forloop.index}} block-type-{{block.type}}">
           <a class="dt-sc-hotspot-marker dt-sc-hotspot-icon {{section.settings.hotspot_style}}" href="#dt-sc-hotspot-marker{{forloop.index}}"><span class="fa fa-plus"></span></a>
          {% if block.settings.title != blank or block.settings.text != blank or block.settings.link_text != blank %}
          <div id="dt-sc-hotspot-marker{{forloop.index}}" class="dt-sc-hotspot-popup {{block.settings.text_position}}">
            <div class="dt-sc-hotspot-content {{ block.settings.content_alignment}}">
              {% if block.settings.title != blank %}
              <a href="{{block.settings.link}}" title="{{ block.settings.title}}"><h4 class="dt-sc-hotspot-content-title">{{ block.settings.title}}</h4></a>
              {% endif %}     
              {% if block.settings.text != blank %}
              <p>{{block.settings.text }}</p>
              {% endif %}     
              {% if block.settings.link_text != blank and block.settings.link != blank %}
              <a class="button" href="{{block.settings.link}}">{{block.settings.link_text}}</a>
              {% endif %}     
            </div>
          </div>
          {% endif %}     
        </div>
        {% endif %}         
        {% endfor %}
      </div>
  </div>
  </div>
</div>
{% schema %}
{
  "name": "t:sections.hotspot.name",
  "class": "section section-hotspot",
  "tag": "section",
  "settings": [
    {
      "type":"checkbox",
      "id":"page_full_width",
       "default": false,
      "label": "t:sections.all.page_full_width.label"
    },
    {
      "type":"checkbox",
      "id":"page_full_width_spacing",
       "default": false,
      "label": "t:sections.all.page_full_width_spacing.label"
    },
      {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
      {
      "type": "text",
      "id": "title",
      "default": "Hotspot",
       "label": "t:sections.hotspot.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "text",
      "id": "sub_heading",
      "default": "Sub Heading", 
      "label": "t:sections.all.sub_heading.label"
    },
     {
      "type": "text",
      "id": "description",
      "default": "Use This Text To Share The Information Which You Like!.",  
      "label": "t:sections.all.description.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.all.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.all.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "default": false,
      "label": "t:sections.all.button_style_secondary.label"
      },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.hotspot.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.hotspot.settings.column_alignment.options__2.label"
        }
      ],
      "default": "center",
      "label": "t:sections.hotspot.settings.column_alignment.label"
    },
  {
"type": "header",
"content": "t:sections.hotspot.settings.hotspot_settings.content",
"info": "Add the Blocks from the top of this section"
},
{
"type": "image_picker",
"id": "spot_image",
"label": "t:sections.hotspot.settings.hotspot_image.label",
"info": "Size: 1920x1280"
},
{
"type": "select",
"id": "hotspot_tooltip_style",
"options": [
{
"value": "style-1",
"label": "t:sections.hotspot.settings.hotspot_tooltip_style.options__1.label"
},
{
"value": "style-2",
"label": "t:sections.hotspot.settings.hotspot_tooltip_style.options__2.label"
},
{
"value": "style-3",
"label": "t:sections.hotspot.settings.hotspot_tooltip_style.options__3.label"
}
],
  "default": "style-2",
  "label": "t:sections.hotspot.settings.hotspot_tooltip_style.label"
},
{
"type": "select",
"id": "hotspot_style",
"label": "t:sections.hotspot.settings.hotspot_style.label",
"options": [
{
"value": "style-1",
"label": "t:sections.hotspot.settings.hotspot_style.options__1.label"
},
{
"value": "style-2",
"label": "t:sections.hotspot.settings.hotspot_style.options__2.label"
},
{
"value": "style-3",
"label": "t:sections.hotspot.settings.hotspot_style.options__3.label"
},
{
"value": "style-4",
"label": "t:sections.hotspot.settings.hotspot_style.options__4.label"
}
]
},
{
"type": "radio",
"id": "icon_format",
"label": "t:sections.hotspot.settings.icon_format.label",
"options": [
{
"value": "numbered",
"label": "t:sections.hotspot.settings.icon_format.options__1.label"
},
{
"value": "alphabets",
"label": "t:sections.hotspot.settings.icon_format.options__2.label"
},
{
"value": "simple-round",
"label": "t:sections.hotspot.settings.icon_format.options__3.label"
},
{
"value": "icon",
"label": "t:sections.hotspot.settings.icon_format.options__4.label"
}        
],
"default": "numbered"
},
{
"type": "radio",
"id": "hotspot_type",
"label": "t:sections.hotspot.settings.hotspot_type.label",
"options": [
{
"value": "grid",
"label": "t:sections.hotspot.settings.hotspot_type.options__1.label"
},
{
"value": "list",
"label": "t:sections.hotspot.settings.hotspot_type.options__2.label"
}      
],
"default": "grid"
},      
{
"type": "header",
"content": "t:sections.hotspot.settings.hotspot_font_size_settings.content"
},	
{	
"type": "range",	
"id": "hotspot_size",	
"label": "t:sections.hotspot.settings.hotspot_size.label",	
"min": 25,	
"max": 50,	
"step": 1,	
"default": 36,	
"unit": "px"	
},	
{	
"type": "range",	
"id": "hotspot_outer_size",	
"label": "t:sections.hotspot.settings.hotspot_outer_size.label",	
"min": 1,	
"max": 20,	
"step": 1,	
"default": 2,	
"unit": "px"	
},		
{
"type": "header",
"content": "t:sections.hotspot.settings.hotspot_content_size_settings.content"
},
{	
"type": "range",	
"id": "hotspot_content_size",	
"label": "t:sections.hotspot.settings.hotspot_content_size.label",	
"min": 200,	
"max": 400,	
"step": 5,	
"default": 300,	
"unit": "px"	
},
{	
"type": "range",	
"id": "hotspot_content_size_laptop",	
"label": "t:sections.hotspot.settings.hotspot_content_size_laptop.label",	
"min": 200,	
"max": 400,	
"step": 5,	
"default": 300,	
"unit": "px"	
},	
{	
"type": "range",	
"id": "hotspot_content_size_tablet",	
"label": "t:sections.hotspot.settings.hotspot_content_size_tablet.label",	
"min": 200,	
"max": 400,	
"step": 5,	
"default": 275,	
"unit": "px"	
},
{	
"type": "range",	
"id": "hotspot_content_size_mobile",	
"label": "t:sections.hotspot.settings.hotspot_content_size_mobile.label",	
"min": 200,	
"max": 400,	
"step": 5,	
"default": 250,	
"unit": "px"	
},
{
"type": "header",
"content": "t:sections.all.custom_class_heading.content"
},
{
"type": "text",
"id": "custom_class_name",
"label": "t:sections.all.custom_class_name.label"
},
{
  "type": "header",
  "content": "t:sections.all.padding.section_padding_heading"
},
{
  "type": "range",
  "id": "padding_top",
  "min": 0,
  "max": 160,
  "step": 4,
  "unit": "px",
  "label": "t:sections.all.padding.padding_top",
  "default": 36
},
{
  "type": "range",
  "id": "padding_bottom",
  "min": 0,
  "max": 160,
  "step": 4,
  "unit": "px",
  "label": "t:sections.all.padding.padding_bottom",
  "default": 36
}   
],
"blocks" : [
{
"type": "product",
"name": "t:sections.hotspot.blocks.product.name",
"settings":[
{
"type" : "product",
"id" : "product",
"label" : "t:sections.hotspot.blocks.product.settings.select_product.label"
},
{
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_new_tag",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_new_tag.label"
    },    
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },  
{
"type": "range",
"id": "top_position",
"label":"t:sections.hotspot.blocks.product.settings.top_position.label", 
"min": 1,
"max": 100,
"step": 1,
"unit": "%",
"default": 40
}, 
{
"type": "range",
"id": "left_position",
"label":"t:sections.hotspot.blocks.product.settings.left_position.label", 
"min": 1,
"max": 100,
"step": 1,
"unit": "%",
"default": 40
},  
{
"type": "select",
"id": "text_position",
"label": "t:sections.hotspot.blocks.product.settings.text_position.label",
"default": "on-right",
"options": [
{
"value": "on-top",
"label": "t:sections.hotspot.blocks.product.settings.text_position.options__1.label"
},
{
"value": "on-right",
"label": "t:sections.hotspot.blocks.product.settings.text_position.options__2.label"
},
{
"value": "on-left",
"label": "t:sections.hotspot.blocks.product.settings.text_position.options__3.label"
},
{
"value": "on-bottom",
"label": "t:sections.hotspot.blocks.product.settings.text_position.options__4.label"
}
]
}
]
},
{
"type": "content",
"name": "t:sections.hotspot.blocks.content.name",
"settings":[
{
"type" : "text",
"id" : "title",
"label" : "t:sections.hotspot.blocks.content.settings.title.label",
"default" : "Title"
},
{		
"type" : "textarea",
"id" : "text",
"label" : "t:sections.hotspot.blocks.content.settings.text.label"
},
{
"type": "text",
"id": "link_text",
"label": "t:sections.hotspot.blocks.content.settings.link_text.label",
"default":"Shop Now"
},
{		
"type" : "url",
"id" : "link",
"label" : "t:sections.hotspot.blocks.content.settings.link.label"
},
{
"type": "range",
"id": "top_position",
"label":"t:sections.hotspot.blocks.content.settings.top_position.label", 
"min": 10,
"max": 100,
"step": 1,
"unit": "%",
"default": 40
}, 
{
"type": "range",
"id": "left_position",
"label":"t:sections.hotspot.blocks.content.settings.left_position.label", 
"min": 10,
"max": 100,
"step": 1,
"unit": "%",
"default": 40
},

{
"type": "select",
"id": "text_position",
"label": "t:sections.hotspot.blocks.content.settings.text_position.label",
"default": "on-right",
"options": [
{
"value": "on-top",
"label": "t:sections.hotspot.blocks.content.settings.text_position.options__1.label"
},
{
"value": "on-right",
"label": "t:sections.hotspot.blocks.content.settings.text_position.options__2.label"
},
{
"value": "on-left",
"label": "t:sections.hotspot.blocks.content.settings.text_position.options__3.label"
},
{
"value": "on-bottom",
"label": "t:sections.hotspot.blocks.content.settings.text_position.options__4.label"
}
]
},
{
"type": "select",
"id": "content_alignment",
"label": "t:sections.hotspot.blocks.content.settings.content_alignment.label",
"default": "text-start",
"options": [
{
"value": "text-center",
"label": "t:sections.hotspot.blocks.content.settings.content_alignment.options__1.label"
},
{
"value": "text-start",
"label": "t:sections.hotspot.blocks.content.settings.content_alignment.options__2.label"
},
{
"value": "text-end",
"label": "t:sections.hotspot.blocks.content.settings.content_alignment.options__3.label"
}
]
}
]
}
],
"presets": [
{
 "name": "t:sections.hotspot.name",
    "blocks": [
        {
          "type": "content"
        }
      ]
}
]
}
{% endschema %}