/* =========================================
   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;
    }
}

/* =========================================
   LOJA CONFIAVEL - BASE (ALTURA FIXA = SEM TREMER)
========================================= */

.btn-reclame-aqui {
    position: fixed;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    
    background: #0a7d3b;
    color: #ffffff;
    
    padding: 12px 12px;
    
    font-size: 13px;
    line-height: 1.2;
    
    border-radius: 0 12px 12px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    
    z-index: 9999;
    cursor: pointer;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    width: 140px;
    height: 90px;

    overflow: hidden;

    animation: pulseRA 2s ease-out 2;

    transition: width 0.3s ease;

    will-change: width;
}

/* TEXTO NORMAL */
.btn-reclame-aqui strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;

    opacity: 1;
    transition: opacity 0.2s ease;
}

.btn-reclame-aqui span {
    font-size: 12px;
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

/* RA */
.btn-reclame-aqui .ra-icon {
    position: absolute;
    bottom: 6px;
    right: 8px;
    
    font-size: 10px;
    font-weight: bold;
    
    background: #ffffff;
    color: #0a7d3b;
    
    padding: 2px 6px;
    border-radius: 6px;

    opacity: 1;
    transition: opacity 0.2s ease;
}

/* =========================================
   COMPACTO (VERTICAL PERFEITO)
========================================= */

.btn-reclame-aqui.compacto {
    width: 44px;
}

/* ESCONDE NORMAL */
.btn-reclame-aqui.compacto strong,
.btn-reclame-aqui.compacto span,
.btn-reclame-aqui.compacto .ra-icon {
    opacity: 0;
}

/* TEXTO VERTICAL */
.btn-reclame-aqui.compacto::before {
    content: "Loja Confiável";

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(180deg);

    writing-mode: vertical-rl;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 1.2px;
    line-height: 1.35;

    color: #ffffff;

    opacity: 1;
    transition: none; /* 🔥 remove arrasto */
}

/* =========================================
   HOVER (ABRE SEM TREMER E SEM ARRASTE)
========================================= */

.btn-reclame-aqui.compacto:hover {
    width: 140px;
}

/* some instantâneo */
.btn-reclame-aqui.compacto:hover::before {
    opacity: 0;
}

/* entra suave */
.btn-reclame-aqui.compacto:hover strong,
.btn-reclame-aqui.compacto:hover span,
.btn-reclame-aqui.compacto:hover .ra-icon {
    opacity: 1;
}

/* =========================================
   ANIMAÇÃO
========================================= */

@keyframes pulseRA {
    0% { box-shadow: 0 0 0 0 rgba(10, 125, 59, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(10, 125, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(10, 125, 59, 0); }
}

/* ========================= 
   FRETE DESKTOP ORGANIZADO
========================= */

.cart-data-shipping-holder,
.cart-data-coupon-holder {
    display: block !important;
    width: 100%;
    margin-bottom: 10px;
}

/* =========================
   FRETE DESKTOP ALINHADO FINAL
========================= */

.cart-data-shipping-holder .grid-cep.alpha {
    display: flex;
    align-items: center;
    gap: 0 !important; /* 🔥 remove conflito */
}

/* input CEP */
#cart-data-shipping {
    width: 145px;

    height: 40px;
    padding: 8px 10px;
    border: 1px solid #000;
    box-sizing: border-box;

    margin-right: 35px; /* 🔥 AGORA FUNCIONA */
}

/* botão calcular */
.btn-frete-custom {
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;

    margin-left: 0 !important; /* 🔥 evita conflito */
}