{%- liquid
 assign padding_horizontal = section.settings.padding_horizontal
 assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
 assign padding_top = section.settings.padding_top
 assign padding_bottom = section.settings.padding_bottom
 assign padding_top_mobile = section.settings.padding_top_mobile
 assign padding_bottom_mobile = section.settings.padding_bottom_mobile
 assign border_color = section.settings.border_color
 assign border_thickness = section.settings.border_thickness
 assign margin_top = section.settings.margin_top
 assign margin_bottom = section.settings.margin_bottom
 assign background_color = section.settings.background_color
 assign background_gradient = section.settings.background_gradient
 assign section_radius = section.settings.section_radius


 assign upsell_position = section.settings.upsell_position


 assign heading = section.settings.heading
 assign heading_text = section.settings.heading_text
 assign heading_size = section.settings.heading_size
 assign heading_size_mobile = section.settings.heading_size_mobile
 assign heading_color = section.settings.heading_color
 assign heading_custom = section.settings.heading_custom
 assign heading_font = section.settings.heading_font
 assign heading_height = section.settings.heading_height
 assign heading_align = section.settings.heading_align
 assign heading_align_mobile = section.settings.heading_align_mobile


 assign item_padding_vertical = section.settings.item_padding_vertical
 assign item_padding_vertical_mobile = section.settings.item_padding_vertical_mobile
 assign item_padding_horizontal = section.settings.item_padding_horizontal
 assign item_padding_horizontal_mobile = section.settings.item_padding_horizontal_mobile
 assign item_radius = section.settings.item_radius
 assign item_shadow = section.settings.item_shadow
 assign item_border_thickness = section.settings.item_border_thickness
 assign item_border_color = section.settings.item_border_color
 assign item_background_color = section.settings.item_background_color


 assign image_border_thickness = section.settings.image_border_thickness
 assign image_border_color = section.settings.image_border_color
 assign image_radius = section.settings.image_radius
 assign image_size = section.settings.image_size
 assign image_size_mobile = section.settings.image_size_mobile


 assign title_size = section.settings.title_size
 assign title_size_mobile = section.settings.title_size_mobile
 assign title_color = section.settings.title_color
 assign title_custom = section.settings.title_custom
 assign title_font = section.settings.title_font
 assign title_height = section.settings.title_height


 assign promo_size = section.settings.promo_size
 assign promo_size_mobile = section.settings.promo_size_mobile
 assign promo_color = section.settings.promo_color
 assign promo_custom = section.settings.promo_custom
 assign promo_font = section.settings.promo_font
 assign promo_height = section.settings.promo_height


 assign button = section.settings.button
 assign button_text = section.settings.button_text
 assign soldout = section.settings.soldout
 assign button_size = section.settings.button_size
 assign button_size_mobile = section.settings.button_size_mobile
 assign button_color = section.settings.button_color
 assign button_hover_color = section.settings.button_hover_color
 assign button_custom = section.settings.button_custom
 assign button_font = section.settings.button_font
 assign button_height = section.settings.button_height
 assign button_padding_vertical = section.settings.button_padding_vertical
 assign button_padding_vertical_mobile = section.settings.button_padding_vertical_mobile
 assign button_padding_horizontal = section.settings.button_padding_horizontal
 assign button_padding_horizontal_mobile = section.settings.button_padding_horizontal_mobile
 assign button_radius = section.settings.button_radius
 assign button_border_thickness = section.settings.button_border_thickness
 assign button_border_color = section.settings.button_border_color
 assign button_border_hover_color = section.settings.button_border_hover_color
 assign button_bg_color = section.settings.button_bg_color
 assign button_bg_hover_color = section.settings.button_bg_hover_color


 assign select_size_mobile = section.settings.select_size_mobile
 assign select_size = section.settings.select_size
 assign select_color = section.settings.select_color
 assign select_custom = section.settings.select_custom
 assign select_font = section.settings.select_font
 assign select_height = section.settings.select_height
 assign select_bg_color = section.settings.select_bg_color
 assign select_radius = section.settings.select_radius
 assign select_border_thickness = section.settings.select_border_thickness
 assign select_border_color = section.settings.select_border_color


-%}


{%- style -%}


 {{ heading_font | font_face: font_display: 'swap' }}
 {{ title_font | font_face: font_display: 'swap' }}
 {{ promo_font | font_face: font_display: 'swap' }}
 {{ button_font | font_face: font_display: 'swap' }}
 {{  select_font | font_face: font_display: 'swap' }}


 .section-{{ section.id }} {
   border-top: solid {{ border_color }} {{ border_thickness }}px;
   border-bottom: solid {{ border_color }} {{ border_thickness }}px;
   margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
   margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
   border-radius: {{ section_radius | times: 0.6 | round: 0 }}px;
   overflow: hidden;
 }


 .section-{{ section.id }}-settings {
   margin: 0 auto;
   padding-top: {{ padding_top_mobile }}rem;
   padding-bottom: {{ padding_bottom_mobile }}rem;
   padding-left: {{ padding_horizontal_mobile }}rem;
   padding-right: {{ padding_horizontal_mobile }}rem;
 }


 .upsell-heading-{{ section.id }} {
   text-align: {{ heading_align_mobile }};
   margin-bottom: 5px;
 }


 .upsell-heading-{{ section.id }} * {
   margin: 0;
   font-size: {{ heading_size_mobile }}px;
   color: {{ heading_color }};
   line-height: {{ heading_height }}%;
   text-transform: unset;
 }


 .upsell-item-{{ section.id }} {
   max-width: 44rem;
   margin-bottom:5px;
   background-color: {{ item_background_color }};
   border-radius: {{ item_radius }}px;
 }
  .upsell-item-wrapper-{{ section.id }} {
   display: flex;
   align-items: center;
   padding: {{ item_padding_vertical_mobile }}px {{ item_padding_horizontal_mobile }}px;
   border: {{ item_border_thickness }}px solid {{ item_border_color }};
   border-radius: {{ item_radius }}px;
 }
  .upsell-item-image-{{ section.id }} {
   aspect-ratio: 1/1;
   flex: 0 0 {{ image_size_mobile }}px;
   height: auto;
   align-self: center;
   border-radius: {{ image_radius }}px;
   border: {{ image_border_thickness }}px solid {{ image_border_color}};
   overflow: hidden;
 }


 .upsell-item-image-{{ section.id }} img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }


 .upsell-item-details-{{ section.id }} {
   flex: 1;
 }
  .upsell-item-title-wrapper-{{ section.id }} {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-left: 10px;
   flex-wrap: wrap;
   gap: 10px;
 }


 .upsell-product-title-{{ section.id }} {
   margin: 0;
   font-size: {{ title_size_mobile }}px;
   color: {{ title_color }};
   line-height: {{ title_height }}%;
   text-transform: unset;
   font-weight: 700;
 }


 .upsell-look-promo-{{ section.id }} {
   margin: 6px 0 0 0;
   font-size: {{ promo_size_mobile }}px;
   color: {{ promo_color }};
   line-height: {{ promo_height }}%;
   text-transform: unset;
 }
  .upsell-look-link-{{ section.id }} {
   display: block;
   text-decoration: none !important;
   padding-right: 10px;
   line-height: 1.2;
 }
  .upsell-button-{{ section.id }} {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   max-width: fit-content;
   margin: 0;
   font-size: {{ button_size_mobile }}px;
   color: {{ button_color }};
   line-height: {{ button_height }}%;
   text-align: center;
   text-transform: unset;
   text-decoration: none;
   background-color: transparent;
   background-color: {{ button_bg_color }};
   padding: {{ button_padding_vertical_mobile }}px {{ button_padding_horizontal_mobile }}px;
   border-radius: {{ button_radius }}px;
   transition: all 0.25s ease 0s;
   border: 0px;
   border: {{ button_border_thickness }}px solid {{ button_border_color }};
   cursor: pointer;
   flex-shrink: 0;
 }


 .upsell-button-{{ section.id }}:hover {
   color: {{ button_hover_color }};
   background-color: {{ button_bg_hover_color }};
   border-color: {{ button_border_hover_color }};
   transition: all 0.25s ease 0s;
 }


 .upsell-button-{{ section.id }}.upsell-soldout-{{ section.id }} {
   opacity: 0.3;
   cursor: not-allowed;
 }


 .upsell-select-wrapper-{{ section.id }} {
   position: relative;
   max-width: fit-content;
 }


 .upsell-look-variant-select-{{ section.id }} {
   position: relative;
   cursor: pointer;
   margin-top: 10px;
   color: {{ select_color }};
   font-size: {{ select_size_mobile }}px;
   color: {{ select_color }};
   line-height: {{ select_height }}%;
   border: {{ select_border_thickness }}px solid {{ select_border_color }};
   background-color: {{ select_bg_color }};
   border-radius: {{ select_radius }}px;
   padding: 10px 36px 10px 12px;
   width: 100%;
   max-width: fit-content;
   outline: none;
   box-shadow: none;
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }


 .upsell-select-wrapper-{{ section.id }} > span {
   pointer-events: none;
   position: absolute;
   right: 4px;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: calc(100% - 5px);
 }


 .upsell-select-wrapper-{{ section.id }} > span svg {
   stroke: unset;
   fill: {{ select_color }};
 }


 @media(min-width: 1024px) {
   .section-{{ section.id }} {
     margin-top: {{ margin_top }}px;
     margin-bottom: {{ margin_bottom }}px;
   }


   .section-{{ section.id }}-settings {
     padding-top: {{ padding_top }}rem;
     padding-bottom: {{ padding_bottom }}rem;
     padding-left: {{ padding_horizontal }}rem;
     padding-right: {{ padding_horizontal }}rem;
   }


   .upsell-heading-{{ section.id }} {
     text-align: {{ heading_align }};
   }


   .upsell-heading-{{ section.id }} * {
     font-size: {{ heading_size }}px;
   }


   .upsell-item-wrapper-{{ section.id }} {
     padding: {{ item_padding_vertical }}px {{ item_padding_horizontal }}px;
   }


   .upsell-item-image-{{ section.id }} {
     flex: 0 0 {{ image_size }}px;
   }


   .upsell-item-title-wrapper-{{ section.id }} {
     flex-wrap: nowrap;
     gap: 0px;
   }


   .upsell-product-title-{{ section.id }} {
     font-size: {{ title_size }}px;
   }


   .upsell-look-promo-{{ section.id }} {
     font-size: {{ promo_size }}px;
   }


   .upsell-button-{{ section.id }} {
     padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
     font-size: {{ button_size }}px;
   }


   .upsell-look-variant-select-{{ section.id }} {
     font-size: {{ select_size }}px;
   }
 }
 {%- endstyle -%}


{% if heading_custom %}
 <style>
   .upsell-heading-{{ section.id }} * {
     font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
     font-weight: {{ heading_font.weight }};
     font-style: {{ heading_font.style }};
   }
 </style>
{% endif %}


{% if title_custom %}
 <style>
   .upsell-product-title-{{ section.id }} {
     font-family: {{ title_font.family }}, {{ title_font.fallback_families }};
     font-weight: {{ title_font.weight }};
     font-style: {{ title_font.style }};
   }
 </style>
{% endif %}


{% if promo_custom %}
 <style>
   .upsell-look-promo-{{ section.id }} {
     font-family: {{ promo_font.family }}, {{ promo_font.fallback_families }};
     font-weight: {{ promo_font.weight }};
     font-style: {{ promo_font.style }};
   }
 </style>
{% endif %}


{% if button_custom %}
 <style>
   .upsell-button-{{ section.id }} {
     font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
     font-weight: {{ button_font.weight }};
     font-style: {{ button_font.style }};
   }
 </style>
{% endif %}


{% if select_custom %}
 <style>
   .upsell-look-variant-select-{{ section.id }} {
     font-family: {{ select_font.family }}, {{ select_font.fallback_families }};
     font-weight: {{ select_font.weight }};
     font-style: {{ select_font.style }};
   }
 </style>
{% endif %}




{% if item_shadow %}
 <style>
   .upsell-item-{{ section.id }} {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
   }
 </style>
{% endif %}


<script>
 window.addEventListener('DOMContentLoaded', (event) => {      
   var productForm = document.querySelector('#cbh-upsell-2');


   if (!productForm){
     var productForm = document.querySelector('{% if upsell_position == "below_title" or upsell_position == "above_title" %}.product__title{% elsif upsell_position == "below_description" or upsell_position == "above_description" %}.product__description{% elsif upsell_position == "below_price" %}.price.price--large.price--show-badge{% else %}.button--add-to-cart, .product .product-form, .product-single__add-to-cart, .shopify-payment-button, .shopify-payment-button__button, .ProductForm__BuyButtons, .add-to-cart{% endif %}');
     if (!productForm) return;
   }


   const templateContent =  document.querySelector('#cbh-upsell-2-{{ section.id }}').content


   productForm.insertAdjacentElement('{% if upsell_position == "below_buy" or upsell_position == "below_title" or upsell_position == "below_description" or upsell_position == "below_price" %}afterend{% else %}beforebegin{% endif %}', templateContent.firstElementChild)
 }) 
</script>


{% if section.blocks.size > 0 %}
<template id="cbh-upsell-2-{{ section.id }}">
 <div class="section-{{ section.id }} upsell-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
   <div class="section-{{ section.id }}-settings">
   {% if heading and heading_text != blank %}
     <div class="upsell-heading-{{ section.id }}">
       {{ heading_text }}
     </div>
   {% endif %}
   {% for block in section.blocks %}
     {% assign product = block.settings.product %}
     <div data-mini-atc class="upsell-item-{{ section.id }}">
       <div class="upsell-item-wrapper-{{ section.id }}">
         <img data-mini-atc-image-{{ forloop.index }} class="upsell-item-image-{{ section.id }}" src="{{ product.featured_image | img_url: '120x' }}" alt="{{ product.title }}" loading="lazy">
         <div class="upsell-item-details-{{ section.id }}">
           <div class="upsell-item-title-wrapper-{{ section.id }}">
             <div>
              
               <a href="{{ product.url }}" class="upsell-look-link-{{ section.id }}">
                 <p class="upsell-product-title-{{ section.id }}">
                   {{ product.title }}
                 </p>
                 {% if block.settings.promo_text != blank %}
                   <div class="upsell-look-promo-{{ section.id }}">
                     {{ block.settings.promo_text }}
                   </div>
                 {% endif %}
               </a>


               {% if block.settings.enable_variant_dropdown %}
                 <div class="upsell-select-wrapper-{{ section.id }}">
                   <select class="upsell-look-variant-select-{{ section.id }}" data-mini-atc-variant-select data-mini-atc-variant-select--{{ forloop.index }} data-product-id="{{ product.id }}">
                     {% for variant in product.variants %}
                       <option value="{{ variant.id }}">{{ variant.title }}</option>
                     {% endfor %}
                   </select>
                   <span>
                     <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512"><g><path d="m67.41 45.41-2.82-2.82-14.59 14.58-14.59-14.58-2.82 2.82 17.41 17.42z"/></g></svg> 
                   </span>
                 </div>
               {% endif %}
             </div>
             <button
               type="submit"
               name="add"
               class="upsell-button-{{ section.id }} {% unless product.available %}upsell-soldout-{{ section.id }}{% endunless %}"
               data-mini-add-to-cart
               data-mini-add-to-cart-{{ forloop.index }}
               data-variant-id="{{ product.variants.first.id }}"
               {% unless product.available %}disabled{% endunless %}
             >
               {% if product.available %}{{ button_text }}<span class="money notranslate">{{ product.price | money }}</span>{% else %}{{ soldout }}{% endif %}
             </button>
           </div>
         </div>
       </div>
     </div>
   {% endfor %}
   </div>
 </div>
</template>
{% endif %}


<script>
 var formayMoneyForBuyItWith = function(cents, format) {
   if (typeof cents == 'string') { cents = cents.replace('.',''); }
   var value = '';
   var placeholderRegex = /{{s*(w+)s*}}/;
   var formatString = (format || this.money_format);
    function defaultOption(opt, def) {
      return (typeof opt == 'undefined' ? def : opt);
   }
    function formatWithDelimiters(number, precision, thousands, decimal) {
     precision = defaultOption(precision, 2);
     thousands = defaultOption(thousands, ',');
     decimal   = defaultOption(decimal, '.');
      if (isNaN(number) || number == null) { return 0; }
      number = (number/100.0).toFixed(precision);
      var parts   = number.split('.'),
         dollars = parts[0].replace(/(d)(?=(ddd)+(?!d))/g, '$1' + thousands),
         cents   = parts[1] ? (decimal + parts[1]) : '';
      return dollars + cents;
   }
    switch(formatString.match(placeholderRegex)[1]) {
     case 'amount':
       value = formatWithDelimiters(cents, 2);
       break;
     case 'amount_no_decimals':
       value = formatWithDelimiters(cents, 0);
       break;
     case 'amount_with_comma_separator':
       value = formatWithDelimiters(cents, 2, '.', ',');
       break;
     case 'amount_no_decimals_with_comma_separator':
       value = formatWithDelimiters(cents, 0, '.', ',');
       break;
   }
    return formatString.replace(placeholderRegex, value);
 };
  function initUpsell2() {
   setTimeout(() => {
     const addToCartButtons = document.querySelectorAll('[data-mini-add-to-cart]');
   addToCartButtons.forEach(function (button) {
     button.addEventListener('click', function () {
       const variantId = button.getAttribute('data-variant-id');
       if (!variantId) return;


       const originalHtml = button.innerHTML;


       button.innerHTML = 'Adding...';


       fetch('/cart/add.js', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           items: [
             {
               id: variantId,
               quantity: 1,
             },
           ],
         }),
       })
         .then(function (response) {
           return response.json();
         })
         .then(function (data) {
           button.innerHTML = 'Added';
           setTimeout(function () {
             button.innerHTML = originalHtml;
             {% if section.settings.refresh_after_atc %}
               window.location.reload();
             {% endif %}
           }, 2000);
         })
         .catch(function (error) {
           console.error(error);
           button.innerHTML = 'Error';
           setTimeout(function () {
             button.innerHTML = originalHtml;
           }, 2000);
         });
     });
   });


   const variantSelects = document.querySelectorAll('[data-mini-atc-variant-select]');
   variantSelects.forEach(function (select, index) {
     select.addEventListener('change', function () {
       const variantId = select.value;
       addToCartButtons[index].setAttribute('data-variant-id', variantId);
     });
   });


   {% for block in section.blocks %}
       let select{{ forloop.index }} = document.querySelector('[data-mini-atc-variant-select--{{ forloop.index }}]');
       let product{{ forloop.index }} = {{ all_products[block.settings.product] | json }};
       let addToCartButton{{ forloop.index }} = document.querySelector('.upsell-button-{{ section.id }}[data-mini-add-to-cart-{{ forloop.index }}]');
    
       select{{ forloop.index }}.addEventListener('change', () => {
         const variantId = select{{ forloop.index }}.value;
         addToCartButton{{ forloop.index }}.setAttribute('data-variant-id', variantId);
    
         var selectedOptionId = select{{ forloop.index }}.value;
         var matchedVariant = product{{ forloop.index }}.variants.find(variant => variant.id == selectedOptionId);
    
         if (matchedVariant.featured_image) {
           document.querySelector('[data-mini-atc-image-{{ forloop.index }}]').src = matchedVariant.featured_image.src;
         } else {
           console.log(product{{ forloop.index }}.featured_image);
           document.querySelector('[data-mini-atc-image-{{ forloop.index }}]').src = product{{ forloop.index }}.featured_image;
         }
    
         if (!matchedVariant.available) {
           addToCartButton{{ forloop.index }}.setAttribute('disabled', "");
           addToCartButton{{ forloop.index }}.innerText = "{{ soldout }}";
           addToCartButton{{ forloop.index }}.style.cursor = "not-allowed";
         } else {
           addToCartButton{{ forloop.index }}.removeAttribute('disabled');
           addToCartButton{{ forloop.index }}.innerHTML = '{{ button_text }} -  <span class="money notranslate">{{ product.price | money_with_currency }}</span>';
           addToCartButton{{ forloop.index }}.style.cursor = "pointer";
         }
    
         let price{{ forloop.index}} = matchedVariant.price;
         addToCartButton{{ forloop.index }}.innerHTML = "{{ button_text }} - " + formayMoneyForBuyItWith(price{{ forloop.index}}, "{{ shop.money_with_currency_format }}");
       });
     {% endfor %}
   }, 400)
 }


 document.addEventListener('DOMContentLoaded', initUpsell2);
  if (Shopify.designMode) {
    document.addEventListener('shopify:section:unload', initUpsell2);
    document.addEventListener('shopify:section:load', initUpsell2);
 }
</script>




{% schema %}
{
 "name": "Product Upsell",
 "settings": [
   {
     "type": "header",
     "content": "⚠️ Save settings to view updates",
     "info":"Save settings in order to view updates"
   },
   {
     "type": "paragraph",
     "content": "Product Upsell"
   },
   {
     "type": "header",
     "content": "Custom placement",
     "info": "Product Upsell"
   },
   {
     "type": "select",
     "id": "upsell_position",
     "label": "Position",
     "default": "below_buy",
     "options": [
       {
         "label": "Above buy buttons",
         "value": "above_buy"
       },
       {
         "label": "Below buy buttons",
         "value": "below_buy"
       },
       {
         "label": "Above product title",
         "value": "above_title"
       },
       {
         "label": "Below product title",
         "value": "below_title"
       },
       {
         "label": "Above product description",
         "value": "above_description"
       },
       {
         "label": "Below product description",
         "value": "below_description"
       },
       {
         "label": "Below price",
         "value": "below_price"
       }
     ]
   },
   {
     "type": "checkbox",
     "id": "refresh_after_atc",
     "label": "Refresh page after add to cart",
     "default": false
   },
   {
     "type": "header",
     "content": "Heading settings"
   },
   {
     "type": "checkbox",
     "id": "heading",
     "label": "Show heading",
     "default": true
   },
   {
     "type": "text",
     "id": "heading_text",
     "label": "Heading text",
     "default": "PAIR THIS ITEM WITH:"
   },
   {
     "type": "checkbox",
     "id": "heading_custom",
     "label": "Use custom font",
     "default": false
   },
   {
     "type": "font_picker",
     "id": "heading_font",
     "label": "Font family",
     "default": "josefin_sans_n4"
   },
   {
     "type": "range",
     "id": "heading_size",
     "min": 0,
     "max": 72,
     "step": 1,
     "unit": "px",
     "label": "Font size",
     "default": 16
   },
   {
     "type": "range",
     "id": "heading_size_mobile",
     "min": 0,
     "max": 72,
     "step": 1,
     "unit": "px",
     "label": "Font size - mobile",
     "default": 16
   },
   {
     "type": "range",
     "id": "heading_height",
     "min": 50,
     "max": 200,
     "step": 10,
     "unit": "%",
     "label": "Line height",
     "default": 130
   },
   {
     "type": "text_alignment",
     "id": "heading_align",
     "label": "Alignment"
   },
   {
     "type": "text_alignment",
     "id": "heading_align_mobile",
     "label": "Alignment - mobile"
   },
   {
     "type": "header",
     "content": "Item settings"
   },
   {
     "type": "range",
     "id": "item_padding_vertical",
     "min": 0,
     "max": 50,
     "step": 2,
     "unit": "px",
     "label": "Padding vertical",
     "default": 16
   },
   {
     "type": "range",
     "id": "item_padding_vertical_mobile",
     "min": 0,
     "max": 50,
     "step": 2,
     "unit": "px",
     "label": "Padding vertical - mobile",
     "default": 16
   },
   {
      "type": "range",
      "id": "item_padding_horizontal",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 10
   },
   {
      "type": "range",
      "id": "item_padding_horizontal_mobile",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal - mobile",
      "default": 10
   },
   {
     "type": "range",
     "id": "item_radius",
     "label": "Roundness",
     "min": 0,
     "max": 100,
     "step": 2,
     "default": 0,
     "unit": "px"
   },
   {
     "type": "range",
     "id": "item_border_thickness",
     "label": "Border thickness",
     "min": 0,
     "max": 10,
     "step": 1,
     "default": 1,
     "unit": "px"
   },
   {
     "type": "checkbox",
     "id": "item_shadow",
     "label": "Add box shadow",
     "default": false
   },
   {
     "type": "header",
     "content": "Image settings"
   },
   {
      "type": "range",
      "id": "image_size",
      "min": 50,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "Size",
      "default": 72
   },
   {
      "type": "range",
      "id": "image_size_mobile",
      "min": 50,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "Size - mobile",
      "default": 72
   },
   {
     "type": "range",
     "id": "image_radius",
     "label": "Roundness",
     "min": 0,
     "max": 100,
     "step": 2,
     "default": 0,
     "unit": "px"
   },
   {
     "type": "range",
     "id": "image_border_thickness",
     "label": "Border thickness",
     "min": 0,
     "max": 10,
     "step": 1,
     "default": 1,
     "unit": "px"
   },
   {
     "type": "header",
     "content": "Title settings"
   },
   {
     "type": "checkbox",
     "id": "title_custom",
     "label": "Use custom font",
     "default": false
   },
   {
     "type": "font_picker",
     "id": "title_font",
     "label": "Font family",
     "default": "josefin_sans_n4"
   },
   {
     "type": "range",
     "id": "title_size",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size",
     "default": 13
   },
   {
     "type": "range",
     "id": "title_size_mobile",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size - mobile",
     "default": 13
   },
   {
     "type": "range",
     "id": "title_height",
     "min": 50,
     "max": 200,
     "step": 10,
     "unit": "%",
     "label": "Line height",
     "default": 130
   },
   {
     "type": "header",
     "content": "Promo text settings"
   },
   {
     "type": "checkbox",
     "id": "promo_custom",
     "label": "Use custom font",
     "default": false
   },
   {
     "type": "font_picker",
     "id": "promo_font",
     "label": "Font family",
     "default": "josefin_sans_n4"
   },
   {
     "type": "range",
     "id": "promo_size",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size",
     "default": 12
   },
   {
     "type": "range",
     "id": "promo_size_mobile",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size - mobile",
     "default": 12
   },
   {
     "type": "range",
     "id": "promo_height",
     "min": 50,
     "max": 200,
     "step": 10,
     "unit": "%",
     "label": "Line height",
     "default": 130
   },
   {
     "type": "header",
     "content": "Button settings"
   },
   {
     "type": "text",
     "id": "button_text",
     "label": "Button text",
     "default": "ADD"
   },
   {
     "type": "text",
     "id": "soldout",
     "label": "Sold-out text",
     "default": "Sold out"
   },
   {
     "type": "checkbox",
     "id": "button_custom",
     "label": "Use custom font",
     "default": false
   },
   {
     "type": "font_picker",
     "id": "button_font",
     "label": "Font family",
     "default": "josefin_sans_n4"
   },
   {
     "type": "range",
     "id": "button_size",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "px",
     "label": "Font size",
     "default": 14
   },
   {
     "type": "range",
     "id": "button_size_mobile",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "px",
     "label": "Font size - mobile",
     "default": 14
   },
   {
     "type": "range",
     "id": "button_height",
     "min": 50,
     "max": 200,
     "step": 10,
     "unit": "%",
     "label": "Line height",
     "default": 100
   },
   {
     "type": "range",
     "id": "button_padding_vertical",
     "min": 0,
     "max": 100,
     "step": 2,
     "unit": "px",
     "label": "Padding vertical",
     "default": 12
   },
   {
     "type": "range",
     "id": "button_padding_vertical_mobile",
     "min": 0,
     "max": 100,
     "step": 2,
     "unit": "px",
     "label": "Padding vertical - mobile",
     "default": 12
   },
   {
      "type": "range",
      "id": "button_padding_horizontal",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 14
   },
   {
      "type": "range",
      "id": "button_padding_horizontal_mobile",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal - mobile",
      "default": 14
   },
   {
      "type": "range",
      "id": "button_radius",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Roundness",
      "default": 0
   },
   {
      "type": "range",
      "id": "button_border_thickness",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "label": "Border thickness",
      "default": 1
   },
   {
     "type": "header",
     "content": "Variants select settings"
   },
   {
     "type": "checkbox",
     "id": "select_custom",
     "label": "Use custom font",
     "default": false
   },
   {
     "type": "font_picker",
     "id": "select_font",
     "label": "Font family",
     "default": "josefin_sans_n4"
   },
   {
     "type": "range",
     "id": "select_size",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size",
     "default": 12
   },
   {
     "type": "range",
     "id": "select_size_mobile",
     "min": 0,
     "max": 40,
     "step": 1,
     "unit": "px",
     "label": "Font size - mobile",
     "default": 12
   },
   {
     "type": "range",
     "id": "select_height",
     "min": 50,
     "max": 200,
     "step": 10,
     "unit": "%",
     "label": "Line height",
     "default": 100
   },
    {
       "type": "range",
       "id": "select_radius",
       "min": 0,
       "max": 100,
       "step": 2,
       "unit": "px",
       "label": "Roundness",
       "default": 0
     },
     {
       "type": "range",
       "id": "select_border_thickness",
       "min": 0,
       "max": 10,
       "step": 1,
       "unit": "px",
       "label": "Border thickness",
       "default": 1
     },
   {
     "type": "header",
     "content": "Item colors"
   },
   {
     "type": "color",
     "id": "item_background_color",
     "label": "Background",
     "default": "#FFFFFF"
   },
   {
     "type": "color",
     "id": "item_border_color",
     "label": "Border",
     "default": "#7D7D7D"
   },
   {
     "type": "color",
     "id": "image_border_color",
     "label": "Image border",
     "default": "#7D7D7D"
   },
   {
     "type": "color",
     "id": "title_color",
     "label": "Title",
     "default": "#000000"
   },
   {
     "type": "color",
     "id": "promo_color",
     "label": "Promo text",
     "default": "#7D7D7D"
   },
   {
     "type": "header",
     "content": "Button colors"
   },
   {
     "type": "color",
     "label": "Text",
     "id": "button_color",
     "default": "#FFFFFF"
   },
   {
     "type": "color",
     "label": "Hover text",
     "id": "button_hover_color",
     "default": "#000000"
   },
   {
     "type": "color",
     "label": "Background",
     "id": "button_bg_color",
     "default": "#000000"
   },
   {
     "type": "color",
     "label": "Background hover",
     "id": "button_bg_hover_color",
     "default": "#FFFFFF"
   },
   {
     "type": "color",
     "label": "Button border",
     "id": "button_border_color",
     "default": "#000000"
   },
   {
     "type": "color",
     "label": "Border hover",
     "id": "button_border_hover_color",
     "default": "#000000"
   },
   {
     "type": "header",
     "content": "Select colors"
   },
   {
     "type": "color",
     "label": "Text",
     "id": "select_color",
     "default": "#000000"
   },
   {
     "type": "color",
     "label": "Background",
     "id": "select_bg_color",
     "default": "#FFFFFF"
   },
   {
     "type": "color",
     "label": "Border",
     "id": "select_border_color",
     "default": "#000000"
   },
   {
     "type": "header",
     "content": "Section colors"
   },
   {
     "type": "color",
     "label": "Heading",
     "id": "heading_color",
     "default": "#000000"
   },
   {
     "type": "color",
     "label": "Section background",
     "id": "background_color"
   },
   {
     "type": "color_background",
     "id": "background_gradient",
     "label": "Section background gradient"
   },
   {
     "type": "color",
     "label": "Border",
     "id": "border_color",
     "default": "#000000"
   },
   {
     "type": "header",
     "content": "Section margin (outside)"
   },
   {
     "type": "range",
     "id": "margin_top",
     "min": 0,
     "max": 100,
     "step": 4,
     "unit": "px",
     "label": "Margin top",
     "default": 0
   },
   {
     "type": "range",
     "id": "margin_bottom",
     "min": 0,
     "max": 100,
     "step": 4,
     "unit": "px",
     "label": "Margin bottom",
     "default": 0
   },
   {
     "type": "header",
     "content": "Section padding (inside)"
   },
   {
     "type": "range",
     "id": "padding_top",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "rem",
     "label": "Padding top",
     "default": 0
   },
   {
     "type": "range",
     "id": "padding_top_mobile",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "rem",
     "label": "Padding top - mobile",
     "default": 0
   },
   {
     "type": "range",
     "id": "padding_bottom",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "rem",
     "label": "Padding bottom",
     "default": 0
   },
   {
     "type": "range",
     "id": "padding_bottom_mobile",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "rem",
     "label": "Padding bottom - mobile",
     "default": 0
   },
   {
     "type": "range",
     "id": "padding_horizontal",
     "min": 0,
     "max": 30,
     "step": 1,
     "unit": "rem",
     "label": "Padding sides",
     "default": 0
   },
   {
     "type": "range",
     "id": "padding_horizontal_mobile",
     "min": 0,
     "max": 15,
     "step": 0.5,
     "unit": "rem",
     "label": "Padding sides - mobile",
     "default": 0
   },
   {
     "type": "header",
     "content": "Section settings"
   },
   {
     "type": "range",
     "id": "border_thickness",
     "min": 0,
     "max": 50,
     "step": 1,
     "unit": "px",
     "label": "Border thickness",
     "default": 0
   },
   {
     "type": "range",
     "id": "section_radius",
     "min": 0,
     "max": 100,
     "step": 2,
     "unit": "px",
     "label": "Roundness",
     "default": 0
   }
 ],
 "blocks": [
   {
     "type": "product",
     "name": "Product",
     "settings": [
       {
         "type": "product",
         "id": "product",
         "label": "Product",
         "info": "Select a product to display"
       },
       {
         "type": "text",
         "id": "promo_text",
         "label": "Promo text",
         "info": "Optional text to display below the product title and price",
         "default":"10% of this product when pairing"
       },
       {
         "type": "checkbox",
         "id": "enable_variant_dropdown",
         "label": "Enable variant dropdown",
         "info": "Enable to display a variant dropdown for this product"
       }
     ]
   }
 ],
 "presets": [
   {
     "name": "Product Upsell",
     "category": "Custom"
   }
 ]
}
{% endschema %}