body {
                font-family: 'Roboto', sans-serif
            }

  /* bolinha de ícone como no seu exemplo */
  #header .shopping_cart .icon-c{
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d4b59b;           /* bege */
  }

  /* badge do contador posicionada corretamente */
  #header .shopping_cart .icon-c .mini-cart-number,
  #header .shopping_cart .icon-c .items_cart{
    position: absolute;
    top: -6px; right: -6px;
  }

  /* oculta o texto longo “Carrinho” para ficar só o ícone (como no mock) */
  #header .shopping_cart .text-shopping-cart,
  #header .shopping_cart .cart-total-full{ display: none !important; }
}

/* Botão ADD AO CARRINHO – verde oliva com cantos arredondados */
input[value="Add ao Carrinho"],
.btn.btn-mega {
  background-color: #707956 !important;
  border-color: #707956 !important;
  color: #fff !important;
  border-radius: 25px !important;
  padding: 8px 18px !important;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

/* Hover (ao passar o mouse) */
input[value="Add ao Carrinho"]:hover,
.btn.btn-mega:hover {
  background-color: #5e6547 !important;
  border-color: #5e6547 !important;
  transform: scale(1.03);
}

/* ===== VERDE OLIVA PARA TODOS OS PREÇOS ===== */

/* Preço principal (produtos, página de detalhes, cards) */
.price-new,
#valor_item_quantF,
.product-price,
.product-label .price,
.product-detail .price-new,
.price,
.total-price,
.cart-total-full,
.cart-price,
.shopping_cart .cart-total-full span,
.shopping_cart .price {
  color: #707956 !important;
  font-weight: 700 !important;
}

/* Preço antigo / promocional (cinza riscado) */
.price-old,
.old-price,
.product-label .price-old {
  color: #b5b5b5 !important;
  text-decoration: line-through !important;
}

/* Total do carrinho (verde oliva) */
.total-shopping-cart,
.total-shopping-cart span,
#valor_itens_carrinho {
  color: #707956 !important;
  font-weight: 700 !important;
}

/* Detalhes de subtotal ou resumo de compra */
.cart-summary .total,
.checkout-summary .price,
.order-total .price {
  color: #707956 !important;
  font-weight: 700 !important;
}

/* Ícones e labels que contêm preço */
span[itemprop="price"],
span.price,
span.amount,
div.price {
  color: #707956 !important;
}

/* Hover/efeito visual (opcional) */
.price-new:hover,
.cart-total-full:hover {
  color: #5e6547 !important;
}

/* Nome do produto - cor grafite */
.title-product h1,
.product-name,
.product-title,
h1[itemprop="name"] {
  color: #41424C !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ===== MOBILE: logo flutuante sobre o fundo sólido (sem usar imagem de fundo) ===== */
:root{
  /* ajuste rápido sem mexer no código: só troque os valores abaixo */
  --logo-mobile-w: 105px;   /* largura da logo no mobile */
  --logo-mobile-top: -35px;  /* distância do topo */
  --logo-mobile-left: 40px; /* distância da esquerda */
  --header-mobile-minh: 150px; /* altura mínima do header para “respirar” atrás da logo */
}

@media (max-width: 767px){

  /* fundo permanece sólido (já vem do seu tema) e vira “ancora” da logo */
  #header{
    position: relative !important;
    min-height: var(--header-mobile-minh) !important;
  }

  /* deixa as faixas do header transparentes para o fundo sólido aparecer */
  .header-top, .header-middle, .header-bottom{
    background: transparent !important;
  }

  /* LOGO separada e clicável, “por cima” */
  .header-top .logo{
    position: absolute !important;
    left: var(--logo-mobile-left) !important;
    top: var(--logo-mobile-top) !important;
    z-index: 5 !important;
    margin: 0 !important;
    text-align: left !important;  /* mude para center se quiser centralizar */

  }
  .header-top .logo a{ display: inline-block; }
  .header-top .logo img{
    /*width: var(--logo-mobile-w) !important;*/
    width: 130px !important; /* ou 200px, conforme desejar */
    max-width: 80vw !important;
    height: auto !important;
    object-fit: contain !important;
    /* Sombra forte e suave ao mesmo tempo */
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5))
            drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: filter 0.3s ease;
  }

  /* Efeito adicional opcional ao passar o dedo/mouse */
  .header-top .logo img:hover{
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55))
            drop-shadow(0 3px 6px rgba(0,0,0,0.35));
  }
}

  /* garante que a linha das “Categorias” não suba por cima da logo */
  #header .header-bottom{

    /* ===== MOBILE/TABLET: reserva espaço para a logo no topo ===== */
@media (max-width: 991px){
  /* 1) Cria o “respiro” acima da faixa inteira (Categorias + Busca + Sacola) */
  #header{
    position: relative !important;
    padding-top: 32px !important;  /* ajuste fino: teste 28–40px */
  }

  /* 2) Logo flutuante (mantém como já estava) */
  .header-top .logo{
    position: absolute !important;
    left: 4px !important;   /* respiro lateral */
    top: 2px !important;    /* respiro superior */
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .header-top .logo img{
    width: 150px !important; /* ajuste livre: 130–170px */
    height: auto !important;
    display: block;
  }

  /* 3) Garante que a sacola NÃO esteja absoluta e alinhe junto com “Categorias” */
  #header .shopping_cart{
    position: static !important;
    margin-top: 0 !important;
    transform: translateY(1px);  /* microajuste vertical do ícone (0–3px) */
  }

  /* 4) Evita que estilos do tema “anulem” nosso espaçamento */
  #header .header-bottom,
  #header .header-bottom > .container,
  #header .header-bottom > .container > .row{
    padding-top: 0 !important;  /* usamos só o padding do #header */
    margin-top: 0 !important;
  }
}

/* Mobile: reserva espaço abaixo da logo (separa da faixa de CATEGORIAS) */
@media (max-width: 767px){
  header#header .header-top{
    position: relative !important;
    padding-bottom: 34px !important; /* ajuste fino: 28–40px */
  }

  /* microajuste do alinhamento vertical do ícone da sacola */
  header#header .shopping_cart{
    position: static !important;
    transform: translateY(2px) !important; /* 0–4px conforme o olho */
  }
}
/* ===== MOBILE: logo flutuante + espaçador + alinhamento da sacola ===== */
@media (max-width: 767px){
  /* Logo flutuante com respiro */
  .header-top .logo{
    position: absolute !important;
    left: 4px !important;     /* respiro lateral */
    top: 2px !important;      /* respiro superior */
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .header-top .logo img{
    width: 150px !important;  /* ajuste livre: 130–170px */
    height: auto !important;
    display: block !important;
  }

  /* Espaçador visível só no mobile para empurrar CATEGORIAS */
  .spacer-logo-mobile{
    display: block !important;
    height: 40px !important;  /* ajuste fino: 32–48px */
    width: 100%;
  }

  /* Alinhar a sacola com CATEGORIAS: zera margem do tema no mobile */
  .margem_30_web{
    margin-top: 0 !important;
  }

  /* (opcional) microajuste vertical do ícone da sacola */
  #header .shopping_cart{
    transform: translateY(2px) !important; /* 0–4px conforme o olho */
  }
}

/* No desktop, o espaçador fica invisível */
@media (min-width: 768px){
  .spacer-logo-mobile{ display: none !important; }
}

/* ===== MOBILE: forçar a sacola a sair do absolute e alinhar com CATEGORIAS ===== */
@media (max-width: 767px){

  /* 1) Zera QUALQUER posicionamento absoluto que esteja segurando a sacola lá em cima */
  #header .header-bottom .bottom3,
  #header .header-bottom .bottom3 .shopping_cart,
  #header .header-bottom .bottom3 .shopping_cart .btn-shopping-cart,
  #header .header-bottom .bottom3 #cart{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  /* 2) Usa flex pra alinhar verticalmente na MESMA linha da barra de CATEGORIAS */
  #header .header-bottom .bottom3{
    display: flex !important;
    align-items: center !important;   /* alinha verticalmente com o botão CATEGORIAS */
    justify-content: flex-end !important;
  }

  /* 3) Garante que o bloco CATEGORIAS também esteja centralizado verticalmente */
  #header .header-bottom .bottom1.menu-vertical{
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;  /* quem cria o “respiro” é o spacer/padding acima */
  }

  /* 4) Remove qualquer margem do tema que empurre a sacola pra cima/baixo */
  .margem_30_web{ margin-top: 0 !important; }
}


@media (max-width: 767px){
  :root{ --edge-right: 8px; } /* ajuste fino: 0–12px */

  /* A borda direita comum do header (onde a sacola encosta) */
  #header .header-bottom > .container{
    padding-right: var(--edge-right) !important;
  }

  /* Hambúrguer usa a mesma distância da direita */
  #show-megamenu{
    right: var(--edge-right) !important;
  }

  /* Garante que a coluna da sacola não crie “folga” extra */
  #header .header-bottom .bottom3{
    padding-right: 0 !important;
  }
}

/* === PATCH ISOLADO: “Add ao Carrinho” verde e arredondado === */
:root{
  --btn-green: #707956;
  --btn-green-hover: #5e6547;
  --btn-radius: 25px;
}

/* Página de produto (bloco .cart) */
.product-info .cart #button-cart,
.product-info .cart input[type="button"][value*="Carrinho"]{
  background-color: var(--btn-green) !important;
  border-color: var(--btn-green) !important;
  color: #fff !important;
  border-radius: var(--btn-radius) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: all .2s ease-in-out !important;
  box-shadow: none !important; text-shadow: none !important;
}
.product-info .cart #button-cart:hover,
.product-info .cart input[type="button"][value*="Carrinho"]:hover{
  background-color: var(--btn-green-hover) !important;
  border-color: var(--btn-green-hover) !important;
  transform: scale(1.03);
}

/* Listagens/cards (tema costuma usar .btn.btn-mega) */
.product-layout .btn.btn-mega,
.product-grid   .btn.btn-mega,
.product-list   .btn.btn-mega,
button.add-to-cart,
a.btn.add-to-cart{
  background-color: var(--btn-green) !important;
  border-color: var(--btn-green) !important;
  color: #fff !important;
  border-radius: var(--btn-radius) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: all .2s ease-in-out !important;
  box-shadow: none !important; text-shadow: none !important;
}
.product-layout .btn.btn-mega:hover,
.product-grid   .btn.btn-mega:hover,
.product-list   .btn.btn-mega:hover,
button.add-to-cart:hover,
a.btn.add-to-cart:hover{
  background-color: var(--btn-green-hover) !important;
  border-color: var(--btn-green-hover) !important;
  transform: scale(1.03);
}

/* Bordas arredondadas em qualquer .btn dentro de áreas de produto */
.product-info .btn,
.product-detail .btn,
.product-layout .btn{ border-radius: var(--btn-radius) !important; }

/* remove completamente o fundo branco/cinza dos produtos */
.products-list.grid .product-layout .product-item-container .right-block {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove o "..." e permite quebra de linha nos nomes dos produtos */
.product-layout .right-block .caption h4 a,
.products-list .right-block .caption h4 a,
.product-grid .right-block .caption h4 a,
.item-title a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* mostra até 2 linhas */
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
  word-break: break-word;
  color: #444;
}

@media (max-width: 767px) {
    .megamenu-style-dev .navbar-default .vertical .vertical-wrapper {
        background: #FFEDDC !important; /* bege exato da página */
    }
}

@media (max-width: 767px) {
  /* Força o estilo do botão "CATEGORIAS" no mobile */
  #show-verticalmenu.navbar-toggle,
  #show-verticalmenu.navbar-toggle span {
    font-size: 13px !important;       /* igual Cadastre-se / Logar */
    font-weight: 400 !important;      /* remove o negrito */
    text-transform: none !important;  /* remove o MAIÚSCULO */
    color: #fff !important;           /* mantém branco */
    letter-spacing: normal !important;
  }

  /* Ajusta o ícone do menu também */
  #show-verticalmenu.navbar-toggle i {
    font-size: 13px !important;
    vertical-align: middle !important;
  }
}

@media (max-width: 767px) {
  /* Botão "CATEGORIAS" ajustado ao tamanho do texto */
  #show-verticalmenu.navbar-toggle {
    width: auto !important;            /* ajusta automaticamente */
    padding: 5px 10px !important;      /* deixa proporção natural */
    display: inline-flex !important;   /* centraliza ícone e texto */
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    right: 10px;
  }

  /* Espaço entre o ícone e o texto */
  #show-verticalmenu.navbar-toggle i {
    margin-right: 6px !important;
    font-size: 13px !important;
  }

  /* Texto alinhado perfeitamente */
  #show-verticalmenu.navbar-toggle span {
    font-size: 13px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 767px) {
  /* Aumenta o tamanho do círculo da sacola */
  #cart .icon-c {
    width: 28px !important;
    height: 28px !important;
    background-color: #d4b59b !important; /* mantém o bege */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: relative;
    top: 5px;
    left: 0px;
  }

  /* Aumenta o ícone da sacola dentro do círculo */
  #cart .icon-c i {
    font-size: 15px !important;
    color: #fff !important;
  }

  /* Caso tenha o contador (bolinha branca com número) */
  #cart .icon-c .mini-cart-number,
  #cart .icon-c .items_cart {
    font-size: 11px !important;
    top: -5px !important;
    right: -6px !important;
  }
}

@media (max-width: 767px) {
  #show-megamenu.navbar-toggle {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* controla a posição vertical da sacola */
  #header #cart {
    position: relative !important;
    top: 4px; /* ajuste fino: use valores positivos ou negativos */
  }

  /* garante que o ícone continue centralizado horizontalmente */
  #header #cart .icon-c {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

:root{
  --brand-bege: #d4b59b;         /* seu bege */
  --brand-green: #2e7d32;        /* verde dos botões/preços */
  --ink-900:#1a1a1a; --ink-700:#333; --ink-500:#555; --line:#e9e9e9; --bg-card:#fff;
}

.page-content .container.inst-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
@media (max-width: 992px){
  .page-content .container.inst-grid{ grid-template-columns: 1fr; }
}

/* Título + breadcrumb */
.inst-title{
  margin: 0 0 6px 0;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--ink-900);
  letter-spacing: .2px;
}
.breadcrumb-inst{
  font-size: .95rem; color: var(--ink-500);
  display: flex; gap: 8px; align-items: center;
}
.breadcrumb-inst a{ color: var(--ink-700); text-decoration: none; }
.breadcrumb-inst a:hover{ text-decoration: underline; }

/* Cartão do conteúdo */
.content-card.inst-article{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 2vw, 28px);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  line-height: 1.65;
  color: var(--ink-700);
  font-size: 1.02rem;
}

/* Tipografia de seções */
.inst-article h2{
  margin-top: 28px; margin-bottom: 12px;
  font-size: clamp(20px, 2.2vw, 26px); color: var(--ink-900);
  position: relative; padding-bottom: 6px;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  background-image: linear-gradient(90deg, var(--brand-bege), transparent);
  background-size: 160px 2px; background-repeat: no-repeat;
  background-position: left bottom;
}
.inst-article h3{
  margin-top: 20px; margin-bottom: 8px;
  font-size: clamp(18px, 1.9vw, 22px); color: var(--ink-900);
}
.inst-article p{ margin: 0 0 14px 0; }
.inst-article ul, .inst-article ol{ margin: 0 0 16px 20px; }
.inst-article li{ margin: 6px 0; }

/* Âncora "#" nos títulos (aparece ao passar o mouse) */
.inst-article .inst-anchor{
  margin-left: 8px; opacity: 0; text-decoration: none; font-size: .9rem;
  color: var(--brand-green);
}
.inst-article h2:hover .inst-anchor,
.inst-article h3:hover .inst-anchor{ opacity: 1; }

/* Tabelas */
.inst-article table{
  width: 100%; border-collapse: collapse; margin: 14px 0 18px 0;
  border: 1px solid var(--line);
}
.inst-article th, .inst-article td{
  padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.inst-article thead th{
  background: #fafafa; font-weight: 600; text-align: left;
}

/* Callouts (avisos) */
.callout{
  border-left: 4px solid var(--brand-bege);
  background: #fff8f1; padding: 12px 14px; border-radius: 10px; margin: 14px 0;
}
.callout.info{ border-left-color: #3b82f6; background: #f0f6ff; }
.callout.success{ border-left-color: #22c55e; background: #effcf4; }
.callout.warn{ border-left-color: #f59e0b; background: #fff7e6; }
.callout .title{ font-weight: 600; margin-bottom: 4px; }

/* Sumário (TOC) */
.inst-toc{
  position: sticky; top: 96px;
  background: #fff; border:1px solid var(--line); border-radius: 12px;
  padding: 16px; height: max-content;
}
.inst-toc .toc-title{ font-weight: 600; margin-bottom: 8px; color: var(--ink-900); }
.inst-toc ul{ list-style: none; padding: 0; margin: 0; }
.inst-toc li{ margin: 6px 0; }
.inst-toc li.sub{ margin-left: 12px; }
.inst-toc a{ color: var(--ink-700); text-decoration: none; font-size: .96rem; }
.inst-toc a:hover{ color: var(--brand-green); text-decoration: underline; }

/* Rodapé de atualização */
.inst-updated{
  margin-top: 22px; font-size: .9rem; color: var(--ink-500);
  padding-top: 12px; border-top: 1px dashed var(--line);
}

/* Botão voltar ao topo */
.inst-backtop{
  position: fixed; right: 18px; bottom: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer; opacity: 0; transition: opacity .2s ease;
}

/* Print mais limpo */
@media print{
  .inst-toc, #backTop, .breadcrumb-inst{ display: none !important; }
  .content-card.inst-article{ box-shadow: none; border: none; }
}


@media (max-width: 768px){
  #ecMobileBannerImg{
    width:100%; height:auto; max-height:340px; object-fit:cover; border-radius:12px;
  }
}

@media (max-width: 768px){
  .nome-produto, .item-title, .product-name, .titulo-produto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* mostra até 2 linhas */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important; /* pode quebrar linha */
    line-height: 1.3em;
    max-height: calc(1.3em * 2); /* garante altura pra 2 linhas */
  }
}


/*COR DO BOTÃO FECHAR ACIMA DE CATEGORIAS*/
#remove-verticalmenu {
  color: #666666 !important; /* Definir cor com Ana Letícia */
}

/* ====== LOGO DESKTOP - ESSENCIAL CASA ====== */
.logo-desktop-img {
    display: block;
    height: var(--logo-desktop-h, 100px); /* altura padrão */
    width: auto;
    object-fit: contain;
    transition: all 0.25s ease; /* animação suave ao ajustar */
}

/* container da logo */
.navbar-logo .logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* controle de posicionamento vertical */
    margin-top: var(--logo-desktop-top, 0px);   /* sobe ou desce a logo */
}

/* exemplo: responsivo (não muda nada no mobile) */
@media (max-width: 767px) {
    .logo-desktop-img {
        display: none !important; /* garante que não apareça no mobile */
    }
}

/* ===== Paginação Essencial Casa (override específico) ===== */
a.btn.btn-default.grid.active,
a.btn.btn-default.grid:active,
a.btn.btn-default.grid.focus,
a.btn.btn-default.grid:hover {
  background-color: #d4b59b !important; /* bege sólido */
  border-color: #d4b59b !important;
  color: #3a3324 !important;            /* texto escuro */
}

/* mantém os outros botões do site com o estilo original */
body:not(.listing) .btn-default.active,
body:not(.listing) .btn-default.focus,
body:not(.listing) .btn-default:active,
body:not(.listing) .btn-default:focus,
body:not(.listing) .btn-default:hover {
  background-color: #707956 !important; /* verde padrão da marca */
  border-color: #707956 !important;
  color: #fff !important;
}