.elementor-7319 .elementor-element.elementor-element-f0e3ca{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:auto;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-7319 .elementor-element.elementor-element-f0e3ca.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-7319 .elementor-element.elementor-element-2586311{width:100%;max-width:100%;}.elementor-7319 .elementor-element.elementor-element-2586311 > .elementor-widget-container{margin:31px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7319 .elementor-element.elementor-element-2586311.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-7319 .elementor-element.elementor-element-8344ba6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7319 .elementor-element.elementor-element-097905e{width:100%;max-width:100%;}.elementor-7319 .elementor-element.elementor-element-097905e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7319 .elementor-element.elementor-element-054bdd0{width:100%;max-width:100%;}.elementor-7319 .elementor-element.elementor-element-054bdd0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-7319 .elementor-element.elementor-element-054bdd0.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-7319 .elementor-element.elementor-element-a9e2825{width:100%;max-width:100%;}.elementor-7319 .elementor-element.elementor-element-a9e2825 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-7319 .elementor-element.elementor-element-f0e3ca{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-7319 .elementor-element.elementor-element-f0e3ca{--content-width:1243px;}}/* Start custom CSS for html, class: .elementor-element-2586311 *//* Garante a fonte correta apenas neste bloco */
.hero-feelgood-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Animação de Flutuação do Pote */
@keyframes float-hero {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.animate-float-hero {
    animation: float-hero 4s ease-in-out infinite;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f0e3ca */.elementor-7319 .elementor-element.elementor-element-f0e3ca {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
    background-color: #000;
}

/* Garante bordas arredondadas nos slides internos */
.elementor-7319 .elementor-element.elementor-element-f0e3ca .elementor-widget-slides, 
.elementor-7319 .elementor-element.elementor-element-f0e3ca .swiper-container,
.elementor-7319 .elementor-element.elementor-element-f0e3ca img {
    border-radius: 24px !important;
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
   COLE ESTE CÓDIGO EM: 
   Elementor > Configurações do Site > CSS Personalizado
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL (Fontes e Reset)
   ------------------------------------------------------------ */
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
}

/* Garante fundo cinza claro na página */
body {
    background-color: #fafafa;
}

/* ------------------------------------------------------------
   2. BANNER HERO
   Classe: style-hero
   Onde usar: No Container Principal do Slider
   ------------------------------------------------------------ */
.style-hero {
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
    background-color: #000;
}

/* Força o arredondamento nos slides internos */
.style-hero .elementor-slides-wrapper,
.style-hero .swiper-container,
.style-hero .elementor-main-swiper,
.style-hero .swiper-wrapper,
.style-hero img {
    border-radius: 24px !important;
}

/* Efeito de zoom suave na imagem do slide */
.style-hero .swiper-slide-bg {
    transition: transform 6s ease !important;
}
.style-hero:hover .swiper-slide-bg {
    transform: scale(1.05);
}

/* ------------------------------------------------------------
   3. BARRA DE ÍCONES (BENEFÍCIOS)
   Classe: style-icons-bar
   Onde usar: No Container Cinza
   ------------------------------------------------------------ */
.style-icons-bar {
    border-top: 1px solid #e4e4e7;
    border-bottom: 1px solid #e4e4e7;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #fafafa;
}

/* Círculo do ícone */
.style-icons-bar .elementor-icon {
    color: #F1991B !important;
    background-color: #fff;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    border: 1px solid #f4f4f5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

/* Efeito Hover no Ícone */
.style-icons-bar .elementor-widget-icon-box:hover .elementor-icon {
    transform: scale(1.1);
    border-color: #F1991B;
}

/* Título e Texto */
.style-icons-bar .elementor-icon-box-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px !important;
    margin-bottom: 5px !important;
}

/* ------------------------------------------------------------
   4. CARD DE PRODUTO (LOOP GRID)
   Classe: style-card-glass
   Onde usar: No Container Principal do seu MODELO de Loop Item
   ------------------------------------------------------------ */
.style-card-glass {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    padding: 0 !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Previne piscar no hover (estilo estável) */
.style-card-glass:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(241, 153, 27, 0.15);
    border-color: rgba(241, 153, 27, 0.3);
}

/* Espaçamento interno */
.style-card-glass > .elementor-widget-wrap > .elementor-element {
    padding-left: 20px;
    padding-right: 20px;
}

/* Imagem ocupa largura total */
.style-card-glass .elementor-widget-image {
    margin: 0 !important;
    width: 100% !important;
    padding: 20px !important;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    margin-bottom: 15px !important;
}

/* Preço */
.style-card-glass .price, 
.style-card-glass .woocommerce-Price-amount {
    color: #18181b !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
}

/* Botão de Compra */
.style-card-glass .add_to_cart_button,
.style-card-glass .button {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    padding: 12px 0 !important;
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 20px !important;
    transition: background-color 0.3s ease;
}

.style-card-glass .add_to_cart_button:hover,
.style-card-glass .button:hover {
    background-color: #F1991B !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   5. DEPOIMENTOS (DARK BOX)
   Classe: style-dark-box
   Onde usar: No Container dos Depoimentos
   ------------------------------------------------------------ */
.style-dark-box {
    background-color: #000000 !important;
    border-radius: 32px !important;
    padding: 60px 20px !important;
    margin: 40px 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Textos Brancos */
.style-dark-box h2, 
.style-dark-box h3, 
.style-dark-box p, 
.style-dark-box .elementor-testimonial-content,
.style-dark-box .elementor-heading-title {
    color: #ffffff !important;
}

/* Detalhes Laranjas */
.style-dark-box .elementor-testimonial-name,
.style-dark-box .elementor-star-rating {
    color: #F1991B !important;
}

/* ------------------------------------------------------------
   6. FORMULÁRIOS
   Classe: style-form-modern
   Onde usar: No Widget de Formulário
   ------------------------------------------------------------ */
.style-form-modern .elementor-field-group {
    margin-bottom: 15px;
}

.style-form-modern .elementor-field-label {
    display: none; /* Esconde labels para visual mais limpo */
}

/* Campo de Texto */
.style-form-modern .elementor-field-textual {
    background-color: #18181b !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    color: #fff !important;
}
.style-form-modern .elementor-field-textual:focus {
    border-color: #F1991B !important;
    background-color: #000 !important;
}

/* Botão Enviar */
.style-form-modern .elementor-button {
    background-color: #F1991B !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 18px 30px !important;
    width: 100%;
}
.style-form-modern .elementor-button:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* ------------------------------------------------------------
   7. FAQ (ACORDEÃO CLEAN)
   Classe: style-faq-clean
   Onde usar: No Widget de Acordeão
   ------------------------------------------------------------ */
.style-faq-clean .elementor-accordion-item {
    border: none !important;
    border-bottom: 1px solid #e4e4e7 !important;
    background: transparent !important;
    margin: 0 !important;
}

.style-faq-clean .elementor-accordion-title {
    font-weight: 600 !important;
    color: #3f3f46 !important;
    padding: 24px 0 !important;
    font-size: 16px !important;
}

/* Hover e Ativo */
.style-faq-clean .elementor-accordion-item:hover .elementor-accordion-title,
.style-faq-clean .elementor-active .elementor-accordion-title {
    color: #F1991B !important;
}

.style-faq-clean .elementor-tab-content {
    color: #71717a !important;
    padding: 0 0 24px 0 !important;
    border: none !important;
}

.style-faq-clean .elementor-active .elementor-accordion-icon {
    color: #F1991B;
}

/* ------------------------------------------------------------
   8. TÍTULOS DE SEÇÃO
   Classes: style-label-orange, style-heading-main
   ------------------------------------------------------------ */

/* Para etiqueta pequena (ex: CATÁLOGO OFICIAL) */
.style-label-orange .elementor-heading-title {
    color: #F1991B !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 5px !important;
}

/* Para título grande (ex: Nossa Seleção) */
.style-heading-main .elementor-heading-title {
    font-size: 2.25rem !important;
    font-weight: 300 !important;
    color: #18181b !important;
    line-height: 1.1 !important;
}
.style-heading-main .elementor-heading-title strong, 
.style-heading-main .elementor-heading-title b {
    font-weight: 700 !important;
}/* End custom CSS */