/* =========================================
   COMPARTILHAMENTO / BOTÃO DE SHARE
   – Esconde opções de compartilhar produto
========================================= */

/* Bloco de compartilhamento padrão da plataforma */
.product-sharing { 
    display: none !important; 
} 

/* Botão de compartilhar dentro das ações do produto (corrigido .btn.btn-share) */
#element-product-detail .wrapper-btn-actions .btn.btn-share {
    display: none !important;
}

/* Qualquer link/botão com classe .btn.btn-share */
a.btn.btn-share {
    display: none;
}



/* =========================================
   LABEL "LANÇAMENTO" E MINIATURAS
========================================= */

/* Selo "Lançamento" na listagem de produtos
   (puxa ele lá pra cima da foto) */
#product-list .product-list-item .label-launch {
    position: relative;
    top: -623px;
    left: 0px;
}

/* Aumentar tamanho da miniatura na listagem e sidebar
   – deixa a imagem ocupar mais espaço horizontal */
#product-list .product-list-item .product-image a:not(.label-unavailable) img,
#product-list-sidebar .product-list-item .product-image a:not(.label-unavailable) img {
    max-width: inherit;
}



/* =========================================
   RODAPÉ – ÍCONES DAS REDES SOCIAIS
========================================= */

/* Ajusta o tamanho máximo dos ícones do rodapé */
#footer-main .element-social-footer .social-footer-list .social-footer-item img {
	max-height: 40px;
}



/* =========================================
   TARJA BLACK DIVINA – DESKTOP (PARADA)
========================================= */

/* Faixa fixa no topo no desktop */
#faixa-black-click {
    background: #ba9257;
    color: #ffffff;
    font-size: 18px;
    padding: 8px 10px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

/* Desktop: texto da tarja PARADO (sem animação) */
#faixa-black-click .marquee-text {
    display: inline-block;
    padding-left: 0;
    animation: none;  /* no mobile a animação volta via CSS mobile */
}

/* Desktop: esconde o clone (segunda frase usada só no mobile) */
#faixa-black-click .clone {
    display: none !important;
}

/* Dá espaço no topo do site para não ficar nada escondido atrás da tarja */
body {
    padding-top: 20px;
}



/* =========================================
   BARRA DE BANNERS (STRIPE)
========================================= */

/* Centraliza o conteúdo da barra de banners (stripe) */
ul#banner-stripe {
    align-items: center;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    margin-top: 0px;
}



/* =========================================
   AJUSTES ESPECÍFICOS – PRODUTOS COMPONDOS
========================================= */

/* Ajusta a posição da label "Lançamento"
   para produtos compostos de ID 1395 */
li.product-list-item.product-compounded[data-id="1395"] .label-product.label-launch {
    top: -647px !important;
}

/* Ajusta a posição da label "Lançamento"
   para produtos compostos de ID 1321 */
li.product-list-item.product-compounded[data-id="1321"] .label-product.label-launch {
    top: -647px !important;
}



/* =========================================
   LABEL "PROMO" E PROPORÇÃO DAS FOTOS
========================================= */

/* Cor de fundo das labels de promoção na listagem */
#product-list .product-list-item .label-promo {
    background: #ba9257;
}

/* Controla proporção das fotos na listagem/sidebar
   – 150% de padding cria um “retângulo” mais alto, estilo vitrine */
#product-list .product-list-item .product-image a:not(.label-unavailable), 
#product-list-sidebar .product-list-item .product-image a:not(.label-unavailable) { 
	padding-top: 150%; 
} 



/* =========================================
   DEPOIMENTOS / TESTEMUNHOS
========================================= */

/* Título da área de depoimentos */
.testimonial-bottom-wrapper .title-secundary {
    color: #ba9257;
    font-family: 'universalis_adf_std_bold';
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
}

/* Container do cabeçalho dos depoimentos */
.testimonial-bottom-wrapper .header-box-content {
    margin-bottom: 16px;
    position: relative;
    text-align: center;
}
/* =========================================
   WHATSAPP FLUTUANTE – ANIMAÇÃO SUAVE
   Aplica em qualquer elemento com .whats-animado
========================================= */

/* WHATSAPP – animação pulse do ícone */
.whats-animado .wa-chat-icon {
    display: inline-block;              /* garante que o transform funcione bem */
    animation: whatsPulse 1.2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes whatsPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
/* =========================================
   WHATSAPP – BALÃO "PRECISA DE AJUDA?"
   (fixo, acima do botão, usado no checkout)
========================================= */

.whats-helper-bubble {
    position: fixed;
    right: 20px;             /* aproxima do botão WhatsApp (canto direito) */
    bottom: 110px;           /* altura acima do botão */
    background: #ffffff;
    color: #333333;
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    max-width: 190px;
    z-index: 9999;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: whatsBubbleFadeIn 0.4s ease-out;
}

/* triângulo da “pontinha” do balão */
.whats-helper-bubble::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -6px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

.whats-helper-bubble .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366; /* verde WhatsApp */
}

/* animação de entrada */
@keyframes whatsBubbleFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .whats-helper-bubble {
        font-size: 11px;
        max-width: 170px;
        bottom: 100px;
        right: 15px;
    }
}