/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:29 Unexpected "{"
Line 17:38 Expected ":"
Line 17:45 Unexpected "{"
Line 18:26 Expected identifier but found whitespace
Line 18:28 Unexpected "{"
Line 18:37 Expected ":"
Line 18:63 Expected ":"
Line 19:29 Expected identifier but found whitespace
... and 999 more hidden warnings

**/
{% style %}
    .section-extras-spacing-{{ section.id }} {
    --section-padding-top: {{ section.settings.padding_top }}px;
    --section-padding-bottom: {{ section.settings.padding_bottom }}px;
    --section-margin-top: {{ section.settings.margin_top }}px;
    --section-margin-bottom: {{ section.settings.margin_bottom }}px;
    }
    {% if section.settings.use_custom_colors %}
        .section-extras-color-{{ section.id }} {
        --gradient-background: {% if section.settings.color_background_gradient != blank %}{{ section.settings.color_background_gradient }}{% else %}{{ section.settings.color_background }}{% endif %};
        --color-background: {{ section.settings.color_background.red }}, {{ section.settings.color_background.green }}, {{ section.settings.color_background.blue }};
        --color-foreground: {{ section.settings.color_text.red }}, {{ section.settings.color_text.green }}, {{ section.settings.color_text.blue }};
        }
    {% endif %}

    /* Custom Social Proof Styles */
    .custom-social-proof {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        flex-wrap: nowrap;
    }
    .custom-social-proof-main {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .custom-social-proof-main-text {
        white-space: nowrap;
        line-height: 1.2;
        font-weight: 700;
    }
    .custom-social-proof svg {
        flex-shrink: 0;
    }
    .custom-social-proof-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        padding: 14px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        flex-shrink: 0;
    }
    @media (max-width: 749px) {
        .custom-social-proof {
            gap: 8px;
        }
        .custom-social-proof-badge {
            padding: 12px;
        }
    }
    @media (max-width: 380px) {
        .custom-social-proof {
            gap: 6px;
        }
        .custom-social-proof-main {
            flex: 1 1 auto;
            min-width: 0;
            gap: 6px;
        }
        .custom-social-proof-main-text {
            font-size: 12px;
            white-space: normal;
            line-height: 1.1;
        }
        .custom-social-proof-badge {
            flex-shrink: 1;
            max-width: 54%;
            padding: 8px 10px;
            font-size: 11px;
            white-space: normal;
            text-align: center;
            line-height: 1.1;
        }
    }
    .product__info-container .icon-with-text {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
        align-items: stretch;
    }
    .product__info-container .icon-with-text .product-icon-item {
        display: flex !important;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
        min-width: 0;
    }
    .product__info-container .icon-with-text .product-icon-circle {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        background: #0f4b42;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .product__info-container .icon-with-text .product-icon-circle img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .product__info-container .icon-with-text .product-icon-circle i {
        font-size: 24px;
        color: #ffffff !important;
    }
    .product__info-container .icon-with-text .product-icon-text {
        margin: 0 !important;
        color: #111111 !important;
        opacity: 1 !important;
        font-size: 16px;
        line-height: 1.15;
        font-weight: 700;
        text-align: left;
    }
    @media (max-width: 989px) {
      .product__info-container .icon-with-text {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
      }
      .product__info-container .icon-with-text .product-icon-circle {
        width: 46px;
        height: 46px;
        min-width: 46px;
      }
      .product__info-container .icon-with-text .product-icon-circle img {
        width: 35px;
        height: 35px;
      }
      .product__info-container .icon-with-text .product-icon-text {
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
      }
    }

    /* Product action buttons */
    #MainProduct-{{ section.id }} .product-form__buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 12px;
      overflow: visible;
    }
    #MainProduct-{{ section.id }} .product-form__buttons > *:only-child {
      grid-column: 1 / -1;
    }
    /* Add to cart — align-items:stretch already fills cell height */
    #MainProduct-{{ section.id }} .product-form__submit {
      border-radius: 12px !important;
      background: #cbe577 !important;
      border: 1px solid #cbe577 !important;
      color: #153730 !important;
      width: 100% !important;
      min-height: 60px !important;
      font-size: 22px !important;
      font-weight:700 !important;
      padding-top: 16px !important;
      padding-bottom: 16px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      box-shadow: none !important;
    }
    #MainProduct-{{ section.id }} .product-form__submit:hover,
    #MainProduct-{{ section.id }} .product-form__submit:focus {
      background: #b5cf5e !important;
      border: 1px solid #b5cf5e !important;
      box-shadow: none !important;
      outline: 0 !important;
    }
    #MainProduct-{{ section.id }} .product-form__submit span {
      color: #153730 !important;
      font-weight: 800 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
    }
    /* Buy it now — flex chain through Shopify-injected intermediate div */
    #MainProduct-{{ section.id }} .shopify-payment-button {
      margin-top: 0 !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: visible !important;
    }
    #MainProduct-{{ section.id }} .shopify-payment-button > div {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: visible !important;
    }
    #MainProduct-{{ section.id }} .shopify-payment-button__button,
    #MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded {
      border-radius: 12px !important;
      background: #153730 !important;
      color: #ffffff !important;
      border: 1px solid #153730 !important;
      width: 100% !important;
      flex: 1 !important;
      min-height: 60px !important;
      font-size: 22px !important;
      font-weight: 800 !important;
      padding-top: 16px !important;
      padding-bottom: 16px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    #MainProduct-{{ section.id }} .shopify-payment-button__button:hover,
    #MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded:hover,
    #MainProduct-{{ section.id }} .shopify-payment-button__button:focus,
    #MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded:focus {
      background: #1e4d3e !important;
      border: 1px solid #1e4d3e !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    /* Mobile: stacked full-width, height driven by content */
    @media (max-width: 989px) {
      #MainProduct-{{ section.id }} .product-form__buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
      }
      #MainProduct-{{ section.id }} .shopify-payment-button > div {
        flex: none !important;
      }
      #MainProduct-{{ section.id }} .shopify-payment-button__button,
      #MainProduct-{{ section.id }} .shopify-payment-button__button--unbranded {
        flex: none !important;
        width: 100% !important;
      }
    }

    #MainProduct-{{ section.id }} .rte-custom-2.light,
    #MainProduct-{{ section.id }} .rte-custom-2 .light {
      opacity: 1 !important;
    }

    @media screen and (max-width: 749px) {
      #MainProduct-{{ section.id }} .product__media-list .slider__slide {
        width: 100% !important;
        min-width: 100% !important;
      }
      #shopify-section-{{ section.id }} {
        padding-left: 5px;
        padding-right: 5px;
      }
    }

{% endstyle %}
{{ 'popup-modal.css' | asset_url | stylesheet_tag }}
<div class="section-extras-spacing section-extras-spacing-{{ section.id }} {% if section.settings.use_custom_colors %} section-extras-color section-extras-color-{{ section.id }} {% endif %}">
    <product-info
            id="MainProduct-{{ section.id }}"

            data-section="{{ section.id }}"
            data-product-id="{{ product.id }}"
            data-update-url="true"
            data-url="{{ product.url }}"
    >
        {{ 'component-price.css' | asset_url | stylesheet_tag }}
        {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
        {{ 'section-main-product.css' | asset_url | stylesheet_tag }}

        {% unless product.has_only_default_variant %}
            {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
            {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
            {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
        {% endunless %}
        {%- if product.quantity_price_breaks_configured? -%}
            {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
        {%- endif -%}

        <script src="{{ 'product-info.js' | asset_url }}" defer="defer"></script>
        <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
        {%- if product.quantity_price_breaks_configured? -%}
            <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
            <script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
        {%- endif -%}

        {%- if request.design_mode -%}
            <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        {%- endif -%}
        {% # theme-check-disable %}
        {%- assign firs_model_3d = product.media | where: 'media_type', 'model' | first -%}
        {% # theme-check-enable %}
        {%- if firs_model_3d -%}
            {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
            <link
                    id="ModelViewerStyle"
                    rel="stylesheet"
                    href="/cdn/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
                    media="print"
                    onload="this.media='all'"
            >
            <link
                    id="ModelViewerOverride"
                    rel="stylesheet"
                    href="{{ 'component-model-viewer-ui.css' | asset_url }}"
                    media="print"
                    onload="this.media='all'"
            >
        {%- endif -%}
        {% liquid
            case section.settings.media_size
                when 'small'
                    assign product_media_width = 'col-12 col-md-4'
                    assign product_description_width = 'col-12 col-md-8'
                when 'medium'
                    assign product_media_width = 'col-12 col-md-6'
                    assign product_description_width = 'col-12 col-md-6'
                when 'large'
                    assign product_media_width = 'col-12 col-md-7'
                    assign product_description_width = 'col-12 col-md-5'
                when 'x-large'
                    assign product_media_width = 'col-12 col-md-8'
                    assign product_description_width = 'col-12 col-md-4'
                when 'full'
                    assign product_media_width = 'col-12'
                    assign product_description_width = 'col-12 col-md-10'
            endcase
        %}
        {% assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' %}

        <div class="container page-width">
            <div class="product row gx-4 gx-custom-lg-6 product-single product--{{ section.settings.media_size }}{% if section.settings.gallery_layout == 'vertical_thumbnail' or section.settings.gallery_layout == 'thumbnail_slider' %} product--thumbnail_slider{% endif %} product--{{ section.settings.gallery_layout }}{% if section.settings.media_right %} flex-column flex-md-row-reverse{% endif %}">
                <div class="product__media-wrapper col {{ product_media_width }} position-relative mb-3 mb-lg-0">
                    <div class="clearfix sticky-md-top top-10">
                        {% case section.settings.gallery_layout %}
                            {% when 'vertical_thumbnail' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% when 'thumbnail_slider' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% when 'one_column' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% when 'two_columns' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% when 'three_columns' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% when 'mix_columns' %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                            {% else %}
                                {% render 'product-media-gallery', variant_images: variant_images %}
                        {% endcase %}
                        <div class="content-description-more d-none-quick-add">
                            {% for block in section.blocks %}
                                {% case block.type %}
                                    {% when 'collapsible-row' %}
                                        {% if block.settings.style == 'style-2' %}
                                            <div
                                                    class="accordion style-1 mb-{{ block.settings.margin_bottom }} mt-5 d-none d-md-block"
                                                    id="accordion-{{ block.id }}"
                                                    {{ block.shopify_attributes }}
                                            >
                                                {% if block.settings.heading1 != blank %}
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button text-uppercase collapsed fs-15"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapseOne"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapseOne">
                                                                {{ block.settings.heading1 | default: block.settings.page.title1 }}
                                                            </button>
                                                        </h2>
                                                        <div id="collapseOne"
                                                             class="accordion-collapse collapse show"
                                                             data-bs-parent="#accordion-{{ block.id }}">
                                                            <div class="accordion-body rte rte-custom">
                                                                {{ block.settings.row_content1 }}
                                                                {{ block.settings.page.content1 }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if block.settings.heading2 != blank %}
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button text-uppercase collapsed fs-15"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapseTwo"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapseTwo">
                                                                {{ block.settings.heading2 | default: block.settings.page.title2 }}
                                                            </button>
                                                        </h2>
                                                        <div id="collapseTwo"
                                                             class="accordion-collapse collapse"
                                                             data-bs-parent="#accordion-{{ block.id }}">
                                                            <div class="accordion-body rte rte-custom">
                                                                {{ block.settings.row_content2 }}
                                                                {{ block.settings.page.content2 }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if block.settings.heading3 != blank %}
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button text-uppercase collapsed fs-15"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapseThree"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapseThree">
                                                                {{ block.settings.heading3 | default: block.settings.page.title3 }}
                                                            </button>
                                                        </h2>
                                                        <div id="collapseThree"
                                                             class="accordion-collapse collapse"
                                                             data-bs-parent="#accordion-{{ block.id }}">
                                                            <div class="accordion-body rte rte-custom">
                                                                {{ block.settings.row_content3 }}
                                                                {{ block.settings.page.content3 }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                {% if block.settings.heading4 != blank %}
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header">
                                                            <button class="accordion-button text-uppercase collapsed fs-15"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapseFour"
                                                                    aria-expanded="true"
                                                                    aria-controls="collapseFour">
                                                                {{ block.settings.heading4 | default: block.settings.page.title4 }}
                                                            </button>
                                                        </h2>
                                                        <div id="collapseFour"
                                                             class="accordion-collapse collapse"
                                                             data-bs-parent="#accordion-{{ block.id }}">
                                                            <div class="accordion-body rte rte-custom">
                                                                {{ block.settings.row_content4 }}
                                                                {{ block.settings.page.content4 }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% when 'tab' %}
                                        {% if block.settings.style == 'style-2' %}
                                            <div
                                                    class="mb-{{ block.settings.margin_bottom }} mt-5 d-none d-md-block"
                                                    {{ block.shopify_attributes }}
                                            >
                                                <div class="ms-tab">
                                                    <ul class="nav nav-tabs"
                                                        role="tablist">
                                                        {% if block.settings.heading1 != blank %}
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link active" id="ms-tab1"
                                                                        data-bs-toggle="tab"
                                                                        data-bs-target="#ms-tab1-pane"
                                                                        type="button" role="tab"
                                                                        aria-controls="ms-tab1-pane"
                                                                        aria-selected="true">{{ block.settings.heading1 | default: block.settings.page.title1 }}</button>
                                                            </li>
                                                        {% endif %}
                                                        {% if block.settings.heading2 != blank %}
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link" id="ms-tab2"
                                                                        data-bs-toggle="tab"
                                                                        data-bs-target="#ms-tab2-pane" type="button"
                                                                        role="tab"
                                                                        aria-controls="ms-tab2-pane"
                                                                        aria-selected="false">
                                                                    {{ block.settings.heading2 | default: block.settings.page.title2 }}
                                                                </button>
                                                            </li>
                                                        {% endif %}
                                                        {% if block.settings.heading3 != blank %}
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link" id="ms-tab3"
                                                                        data-bs-toggle="tab"
                                                                        data-bs-target="#ms-tab3-pane" type="button"
                                                                        role="tab" aria-controls="ms-tab3-pane"
                                                                        aria-selected="false">
                                                                    {{ block.settings.heading3 | default: block.settings.page.title3 }}
                                                                </button>
                                                            </li>
                                                        {% endif %}
                                                        {% if block.settings.heading4 != blank %}
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link" id="ms-tab4"
                                                                        data-bs-toggle="tab"
                                                                        data-bs-target="#ms-tab4-pane" type="button"
                                                                        role="tab" aria-controls="ms-tab4-pane"
                                                                        aria-selected="false">
                                                                    {{ block.settings.heading4 | default: block.settings.page.title4 }}
                                                                </button>
                                                            </li>
                                                        {% endif %}
                                                    </ul>
                                                    <div class="tab-content" id="myTabContent">
                                                        {% if block.settings.heading1 != blank %}
                                                            <div class="tab-pane rte rte-custom fade show active" id="ms-tab1-pane"
                                                                 role="tabpanel"
                                                                 aria-labelledby="ms-tab1" tabindex="0">
                                                                {{ block.settings.row_content1 }}
                                                                {{ block.settings.page.content1 }}
                                                            </div>
                                                        {% endif %}
                                                        {% if block.settings.heading2 != blank %}
                                                            <div class="tab-pane rte rte-custom fade" id="ms-tab2-pane"
                                                                 role="tabpanel"
                                                                 aria-labelledby="ms-tab2" tabindex="0">
                                                                {{ block.settings.row_content2 }}
                                                                {{ block.settings.page.content2 }}
                                                            </div>
                                                        {% endif %}
                                                        {% if block.settings.heading3 != blank %}
                                                            <div class="tab-pane rte rte-custom fade" id="ms-tab3-pane"
                                                                 role="tabpanel"
                                                                 aria-labelledby="ms-tab3" tabindex="0">
                                                                {{ block.settings.row_content3 }}
                                                                {{ block.settings.page.content3 }}
                                                            </div>
                                                        {% endif %}
                                                        {% if block.settings.heading4 != blank %}
                                                            <div class="tab-pane rte rte-custom fade" id="ms-tab4-pane"
                                                                 role="tabpanel"
                                                                 aria-labelledby="ms-tab4" tabindex="0">
                                                                {{ block.settings.row_content4 }}
                                                                {{ block.settings.page.content4 }}
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                {% endcase %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col product__info-wrapper {{ product_description_width }}{% if section.settings.media_right %} ps-0{% endif %}">
                    <div class="sticky-md-top top-10">
                        <section
                                id="ProductInfo-{{ section.id }}"
                                class="product__info-container product__column-sticky"
                        >
                            {%- assign product_form_id = 'product-form-' | append: section.id -%}

                            {%- for block in section.blocks -%}
                                {%- case block.type -%}
                                    {% when '@app' %}
                                        {% render block %}
                                    
                                    {% when 'social_proofs' %}
                                        {% assign social_reviews_count = product.metafields.loox.num_reviews.value | default: product.metafields.loox.num_reviews %}
                                        <div class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            <div class="custom-social-proof" style="
                                                background-color: {{ block.settings.bg_color }};
                                                color: {{ block.settings.text_color }};
                                                padding: {{ block.settings.padding_v }}px {{ block.settings.padding_h }}px;
                                            ">
                                                <div class="custom-social-proof-main">
                                                    <div style="display: flex; gap: 2px; color: {{ block.settings.star_color }};">
                                                        <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                        <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                        <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                        <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                        {% if block.settings.rating == '5' %}
                                                            <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                        {% else %}
                                                            <svg width="{{ block.settings.icon_size }}px" height="{{ block.settings.icon_size }}px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
                                                              <polygon points="12 2 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor"></polygon>
                                                              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 12 2"></polygon>
                                                            </svg>
                                                        {% endif %}
                                                    </div>
                                                    <span class="custom-social-proof-main-text" style="font-size: {{ block.settings.text_size_mb }}px;">
                                                        {% if social_reviews_count != blank %}
                                                          {% comment %} {{ social_reviews_count }} Reviews {% endcomment %}
                                                        {% else %}
                                                          {{ block.settings.text }}
                                                        {% endif %}
                                                    </span>
                                                </div>
                                                {% if block.settings.badge_text != blank %}
                                                  <span class="custom-social-proof-badge" style="background: {{ block.settings.badge_bg_color }}; color: {{ block.settings.badge_text_color }}; font-size: {{ block.settings.badge_text_size_mb }}px;">
                                                    {{ block.settings.badge_text }}
                                                  </span>
                                                {% endif %}
                                            </div>
                                            <style>
                                              @media (min-width: 990px) {
                                                .custom-social-proof-main-text { font-size: {{ block.settings.text_size_dt }}px !important; }
                                                .custom-social-proof-badge { font-size: {{ block.settings.badge_text_size_dt }}px !important; }
                                              }
                                            </style>
                                        </div>

                                    {% when 'text' %}
                                        <p
                                                class="opacity-75{% if block.settings.style == 'style-2' %} fs-14 mb-0 fst-italic font-monospace{% else %} fs-20{% endif %} mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                                                {{ block.shopify_attributes }}
                                        >
                                            {{ block.settings.text }}
                                        </p>
                                    {% when 'title' %}
                                        <div
                                                class="mb-{{ block.settings.margin_bottom }} mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                                                {{ block.shopify_attributes }}
                                        >
                                            <div class="d-flex flex-wrap align-items-center">
                                                <h1 class="mb-0 {{ block.settings.heading_size }}">{{ product.title }}</h1>
                                            </div>
                                        </div>
                                    {%- when 'inventory' -%}
                                        <p
                                                class="product__inventory d-flex align-items-center{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
                                                {{ block.shopify_attributes }}
                                                id="Inventory-{{ section.id }}"
                                                role="status"
                                        >

                                            {%- if product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
                                                {%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
                                                    {%- if product.selected_or_first_available_variant.inventory_quantity
                                                    <= block.settings.inventory_threshold
                                                    -%}

                                                        <span class="icon-message"
                                                              style="--bg-rgb-icon: 220, 53, 69"></span>
                                                        {%- if block.settings.show_inventory_quantity -%}
                                                            {{-
                                                            'products.product.inventory_low_stock_show_count'
                                                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
                                                            -}}
                                                        {%- else -%}
                                                            {{- 'products.product.inventory_low_stock' | t -}}
                                                        {%- endif -%}
                                                    {%- else -%}
                                                        <span class="icon-message"
                                                              style="--bg-rgb-icon: 62, 214, 96"></span>
                                                        {%- if block.settings.show_inventory_quantity -%}
                                                            {{-
                                                            'products.product.inventory_in_stock_show_count'
                                                            | t: quantity: product.selected_or_first_available_variant.inventory_quantity
                                                            -}}
                                                        {%- else -%}
                                                            {{- 'products.product.inventory_in_stock' | t -}}
                                                        {%- endif -%}
                                                    {%- endif -%}
                                                {%- else -%}
                                                    {%- if product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
                                                        <span class="icon-message"
                                                              style="--bg-rgb-icon: 62, 214, 96"></span>
                                                        {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
                                                    {%- else -%}
                                                        <span class="icon-message"
                                                              style="--bg-rgb-icon: 200, 200, 200"></span>
                                                        {{- 'products.product.inventory_out_of_stock' | t -}}
                                                    {%- endif -%}
                                                {%- endif -%}
                                            {%- endif -%}
                                        </p>
                                    {% when 'payment' %}
                                        <div
                                                class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}"
                                                {{ block.shopify_attributes }}
                                        >
                                            <div class="position-relative text-center">
                                                {% if block.settings.heading != blank %}
                                                    <h3 class="fs-12 text-uppercase content-in-box">{{ block.settings.heading }}</h3>
                                                {% endif %}
                                                <ul class="payment-icons list--inline">
                                                    {% for type in shop.enabled_payment_types %}
                                                        <li class="payment-icon mx-1 mb-2">
                                                            {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </div>
                                    {%- when 'price' -%}
                                    <div class="d-flex align-items-center justify-content-between flex-wrap" {{ block.shopify_attributes }}>
                                        <div class="clearfix" style="width: 100%;">
                                            <div id="price-{{ section.id }}" role="status" 
                                                 class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                                                {%- render 'price',
                                                        product: product,
                                                        use_variant: true,
                                                        show_badges: true,
                                                        price_class: 'price--large'
                                                -%}
                                                
                                                {%- assign variant = product.selected_or_first_available_variant -%}
                                                {%- if variant.compare_at_price > variant.price -%}
                                                  <div class="custom-compare-price-wrapper mt-2" style="display: flex; align-items: center; gap: 8px;">
                                                    <span class="custom-compare-price" style="text-decoration: line-through; opacity: 0.6; font-size: 1rem;">
                                                      {{ variant.compare_at_price | money }}
                                                    </span>
                                                    <span class="custom-save-badge" style="background: #e63946; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">
                                                      Save {{ variant.compare_at_price | minus: variant.price | money }}
                                                    </span>
                                                  </div>
                                                {%- endif -%}
                                            </div>
                                            {%- if product.quantity_price_breaks_configured? -%}
                                                <div class="volume-pricing-note" id="Volume-Note-{{ section.id }}">
                                                    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
                                                </div>
                                            {%- endif -%}
                                            <div>
                                                {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
                                                {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
                                                    <input type="hidden" name="id"
                                                           value="{{ product.selected_or_first_available_variant.id }}">
                                                    {{ form | payment_terms }}
                                                {%- endform -%}
                                            </div>
                                        </div>

                                        {% if block.settings.enable_rating_badge_stars %}
                                            <div class="star-wrap">
                                                <a href="#judgeme_product_reviews" class='jdgm-widget jdgm-preview-badge'>
                                                    {{ product.metafields.judgeme.badge }}
                                                </a>
                                                </div>
                                        {% endif %}
                                    </div>
                                    {% when 'description' %}
                                     <div
                                                class="rte rte-custom-2 mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}{% if block.settings.enable_length == false %} d-none-quick-add{% endif %}"
                                                style="font-size: medium !important; color: black !important;"
                                                {{ block.shopify_attributes }}
                                        >
                                            {% if block.settings.heading != '' %}
                                                <h3 class="fw-bold text-uppercase mb-2 {{ block.settings.heading_size }}">{{ block.settings.heading }}</h3>
                                            {% endif %}
                                            {% if block.settings.enable_length %}
                                                <p class=" mb-0" style="font-size: medium !important; color: black !important;">{{ product.description | strip_html | truncatewords: block.settings.length }}</p>
                                            {% else %}
                                                {{ product.description }}
                                            {% endif %}
                                        </div>

                                    {% when 'icon_with_text' %}
                                        {% if block.settings.show_1
                                        or block.settings.show_2
                                        or block.settings.show_3
                                        or block.settings.show_4
                                        or block.settings.show_5
                                        %}
                                            <div
                                                    class="d-none-quick-add mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }} icon-with-text d-flex flex-wrap {{ block.settings.layout }}"
                                                    {{ block.shopify_attributes }}
                                            >
                                                {% render 'icon-with-text-blocks',
                                                        size: 'icon-small',
                                                        layout: block.settings.layout,
                                                        block: block
                                                %}
                                            </div>
                                        {% endif %}
                                    {%- when 'sku' -%}
                                        <div
                                                class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }} product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
                                                id="Sku-{{ section.id }}"
                                                role="status"
                                                {{ block.shopify_attributes }}
                                        >
                                            {% if product.selected_or_first_available_variant.sku %}
                                                <div class="d-flex align-items-center flex-wrap mb-2">
                                                    <div class="item-width-1">
                                                        <p class="mb-0 text-uppercase fs-12 fw-bold">{{ 'products.product.sku' | t }}
                                                            :</p>
                                                    </div>
                                                    <div class="item-content opacity-75 fs-14">
                                                        <p class="mb-0">{{- product.selected_or_first_available_variant.sku -}}</p>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {%- when 'custom_liquid' -%}
                                        <div class="d-none-quick-add mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            {{ block.settings.custom_liquid }}
                                        </div>
                                    {% when 'collapsible-row' %}
                                        <div
                                                class="d-none-quick-add accordion mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}{% if block.settings.style == 'style-2' %} d-block d-md-none{% endif %}"
                                                id="accordion-more-{{ block.id }}"
                                                {{ block.shopify_attributes }}
                                        >
                                            {% if block.settings.heading1 != blank %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header fs-16">
                                                        <button class="accordion-button fw-bold text-uppercase collapsed"
                                                                type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#collapseOneMore"
                                                                aria-expanded="true"
                                                                aria-controls="collapseOneMore">
                                                            {{ block.settings.heading1 | default: block.settings.page.title1 }}
                                                        </button>
                                                    </h2>
                                                    <div id="collapseOneMore"
                                                         class="accordion-collapse collapse show"
                                                         data-bs-parent="#accordion-more-{{ block.id }}">
                                                        <div class="accordion-body rte rte-custom-2">
                                                            {{ block.settings.row_content1 }}
                                                            {{ block.settings.page.content1 }}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {% if block.settings.heading2 != blank %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header fs-16">
                                                        <button class="accordion-button fw-bold text-uppercase collapsed"
                                                                type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#collapseTwoMore"
                                                                aria-expanded="true"
                                                                aria-controls="collapseTwoMore">
                                                            {{ block.settings.heading2 | default: block.settings.page.title2 }}
                                                        </button>
                                                    </h2>
                                                    <div id="collapseTwoMore"
                                                         class="accordion-collapse collapse"
                                                         data-bs-parent="#accordion-more-{{ block.id }}">
                                                        <div class="accordion-body rte rte-custom-2">
                                                            {{ block.settings.row_content2 }}
                                                            {{ block.settings.page.content2 }}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {% if block.settings.heading3 != blank %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header fs-16">
                                                        <button class="accordion-button fw-bold text-uppercase collapsed"
                                                                type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#collapseThreeMore"
                                                                aria-expanded="true"
                                                                aria-controls="collapseThreeMore">
                                                            {{ block.settings.heading3 | default: block.settings.page.title3 }}
                                                        </button>
                                                    </h2>
                                                    <div id="collapseThreeMore"
                                                         class="accordion-collapse collapse"
                                                         data-bs-parent="#accordion-more-{{ block.id }}">
                                                        <div class="accordion-body rte rte-custom-2">
                                                            {{ block.settings.row_content3 }}
                                                            {{ block.settings.page.content3 }}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                            {% if block.settings.heading4 != blank %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header fs-16">
                                                        <button class="accordion-button fw-bold text-uppercase collapsed"
                                                                type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#collapseFourMore"
                                                                aria-expanded="true"
                                                                aria-controls="collapseFourMore">
                                                            {{ block.settings.heading4 | default: block.settings.page.title4 }}
                                                        </button>
                                                    </h2>
                                                    <div id="collapseFourMore"
                                                         class="accordion-collapse collapse"
                                                         data-bs-parent="#accordion-more-{{ block.id }}">
                                                        <div class="accordion-body rte rte-custom-2">
                                                            {{ block.settings.row_content4 }}
                                                            {{ block.settings.page.content4 }}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% when 'complementary' %}
                                        <product-recommendations
                                                class="d-none-quick-add product-recommendations style-2"
                                                data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=6&intent=complementary"
                                        >
                                            {%- if recommendations.performed? and recommendations.products_count > 0 -%}
                                                <div
                                                        class="mb-{{ block.settings.margin_bottom }}"
                                                        {{ block.shopify_attributes }}
                                                >
                                                    <h2 class="clearfix fs-16 text-uppercase fw-bold mb-3">
                                                        {{ block.settings.heading }}
                                                    </h2>
                                                    <div class="row gx-2 gx-lg-4 row-cols-2 row-cols-md-2 row-cols-lg-2"
                                                    >

                                                        {%- for product in recommendations.products -%}
                                                            <div class="position-relative col mb-4">
                                                                {% render 'card-product',
                                                                        section_id: product.id,
                                                                        card_product: product,
                                                                        image_height: 'adapt',
                                                                        show_quick_add: true,
                                                                        show_secondary_image: true,
                                                                        style_product: 'style-2'
                                                                %}
                                                            </div>
                                                        {%- endfor -%}
                                                    </div>
                                                </div>
                                            {%- endif -%}
                                        </product-recommendations>


                                    {% when 'tab' %}
                                        <div
                                                class="d-none-quick-add mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}{% if block.settings.style == 'style-2' %} d-block d-md-none{% endif %}"
                                                {{ block.shopify_attributes }}
                                        >
                                            <div class="ms-tab">
                                                <ul class="nav nav-tabs"
                                                    role="tablist">
                                                    {% if block.settings.heading1 != blank %}
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link active" id="ms-tab1-more"
                                                                    data-bs-toggle="tab"
                                                                    data-bs-target="#ms-tab1-more-pane"
                                                                    type="button" role="tab"
                                                                    aria-controls="ms-tab1-more-pane"
                                                                    aria-selected="true">{{ block.settings.heading1 | default: block.settings.page.title1 }}</button>
                                                        </li>
                                                    {% endif %}
                                                    {% if block.settings.heading2 != blank %}
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="ms-tab2-more"
                                                                    data-bs-toggle="tab"
                                                                    data-bs-target="#ms-tab2-more-pane" type="button"
                                                                    role="tab"
                                                                    aria-controls="ms-tab2-more-pane"
                                                                    aria-selected="false">
                                                                {{ block.settings.heading2 | default: block.settings.page.title2 }}
                                                            </button>
                                                        </li>
                                                    {% endif %}
                                                    {% if block.settings.heading3 != blank %}
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="ms-tab3-more"
                                                                    data-bs-toggle="tab"
                                                                    data-bs-target="#ms-tab3-more-pane" type="button"
                                                                    role="tab" aria-controls="ms-tab3-more-pane"
                                                                    aria-selected="false">
                                                                {{ block.settings.heading3 | default: block.settings.page.title3 }}
                                                            </button>
                                                        </li>
                                                    {% endif %}
                                                    {% if block.settings.heading4 != blank %}
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="ms-tab4-more"
                                                                    data-bs-toggle="tab"
                                                                    data-bs-target="#ms-tab4-more-pane" type="button"
                                                                    role="tab" aria-controls="ms-tab4-more-pane"
                                                                    aria-selected="false">
                                                                {{ block.settings.heading4 | default: block.settings.page.title4 }}
                                                            </button>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                                <div class="tab-content" id="myTabContent">
                                                    {% if block.settings.heading1 != blank %}
                                                        <div class="tab-pane rte rte-custom-2 fade show active"
                                                             id="ms-tab1-more-pane"
                                                             role="tabpanel"
                                                             aria-labelledby="ms-tab1-more" tabindex="0">
                                                            {{ block.settings.row_content1 }}
                                                            {{ block.settings.page.content1 }}
                                                        </div>
                                                    {% endif %}
                                                    {% if block.settings.heading2 != blank %}
                                                        <div class="tab-pane rte rte-custom-2 fade"
                                                             id="ms-tab2-more-pane"
                                                             role="tabpanel"
                                                             aria-labelledby="ms-tab2-more" tabindex="0">
                                                            {{ block.settings.row_content2 }}
                                                            {{ block.settings.page.content2 }}
                                                        </div>
                                                    {% endif %}
                                                    {% if block.settings.heading3 != blank %}
                                                        <div class="tab-pane rte rte-custom-2 fade"
                                                             id="ms-tab3-more-pane"
                                                             role="tabpanel"
                                                             aria-labelledby="ms-tab3-more" tabindex="0">
                                                            {{ block.settings.row_content3 }}
                                                            {{ block.settings.page.content3 }}
                                                        </div>
                                                    {% endif %}
                                                    {% if block.settings.heading4 != blank %}
                                                        <div class="tab-pane rte rte-custom-2 fade"
                                                             id="ms-tab4-more-pane"
                                                             role="tabpanel"
                                                             aria-labelledby="ms-tab4-more" tabindex="0">
                                                            {{ block.settings.row_content4 }}
                                                            {{ block.settings.page.content4 }}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    {%- when 'variant_picker' -%}
                                        <div class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
                                        </div>

                                    {%- when 'quantity_selector' -%}
                                        <div class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            <div
                                                    id="Quantity-Form-{{ section.id }}"
                                                    class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
                                                    {{ block.shopify_attributes }}
                                            >
                                                {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}
                                                {% # theme-check-disable            %}
                                                {%- assign cart_qty = cart
                                                        | item_count_for_variant: product.selected_or_first_available_variant.id
                                                -%}
                                                {% # theme-check-enable            %}
                                                <label class="quantity__label form__label text-uppercase fs-14 fw-bold"
                                                       for="Quantity-{{ section.id }}">
                                                    {{ 'products.product.quantity.label' | t }}:
                                                    <span class="quantity__rules-cart{% if cart_qty == 0 %} hidden{% endif %}">
                      {%- render 'loading-spinner' -%}
                      <span
                      >(
                        {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}
                        )</span
                      >
                    </span>
                                                </label>
                                                <div class="price-per-item__container">
                                                    <quantity-input class="quantity" data-url="{{ product.url }}"
                                                                    data-section="{{ section.id }}">
                                                        <button class="quantity__button" name="minus" type="button">
                        <span class="visually-hidden">
                          {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
                        </span>
                                                            <span class="svg-wrapper">
                         {{- 'icon-minus.svg' | inline_asset_content -}}
                        </span>
                                                        </button>
                                                        <input
                                                                class="quantity__input"
                                                                type="number"
                                                                name="quantity"
                                                                id="Quantity-{{ section.id }}"
                                                                data-cart-quantity="{{ cart_qty }}"
                                                                data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                                                                min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                                                                {% if product.selected_or_first_available_variant.quantity_rule.max != null %}
                                                                    data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                                                                    max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
                                                                {% endif %}
                                                                step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
                                                                value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
                                                                form="{{ product_form_id }}"
                                                        >
                                                        <button class="quantity__button" name="plus" type="button">
                        <span class="visually-hidden">
                          {{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
                        </span>
                                                            <span class="svg-wrapper">
                         {{- 'icon-plus.svg' | inline_asset_content -}}
                        </span>
                                                        </button>
                                                    </quantity-input>
                                                    {%- liquid
                                                        assign volume_pricing_array = product.selected_or_first_available_variant.quantity_price_breaks | sort: 'quantity' | reverse
                                                        assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.min
                                                        if cart_qty > 0
                                                            assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
                                                        endif
                                                    -%}
                                                    {%- if product.quantity_price_breaks_configured? -%}
                                                        <price-per-item
                                                                id="Price-Per-Item-{{ section.id }}"
                                                                data-section-id="{{ section.id }}"
                                                                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                                                        >
                                                            {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
                                                                {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                                                                <div class="price-per-item">
                                                                    {%- if variant_price_compare -%}
                                                                        <dl class="price-per-item--current">
                                                                            <dt class="visually-hidden">
                                                                                {{ 'products.product.price.regular_price' | t }}
                                                                            </dt>
                                                                            <dd>
                                                                                <s class="variant-item__old-price">
                                                                                    {{ variant_price_compare | money_with_currency }}
                                                                                </s>
                                                                            </dd>
                                                                        </dl>
                                                                    {%- endif -%}
                                                                    {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                                                                        {%- assign variant_price = product.selected_or_first_available_variant.price
                                                                            | money_with_currency
                                                                        -%}
                                                                        <span class="price-per-item--current">
                                {{- 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price -}}
                              </span>
                                                                    {%- else -%}
                                                                        {%- for price_break in volume_pricing_array -%}
                                                                            {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
                                                                                {%- assign price_break_price = price_break.price | money_with_currency -%}
                                                                                <span class="price-per-item--current">
                                    {{-
                                    'products.product.volume_pricing.price_at_each_html'
                                    | t: price: price_break_price
                                    -}}
                                  </span>
                                                                                {%- break -%}
                                                                            {%- endif -%}
                                                                        {%- endfor -%}
                                                                    {%- endif -%}
                                                                </div>
                                                            {%- else -%}
                                                                {%- assign variant_price = product.selected_or_first_available_variant.price
                                                                    | money_with_currency
                                                                -%}
                                                                {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                                                                <div class="price-per-item">
                                                                    {%- if variant_price_compare -%}
                                                                        <dl class="price-per-item--current">
                                                                            <dt class="visually-hidden">
                                                                                {{ 'products.product.price.regular_price' | t }}
                                                                            </dt>
                                                                            <dd>
                                                                                <s class="variant-item__old-price">
                                                                                    {{ variant_price_compare | money_with_currency }}
                                                                                </s>
                                                                            </dd>
                                                                            <dt class="visually-hidden">
                                                                                {{ 'products.product.price.sale_price' | t }}
                                                                            </dt>
                                                                            <dd>
                                  <span class="price-per-item--current">
                                    {{- 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price -}}
                                  </span>
                                                                            </dd>
                                                                        </dl>
                                                                    {%- else -%}
                                                                        <span class="price-per-item--current">
                                {{- 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price -}}
                              </span>
                                                                    {%- endif -%}
                                                                </div>
                                                            {%- endif -%}
                                                        </price-per-item>
                                                    {%- endif -%}
                                                </div>
                                                <div class="quantity__rules caption"
                                                     id="Quantity-Rules-{{ section.id }}">
                                                    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
                                                        <span class="divider">
                        {{-
                        'products.product.quantity.multiples_of'
                        | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment
                        -}}
                      </span>
                                                    {%- endif -%}
                                                    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
                                                        <span class="divider">
                        {{-
                        'products.product.quantity.minimum_of'
                        | t: quantity: product.selected_or_first_available_variant.quantity_rule.min
                        -}}
                      </span>
                                                    {%- endif -%}
                                                    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
                                                        <span class="divider">
                        {{-
                        'products.product.quantity.maximum_of'
                        | t: quantity: product.selected_or_first_available_variant.quantity_rule.max
                        -}}
                      </span>
                                                    {%- endif -%}
                                                </div>
                                                {%- if product.quantity_price_breaks_configured? -%}
                                                    <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
                                                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
                                                            <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
                                                            <ul class="list-unstyled">
                                                                <li>
                                                                    <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
                                                                    {%- assign price = product.selected_or_first_available_variant.price
                                                                        | money_with_currency
                                                                    -%}
                                                                    <span data-text="{{ 'products.product.volume_pricing.price_at_each_html' | t: price: variant_price }}">
                              {{- 'sections.quick_order_list.each' | t: money: price -}}
                            </span>
                                                                </li>
                                                                {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
                                                                    {%- assign price_break_price = price_break.price | money_with_currency -%}
                                                                    <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
                              <span>
                                {{- price_break.minimum_quantity -}}
                                <span aria-hidden="true">+</span></span
                              >
                                                                        <span data-text="{{ 'products.product.volume_pricing.price_at_each_html' | t: price: price_break_price }}">
                                {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                              </span>
                                                                    </li>
                                                                {%- endfor -%}
                                                            </ul>
                                                            {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
                                                                <show-more-button>
                                                                    <button
                                                                            class="button-show-more hover-underline underline-1"
                                                                            id="Show-More-{{ section.id }}"
                                                                            type="button"
                                                                    >
                              <span class="label-show-more label-text"
                              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
                              </span>
                                                                    </button>
                                                                </show-more-button>
                                                            {%- endif -%}
                                                        {%- endif -%}
                                                    </volume-pricing>
                                                {%- endif -%}
                                            </div>
                                        </div>
                                    {%- when 'buy_buttons' -%}
                                        <div class="mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            {%- render 'buy-buttons',
                                                    block: block,
                                                    product: product,
                                                    product_form_id: product_form_id,
                                                    section_id: section.id,
                                                    show_pickup_availability: true
                                            -%}
                                        </div>
                                    {%- when 'popup' -%}
                                        <div class="d-none-quick-add mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            <modal-opener
                                                    class="pop-up-modal__opener no-js-hidden quick-add-hidden"
                                                    data-modal="#PopupModal-{{ block.id }}"
                                            >
                                                <div class="d-inline-flex align-items-center trigger-pop-up-wrap mb-3">
                                                    <span class="svg-wrapper" aria-hidden="true">{{- 'icon-info.svg' | inline_asset_content -}}</span>
                                                    <button
                                                            id="ProductPopup-{{ block.id }}"
                                                            type="button"
                                                            aria-haspopup="dialog"
                                                            class="pop-up-modal__button link trigger-pop-up underline-anm underline-anm-1 {% if block.settings.icon != 'none' %} ms-2 {% endif %}"
                                                    >
                                                        {{ block.settings.text | default: block.settings.page.title }}
                                                    </button>
                                                </div>
                                            </modal-opener>
                                        </div>

                                    {%- when 'share' -%}
                                        <div class="d-none-quick-add mb-{{ block.settings.margin_bottom }} mt-{{ block.settings.margin_top }}" {{ block.shopify_attributes }}>
                                            {% liquid
                                                assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin
                                                render 'share-button', block: block, share_link: share_url
                                            %}
                                        </div>
                                {%- endcase -%}
                            {%- endfor -%}
                            <div class="d-inline-block">
                                <a href="{{ product.url }}"
                                   class="link product__view-details mt-0 mt-md-2 mb-3 mb-md-0">
                            <span class="underline-anm underline-anm-1">{{ 'products.product.view_full_details' | t }}
                            {{- 'icon-arrow.svg' | inline_asset_content -}}</span>
                                </a>
                            </div>

                        </section>
                    </div>
                </div>
            </div>
            {% render 'product-media-modal', variant_images: variant_images %}
            {% assign popups = section.blocks | where: 'type', 'popup' %}
            {%- for block in popups -%}
                <modal-dialog id="PopupModal-{{ block.id }}" class="pop-up-modal" {{ block.shopify_attributes }}>
                    <div
                            role="dialog"
                            aria-label="{{ block.settings.text }}"
                            aria-modal="true"
                            class="pop-up-content"
                            tabindex="-1"
                    >
                        <div class="position-absolute top-0 end-0 m-3">
                     <span
                             id="ModalClose-{{ block.id }}"
                             type="button"
                             class="modal__toggle close-button"
                     ></span>
                        </div>
                        {% if block.settings.image == '' %}
                            <div class="pop-up-content-header">
                                <h2 class="h4 fw-bold">{{ block.settings.page.title }}</h2>

                            </div>
                            <div class="pop-up-content-inner rte-custom-3">
                                {{ block.settings.page.content }}
                            </div>
                        {% else %}
                            {% render 'image-lg', lazyload: true, image: block.settings.image, class: 'w-100' %}
                        {% endif %}
                    </div>
                </modal-dialog>
            {%- endfor -%}
            {%- if product.media.size > 0 -%}
                <script src="{{ 'product-modal.js' | asset_url }}" defer="defer"></script>
                <script src="{{ 'media-gallery.js' | asset_url }}" defer="defer"></script>
            {%- endif -%}

            {%- if firs_model_3d -%}
                <script type="application/json" id="ProductJSON-{{ product.id }}">
        {{ product.media | where: 'media_type', 'model' | json }}















                </script>
                <script src="{{ 'product-model.js' | asset_url }}" defer></script>
            {%- endif -%}


            <script type="application/ld+json">
      {{ product | structured_data }}

            </script>
        </div>
    </product-info>
</div>
{% schema %}
{
  "name": "Product",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "social_proofs",
      "name": "Social Proofs",
      "settings": [
        {
          "type": "select",
          "id": "rating",
          "label": "Star Rating",
          "options": [
            { "value": "4.5", "label": "4.5 Stars" },
            { "value": "5", "label": "5 Stars" }
          ],
          "default": "5"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Proof Text",
          "default": "4.9/5 2,400+ Happy Customers"
        },
        {
          "type": "text",
          "id": "badge_text",
          "label": "Highlight Badge Text",
          "default": "Loved by 50k Customers"
        },
        {
          "type": "color",
          "id": "badge_bg_color",
          "label": "Badge Background",
          "default": "#bfe45f"
        },
        {
          "type": "color",
          "id": "badge_text_color",
          "label": "Badge Text Color",
          "default": "#1a1a1a"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background Color",
          "default": "transparent"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#1a1a1a"
        },
        {
          "type": "color",
          "id": "star_color",
          "label": "Star Color",
          "default": "#FFD700"
        },
        {
          "type": "range",
          "id": "text_size_dt",
          "min": 10,
          "max": 24,
          "step": 1,
          "label": "Text Size (Desktop)",
          "default": 14
        },
        {
          "type": "range",
          "id": "text_size_mb",
          "min": 10,
          "max": 20,
          "step": 1,
          "label": "Text Size (Mobile)",
          "default": 12
        },
        {
          "type": "range",
          "id": "icon_size",
          "min": 10,
          "max": 30,
          "step": 1,
          "label": "Star Icon Size",
          "default": 20
        },
        {
          "type": "range",
          "id": "badge_text_size_dt",
          "min": 10,
          "max": 24,
          "step": 1,
          "label": "Badge Text Size (Desktop)",
          "default": 14
        },
        {
          "type": "range",
          "id": "badge_text_size_mb",
          "min": 10,
          "max": 20,
          "step": 1,
          "label": "Badge Text Size (Mobile)",
          "default": 12
        },
        {
          "type": "range",
          "id": "padding_v",
          "min": 0,
          "max": 20,
          "step": 1,
          "label": "Vertical Padding",
          "default": 4
        },
        {
          "type": "range",
          "id": "padding_h",
          "min": 0,
          "max": 30,
          "step": 1,
          "label": "Horizontal Padding",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "Text block",
          "label": "Text"
        },
        {
          "type": "select",
          "id": "style",
          "options": [
            {
              "value": "style-1",
              "label": "Style 1"
            },
            {
              "value": "style-2",
              "label": "Style 2"
            }
          ],
          "default": "style-1",
          "label": "Style"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "title",
      "name": "Title",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h0",
              "label": "Extra Extra Large"
            },
            {
              "value": "h1",
              "label": "Extra Large"
            },
            {
              "value": "h2",
              "label": "Large"
            },
            {
              "value": "h3",
              "label": "Medium"
            },
            {
              "value": "h4",
              "label": "Small"
            },
            {
              "value": "h5",
              "label": "Extra Small"
            },
            {
              "value": "h6",
              "label": "Double Extra Small"
            }
          ],
          "default": "h4",
          "label": "Heading Size"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "inventory",
      "name": "Inventory status",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "Body"
            },
            {
              "value": "subtitle",
              "label": "Subtitle"
            },
            {
              "value": "uppercase",
              "label": "Uppercase"
            }
          ],
          "default": "body",
          "label": "Text style"
        },
        {
          "type": "range",
          "id": "inventory_threshold",
          "label": "Low inventory threshold",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 10
        },
        {
          "type": "checkbox",
          "id": "show_inventory_quantity",
          "label": "Show inventory count",
          "default": true
        }
      ]
    },
    {
      "type": "quantity_selector",
      "name": "Quantity selector",
      "limit": 1,
      "settings": [
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "variant_picker",
      "name": "Variant picker",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "Dropdown"
            },
            {
              "value": "button",
              "label": "Button"
            }
          ],
          "default": "button",
          "label": "Picker type"
        },
        {
          "id": "swatch_shape",
          "label": "Swatch shape",
          "type": "select",
          "info": "Swatches are used for color options",
          "options": [
            {
              "value": "circle",
              "label": "Circle"
            },
            {
              "value": "square",
              "label": "Square"
            },
            {
              "value": "none",
              "label": "None"
            }
          ],
          "default": "circle"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "Buy buttons",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "Show dynamic checkout buttons",
          "info": "Shows vendor payment methods like PayPal"
        },
        {
          "type": "checkbox",
          "id": "show_gift_card_recipient",
          "default": true,
          "label": "Show gift card recipient form",
          "info": "Only applies to gift card products"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "price",
      "name": "Price",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "enable_rating_badge_stars",
          "label": "Show rating badge",
          "default": true,
          "info": "Requires the Product Reviews app"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "custom_field",
      "name": "Custom field",
      "settings": [
        {
          "type": "select",
          "id": "field_type",
          "label": "Field type",
          "options": [
            {
              "value": "text_short",
              "label": "Short text"
            },
            {
              "value": "text_long",
              "label": "Long text"
            },
            {
              "value": "radio_buttons",
              "label": "Radio buttons"
            },
            {
              "value": "drop_down",
              "label": "Drop down"
            },
            {
              "value": "checkbox",
              "label": "Checkbox"
            },
            {
              "value": "checkbox_group",
              "label": "Checkbox group"
            }
          ],
          "default": "text_short"
        },
        {
          "type": "text",
          "id": "field_label",
          "label": "Field label",
          "default": "Field label"
        },
        {
          "type": "textarea",
          "id": "field_options",
          "label": "Field options",
          "info": "Enter options separated by commas",
          "default": "Option 1, Option 2, Option 3"
        },
        {
          "type": "checkbox",
          "id": "field_required",
          "label": "Required field",
          "info": "Customer must fill in this field",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "show_at_checkout",
          "label": "Show at checkout",
          "info": "Show this field value in the order summary",
          "default": true
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "description",
      "name": "Description",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h1",
              "label": "Extra Large"
            },
            {
              "value": "h2",
              "label": "Large"
            },
            {
              "value": "h3",
              "label": "Medium"
            },
            {
              "value": "h4",
              "label": "Small"
            },
            {
              "value": "h5",
              "label": "Extra Small"
            },
            {
              "value": "h6",
              "label": "Double Extra Small"
            }
          ],
          "default": "h2",
          "label": "Heading Size"
        },
        {
          "type": "checkbox",
          "id": "enable_length",
          "default": false,
          "label": "Truncate description"
        },
        {
          "type": "range",
          "id": "length",
          "min": 5,
          "max": 50,
          "step": 1,
          "label": "Word count",
          "default": 15
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "payment",
      "name": "Payment",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "sku",
      "name": "SKU",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "Body"
            },
            {
              "value": "subtitle",
              "label": "Subtitle"
            },
            {
              "value": "uppercase",
              "label": "Uppercase"
            }
          ],
          "default": "body",
          "label": "Text style"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "share",
      "name": "Share",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "Label",
          "default": "Share"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "Custom liquid",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "Custom liquid",
          "info": "Add app snippets or other Liquid code"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "collapsible-row",
      "name": "Collapsible row",
      "settings": [
        {
          "type": "select",
          "id": "style",
          "options": [
            {
              "value": "style-1",
              "label": "Style 1"
            },
            {
              "value": "style-2",
              "label": "Style 2"
            }
          ],
          "default": "style-1",
          "label": "Style"
        },
        {
          "type": "header",
          "content": "Tab 1"
        },
        {
          "type": "text",
          "id": "heading1",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content1",
          "label": "Collapsible row"
        },
        {
          "type": "page",
          "id": "page1",
          "label": "Row content from page"
        },
        {
          "type": "header",
          "content": "Tab 2"
        },
        {
          "type": "text",
          "id": "heading2",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content2",
          "label": "Collapsible row"
        },
        {
          "type": "page",
          "id": "page2",
          "label": "Row content from page"
        },
        {
          "type": "header",
          "content": "Tab 3"
        },
        {
          "type": "text",
          "id": "heading3",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content3",
          "label": "Collapsible row"
        },
        {
          "type": "page",
          "id": "page3",
          "label": "Row content from page"
        },
        {
          "type": "header",
          "content": "Tab 4"
        },
        {
          "type": "text",
          "id": "heading4",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content4",
          "label": "Collapsible row"
        },
        {
          "type": "page",
          "id": "page4",
          "label": "Row content from page"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "complementary",
      "name": "Complementary products",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "To select complementary products, add the Search and Discovery app"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Pairs well with"
        },
        {
          "type": "header",
          "content": "Product Card"
        },
        {
          "type": "select",
          "id": "image_height",
          "options": [
            {
              "group": "Adapt to image",
              "value": "adapt",
              "label": "Adapt to image"
            },
            {
              "group": "Portrait",
              "value": "h-ratio-2-1",
              "label": "2:1"
            },
            {
              "group": "Portrait",
              "value": "h-ratio-16-9",
              "label": "16:9"
            },
            {
              "group": "Portrait",
              "value": "h-ratio-8-5",
              "label": "8:5"
            },
            {
              "group": "Portrait",
              "value": "h-ratio-3-2",
              "label": "3:2"
            },
            {
              "group": "Portrait",
              "value": "h-ratio-4-3",
              "label": "4:3"
            },
            {
              "group": "Square",
              "value": "h-ratio-1-1",
              "label": "1:1"
            },
            {
              "group": "Landscape",
              "value": "h-ratio-4-5",
              "label": "4:5"
            },
            {
              "group": "Landscape",
              "value": "h-ratio-3-4",
              "label": "3:4"
            },
            {
              "group": "Landscape",
              "value": "h-ratio-2-3",
              "label": "2:3"
            },
            {
              "group": "Landscape",
              "value": "h-ratio-1-2",
              "label": "1:2"
            }
          ],
          "default": "adapt",
          "label": "Image ratio",
          "info": "Add a ratio to prevent layout shift when the image loads"
        },
        {
          "type": "checkbox",
          "id": "show_secondary_image",
          "label": "Show second image on hover",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_vendor",
          "label": "Show vendor",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "enable_quick_add",
          "default": false,
          "label": "Enable quick add"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "select",
          "id": "style",
          "options": [
            {
              "value": "style-1",
              "label": "Style 1"
            },
            {
              "value": "style-2",
              "label": "Style 2"
            }
          ],
          "default": "style-1",
          "label": "Style"
        },
        {
          "type": "header",
          "content": "Tab 1"
        },
        {
          "type": "text",
          "id": "heading1",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content1",
          "label": "Tab content"
        },
        {
          "type": "header",
          "content": "Tab 2"
        },
        {
          "type": "text",
          "id": "heading2",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content2",
          "label": "Tab content"
        },
        {
          "type": "header",
          "content": "Tab 3"
        },
        {
          "type": "text",
          "id": "heading3",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content3",
          "label": "Tab content"
        },
        {
          "type": "header",
          "content": "Tab 4"
        },
        {
          "type": "text",
          "id": "heading4",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "row_content4",
          "label": "Tab content"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "popup",
      "name": "Pop-up",
      "settings": [
        {
          "type": "text",
          "id": "icon",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "text",
          "default": "Pop-up link text",
          "label": "Link label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "Page"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 3
        }
      ]
    },
    {
      "type": "icon_with_text",
      "name": "Icon with text",
      "settings": [
        {
          "type": "select",
          "id": "layout",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal"
            },
            {
              "value": "vertical",
              "label": "Vertical"
            }
          ],
          "default": "vertical",
          "label": "Layout"
        },
        {
          "type": "header",
          "content": "Content",
          "info": "Upload an image or enter an icon class"
        },
        {
          "type": "checkbox",
          "id": "show_1",
          "label": "Show item 1",
          "default": true
        },
        {
          "type": "text",
          "id": "icon_1",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image 1"
        },
        {
          "type": "text",
          "id": "text_1",
          "default": "Icon with text",
          "label": "Text 1"
        },
        {
          "type": "url",
          "id": "link_1",
          "label": "Link 1"
        },
        {
          "type": "checkbox",
          "id": "show_2",
          "label": "Show item 2",
          "default": true
        },
        {
          "type": "text",
          "id": "icon_2",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "Image 2"
        },
        {
          "type": "text",
          "id": "text_2",
          "default": "Icon with text",
          "label": "Text 2"
        },
        {
          "type": "url",
          "id": "link_2",
          "label": "Link 2"
        },
        {
          "type": "checkbox",
          "id": "show_3",
          "label": "Show item 3",
          "default": true
        },
        {
          "type": "text",
          "id": "icon_3",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image_3",
          "label": "Image 3"
        },
        {
          "type": "text",
          "id": "text_3",
          "default": "Icon with text",
          "label": "Text 3"
        },
        {
          "type": "url",
          "id": "link_3",
          "label": "Link 3"
        },
        {
          "type": "checkbox",
          "id": "show_4",
          "label": "Show item 4",
          "default": false
        },
        {
          "type": "text",
          "id": "icon_4",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image_4",
          "label": "Image 4"
        },
        {
          "type": "text",
          "id": "text_4",
          "default": "Icon with text",
          "label": "Text 4"
        },
        {
          "type": "url",
          "id": "link_4",
          "label": "Link 4"
        },
        {
          "type": "checkbox",
          "id": "show_5",
          "label": "Show item 5",
          "default": false
        },
        {
          "type": "text",
          "id": "icon_5",
          "default": "bi bi-check",
          "label": "Icon Class",
          "info": "Example: bi bi-check"
        },
        {
          "type": "image_picker",
          "id": "image_5",
          "label": "Image 5"
        },
        {
          "type": "text",
          "id": "text_5",
          "default": "Icon with text",
          "label": "Text 5"
        },
        {
          "type": "url",
          "id": "link_5",
          "label": "Link 5"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Margin Bottom",
          "default": 2
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "select",
      "id": "media_size",
      "label": "Media size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        },
        {
          "value": "x-large",
          "label": "Extra large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "gallery_layout",
      "options": [
        {
          "value": "vertical_thumbnail",
          "label": "Vertical thumbnail"
        },
        {
          "value": "thumbnail_slider",
          "label": "Thumbnail slider"
        },
        {
          "value": "one_column",
          "label": "One column"
        },
        {
          "value": "two_columns",
          "label": "Two columns"
        },
        {
          "value": "three_columns",
          "label": "Three columns"
        },
        {
          "value": "mix_columns",
          "label": "Mixed columns"
        }
      ],
      "default": "thumbnail_slider",
      "label": "Gallery layout"
    },
    {
      "type": "checkbox",
      "id": "media_right",
      "label": "Move media to right",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "Hide unselected variants media"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "Enable video looping"
    },
    {
      "type": "checkbox",
      "id": "use_custom_colors",
      "default": false,
      "label": "Use custom colors"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "color_background",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color_background",
      "id": "color_background_gradient",
      "label": "Background gradient"
    },
    {
      "type": "header",
      "content": "Section Margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Margin Top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Margin Bottom",
      "default": 0
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding Top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 100
    }
  ]
}
{% endschema %}