.elementor-5923 .elementor-element.elementor-element-b734060{--display:flex;--min-height:0px;--justify-content:flex-start;--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-5923 .elementor-element.elementor-element-b734060:not(.elementor-motion-effects-element-type-background), .elementor-5923 .elementor-element.elementor-element-b734060 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7EFE6;}.elementor-5923 .elementor-element.elementor-element-b0ef8c4{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5923 .elementor-element.elementor-element-b0ef8c4.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-5923 .elementor-element.elementor-element-a28b16c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-5923 .elementor-element.elementor-element-a28b16c:not(.elementor-motion-effects-element-type-background), .elementor-5923 .elementor-element.elementor-element-a28b16c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7EFE6;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product{text-align:left;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;background-color:var( --e-global-color-4cc5d7c );}.elementor-5923 .elementor-element.elementor-element-2347320{width:100%;max-width:100%;}.elementor-5923 .elementor-element.elementor-element-2347320 > .elementor-widget-container{background-color:var( --e-global-color-4cc5d7c );margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-element{--align-self:center;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products  ul.products{grid-column-gap:50px;grid-row-gap:50px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products .attachment-woocommerce_thumbnail{border-style:none;border-radius:10px 10px 10px 10px;margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .price{font-family:"Montserrat", Sans-serif;font-weight:700;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .button{color:var( --e-global-color-4cc5d7c );background-color:var( --e-global-color-40ae351 );border-radius:10px 10px 10px 10px;padding:10px 10px 10px 10px;margin-top:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .button:hover{color:var( --e-global-color-8c58e4e );}.elementor-5923 .elementor-element.elementor-element-53fb3b8{background-color:#E7EFE6;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}body.elementor-page-5923{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:1001px){.elementor-5923 .elementor-element.elementor-element-b734060{--width:100%;}}@media(max-width:1000px){.elementor-5923 .elementor-element.elementor-element-b734060{--width:578px;--min-height:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5923 .elementor-element.elementor-element-a28b16c{--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-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product{text-align:center;padding:0px 0px 0px 0px;}.elementor-5923 .elementor-element.elementor-element-2347320{width:100%;max-width:100%;}.elementor-5923 .elementor-element.elementor-element-2347320 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products  ul.products{grid-column-gap:10px;grid-row-gap:20px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products .attachment-woocommerce_thumbnail{border-radius:10px 10px 10px 10px;margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-size:20px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-2347320.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{margin-bottom:0px;}.elementor-5923 .elementor-element.elementor-element-53fb3b8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-b0ef8c4 *//* =========================================================
   CARROSSEL — Treelife (final, escopado, estável)
   - Desktop: full-bleed (cover)
   - Mobile: contain (arte inteira)
   - Alturas garantidas e sem vazamentos
========================================================= */

/* ===== Base do trilho e dos slides ===== */
#banner-carousel{
  display:flex;
  width:100%;
  overflow:hidden;
}
#banner-carousel .carousel-slide{
  flex:0 0 100%;
  min-width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  position:relative;
  overflow:hidden;
  background:#E7EFE6; /* fallback */
}
/* O <a.banner> ocupa o slide inteiro e recebe o BG */
#banner-carousel .carousel-slide > a.banner{
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center center;
}

/* ===== Ajustes de integração (sem efeitos colaterais) ===== */
#banner-carousel .carousel-image{ filter:none !important; mix-blend-mode:normal !important; opacity:1 !important; }
#banner-carousel .carousel-slide::before,
#banner-carousel .carousel-slide::after,
#banner-carousel a::before,
#banner-carousel a::after{ content:none !important; background:none !important; }
#banner-carousel .brightener{ display:none !important; }
#banner-carousel .carousel-slide, 
#banner-carousel .carousel-slide > a{ opacity:1 !important; }

/* ===== DESKTOP (>=1024px) — full-bleed ===== */
@media (min-width:1024px){
  /* Altura do herói no desktop (ajuste a gosto) */
  #banner-carousel .carousel-slide{
    height: min(46.78vw, 90vh) !important; /* 958/2048 ≈ 46.78vw, mas limitado a 90vh */
  }
  #banner-carousel .carousel-slide > a.banner{
    background-size: cover !important;     /* cobre a área toda, pode cortar um pouco */
  }

  /* ---- IMAGENS (DESKTOP) — usando os links solicitados ---- */
  /* Creamelo */
  #banner-carousel .banner--creamelo{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/Banner-Creamelo-2-2.png") !important;
  }
  /* Gummies */
  #banner-carousel .banner--gummies{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Gummies-Imunidade-Sabor-Laranja-1-2.png") !important;
  }
  /* Ômega */
  #banner-carousel .banner--omega-1{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Omega-3-1.png") !important;
  }
  /* Vinagre de Maçã */
  #banner-carousel .banner--vinagre{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Gummy-Vinagre-de-Maca-1-2.png") !important;
  }

  /* Neutraliza variações que não serão usadas (evita sobrepor arte) */
  #banner-carousel .banner--creamelo-3,
  #banner-carousel .banner--omega-2{
    background-image:none !important;
  }
}

/* ===== MOBILE (<=767px) — contain, arte inteira ===== */
@media (max-width:767px){
  #banner-carousel .carousel-slide{
    height:auto !important;
    overflow:hidden;
  }
  #banner-carousel .carousel-slide > a.banner{
    min-height:84vw !important;            /* altura confortável; ajuste 80–92vw */
    background-size: contain !important;    /* mostra a arte inteira no mobile */
  }

  /* Mantém as mesmas artes no mobile (se quiser diferente, troque aqui) */
  #banner-carousel .banner--creamelo{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/Banner-Creamelo-2-2.png") !important;
  }
  #banner-carousel .banner--gummies{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Gummies-Imunidade-Sabor-Laranja-1-2.png") !important;
  }
  #banner-carousel .banner--omega-1{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Omega-3-1.png") !important;
  }
  #banner-carousel .banner--vinagre{
    background-image:url("https://treelifepharmah.com.br/wp-content/uploads/2025/09/BANNER_Gummy-Vinagre-de-Maca-1-2.png") !important;
  }
}

/* ===== Compat extra: se algum slide usar <picture>/<img>, garante visível ===== */
#banner-carousel .banner picture,
#banner-carousel .banner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* ===== Opcional: header colado no topo sem “filete” ===== */
.elementor-location-header, header.site-header{ margin-bottom:0 !important; padding-bottom:0 !important; }
.elementor-location-header + *{ margin-top:0 !important; padding-top:0 !important; }
#banner-carousel-wrapper{ margin-top:0 !important; padding-top:0 !important; line-height:0 !important; }

/* ===== Switch rápido (comente uma linha se quiser outro comportamento) ===== */
/* Para desktop ocupar 100% da altura da tela, troque a altura do slide por esta: */
/*
@media (min-width:1024px){
  #banner-carousel .carousel-slide{ height:100vh !important; }
}
*/

/* === DESKTOP: full-bleed (cobre 100% da tela) com foco por banner === */
@media (min-width:1024px){
  #banner-carousel .carousel-slide{
    height: 100vh !important;          /* ocupa toda a altura da janela */
    overflow:hidden;
  }
  #banner-carousel .carousel-slide > a.banner{
    display:block; width:100%; height:100%;
    background-repeat:no-repeat;
    background-size: cover !important; /* cobre a área toda (sem faixas) */
    /* foco padrão (pode ser trocado por banner via --fx / --fy) */
    background-position: var(--fx, 50%) var(--fy, 50%) !important;
  }

  /* ---- FOCO por banner (ajuste os % conforme a composição da arte) ---- */
  /* Creamelo: produto mais à esquerda -> puxe o foco levemente à esquerda */
  #banner-carousel .banner--creamelo { --fx: 42%; --fy: 50%; }

  /* Gummies: produto mais à direita -> empurre um pouco pra direita */
  #banner-carousel .banner--gummies  { --fx: 58%; --fy: 50%; }

  /* Ômega: central levemente à direita */
  #banner-carousel .banner--omega-1  { --fx: 55%; --fy: 50%; }

  /* Vinagre: centro */
  #banner-carousel .banner--vinagre  { --fx: 50%; --fy: 50%; }

  /* telas ultra-wide (evita cortar textos nas bordas, “deszooma” um pouco) */
  @media (min-aspect-ratio: 21/9){
    #banner-carousel .carousel-slide > a.banner{
      background-size: 115% auto !important; /* menos crop em 21:9+ */
    }
  }
}

/* === MOBILE mantém contain (arte inteira) e altura fluida === */
@media (max-width:767px){
  #banner-carousel .carousel-slide{ height:auto !important; }
  #banner-carousel .carousel-slide > a.banner{
    min-height:84vw !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}/* End custom CSS */
/* Start custom CSS for woocommerce-products, class: .elementor-element-2347320 *//* === Carrossel horizontal para a seção .home-produtos === */
.home-produtos ul.products{
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  padding: 0 16px 10px !important;
}
.home-produtos ul.products::-webkit-scrollbar{ display:none; }
.home-produtos ul.products{ scrollbar-width: none; }

/* cada card vira um “slide” */
.home-produtos ul.products li.product{
  flex: 0 0 clamp(220px, 28vw, 320px) !important; /* largura responsiva */
  scroll-snap-align: start;
}

/* setas flutuantes */
.home-produtos .prod-nav{
  position: relative;
}
.home-produtos .prod-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: #E7EFE6;
  color: #FFFFE1;
  font-size: 20px; font-weight: 800;
  display: grid; place-items: center;
  cursor: pointer;
}
.home-produtos .prod-btn.prev{ left: 4px; }
.home-produtos .prod-btn.next{ right: 4px; }

/* em telas pequenas, esconde setas (arrasta com o dedo) */
@media (max-width: 768px){
  .home-produtos .prod-btn{ display:none; }
}

/* ===== Treelife • Cards de produtos no MOBILE (<= 767px) ===== */
@media (max-width: 767px){

  /* grade em 2 colunas + gap enxuto */
  .home-produtos ul.products,
  .elementor-widget-woocommerce-products ul.products,
  .elementor-widget-wc-products ul.products,
  .woocommerce ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 10px 12px !important;
  }

  /* cartão compacto e com cantos arredondados */
  .home-produtos ul.products li.product,
  .elementor-widget-woocommerce-products ul.products li.product,
  .elementor-widget-wc-products ul.products li.product,
  .woocommerce ul.products li.product{
    background: #E7EFE6;               /* seu “verde saliva” claro */
    border: 0 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
    overflow: hidden;
  }

  /* imagem menor e centralizada */
  .home-produtos ul.products li.product a img,
  .elementor-widget-woocommerce-products ul.products li.product a img,
  .elementor-widget-wc-products ul.products li.product a img,
  .woocommerce ul.products li.product a img{
    width: 100% !important;
    height: 120px !important;          /* reduza/aumente se quiser */
    object-fit: contain !important;
    margin: 4px auto 8px !important;
    display: block;
  }

  /* título mais discreto (2 linhas no máx.) */
  .home-produtos ul.products li.product .woocommerce-loop-product__title,
  .elementor-widget-woocommerce-products ul.products li.product .woocommerce-loop-product__title,
  .elementor-widget-wc-products ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font: 800 13px/1.25 "Montserrat", system-ui, -apple-system, sans-serif !important;
    color: #0E211E !important;
    margin: 2px 0 4px !important;
    min-height: 32px;                  /* segura 2 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 2;             /* corta com reticências */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* preço menor e colado ao botão */
  .home-produtos ul.products li.product .price,
  .elementor-widget-woocommerce-products ul.products li.product .price,
  .elementor-widget-wc-products ul.products li.product .price,
  .woocommerce ul.products li.product .price{
    font: 700 12px/1 "Montserrat", sans-serif !important;
    color: #0E211E !important;
    margin: 0 0 8px !important;
  }

  /* botão mais compacto e 100% da largura */
  .home-produtos ul.products li.product .button,
  .elementor-widget-woocommerce-products ul.products li.product .button,
  .elementor-widget-wc-products ul.products li.product .button,
  .woocommerce ul.products li.product .button{
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font: 800 12px/1 "Montserrat", sans-serif !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #0E211E !important;
    color: #E7EFE6 !important;
    border: 0 !important;
  }

  /* remove coisas que poluem no mobile (opcional) */
  .home-produtos ul.products li.product .star-rating,
  .elementor-widget-woocommerce-products ul.products li.product .star-rating,
  .elementor-widget-wc-products ul.products li.product .star-rating,
  .woocommerce ul.products li.product .star-rating{
    display:none !important;
  }
}

/* Treelife – remover o fundo/sombra dos cards de produto no mobile */
@media (max-width: 767px){

  /* card: sem painel, sem borda, sem sombra */
  .home-produtos ul.products li.product,
  .elementor-widget-woocommerce-products ul.products li.product,
  .elementor-widget-wc-products ul.products li.product,
  .woocommerce ul.products li.product{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 8px !important;       /* leve respiro; ajuste se quiser */
    border-radius: 0 !important;
  }

  /* se o tema inserir um wrapper interno com cor, zera também */
  .woocommerce ul.products li.product .product-inner,
  .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
  .woocommerce ul.products li.product a{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* imagem sem moldura */
  .woocommerce ul.products li.product a img{
    background: transparent !important;
    box-shadow: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-53fb3b8 *//* =====================================================
   TREELIFE — CSS FINAL (completão)
   - Fundo global #E7EFE6 sem “zebra”
   - Full-bleed estável (carrossel)
   - Pureza (#bloco-pureza) mantido em verde escuro
   - Correções de sintaxe e conflitos
===================================================== */

/* ---------- Paleta base ---------- */
:root{
  --tl-bg: #E7EFE6;     /* fundo claro único */
  --tl-text: #0E211E;   /* verde texto/marca */
}

/* ---------- Fundo global ---------- */
html, body{
  background: var(--tl-bg) !important;
  background-image: none !important;
}
body{
  overflow-x: hidden;
  color: var(--tl-text);
}

/* ---------- Wrappers e áreas comuns ---------- */
#page, .site, .site-content, .content-area, .entry-content,
.container, .container-fluid, .wrap, .wp-site-blocks,
.elementor, .elementor-page, .elementor-kit,
.elementor-section, .elementor-top-section, .elementor-inner-section,
.elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget-container,
.e-con, .e-con-inner, .e-container,
header, .site-header, .elementor-location-header,
footer, .site-footer, .elementor-location-footer,
main, section, article, aside, nav,
.woocommerce, .woocommerce-page, .woocommerce-cart,
.woocommerce-checkout, .woocommerce-account{
  background: var(--tl-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ---------- Neutraliza backgrounds inline do Elementor (NÃO no #bloco-pureza) ---------- */
*:not(#bloco-pureza):not(#bloco-pureza *)[style*="background:"],
*:not(#bloco-pureza):not(#bloco-pureza *)[style*="background-color:"],
*:not(#bloco-pureza):not(#bloco-pureza *)[style*="background-image:"]{
  background: var(--tl-bg) !important;
  background-image: none !important;
}
.elementor-background-overlay,
.elementor-motion-effects-layer,
.elementor-shape-top, .elementor-shape-bottom{ background: transparent !important; }

/* ---------- Higiene ---------- */
img, svg, canvas, video{ display:block; }
*{ box-sizing: border-box; }

/* =====================================================
   CARROSSEL FULL-BLEED (100vw)
===================================================== */
#banner-carousel-wrapper{
  background: var(--tl-bg) !important;
  position: relative;
  left: 50%;
  margin-left: -50vw;      /* evita “faixa” subpixel */
  right: auto !important;
  margin-right: 0 !important;
  width: 100vw;
  padding: 0 !important;
}
#banner-carousel{
  display: flex !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#banner-carousel .carousel-slide{
  flex: 0 0 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  display: flex; align-items: center; justify-content: center;
}
#banner-carousel .carousel-image{
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;   /* nunca corta */
  border-radius: 0 !important;      /* evita bordas que criam “faixa” */
}
.carousel-dots-container{ display:flex; gap:8px; justify-content:center; margin:12px auto 16px; width:100%; }
.carousel-dot{ width:8px; height:8px; border-radius:50%; border:none; background: var(--tl-bg); opacity:.6; cursor:pointer; }
.carousel-dot.active{ opacity:1; transform:scale(1.1); background: var(--tl-bg); }
@media (max-width: 767px){
  #banner-carousel, #banner-carousel .carousel-slide{ width:100vw !important; }
}

/* =====================================================
   GRID DE CATEGORIAS
===================================================== */
.grid-categorias{
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  grid-template-rows: 200px 200px;
  grid-auto-rows: auto;
  gap: 10px;
  background-color: var(--tl-bg) !important;
  padding: 30px 20px;
  grid-template-areas:
    "saude performance bemestar beauty"
    "saude perda      bemestar kids";
}
.grid-categorias .col2, .grid-categorias .col4{ display: contents; }
.grid-categorias > .col1{ grid-area: saude; }
.grid-categorias .col2 > .item:nth-child(1){ grid-area: performance; }
.grid-categorias .col2 > .item:nth-child(2){ grid-area: perda; }
.grid-categorias > .col3{ grid-area: bemestar; }
.grid-categorias .col4 > .item:nth-child(1){ grid-area: beauty; }
.grid-categorias .col4 > .item:nth-child(2){ grid-area: kids; }

.grid-categorias a{ position: relative; display:block; border-radius:16px; overflow:hidden; }
.grid-categorias img{
  width:100%; height:100%;
  background-color: var(--tl-bg) !important;
  object-fit: cover;
  transition: transform .3s ease;
  border-radius: inherit;
}
.grid-categorias a:hover img{ transform: scale(1.05); }

/* Overlay (corrigido) */
.grid-categorias a::after{
  content: ""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: rgba(49,70,69,0.7) !important; /* seu tom de overlay */
  opacity:.85; transition: opacity .5s ease, transform .6s ease;
}
.grid-categorias a:hover::after{ opacity:.5; transform: scale(1.05); }

/* Rótulo */
.grid-categorias .texto{
  position: absolute; bottom: 10px; left: 10px;
  color: #ffffe1;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  background: none; padding: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 0 1px rgba(0,0,0,.6);
  pointer-events: none;
}

@media (max-width: 1024px){
  .grid-categorias{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "saude performance"
      "bemestar beauty"
      "perda kids";
  }
}
@media (max-width: 600px){
  .grid-categorias{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "saude" "performance" "bemestar" "beauty" "perda" "kids";
  }
  .grid-categorias .texto{ font-size:1.1rem; bottom:1rem; left:1rem; text-shadow:none; }
}

/* ===== CATEGORIAS – 2 colunas no mobile (forçado) ===== */
@media (max-width: 680px){

  /* 0) esquece o grid anterior e usa FLEX */
  .grid-categorias{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 12px !important;
    grid-template-areas: none !important;   /* mata áreas antigas */
    background: var(--tl-bg, #E7EFE6) !important;
  }

  /* 1) qualquer filho direto vira uma “célula” 50% */
  .grid-categorias > *{
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 2) garante que o link/card lá dentro ocupe 100% da célula,
        independentemente do wrapper do Elementor */
  .grid-categorias > * > a,
  .grid-categorias > * > .item,
  .grid-categorias a{
    display: block !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* 3) imagem quadrada, cobrindo bem */
  .grid-categorias img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    background: transparent !important;
  }

  /* 4) rótulo e overlay intactos */
  .grid-categorias .texto{
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 800 13px/1.1 "Montserrat", sans-serif !important;
    color: #ffffe1 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
    z-index: 2 !important;
  }
  .grid-categorias a::after{ inset: 0 !important; border-radius: inherit !important; }
}
/* ===== CATEGORIAS — força 2 colunas no mobile (mata grid antigo) ===== */
@media (max-width: 680px){

  /* 0) esquece as áreas do desktop e vira FLEX com quebra */
  .grid-categorias{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 12px !important;

    /* anula qualquer grid antigo */
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  /* 1) TODOS os níveis de wrappers viram “células” 50% */
  .grid-categorias > *,
  .grid-categorias > * > *,
  .grid-categorias > * > * > *{
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 2) garante que o card (link) ocupe 100% da célula */
  .grid-categorias a,
  .grid-categorias .item > a{
    display: block !important;
    width: 100% !important;
    position: relative !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* 3) imagem quadrada, cobrindo o card */
  .grid-categorias img{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  /* 4) rótulo e overlay mantidos */
  .grid-categorias .texto{
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 800 13px/1.1 "Montserrat", sans-serif !important;
    color: #ffffe1 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
    z-index: 2 !important;
  }
  .grid-categorias a::after{ border-radius: inherit !important; }
}
/* === Overlay mais claro (repouso) e ainda mais claro no hover === */
.grid-categorias{
  /* ajuste só esses dois números se quiser refinar */
  --cat-overlay: 49 70 69;   /* mantém o tom esverdeado */
  --cat-alpha: 22%;          /* opacidade em repouso  (bem claro) */
  --cat-alpha-hover: 10%;    /* opacidade no hover    (claríssimo) */
}

.grid-categorias a::after{
  background: rgb(var(--cat-overlay) / var(--cat-alpha)) !important;
  opacity: 1 !important;           /* usamos a opacidade da cor */
  transition: background .25s ease;
}

.grid-categorias a:hover::after{
  background: rgb(var(--cat-overlay) / var(--cat-alpha-hover)) !important;
}

/* dá um leve "pop" extra no hover (opcional) */
.grid-categorias a:hover img{
  filter: brightness(1.06) contrast(1.02);
  transition: filter .25s ease;
}



/* =====================================================
   BLOCO INSTITUCIONAL
===================================================== */
.bloco-institucional{ background-color: var(--tl-bg) !important; padding: 20px 0 0 0; }
.container-institucional{
  width: 70%; max-width: 1200px; margin: 0 auto;
  display:flex; align-items:center; justify-content: space-between;
  gap:1rem; flex-wrap: wrap; text-align:center;
}
.texto-institucional{ flex: 1 1 300px; padding: 10px 0 0 0; }
.texto-institucional h2{ font-size: 2.5rem; color: var(--tl-text); line-height:1.2; margin-bottom:.5rem; }
.texto-institucional p{ font-size: 1.125rem; }
.icone-institucional{ display:flex; align-items:center; justify-content:center; position:relative; }
.icone-institucional img, .icone-institucional svg{ width:100%; margin:0 auto; }
@media (max-width: 768px){
  .bloco-institucional{ padding: 20px 0; }
  .container-institucional{ flex-direction: column; gap: 1.5rem; }
  .texto-institucional h2{ font-size: 2rem; }
  .texto-institucional p{ font-size: 1rem; }
  .icone-institucional{ max-width: 150px; }
}

/* =====================================================
   BANNERS / FORMAS FARMACÊUTICAS
===================================================== */
.banner-manipulaveis{ padding: 40px 30px; text-align:center; background: var(--tl-bg) !important; }
.banner-titulo{ color: var(--tl-text); font-size: 36px; font-weight:700; line-height:1.2; margin-bottom:40px; }
.banner-titulo span{ display:block; color: var(--tl-text); font-size:24px; }

/* Responsivo ícones */
@media (max-width: 768px){
  .banner-manipulaveis{ padding: 40px 10px !important; }
  .banner-titulo{ font-size: 2.5rem !important; line-height:1.2 !important; }
  .banner-titulo span{ font-size: 1.5rem !important; }
  .banner-items{
    flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x:auto !important; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; gap:22px !important;
    margin-top:40px !important; padding: 0 10px 8px;
  }
  .banner-items a{ flex: 0 0 140px; scroll-snap-align: center; }
  .banner-items img{ width:120px !important; max-width:none !important; height:auto; transition: transform .4s; }
  .banner-items::-webkit-scrollbar{ display:none; }
  .banner-items{ scrollbar-width: none; }
  .banner-conteudo{ margin-top:0 !important; margin-bottom:20px !important; position: static !important; transform: none !important; }
}
.banner-items a{
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:14px; color: var(--tl-text); text-decoration:none;
}
.banner-items a span{ color: var(--tl-text) !important; -webkit-text-fill-color: var(--tl-text); opacity:1 !important; }
.banner-items a:hover img{ transform: scale(1.08); }
@media (hover:none){ .banner-items a:active img{ transform: scale(1.06); } }
@media (min-width:1025px){
  .banner-manipulaveis .banner-items{
    display:flex !important; flex-wrap:nowrap !important;
    justify-content:center !important; align-items:center !important;
    gap:40px !important; padding:0 20px !important; overflow: visible !important; margin-top: 40px;
  }
  .banner-manipulaveis .banner-items img{
    width: clamp(130px, 9vw, 160px) !important;
    height:auto !important; object-fit:contain !important; display:block !important;
    transition:transform .35s ease !important;
  }
}

/* =====================================================
   BLOCO “PUREZA QUE INSPIRA” (preservado escuro)
===================================================== */
#bloco-pureza{
  background: #0E211E !important;          /* verde escuro, como está hoje */
}
#bloco-pureza .elementor-background-overlay,
#bloco-pureza .elementor-motion-effects-layer{
  background: transparent !important;       /* sem película por cima */
}
/* Tipografia clara, legível no fundo escuro */
#bloco-pureza h1, #bloco-pureza h2, #bloco-pureza h3,
#bloco-pureza p,  #bloco-pureza span, #bloco-pureza li,
#bloco-pureza a,  #bloco-pureza strong, #bloco-pureza em{
  color: #E7EFE6 !important;
  -webkit-text-fill-color: #E7EFE6;
}
#bloco-pureza a:hover{ opacity:.9; }

/* Mantém o resto do site claro mesmo se o Elementor setar #0E211E inline fora do #bloco-pureza */
[class*="elementor"] [style*="#0e211e"]:not(#bloco-pureza),
[class*="elementor"] [style*="#0E211E"]:not(#bloco-pureza),
section[style*="#0e211e"]:not(#bloco-pureza),
section[style*="#0E211E"]:not(#bloco-pureza){
  background-color: var(--tl-bg) !important;
}

/* =====================================================
   HOME – PRODUTOS (carrossel horizontal)
===================================================== */
.home-produtos ul.products{
  display:flex !important; gap:16px !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:16px;
  padding: 0 16px 10px !important;
}
.home-produtos ul.products::-webkit-scrollbar{ display:none; }
.home-produtos ul.products{ scrollbar-width:none; }
.home-produtos ul.products li.product{
  flex: 0 0 clamp(220px, 28vw, 320px) !important;
  scroll-snap-align: start;
}
.home-produtos .prod-nav{ position: relative; }
.home-produtos .prod-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:0;
  background: var(--tl-bg); color:#FFFFE1;
  font-size:20px; font-weight:800; display:grid; place-items:center; cursor:pointer;
}
.home-produtos .prod-btn.prev{ left:4px; }
.home-produtos .prod-btn.next{ right:4px; }
@media (max-width:768px){ .home-produtos .prod-btn{ display:none; } }

/* =====================================================
   FORM “PERFIL”
===================================================== */
.form-perfil{
  background-color: var(--tl-bg) !important;
  color: var(--tl-text);
  font-family: var(--font-base, system-ui, -apple-system, sans-serif);
  padding: 60px 5%;
}
.form-perfil .container{ max-width:800px; margin:0 auto; text-align:center; }
.form-perfil h2{ font-size:2rem; margin-bottom:1rem; line-height:1.2; }
.form-perfil form{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.form-perfil input[type="email"]{
  flex:1 1 250px; padding:.75rem 1rem;
  border:2px solid var(--tl-bg); border-radius:4px;
  font-size:1rem; color: var(--tl-text); background:#fff;
}
.form-perfil button{
  background-color: var(--tl-bg); color: var(--tl-text);
  border:none; padding:.75rem 1.5rem; border-radius:4px;
  font-weight:700; cursor:pointer; transition: background-color .3s;
}
.form-perfil button:hover{ background-color:#fff; }
.form-perfil__aviso{ font-size:.875rem; }
@media (max-width:600px){ .form-perfil form{ flex-direction:column; } .form-perfil input, .form-perfil button{ width:100%; } }

/* =====================================================
   VISIBILIDADE BANNERS
===================================================== */
.banner-mobile{ display:none; }
@media (max-width:767px){
  .banner-desktop{ display:none !important; }
  .banner-mobile{ display:block !important; }
}

/* =====================================================
   AJUSTES FINOS
===================================================== */
.banner-manipulaveis .banner-titulo,
.banner-manipulaveis .banner-titulo span{
  margin: 0; text-align:center; font-family:"Montserrat",sans-serif;
  font-weight:800; line-height:1.05; color: var(--tl-text) !important;
  font-size: clamp(28px,6vw,64px);
}
.banner-manipulaveis .banner-titulo span{
  font-weight:600; line-height:1.1; letter-spacing:.04em;
  font-size: clamp(16px,3.2vw,36px);
}

/* Pseudo-elementos não pintam faixas */
*::before, *::after{ background-image: none !important; }

/* ===== PATCH: preservar "Pureza que inspira" escura ===== */

/* 1) Exceção forte: tudo dentro de #bloco-pureza fica verde escuro */
#bloco-pureza,
#bloco-pureza *[style*="background"],
#bloco-pureza *[style*="background-color"],
#bloco-pureza *[style*="background-image"]{
  background: #0E211E !important;
  background-image: none !important;
}
#bloco-pureza .elementor-background-overlay,
#bloco-pureza .elementor-motion-effects-layer{ background: transparent !important; }

/* Tipografia clara nessa seção */
#bloco-pureza,
#bloco-pureza h1, #bloco-pureza h2, #bloco-pureza h3,
#bloco-pureza p,  #bloco-pureza span, #bloco-pureza li,
#bloco-pureza a,  #bloco-pureza strong, #bloco-pureza em{
  color: #E7EFE6 !important;
  -webkit-text-fill-color: #E7EFE6 !important;
}

/* 2) Neutralizador global — AGORA ignorando #bloco-pureza de forma absoluta */
html body *:not(#bloco-pureza):not(#bloco-pureza *)[style*="background:"],
html body *:not(#bloco-pureza):not(#bloco-pureza *)[style*="background-color:"],
html body *:not(#bloco-pureza):not(#bloco-pureza *)[style*="background-image"]{
  background: var(--tl-bg, #E7EFE6) !important;
  background-image: none !important;
}

/* Seção cujo style inline contém #0e211e — só TEXTO verde */
section[style*="#0e211e"],
section[style*="#0E211E"],
section[style*="background-color: #0e211e"],
section[style*="background-color:#0e211e"] {
  /* não define background aqui! */
}

section[style*="#0e211e"] h1,
section[style*="#0e211e"] h2,
section[style*="#0e211e"] h3,
section[style*="#0e211e"] p,
section[style*="#0e211e"] span,
section[style*="#0e211e"] li,
section[style*="#0e211e"] a,
section[style*="#0e211e"] strong,
section[style*="#0e211e"] em,
section[style*="#0e211e"] .elementor-heading-title,
section[style*="#0E211E"] h1,
section[style*="#0E211E"] h2,
section[style*="#0E211E"] h3,
section[style*="#0E211E"] p,
section[style*="#0E211E"] span,
section[style*="#0E211E"] li,
section[style*="#0E211E"] a,
section[style*="#0E211E"] strong,
section[style*="#0E211E"] em,
section[style*="#0E211E"] .elementor-heading-title {
  color: #0E211E !important;
  -webkit-text-fill-color: #0E211E !important;
}/* End custom CSS */