<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="{% for language in languages %}{% if language.active %}{{ language.lang }}{% endif %}{% endfor %}">
    <head>
        <link rel="preconnect" href="{{ store_resource_hints }}" />
        <link rel="dns-prefetch" href="{{ store_resource_hints }}" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{{ page_title }}</title>
        <meta name="description" content="{{ page_description }}" />
        <link rel="preload" as="style" href="{{ [settings.font_headings, settings.font_rest] | google_fonts_url('400,700') }}" />
        <link rel="preload" href="{{ 'css/style-colors.scss.tpl' | static_url }}" as="style" />

        {# Custom local fonts #}
        <link rel="stylesheet" href="{{ 'css/fonts/webfonts.css' | static_url }}" />

        {# Preload LCP home, category and product page elements #}

        {% snipplet 'preload-images.tpl' %}

        {{ component('social-meta') }}

        {#/*============================================================================
            #CSS and fonts
        ==============================================================================*/#}

        {# Critical CSS needed to show first elements of store while CSS async is loading #}

        <style>

            {# Font families #}

            {{ component(
                'fonts',{
                    font_weights: '400,700',
                    font_settings: 'settings.font_headings, settings.font_rest'
                })
            }}

            {% include "static/css/style-critical.tpl" %}
        </style>

        {# Colors and fonts used from settings.txt and defined on theme customization #}

        {{ 'css/style-colors.scss.tpl' | static_url | static_inline }}

        {# Load async styling not mandatory for first meaningfull paint #}

        <link rel="stylesheet" href="{{ 'css/style-async.scss.tpl' | static_url }}" media="print" onload="this.media='all'">

        {# Loads custom CSS added from Advanced Settings on the admin´s theme customization screen #}

        <style>
            {{ settings.css_code | raw }}
        </style>

        {# CADS Custom CSS #}

        <link rel="stylesheet" href="{{ 'css/cads-custom.css' | static_url }}" />

        {#/*============================================================================
            #Javascript: Needed before HTML loads
        ==============================================================================*/#}

        {# Defines if async JS will be used by using script_tag(true) #}

        {% set async_js = true %}

        {# Defines the usage of jquery loaded below #}

        {% set nojquery = true %}

        {# Jquery async by adding script_tag(true) #}

        {% if load_jquery %}

            {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag(true) }}

        {% endif %}

        {# Loads private Tiendanube JS #}

        {% head_content %}

        {# Structured data to provide information for Google about the page content #}

        {{ component('structured-data-organization') }}
        {{ component('structured-data') }}

    </head>

    <body class="{% if customer %}customer-logged-in{% endif %} template-{{ template | replace('.', '-') }}" data-rounded-borders="{{ settings.theme_rounded ? 'true' : 'false' }}" data-solid-icons="{{ settings.icons_solid ? 'true' : 'false' }}">

        {{ component('nubesdk-slot', { type: "before_main_content" }) }}

        {# Theme icons #}

        {% include "snipplets/svg/icons.tpl" %}

        {% if settings.icons_solid %}
            {% include "snipplets/svg/icons-solid.tpl" %}
        {% else %}
            {% include "snipplets/svg/icons-regular.tpl" %}
        {% endif %}

        {# Facebook comments on product page #}

        {% if template == 'product' %}

            {# Facebook comment box JS #}
            {% if settings.show_product_fb_comment_box %}
                {{ fb_js }}
            {% endif %}

            {# Pinterest share button JS #}
            {{ pin_js }}

        {% endif %}

        {# Back to admin bar #}

        {{back_to_admin}}

        {# Header = Advertising + Nav + Logo + Search + Ajax Cart #}

        {% snipplet "header/header.tpl" %}

        {# Page content #}

        {% if template != 'home' or (template == 'home' and settings.slider is empty) %}

        <div class="mt-4">

        {% endif %}

            {% template_content %}

        {% if template != 'home' or (template == 'home' and settings.slider and settings.slider is not empty) %}

        </div>

        {% endif %}

        {# WhatsApp chat button #}

        {% snipplet "whatsapp-chat.tpl" %}

        {# Footer #}

        {% snipplet "footer/footer.tpl" %}

        {% if cart.free_shipping.cart_has_free_shipping or cart.free_shipping.min_price_free_shipping.min_price %}

            {# Minimum used for free shipping progress messages. Located on header so it can be accesed everywhere with shipping calculator active or inactive #}

            <span class="js-ship-free-min hidden" data-pricemin="{{ cart.free_shipping.min_price_free_shipping.min_price_raw }}"></span>
            <span class="js-free-shipping-config hidden" data-config="{{ cart.free_shipping.allFreeConfigurations }}"></span>
            <span class="js-cart-subtotal hidden" data-priceraw="{{ cart.subtotal }}"></span>
            <span class="js-cart-discount hidden" data-priceraw="{{ cart.promotional_discount_amount }}"></span>

        {% endif %}

        {#/*============================================================================
            #Javascript: Needed after HTML loads
        ==============================================================================*/#}

        {# Javascript used in the store #}

        <script type="text/javascript">

            {# Libraries that do NOT depend on other libraries, e.g: Jquery #}

            {% include "static/js/external-no-dependencies.js.tpl" %}

            {# LS.ready.then function waits to Jquery and private Tiendanube JS to be loaded before executing what´s inside #}

            LS.ready.then(function(){

                {# Libraries that requires Jquery to work #}

                {% include "static/js/external.js.tpl" %}

                {# Specific store JS functions: product variants, cart, shipping, etc #}

                {% if store.useStoreJsV2() %}
                    {% include "static/js/store-v2.js.tpl" %}
                {% else %}
                    {% include "static/js/store.js.tpl" %}
                {% endif %}

            });

        </script>

        {# Google reCAPTCHA on register page #}

        {% if template == 'account.register' %}

            {% if not store.hasContactFormsRecaptcha() %}
                {{ '//www.google.com/recaptcha/api.js' | script_tag(true) }}
            {% endif %}

            <script type="text/javascript">

                var recaptchaCallback = function() {
                    jQueryNuvem('.js-recaptcha-button').prop('disabled', false);
                };

            </script>

        {% endif %}

        {# Google survey JS for Tiendanube Survey #}

        {{ component('google-survey') }}

        {# Store external codes added from admin #}

        {{ component('assorted-js', {}) }}

        {# CADS - Ajuste exclusivo da fonte dos preços dos produtos no carrinho #}

        <script>
        (function() {

            function ajustarFontePrecosCarrinho() {
                document.querySelectorAll('.js-cart-item-subtotal').forEach(function(elemento) {
                    elemento.style.setProperty('font-family', 'Inter', 'important');
                });
            }

            ajustarFontePrecosCarrinho();

            const observadorCarrinho = new MutationObserver(function() {
                ajustarFontePrecosCarrinho();
            });

            observadorCarrinho.observe(document.body, {
                childList: true,
                subtree: true
            });

        })();
        </script>

    </body>
</html>

/* CENTRALIZA E AFASTA O TÍTULO DO INSTAGRAM */
.section-instafeed-home .instafeed-title {
    margin-top: 60px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Centraliza o ícone e o nome */
.section-instafeed-home .instafeed-title svg {
    margin-right: 10px !important;
    flex-shrink: 0;
}

.section-instafeed-home .instafeed-title h2 {
    margin: 0 !important;
    line-height: 1 !important;
}
/* =========================================================
   CADS QUADROS
   PÁGINA DE PRODUTO — VARIAÇÕES
   LAYOUT FINAL
   ========================================================= */


/* =========================================================
   CONFIGURAÇÃO GERAL
   ========================================================= */

.cads-tamanho-group,
.cads-impressao-group,
.cads-moldura-group {
    width: 100% !important;
    margin-bottom: 18px !important;
}


.cads-tamanho-group .form-label,
.cads-impressao-group .form-label,
.cads-moldura-group .form-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 9px 0 !important;

    color: #695441 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1.3 !important;
}


/* =========================================================
   BASE DAS VARIAÇÕES
   ========================================================= */

.cads-tamanho-group .js-insta-variant,
.cads-impressao-group .js-insta-variant,
.cads-moldura-group .js-insta-variant {
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease !important;
}


/* =========================================================
   TAMANHO
   CARROSSEL HORIZONTAL
   ========================================================= */

.cads-tamanho-group .cads-variation-options {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 8px !important;

    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 2px 2px 8px 2px !important;

    margin: 0 !important;

    scroll-behavior: smooth !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: thin !important;
}


/* =========================================================
   CARDS DE TAMANHO
   ========================================================= */

.cads-tamanho-group
.cads-variation-options
.js-insta-variant {

    display: flex !important;

    flex: 0 0 105px !important;

    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;

    height: 125px !important;

    padding: 5px !important;
    margin: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 1px solid #d8d0c7 !important;
    border-radius: 8px !important;

    background: #ffffff !important;

    overflow: hidden !important;

    white-space: normal !important;
}


/* =========================================================
   CONTEÚDO DA IMAGEM DO TAMANHO
   ========================================================= */

.cads-tamanho-group
.cads-variation-options
.btn-variant-content {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;

    font-size: 0 !important;
    line-height: 0 !important;
}


/* =========================================================
   IMAGEM REAL DO TAMANHO
   ========================================================= */

.cads-tamanho-group
.cads-variation-options
.cads-image-variant-content img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* =========================================================
   HOVER TAMANHO
   ========================================================= */

.cads-tamanho-group
.cads-variation-options
.js-insta-variant:hover {

    border-color: #695441 !important;
}


/* =========================================================
   TAMANHO SELECIONADO
   ========================================================= */

.cads-tamanho-group
.cads-variation-options
.js-insta-variant.selected {

    border: 2px solid #695441 !important;

    box-shadow:
        0 0 0 1px rgba(105, 84, 65, .12) !important;
}


/* =========================================================
   IMPRESSÃO
   ========================================================= */

.cads-impressao-group .cads-variation-options {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    width: 100% !important;

    overflow: visible !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   BOTÕES CANVAS / ADESIVO
   ========================================================= */

.cads-impressao-group
.cads-variation-options
.js-insta-variant {

    flex: 0 0 auto !important;

    min-width: 100px !important;
    height: 42px !important;

    padding: 0 20px !important;
    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 1px solid #d8d0c7 !important;
    border-radius: 8px !important;

    background: #ffffff !important;

    color: #695441 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;
}


/* =========================================================
   TEXTO CANVAS / ADESIVO
   ========================================================= */

.cads-impressao-group
.cads-variation-options
.btn-variant-content {

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;

    color: #695441 !important;

    font-size: 14px !important;
    line-height: normal !important;
}


/* =========================================================
   HOVER IMPRESSÃO
   ========================================================= */

.cads-impressao-group
.cads-variation-options
.js-insta-variant:hover {

    border-color: #695441 !important;
}


/* =========================================================
   IMPRESSÃO SELECIONADA
   ========================================================= */

.cads-impressao-group
.cads-variation-options
.js-insta-variant.selected {

    border: 2px solid #695441 !important;

    background: #f5f0eb !important;
}


/* =========================================================
   MOLDURA
   CARROSSEL HORIZONTAL
   ========================================================= */

.cads-moldura-group .cads-variation-options {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 8px !important;

    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 2px 2px 8px 2px !important;

    margin: 0 !important;

    scroll-behavior: smooth !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: thin !important;
}


/* =========================================================
   CARDS DE MOLDURA
   ========================================================= */

.cads-moldura-group
.cads-variation-options
.js-insta-variant {

    display: flex !important;

    flex: 0 0 100px !important;

    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;

    height: 115px !important;

    padding: 5px !important;
    margin: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 1px solid #d8d0c7 !important;
    border-radius: 8px !important;

    background: #ffffff !important;

    overflow: hidden !important;

    white-space: normal !important;
}


/* =========================================================
   CONTEÚDO DA IMAGEM DA MOLDURA
   ========================================================= */

.cads-moldura-group
.cads-variation-options
.btn-variant-content {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;

    font-size: 0 !important;
    line-height: 0 !important;
}


/* =========================================================
   IMAGEM REAL DA MOLDURA
   ========================================================= */

.cads-moldura-group
.cads-variation-options
.cads-image-variant-content img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* =========================================================
   HOVER MOLDURA
   ========================================================= */

.cads-moldura-group
.cads-variation-options
.js-insta-variant:hover {

    border-color: #695441 !important;
}


/* =========================================================
   MOLDURA SELECIONADA
   ========================================================= */

.cads-moldura-group
.cads-variation-options
.js-insta-variant.selected {

    border: 2px solid #695441 !important;

    box-shadow:
        0 0 0 1px rgba(105, 84, 65, .12) !important;
}


/* =========================================================
   BARRA DOS CARROSSÉIS
   ========================================================= */

.cads-tamanho-group
.cads-variation-options::-webkit-scrollbar,

.cads-moldura-group
.cads-variation-options::-webkit-scrollbar {

    height: 4px !important;
}


.cads-tamanho-group
.cads-variation-options::-webkit-scrollbar-track,

.cads-moldura-group
.cads-variation-options::-webkit-scrollbar-track {

    background: #eee8e1 !important;

    border-radius: 10px !important;
}


.cads-tamanho-group
.cads-variation-options::-webkit-scrollbar-thumb,

.cads-moldura-group
.cads-variation-options::-webkit-scrollbar-thumb {

    background: #695441 !important;

    border-radius: 10px !important;
}


/* =========================================================
   ESPAÇAMENTO
   ========================================================= */

.cads-tamanho-group {
    margin-bottom: 16px !important;
}


.cads-impressao-group {
    margin-bottom: 16px !important;
}


.cads-moldura-group {
    margin-bottom: 20px !important;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 767px) {

    .cads-tamanho-group
    .cads-variation-options,

    .cads-moldura-group
    .cads-variation-options {

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;
    }


    .cads-tamanho-group
    .cads-variation-options
    .js-insta-variant {

        flex-basis: 95px !important;

        width: 95px !important;
        min-width: 95px !important;

        height: 115px !important;
    }


    .cads-moldura-group
    .cads-variation-options
    .js-insta-variant {

        flex-basis: 90px !important;

        width: 90px !important;
        min-width: 90px !important;

        height: 105px !important;
    }

}
/* =========================================================
   CADS — TAMANHOS
   PADRÃO VISUAL UNIFICADO
   ========================================================= */

body.template-product
.cads-tamanho-group
.cads-variation-options
.js-insta-variant {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    padding: 4px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #ddd4ca !important;
    border-radius: 9px !important;
}


/* ÁREA PADRÃO DA IMAGEM */

body.template-product
.cads-tamanho-group
.cads-variation-options
.js-insta-variant
.cads-image-variant-content {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 122px !important;

    width: 100% !important;
    height: 122px !important;

    min-height: 122px !important;
    max-height: 122px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 0 !important;
}


/* TODAS AS IMAGENS USAM O MESMO ENQUADRAMENTO */

body.template-product
.cads-tamanho-group
.cads-variation-options
.js-insta-variant
.cads-image-variant-content
img {

    display: block !important;

    width: 100% !important;
    height: 122px !important;

    min-width: 100% !important;
    min-height: 122px !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    object-position: center center !important;

    transform: none !important;
}


/* NOMENCLATURA */

body.template-product
.cads-tamanho-group
.cads-variation-options
.js-insta-variant
.cads-image-variant-content
span {

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;

    height: 22px !important;

    min-height: 22px !important;

    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    text-align: center !important;

    white-space: nowrap !important;

    color: #695441 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    line-height: 22px !important;
}


/* TAMANHO SELECIONADO */

body.template-product
.cads-tamanho-group
.cads-variation-options
.js-insta-variant.selected {

    border: 2px solid #695441 !important;

    box-shadow:
        0 2px 8px rgba(105,84,65,.15) !important;
}