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: 0px;  /* distância do topo */
  --logo-mobile-left: 16px; /* 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;
    max-width: 80vw !important;
    height: auto !important;
    object-fit: contain !important;
  }

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


/* ====== PADRÃO DAS IMAGENS NA LISTAGEM ====== */
/* formato vertical 4:5 */
:root{
  --thumb-width: 240px;   /* largura padrão do card no desktop */
  --thumb-ratio: 4/5;     /* formato vertical */
}

/* container das imagens dos produtos */
.product-layout .product-thumb .image,
.product-grid .product-thumb .image,
.products-list .product-thumb .image,
.box-product .product-thumb .image,
.product-item .image {
  width: var(--thumb-width);
  aspect-ratio: var(--thumb-ratio);
  display: block;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;       /* opcional, arredonda levemente */
  background: #f4f4f4;       /* cor de fundo caso a imagem não preencha tudo */
}

/* imagem dentro do container */
.product-layout .product-thumb .image img,
.product-grid .product-thumb .image img,
.products-list .product-thumb .image img,
.box-product .produc