{% if cart.bottlesAndShippingFontSize_options and cart.bottlesAndShippingFontSize_options.selected == 'bigger' %}
<style>
    :root {
        --quantityButtonFontSize: 2rem;
        --retailFontSize: 2rem;
        --currentPriceFontSize: 5rem;
        --perUnitPriceFontSize: 2.4rem;
        --shippingFontSize: 1.4rem;
    }
</style>
{% endif %}

<section id="orderNow" class="cart cart--tabs {% if cart.stylingBg_options.selected !== 'none' %} cart--stylingBg cart--stylingBg-{{cart.stylingBg_options.selected}} {% endif %}{% if benefits.section_display_options.selected == 'display_animated_carousel' %}cart--hasBenefitsCarousel{% endif %}" data-subscribe="unsubscribe">
    {% if mainTitle != '' %}
        <h1 class="cart__mainTitle container {% if cart.styleMainTitle_options.selected !== 'none' %} cart__mainTitle--{{cart.styleMainTitle_options.selected}} {% endif %}">{{cart.mainTitle}}</h1>
    {% endif %}

    <div class="cart__image">
        {% if cart.showBenefitsComponent === "true" %}
            {% include '../benefits/benefits.html' %}
        {% endif %}

        {% if cart.showBenefitsComponent === "false" %}
            {% if cart.singleProdImg === "true" %}
                <picture>
                    <source type="image/webp" srcset="{{global.path}}/{{cart.image}}.webp?format=webp">
                    <source type="image" srcset="{{global.path}}/{{cart.image}}?format=webp">
                    <img src="{{global.path}}/{{cart.image}}?format=webp" alt="{{cart.imgAlt}}" class="cart__imgsrc">
                </picture>
            {% endif %}
            {% if cart.multipleProdImg === "true" %}
                <picture>
                    <source type="image/webp" srcset="{{global.path}}/{{cart.1_image}}.webp?format=webp">
                    <source type="image" srcset="{{global.path}}/{{cart.1_image}}?format=webp">
                    <img class="cart__imgsrc cart__imgsrc--unit1" src="{{global.path}}/{{cart.1_image}}?format=webp" alt="{{cart.imgAlt}}">
                </picture>

                <picture>
                    <source type="image/webp" srcset="{{global.path}}/{{cart.3_image}}.webp?format=webp">
                    <source type="image" srcset="{{global.path}}/{{cart.3_image}}?format=webp">
                    <img class="cart__imgsrc cart__imgsrc--unit3" src="{{global.path}}/{{cart.3_image}}?format=webp" alt="{{cart.imgAlt}}">
                </picture>

                <picture>
                    <source type="image/webp" srcset="{{global.path}}/{{cart.6_image}}.webp?format=webp">
                    <source type="image" srcset="{{global.path}}/{{cart.6_image}}?format=webp">
                    <img class="cart__imgsrc cart__imgsrc--unit6" src="{{global.path}}/{{cart.6_image}}?format=webp" alt="{{cart.imgAlt}}">
                </picture>
            {% endif %}
        {% endif %}

        {% if cart.showReviewsComponent === "true" %}
            {% include '../reviewsTicker/reviewsTicker.html' %}
        {% endif %}

        {% if cart.arrowIconAnim === "true" and cart.arrowIconAnimPosition_options.selected == "Above_Title" %}
            <div class="cart__icon">
                <svg class="icon icon--chevron-down">
                    <use xlink:href="svg/sprite.svg#CHEVRON_DOWN"/>
                </svg>
            </div>
        {% endif %}
    </div>

    {% if cart.vsl.showVSL === "true" %}
        {% from "../vsl/_vsl.html" import VSL  with context%}
        {{ VSL(
            title= cart.vsl.title,
            videoHasCustomPlay= cart.vsl.videoHasCustomPlay,
            videoID= cart.vsl.videoID,
            className= cart.vsl.className,
            mutedAndAutoPlay= cart.vsl.mutedAndAutoPlay,
            image_placeholder= cart.vsl.image_placeholder,
            image_placeholderAlt= cart.vsl.image_placeholderAlt,
            videoSrc= cart.vsl.videoSrc
            )
        }}
    {% endif %}

    <div class="container">
        <h2 class="cart__title">{{cart.title}}</h2>

        <div class="cart__details">
            <div class="cart__products">
                <div class="cart__product" 
                    data-units="1"
                    data-price="{{cart.1_bottle_amount}}" 
                    data-subscribe-price="{{cart.1_bottle_subscribe_amount}}" 
                    data-retail="{{cart.1_bottle_retail}}"
                    data-shipping="{{cart.1_bottle_shipping}}" 
                    data-subscribe-shipping="{{cart.1_bottle_subscribe_shipping}}" 
                    data-link="{{cart.oneTracker}}"
                    data-subscribe-link="{{cart.oneTracker_subscribe}}"
                    data-badge="{{cart.1_bottle_badge}}"
                    >
                    {{cart.1_bottle_title}}
                </div>
                <div class="cart__product active" 
                    data-units="3"
                    data-price="{{cart.3_bottle_amount}}" 
                    data-subscribe-price="{{cart.3_bottle_subscribe_amount}}" 
                    data-retail="{{cart.3_bottle_retail}}"
                    data-shipping="{{cart.3_bottle_shipping}}" 
                    data-subscribe-shipping="{{cart.3_bottle_subscribe_shipping}}" 
                    data-link="{{cart.threeTracker}}"
                    data-subscribe-link="{{cart.threeTracker_subscribe}}"
                    data-badge="{{cart.3_bottle_badge}}"
                    >
                    {{cart.3_bottle_title}}
                </div>
                <div class="cart__product" 
                    data-units="6"
                    data-price="{{cart.6_bottle_amount}}" 
                    data-subscribe-price="{{cart.6_bottle_subscribe_amount}}" 
                    data-retail="{{cart.6_bottle_retail}}"
                    data-shipping="{{cart.6_bottle_shipping}}" 
                    data-subscribe-shipping="{{cart.6_bottle_subscribe_shipping}}" 
                    data-link="{{cart.sixTracker}}"
                    data-subscribe-link="{{cart.sixTracker_subscribe}}"
                    data-badge="{{cart.6_bottle_badge}}"
                    >
                    {{cart.6_bottle_title}}
                </div>
            </div>

            <div class="cart__summary">
                <div class="cart__retail">{{cart.regular_price_title}}
                    <span class="cart__retail-value">${{cart.3_bottle_retail}}</span>
                </div>
                <div class="cart__current">
                    {% if global.geolocation_options.selected !== "US" %}
                        <span class="cart__current-country">US</span>
                    {% endif %}
                    <span class="cart__current-value">${{cart.3_bottle_amount}}</span>
                </div>
                <div class="cart__unit-price">
                    <span class="cart__unit-value"></span> {{cart.unit_title}}
                </div>
                {% if global.geolocation_options.selected === "US" %}
                    <div class="cart__shipping">
                        <span class="cart__shipping-value">{{cart.3_bottle_shipping}}</span> {{cart.shipping_title}}
                    {% if cart.shippingIcon === "true" %}
                            <svg class="icon icon--shipping">
                                <use xlink:href="svg/sprite.svg#DELIVERY"/>
                            </svg>
                        {% endif %}
                    </div>
                {% endif %}

                <div class="cart__badge cart__badge--default">
                    <span id="badgeText" class="cart__badge-text">{{cart.3_bottle_badge}}</span>
                    {% if cart.badgeIcon === "true" %}
                        <svg class="icon icon--badge">
                            <use xlink:href="svg/sprite.svg#BADGE"/>
                        </svg>
                    {% endif %}
                </div>

                {% if cart.secondBadgeIcon === "true" %}
                    <div class="cart__badge cart__badge--unit3">
                        <span class="cart__badge-text">{{cart.3_bottle_second_badge}}</span>
                        <svg class="icon icon--badge">
                            <use xlink:href="svg/sprite.svg#BADGE"/>
                        </svg>
                    </div>
                {% endif %}
            </div>
            {% if cart.subscribe_mode_options.selected == "show_mode_buttons" %}
                <div id="subscribeWrap" class="cart__subscribe hide">
                    <div id="subscribeBox" class="cart__label">
                        <span class="cart__checkbox">
                            {% if cart.tickIcon === "true" %}
                                <svg class="icon icon--checkbox">
                                    <use xlink:href="svg/sprite.svg#TICK"/>
                                </svg>
                            {% endif %}
                        </span>
                        <span>{{cart.subscribe.checkbox}}</span>
                    </div>
                    <p class="cart__disclaimer">{{cart.subscribe.disclaimer}}

                        {% if global.promotion.enable == 'true' %}                
                            <b>{{cart.subscribe.promotion_disclaimer}}</b>
                        {% endif %}
                        {{cart.subscribe.stop_shippment_disclaimer}}
                        <a class="cart__links" target="blank" href='{{cart.subscribe.terms_link}}'>
                        {{cart.subscribe.terms}}</a>
                    </p>
                </div>
            {% endif %}

            {% if cart.arrowIconAnim === "true" and cart.arrowIconAnimPosition_options.selected == "Above_CTA" %}
                <div class="cart__icon">
                    <svg class="icon icon--chevron-down">
                        <use xlink:href="svg/sprite.svg#CHEVRON_DOWN"/>
                    </svg>
                </div>
            {% endif %}

            {% if cart.subscribe_mode_options.selected == "show_SS_checkbox" %}
                <div class="purchaseMode" id="subscribeMode"  data-subscribe="unsubscribe">
                    <label class="purchaseMode__label">
                        <input id="subscribeInput" class="purchaseMode__input" type="checkbox" name="checkbox" value="subscribe" checked="false">
                        <span class="purchaseMode__checkbox">
                            <svg class="icon icon--checkbox">
                                <use xlink:href="svg/sprite.svg?rel={{ timestamp }}#TICK"/>
                            </svg>
                        </span>
                        <span class="purchaseMode__text">{{cart.subscribe.SS_checkbox}}</span>
                    </label>
                </div>
            {% endif %}

            <!-- import cart CTA -->
            {% from "../_cartCTA/_cartCTA.html" import cartCTA %}
            {{cartCTA(
                        ctaLink='',
                        ctaTarget='',
                        dataParam= "true",
                        ctaParam= "false",
                        ctaText= cart.ctaText,
                        svgIcon= cart.ctaIcon,
                        ctaWider= cart.ctaWider
                    )
            }}
        </div>

        {% if cart.subscribe_mode_options.selected == "show_SS_checkbox" %}
            <div id="disclaimerBox" class="subscribe-box subscribe-box__disclaimer">
                <p id="purchaseModeDisclaimer" class="purchaseMode__disclaimer">
                    {{cart.subscribe.disclaimer}}
                    {% if global.promotion and global.promotion.enable == 'true' %}
                        <b>{{cart.subscribe.promotion_disclaimer}}</b>
                    {% endif %}
                    {{cart.subscribe.stop_shippment_disclaimer}}
                    <a class="terms-link" target="_blank" href="{{cart.subscribe.terms_link}} ">{{cart.subscribe.terms}}
                    </a>
                </p>
            </div>
        {% endif %}

        {% if cart.subscribe_mode_options.selected == "show_mode_buttons" %}
            <div id="choosePrices" class="cart__mode {% if cart.btnModeOutline !== 'false' %}cart__mode--outline{% endif %}">
                <div class="cart__mode-cta active">{{cart.pricesTitles.oneTime}}</div>
                <div class="cart__mode-cta subscribe">{{cart.pricesTitles.subscribe}}</div>
            </div>
        {% endif %}
    </div>
</section>
{% if cart.showBadges === "true" %}
    {% include "../badgesBanner/badgesBanner.html" %}
{% endif %}