/* ===== HEADER FIXO ===== */
#yth-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #eee;
  z-index: 9999;
  font-family: Arial, sans-serif;
}

.yth-container {
  max-width: 1200px;
  margin: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== LOGO ===== */
.yth-logo span {
  font-size: 20px;
  font-weight: 700;
  color: #0052A6;
}

/* ===== MENU ===== */
.yth-menu ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.yth-menu a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* ===== MEGA MENU ===== */
.has-mega {
  position: relative;
}

/* ===== MEGA MENU (CORREÇÃO) ===== */
.mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  width: 500px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  gap: 30px;
  z-index: 999;
}

.has-mega:hover .mega {
  display: flex;
}

.mega-col h4 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #0052A6;
}

.mega-col a {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
}

/* ===== AÇÕES ===== */
.yth-actions a {
  margin-left: 15px;
  text-decoration: none;
  font-weight: 600;
  color: #A64E00;
}

/* ===== ESPAÇO PARA HEADER FIXO ===== */
body {
  padding-top: 80px;
}
/* ===== BASE GLOBAL ===== */
body {
  font-family: 'Inter', Arial, sans-serif;
  color: #333333;
}

/* Links */
a {
  color: #0052A6;
}

a:hover {
  color: #A64E00;
}

/* Botões padrão */
button,
input[type="submit"],
.btn,
.button {
  background-color: #0052A6;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 600;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover {
  background-color: #A64E00;
}

/* Títulos */
h1, h2, h3, h4 {
  font-weight: 700;
  color: #222;
}

/* Ajuste do header customizado */
#yth-header a {
  font-family: 'Inter', Arial, sans-serif;
}
/* ===== CORREÇÃO MOBILE HEADER ===== */
@media (max-width: 768px) {

  #yth-header {
    padding: 0;
  }

  .yth-container {
    max-width: 100%;
    padding: 10px 15px;
  }

  /* Esconde menu desktop no mobile */
  .yth-menu {
    display: none;
  }

  /* Ajusta logo */
  .yth-logo span {
    font-size: 18px;
  }

  /* Ações alinhadas */
  .yth-actions a {
    margin-left: 10px;
    font-size: 14px;
  }

  /* Corrige espaçamento do body */
  body {
    padding-top: 70px;
  }
}
/* ===== MENU MOBILE ===== */
#yth-toggle {
  display: none;
}

.yth-hamburger {
  display: none;
  font-size: 26px;
  cursor: pointer;
  color: #0052A6;
}

.yth-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 260px;
  height: 100%;
  background: #ffffff;
  box-shadow: 5px 0 20px rgba(0,0,0,0.15);
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: left 0.3s ease;
  z-index: 9998;
}

.yth-mobile-menu a {
  text-decoration: none;
  font-weight: 600;
  color: #333;
}

/* Ativação */
#yth-toggle:checked ~ .yth-mobile-menu {
  transform: translateX(0);
}
/* ===== CORREÇÃO SCROLL LATERAL MOBILE ===== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* Mobile only */
@media (max-width: 768px) {
  .yth-hamburger {
    display: block;
  }
}
/* ===== CARDS DE PRODUTO ===== */
.produto,
.product-item,
.listagem-item {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.produto:hover,
.product-item:hover,
.listagem-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Imagem */
.produto img,
.product-item img,
.listagem-item img {
  border-radius: 4px;
}

/* Nome do produto */
.produto h3,
.product-item h3,
.listagem-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  min-height: 42px;
}

/* Preço */
.preco,
.price,
.valor {
  font-size: 16px;
  font-weight: 700;
  color: #0052A6;
}

/* Botão comprar */
.botao-comprar,
.buy-button,
button.comprar {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: #0052A6;
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  border: none;
  transition: background 0.3s ease;
}

.botao-comprar:hover,
.buy-button:hover,
button.comprar:hover {
  background: #A64E00;
}
/* ===== REMOVE MENU MOBILE PADRÃO LOJA INTEGRADA ===== */
@media (max-width: 768px) {

  /* Ícone de menu padrão */
  .menu-mobile,
  .menu-toggle,
  .botao-menu,
  .menu-trigger,
  .menu-principal-toggle,
  .navbar-toggle {
    display: none !important;
  }

}

/* ===== BOTÃO COMPRAR – CTA FORTE ===== */
.botao-comprar,
.buy-button,
button.comprar,
.listagem-item .botao {
  background: #A64E00 !important;
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px !important;
}

/* Hover (desktop) */
.botao-comprar:hover,
.buy-button:hover,
button.comprar:hover,
.listagem-item .botao:hover {
  background: #0052A6 !important;
}
/* ===== TEXTO BRANCO NO BOTÃO COMPRAR ===== */
.botao-comprar,
.buy-button,
button.comprar,
.listagem-item .botao,
.botao-comprar *,
.buy-button *,
button.comprar *,
.listagem-item .botao * {
  color: #ffffff !important;
} 
/* ===== REMOVE DEFINITIVAMENTE MENU MOBILE NATIVO ===== */
@media (max-width: 768px) {

  /* Header/menu padrão Loja Integrada */
  header .menu,
  header .menu-principal,
  header .menu-mobile,
  header .menu-toggle,
  header .menu-trigger,
  header .navbar-toggle,
  header .botao-menu,
  header .menu-icon,
  header .hamburger,
  header nav,
  .menu-principal,
  .menu-mobile,
  .menu-toggle,
  .menu-trigger,
  .navbar-toggle,
  .botao-menu,
  .menu-icon,
  .hamburger {
    display: none !important;
  }

}
/* ===== REMOVE HEADER MOBILE NATIVO (SEM AFETAR HEADER CUSTOM) ===== */
@media (max-width: 768px) {

  /* Header nativo da Loja Integrada */
  body > header:not(#yth-header),
  body > .header,
  body > .cabecalho,
  body > .topo,
  .atalhos-mobile,
  .menu-lateral,
  .menu-categorias,
  .busca-mobile,
  .busca,
  .barra-busca,
  .carousel-categorias,
  .categorias-mobile,
  .menu-superior {
    display: none !important;
  }
  /* Garante que o header customizado fique visível */
  #yth-header {
    display: block !important;
  } 
}
/* ===== ATALHOS DE CATEGORIA (VERSÃO BLINDADA) ===== */
.yth-categorias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 30px 12px;
  max-width: 100%;
  width: auto;
  overflow: hidden;
}

/* Desktop */
@media (min-width: 769px) {
  .yth-categorias {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 12px;
  }
}

.yth-categorias a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 6px;
  font-weight: 700;
  color: #0052A6;
  text-align: center;
  min-width: 0;
}
/* RESET ANTI OVERFLOW */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
.container,
.container-fluid,
.wrapper,
.conteudo,
#corpo,
#rodape {
  max-width: 100%;
  overflow-x: hidden;
}
/* ===== CONFIANÇA ===== */
.yth-confianca {
  background: #f8f8f8;
  padding: 30px 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .yth-confianca {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
/* ===== CUPOM HOME ===== */
.yth-cupom {
  background: #0052A6;
  color: #ffffff;
  text-align: center;
  padding: 14px;
  font-weight: 600;
}

.yth-cupom b {
  color: #FFD27D;
}
/* ===== BOTÃO WHATSAPP ===== */
.yth-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #ffffff;
  font-size: 26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.yth-whatsapp:hover {
  background: #1ebe5d;
}
/* ===== BOTÃO COMPRAR – TEXTO BRANCO ===== */

/* Botão principal de compra */
.botao-comprar,
.botao.principal,
.produto .botao.principal {
  color: #ffffff !important;
}

/* Garante texto branco no hover */
.botao-comprar:hover,
.botao.principal:hover,
.produto .botao.principal:hover {
  color: #ffffff !important;
}
/* ===== BOTÃO COMPRAR – VERDE ESTÁTICO ===== */

.botao-comprar,
.botao.principal,
.produto .botao.principal {
  background-color: #25D366 !important; /* verde tipo WhatsApp */
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  transition: none !important; /* remove animações */
}

/* Hover SEM mudar cor */
.botao-comprar:hover,
.botao.principal:hover,
.produto .botao.principal:hover {
  background-color: #25D366 !important;
  color: #ffffff !important;
}
/* ===== CORREÇÃO DEFINITIVA ALTURA DO BANNER ===== */

/* Container principal do banner */
.secao-banners,
.banner,
.banner-home {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 360px !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

/* Garante alinhamento vertical */
.secao-banners .conteiner,
.banner .conteiner,
.banner-home .conteiner {
  height: 100% !important;
  display: flex;
  align-items: center;
}

/* Imagem do banner */
.secao-banners img,
.banner img,
.banner-home img {
  max-height: 360px !important;
  width: auto !important;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 768px) {
  .secao-banners,
  .banner,
  .banner-home {
    height: 240px !important;
    max-height: 240px !important;
  }

  .secao-banners img,
  .banner img,
  .banner-home img {
    max-height: 240px !important;
  }
}
/* ===== REMOVE ESPAÇO EM BRANCO ABAIXO DO BANNER ===== */

/* Remove margem excessiva da primeira seção após o banner */
.secao-banners + .secao,
.secao-banners + section,
.banner + .secao,
.banner + section {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* Ajusta especificamente a seção de lançamentos */
.secao-lancamentos,
#lancamentos,
.lancamentos {
  margin-top: 0 !important;
  padding-top: 30px !important;
}
.conteudo {
  padding-top: 0 !important;
}
/* Remove menu duplicado do topo */
.menu-superior nav,
.menu-superior .menu,
.menu-superior ul {
    display: none !important;
}
/* ===== REMOVE MENU DUPLICADO DO TOPO (FORÇADO) ===== */

/* Remove qualquer menu dentro do header */
header nav,
header .menu,
header .menu-superior,
header .menu-principal,
header .menu-categorias,
header ul.menu,
header ul.nav,
header .nav,
header .navigation {
    display: none !important;
}

/* Garante que apenas logo, busca e ícones fiquem visíveis */
header .logo,
header .search,
header .busca,
header .actions,
header .icones,
header .icon,
header .cart,
header .login {
    display: flex !important;
}
/* ===== HEADER FIXO SOMENTE APÓS SCROLL ===== */

header {
  position: relative;
  transition: all 0.3s ease;
  z-index: 999;
}

/* Estado fixo ativado via JS */
header.header-fixo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Evita pulo de layout */
body.header-fixo-ativo {
  padding-top: 90px; /* ajuste se necessário */
}

