<!doctype html>
<html>
<head>
    <title>{{ page_title }}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="{{ page_description | escape }}">
    <link rel="canonical" href="{{ canonical_url }}">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <meta name="theme-color" content="{{ settings.color_mobile_status_bar }}" />

    {%- if settings.favicon != blank -%}
        <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {{ content_for_header }} <!-- Header hook for plugins -->

    {{ 'swiper-bundle.css' | asset_url | stylesheet_tag }}
    {{ 'application.css' | asset_url | stylesheet_tag }}
    {{ 'product.css' | asset_url | stylesheet_tag }}
    {{ 'sections.css' | asset_url | stylesheet_tag }}

    {{ 'jquery-min-3-6.js' | asset_url | script_tag }}
    {{ 'swiper-bundle.js' | asset_url | script_tag }}
    {{ 'lazysizes.js' | asset_url | script_tag }}
    {{ 'application.js' | asset_url | script_tag }}

    {%- liquid
        assign font_body_medium = settings.font_body | font_modify: 'weight', '500'
        assign font_body_semibold = settings.font_body | font_modify: 'weight', '600'
        assign font_body_bold = settings.font_body | font_modify: 'weight', 'bold'
        assign font_body_italic = settings.font_body | font_modify: 'style', 'italic'
        assign font_body_bold_italic = font_body_bold | font_modify: 'style', 'italic'

        assign font_body_family = settings.font_body.family | append: ', ' | append: settings.font_body.fallback_families
        assign font_heading_family = settings.font_heading.family | append: ', ' | append: settings.font_heading.fallback_families
        assign font_button_family = settings.font_button.family | append: ', ' | append: settings.font_button.fallback_families

        assign font_body_weight = settings.font_body.weight
        assign font_heading_weight = settings.font_heading.weight
        assign font_button_weight = settings.font_button.weight
    -%}

    {%- if settings.font_google != blank -%}
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family={{ settings.font_google | replace: ' ', '+' }}:wght@100;300;400;500;600;700;900&display=swap" rel="stylesheet">

        {%- liquid
            assign font_body_family = settings.font_google
            assign font_heading_family = settings.font_google
            assign font_button_family = settings.font_google

            assign font_body_weight = settings.font_google_body_weight
            assign font_heading_weight = settings.font_google_heading_weight
            assign font_button_weight = settings.font_google_button_weight
        -%}
    {% endif %}

    {% style %}
        {{ settings.font_body | font_face: font_display: 'swap' }}
        {{ font_body_medium | font_face: font_display: 'swap' }}
        {{ font_body_semibold | font_face: font_display: 'swap' }}
        {{ font_body_bold | font_face: font_display: 'swap' }}
        {{ font_body_italic | font_face: font_display: 'swap' }}
        {{ font_body_bold_italic | font_face: font_display: 'swap' }}
        {{ settings.font_heading | font_face: font_display: 'swap' }}

        {%- if request.design_mode -%}
            {%- if settings.font_body.family != '"Source Sans Pro"' and settings.font_heading.family != '"Source Sans Pro"' and settings.font_button.family != '"Source Sans Pro"' -%}
                
                @font-face {
                    font-family: "Source Sans Pro";
                    font-weight: 400;
                    font-style: normal;
                    font-display: swap;
                    src: url("{{ 'font-sourcesanspro-n4.woff2' | asset_url }}") format("woff2");
                }
                @font-face {
                    font-family: "Source Sans Pro";
                    font-weight: 400;
                    font-style: italic;
                    font-display: swap;
                    src: url("{{ 'font-sourcesanspro-i4.woff2' | asset_url }}") format("woff2");
                }

                @font-face {
                    font-family: "Source Sans Pro";
                    font-weight: 600;
                    font-style: normal;
                    font-display: swap;
                    src: url("{{ 'font-sourcesanspro-n6.woff2' | asset_url }}") format("woff2");
                }

                @font-face {
                    font-family: "Source Sans Pro";
                    font-weight: 700;
                    font-style: normal;
                    font-display: swap;
                    src: url("{{ 'font-sourcesanspro-n7.woff2' | asset_url }}") format("woff2");
                }

            {% endif %}
        {% endif %}

        :root {
            --font-body-family: {{ font_body_family }};
            --font-body-style: {{ settings.font_body.style }};
            --font-body-weight: {{ font_body_weight }};

            --font-heading-family: {{ font_heading_family }};
            --font-heading-style: {{ settings.font_heading.style }};
            --font-heading-weight: {{ font_heading_weight }};

            --font-button-family: {{ font_button_family }};
            --font-button-style: {{ settings.font_button.style }};
            --font-button-weight: {{ font_button_weight }};

            --color-text: {{ settings.color_text | color_to_hex }};
            --color-heading-text: {{ settings.color_heading_text | color_to_hex }};
            --color-primary: {{ settings.color_primary | color_to_hex }};
            --color-primary-text: {{ settings.color_primary_text | color_to_hex }};
            --color-links: {{ settings.color_links | color_to_hex }};
            --color-compare-price: {{ settings.color_compare_price | color_to_hex }};
            --color-body-background: {{ settings.color_body_background | color_to_hex }};
            --color-border: {{ settings.color_border | color_to_hex }};
            --color-mobile-status-bar: {{ settings.color_mobile_status_bar | color_to_hex }};

            --size-font-heading: {{ settings.font_heading_size }}px;
            --size-font-body: {{ settings.font_body_size }}px;
            --size-font-button: {{ settings.font_button_size }}px;

            --button-text-uppercase: {%- if settings.button_text_uppercase -%}uppercase{%- else -%}none{%- endif -%};

            --border-radius: {{ settings.border_radius }}px;
            --desktop-max-width: {{ settings.desktop_max_width }}px;
            --mobile-horizontal-margin: {{ settings.mobile_horizontal_margin }}vw;

            --swiper-navigation-size: 32px;
            --swiper-theme-color: var(--color-primary);
            --swiper-navigation-color: var(--color-primary);
        }

        @media (min-width: 768px) {
            :root {
                --size-font-heading: {{ settings.font_heading_desktop_size }}px;
                --size-font-body: {{ settings.font_body_desktop_size }}px;
                --size-font-button: {{ settings.font_button_desktop_size }}px;
            }
        }
    {% endstyle %}

    {% render 'judgeme_core' %}

</head>
<body>

    <div 
        id="conrise-data"
        class="{{ 'template-' | append: template.name }}"
        data-price-pattern="{{- 123456 | money_with_currency -}}" 
        data-small-price-pattern="{{- 112233 | money_with_currency -}}" 
        data-show-compare-price="{{ settings.show_compare_price }}"
        data-domain="{{ shop.permanent_domain | downcase }}"
        data-language="{{ request.locale.iso_code }}"
        data-country-of-shop="{{ shop.address.country_code }}"
        data-conrise-version="2.0.2"
    ></div>

    <div id="loading-indicator">
        {% render 'image', assetName: "Icon-Loading-Indicator.gif" %}
    </div>

    <div id="header">
        {%- section 'header-announcement-bar' -%}
        {%- section 'header-menu' -%}

        <div id="mobile-menu">
            <div id="mobile-menu-overlay"></div>
            {% section 'mobile-menu' %}
        </div>
    </div>

    <div id="cart-drawer">
        <div id="cart-drawer-overlay"></div>
        {% section 'cart-drawer' %}
    </div>

    <div id="search-popup">
        <div id="search-popup-overlay"></div>
        {% section 'search-popup' %}
    </div>

    <main role="main">
        {{ content_for_layout }}
    </main>

    <div id="footer">
        {%- section 'footer' -%}
    </div>

    <div id="discounted-trail-welcome">
        <div id="discounted-trail-welcome-content" {% if request.design_mode %} style="width: 70%;"{% endif %}>
            <div class="h1">{{ 'conrise.onboarding.heading' | t }} {% render 'image', assetName: "conrise-Logo.png" %}</div>

            <div style="position: relative; padding-bottom: 55.95854922279793%; height: 0; margin: 0px;">
                <iframe data-src="{{ 'conrise.onboarding.loom_url' | t }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; "></iframe>
            </div>

            {% assign product_url = blank %}
            {% for product in collections.all.products %}
                {% assign product_url = product.url %}
                {% break %}
            {% endfor %}
            
            <button class="btn" data-url="{{ product_url }}">{{ 'conrise.onboarding.button' | t }}</button>
        </div>

        <div class="shopify-app-push-notification temp">
            <div class="shopify-app-push-notification-container">
                {% render 'icon-shopify' %}

                <div class="shopify-app-push-notification-content">
                    <div>
                        <h4></h4>
                        <span></span>
                    </div>
                    <p>{{ 'conrise.onboarding.notification_text' | t }}<b></b>.</p>
                </div>
            </div>
        </div>
    </div>

{%- if request.design_mode -%}

    <div id="starter-trail-expired-popup-overlay"></div>
    <iframe id="starter-trail-expired-popup-iframe" data-src="{{ 'conrise.urls.purchase' | t }}?store={{ shop.permanent_domain | downcase | md5 }}&language={{ request.locale.iso_code }}&shopname={{ shop.name }}&t=d&version=2.0.2"></iframe>

    <div id="sales-view" class="conrise-style" data-shop-name="{{ shop.name }}" data-locale="{{ 'conrise.sales.badge.locale' | t }}">
        <div class="sales-view-header">
            <span 
                data-ending-translation="{{ 'conrise.sales.badge.heading_ending' | t }}"
                data-ending-tomorrow-translation="{{ 'conrise.sales.badge.heading_ending_tomorrow' | t }}"
                data-ending-today-translation="{{ 'conrise.sales.badge.heading_ending_today' | t }}"
                data-expired-translation="{{ 'conrise.sales.badge.heading_expired' | t }}"
            >{{ 'conrise.sales.badge.heading' | t }}</span>
            {% render 'image', assetName: 'conrise-down-single-arrow.png' %}
        </div>
        <div class="sales-view-ending" data-expired-translation="{{ 'conrise.sales.badge.ending_expired' | t }}">
            {{ 'conrise.sales.badge.ending' | t }}<b class="sales-view-ending-date"></b>.
        </div>
        <div class="sales-view-info" data-expired-translation="{{ 'conrise.sales.badge.info_expired' | t }}">
            {{ 'conrise.sales.badge.info' | t }}
        </div>
        <button class="btn" data-upgrade-translation="{{ 'conrise.sales.badge.upgrade_button' | t }}">{{ 'conrise.sales.badge.button' | t }}</button>
    </div>

    {%- if settings.conrise_show_help_center -%}
        <div id="help-view" class="conrise-style">
            {% render 'icon-conrise-arrow-logo' %}
            <span>{{ 'conrise.help-center.badge' | t }}</span>
        </div>
    {%- endif -%}

    <div id="help-dashboard-overlay"></div>
    <iframe id="help-dashboard" data-src="{{ 'conrise.urls.help' | t }}?store={{ shop.permanent_domain | downcase | md5 }}&lang={{ request.locale.iso_code }}&version=2.0.2"></iframe>

    <div id="whatsapp-support" class="minimized">
        <div class="whatsapp-support-expanded">
            {% render 'image', assetName: 'conrise-chat.png' %}

            {% render 'icon-close' %}

            <div class="whatsapp-support-content">
                <h2>{{ 'conrise.whatsapp.title' | t }}</h2>
                <p>{{ 'conrise.whatsapp.text' | t }}</p>

                <iframe data-src="{{ 'conrise.urls.whatsapp' | t }}"></iframe>

                {% render 'image', assetName: 'conrise-down-single-arrow.png' %}
            </div>
        </div>

        <div class="whatsapp-support-content-collapsed">
            {% render 'image', assetName: 'conrise-chat.png' %}
            <span>{{ 'conrise.whatsapp.title' | t }}</span>
            {% render 'image', assetName: 'conrise-down-single-arrow.png' %}
        </div>
    </div>

    {%- if settings.conrise_show_zoom -%}
        <div id="zoom-call-button">
            <div class="zoom-call-button-image">
                <span>ON AIR</span>
                {% render 'image', assetName: 'conrise-chat.png' %}
                <div class="zoom-call-button-image-animation"></div>
            </div>
            <div class="zoom-call-button-details">
                <span class="zoom-call-button-title"></span>
                <span>{{ 'conrise.zoom.button-sub-text' | t }}</span>
            </div>
        </div>
        <iframe id="zoom-call-popup" data-src="{{ 'conrise.urls.zoom' | t }}"></iframe>
    {%- endif -%}

    <div id="section-help-video-badge">
        <div class="section-help-video-badge-video">
            <video autoplay playsinline muted loop>
                <source src="{{ "section-help-video-icon.webm" | asset_url }}" type="video/webm">
            </video>
            <div class="section-help-video-badge-content">
                <h4>{{ 'conrise.sectionHelp.title' | t }}</h4>
                <p>{{ 'conrise.sectionHelp.text' | t }} <b></b>.</p>
                <button class="btn" data-video="" data-title="" data-padding-bottom="">{{ 'conrise.sectionHelp.button' | t }}</button>
            </div>
        </div>

        <div class="section-help-video-badge-bottom">
            <input type="checkbox" />
            <span>{{ 'conrise.sectionHelp.disable' | t }}</span>
        </div>

        {% render 'icon-close' %}
    </div>

    <div id="section-help-video-popup">
        <div class="section-help-video-popup-content">
            <h1></h1>
            <div style="position: relative; height: 0;">
                <iframe frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
            </div>
            <button class="btn btn-secondary">{{ 'conrise.sectionHelp.close' | t }}</button>
        </div>    
    </div>
{%- endif -%}

    <script>
        Shopify.theme.name = 'conrise => https://getconrise.com';
    </script>
</body>
</html>