//css
.cro-product-info {
    background: #B9E886;
    padding: 15px 15px 30px;
    min-height: 200px;
}
.cro-product-title {
    font-weight: bold;
    color: #454545;
    font-size: 18px;
    margin: 0;
    margin-bottom: 10px;
    text-align: left;
}
.cro-product-title img {
    margin-right: 10px;
}
.cro-product-data {
    background: #fff;
    border-radius: 15px;
    padding: 20px 15px 15px;
    display: flex;
}
.cro-product-data h3 {
    margin: 0;
}
.cro-content-holder {
    text-align: left;
}
.cro-image-holder img {
    max-width: 100px;
    max-height: 100px;
    margin-right: 10px;
}
.cro-price {
    color: #087DC5;
    font-weight: bold;
    font-size: 21px;
}
.cro-sub {
    color: #087DC5;
    font-weight: bold;
}
.cro-sub span {
    color: #454545;
}
.cro-star-wrappers img {
    margin-top: 5px;
}
.cro-related-products {
    padding: 15px;
}
.cro-related-title {
    margin: 0;
    margin-bottom: 20px;
    text-align: left;
}
.owl-carousel .owl-item .item {
    border: 1px solid #eee;
    border-radius: 10px;
    height: 250px;
    padding: 10px;
    position: relative;
}
.cro-product-info-slider {
  display: flex;
    flex-direction: column;
    align-items: center;
}
.cro-product-info-slider img {
    width: 60%;
}
.cro-product-title-secondary {
  color: #262626;
    font-weight: normal;
    text-align: left;
    font-size: 12px;
}
.cro-product-price-wrapper {
    display: flex;
    width: 100%;
}
.cro-product-price {
    font-size: 18px;
    color: #007DC5;
    font-weight: bold;
}
.cro-product-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #EFFBFF;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-top: 5px;
}
.cro-product-bottom-price {
        color: #007CC5;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
        display: flex;
    align-items: center;
    margin-left: 17px;
}
.cro-product-bottom-price img {
    margin: 0 5px;
    height: 100%;
}
.cro-product-bottom p {
    text-align: left;
    margin-left: 17px;
    margin-top: 0;
    font-size: 10px;
}
.cro-categories {
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.cro-categories-title {
        color: #087DC5;
    font-size: 21px;
    font-weight: bold;
    margin: 0;
}
//css
//js
function comprarAgora2(button) {
          //cart icon value handler
          setTimeout(function() {
            if ($(".badge-cart").length > 0) {
              const badgeCartValue = $('.badge-cart').html();
              const formattedCartValue = parseInt(badgeCartValue) || 0;
              console.log(formattedCartValue, "formattedCartValue")
              const addedQuantity = $('#qtd').val();
              const formattedAddedQuantity = parseInt(addedQuantity);
              console.log(formattedAddedQuantity, "formattedAddedQuantity")
              const finalQuantity = formattedAddedQuantity + formattedCartValue;
              console.log(finalQuantity, "finalQuantity")
              $('.badge-cart').html(finalQuantity);
            }
          }, 3000);
          if ($(".badge-cart").length <= 0) {
            $(".icon-carrinho").append("<span class='badge-cart'></span>");
          }
          //cart icon value handler
          clickDataLayer();
          $(button).html("Aguarde...");
          $(".add-product").html("<img class='loading-img' src='https://i.imgur.com/CsD32w4.png' alt='Loading' />Adicionando o produto ao carrinho");
          var idthrobber = "";
          try {
            idthrobber = callThrobber();
          } catch (e) {}
          var idProduto = window.location.href.split('-').pop();;
          jQuery.ajax({
            url: "/comprarAgora_Loja.html?prod=" + idProduto + "&qtde=" + $("#qtd").val(),
            success: function(data) {
              if (idthrobber != "")
                closeThrobber(idthrobber);
              setTimeout(function() {
                $(".add-product").html("<img src='https://i.imgur.com/0d6mbzp.png' alt='Loading' />Produto adicionado");
              }, 1000);
              setTimeout(function() {
                $(button).html("Adicionar ao carrinho");
              }, 3000);
              isAdded = true;
              window.location.href;
            }
          });
        }
        $(document).ready(function() {
                    //add owl carousel
        const scriptEl = document.createElement('script');
        scriptEl.src = 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js';
        document.head.appendChild(scriptEl);
    //add owl carousel
          $('.cart-nav-button button').removeAttr(Object.values($('.cart-nav-button button').get(0).attributes).map(attr => attr.name).join(' '));
          $(".cart-nav-button button").click(function(e) {
            const btn = this;
            $('#fundo_modal').fadeIn()
            e.preventDefault();
          //  setTimeout(function() {
          //    comprarAgora2(btn);
          //  }, 500);
          });

          var modal_estilos = 'display: block;' +
            'width: 100%; max-width: 600px;' +
            'background: #fff;' +
            'position: fixed;height: 95%;' +
            'top: 53%; left: 50%;' +
            'transform: translate(-50%,-50%);' +
            'z-index: 99999999; text-align: center';

          var fundo_modal_estilos = 'top: 0; right: 0;' +
            'bottom: 0; left: 0; position: fixed;' +
            'background-color: rgba(0, 0, 0, 0.6); z-index: 99999999;' +
            'display: none;';

          var meu_modal = `<div id="fundo_modal" style="${fundo_modal_estilos}">
            <div id="meu_modal" style="${modal_estilos}">
            <div class="cro-product-info">
                <h1 class="cro-product-title"><img src="https://i.imgur.com/dSX4lDM.png" alt="Produto adicionado" />Produto adicionado com sucesso &nbsp; &nbsp;(1un.)</h1>
                <div class="cro-product-data">
                <div class="cro-image-holder">
                <img src="https://via.placeholder.com/100x100" alt="Imagem do produto" />
                </div>
                <div class="cro-content-holder">
                <h3 class="cro-product-data-title">Fleegard Spray</h3>
                <div class="cro-star-wrappers"><img src="https://i.imgur.com/0lItBxy.png" alt="Nota do produto" /></div>
                <p class="cro-price">R$ 67,50</p>
                <p class="cro-sub">R$ 60,75 10% OFF <span class="cro-for-subs">para assinantes</span></p>
                </div>
                </div>
            </div>
            <div class="cro-related-products">
            <h3 class="cro-related-title">Quem comprou se interessou por:</h3>
            <div class="owl-carousel owl-theme" items="2">
                <div class="item">
<div class="cro-product-info-slider">
    <img src="https://via.placeholder.com/100x100" alt="Imagem do produto">
    <h4 class="cro-product-title-secondary">Ração Premier Fórmula para Cães Filhotes de Raças Grandes Sabor...</h4>
    <div class="cro-product-price-wrapper">
        <p class="cro-product-price">R$ 123</p>
    </div>
</div>
    <div class="cro-product-bottom">
        <div class="cro-product-bottom-price">
            R$ 123 <img src="https://i.imgur.com/JThKBEL.png" alt="Icone de assinatura" /> 10% OFF
        </div>
        <p>para assinantes</p>
    </div>
</div>
                <div class="item"><h4>2</h4></div>
                <div class="item"><h4>3</h4></div>
                <div class="item"><h4>4</h4></div>
                <div class="item"><h4>5</h4></div>
                <div class="item"><h4>6</h4></div>
                <div class="item"><h4>7</h4></div>
                <div class="item"><h4>8</h4></div>
                <div class="item"><h4>9</h4></div>
                <div class="item"><h4>10</h4></div>
                <div class="item"><h4>11</h4></div>
                <div class="item"><h4>12</h4></div>
            </div>
            </div>
            <div class="cro-categories">
                <h3 class="cro-categories-title">Categorias</h3>
                <div class="owl-carousel owl-theme" items="3">
                    <div class="item">fffffffff<h4>aaaaaaaaaaa</h4></div>
                    <div class="item"><h4>2</h4></div>
                    <div class="item"><h4>3</h4></div>
                    <div class="item"><h4>4</h4></div>
                    <div class="item"><h4>5</h4></div>
                    <div class="item"><h4>6</h4></div>
                    <div class="item"><h4>7</h4></div>
                    <div class="item"><h4>8</h4></div>
                    <div class="item"><h4>9</h4></div>
                    <div class="item"><h4>10</h4></div>
                    <div class="item"><h4>11</h4></div>
                    <div class="item"><h4>12</h4></div>
                </div>
            </div>
            <div class="cro-footer">
                Continuar Comprando
            </div>
            </div></div>`;
          $("body").append(meu_modal);
          setTimeout(function() {
              $('.owl-carousel').owlCarousel({
                loop:true,
                margin: 20,
                dots: false,
                nav:false,
                autoplay: false,
                items: 2,
                stagePadding: 20
            });
            //$('.owl-carousel').owlCarousel({
            //    loop:true,
            //    margin: 20,
            //    dots: false,
            //    nav:false,
            //    autoplay: false,
            //    items: $(".owl-carousel").data("items"),
            //    stagePadding: 20
            //});
          },500)
          $("#fundo_modal, .close").click(function() {
            $("#fundo_modal").hide();
          });
          $("#meu_modal").click(function(e) {
            e.stopPropagation();
          });
        });

        $(document).on("ready", "#callAlertLimbo", function() {
          $(this).remove();
        });

//js