/* ==========================================================================
   style.css — ESTILOS PRINCIPAIS (desktop / base)
   As regras de celular e tablet ficam em responsive.css
   --------------------------------------------------------------------------
   ÍNDICE
   1.  Variáveis (cores, fontes, medidas)
   2.  Reset e base
   3.  Utilitários (container, títulos de seção, botões, selos)
   4.  Cabeçalho (faixa superior, logo, menu, mega-menu, ícones, busca)
   5.  Menu mobile (gaveta lateral)
   6.  Banner principal (slider)
   7.  Faixa de benefícios
   8.  Cards de produto e vitrines (carrossel e grade)
   9.  Categorias
   10. Banners intermediários
   11. História da marca e blocos institucionais
   12. Instagram
   13. Newsletter
   14. Rodapé
   15. Carrinho lateral (minicarrinho)
   16. Página de produto
   17. Página de categoria
   18. Página de carrinho
   19. Elementos flutuantes (WhatsApp, topo, toast, cookies)
   20. Animações de entrada
   ========================================================================== */


/* ==========================================================================
   1. VARIÁVEIS  — TROQUE AS CORES DO SITE AQUI
   ========================================================================== */
:root {
  /* Cores da marca */
  --cor-principal: #000000;
  --cor-secundaria: #ffffff;
  --cor-destaque: #c89b5a;
  --cor-texto: #272727;
  --cor-texto-suave: #777777;
  --cor-fundo: #ffffff;
  --cor-fundo-claro: #f7f5f1;
  --largura-maxima: 1380px;

  /* Cores de apoio (derivadas — normalmente não precisa mexer) */
  --cor-borda: #e8e4dd;
  --cor-borda-forte: #d9d3c8;
  --cor-sucesso: #2e7d52;
  --cor-alerta: #b3261e;
  --cor-esgotado: #9a9a9a;

  /* Tipografia */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Medidas de layout */
  --altura-faixa-topo: 36px;
  --altura-cabecalho: 88px;
  --espaco-secao: 90px;          /* respiro vertical entre seções */
  --raio: 2px;                    /* cantos discretos, quase retos */
  --transicao: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sombra-suave: 0 2px 18px rgba(0, 0, 0, 0.06);
  --sombra-media: 0 10px 40px rgba(0, 0, 0, 0.12);
  --z-cabecalho: 900;
  --z-gaveta: 1000;
  --z-flutuante: 800;
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-x: hidden;                 /* impede rolagem horizontal indevida */
}

body.sem-rolagem { overflow: hidden; } /* aplicado quando gaveta/carrinho abre */

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--cor-destaque); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.18;
  margin: 0;
  color: var(--cor-principal);
}

p { margin: 0 0 1em; }

/* Foco visível para navegação por teclado (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 3px;
}

/* Link "pular para o conteúdo" — só aparece ao navegar com Tab */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--cor-principal);
  color: #fff;
  padding: 12px 20px;
}
.pular-conteudo:focus { left: 10px; top: 10px; }

/* Esconde visualmente mas mantém para leitores de tela */
.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ==========================================================================
   3. UTILITÁRIOS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 40px;
}

.container-estreito {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

.secao { padding: var(--espaco-secao) 0; }
.secao-clara { background: var(--cor-fundo-claro); }

/* Cabeçalho de seção: chapéu + título centralizado, bem espaçado */
.secao-cabecalho {
  text-align: center;
  margin-bottom: 46px;
}
.secao-chapeu {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-destaque);
  margin-bottom: 14px;
}
.secao-titulo {
  font-size: 40px;
  letter-spacing: -0.01em;
}
.secao-descricao {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--cor-texto-suave);
  font-size: 15px;
}
/* Fio decorativo abaixo do título */
.secao-titulo::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: var(--cor-destaque);
  margin: 20px auto 0;
}
.secao-cabecalho.sem-fio .secao-titulo::after { display: none; }

/* --- Botões --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--raio);
  border: 1px solid var(--cor-principal);
  background: var(--cor-principal);
  color: var(--cor-secundaria);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao:hover {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}

.botao-contorno {
  background: transparent;
  color: var(--cor-principal);
  border-color: var(--cor-principal);
}
.botao-contorno:hover {
  background: var(--cor-principal);
  color: var(--cor-secundaria);
  border-color: var(--cor-principal);
}

.botao-claro {
  background: #fff;
  color: var(--cor-principal);
  border-color: #fff;
}
.botao-claro:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }

.botao-destaque {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}
.botao-destaque:hover { background: var(--cor-principal); border-color: var(--cor-principal); }

.botao-bloco { width: 100%; }
.botao:disabled, .botao[disabled] {
  background: var(--cor-esgotado);
  border-color: var(--cor-esgotado);
  color: #fff;
  cursor: not-allowed;
}

/* Link com sublinhado fino que cresce no hover */
.link-linha {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cor-borda-forte);
  padding-bottom: 3px;
  transition: border-color var(--transicao), color var(--transicao);
}
.link-linha:hover { border-color: var(--cor-destaque); }

/* --- Selos --- */
.selo {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--raio);
  line-height: 1;
}
.selo-desconto { background: var(--cor-principal); color: #fff; }
.selo-frete { background: var(--cor-sucesso); color: #fff; }
.selo-esgotado { background: var(--cor-esgotado); color: #fff; }


/* ==========================================================================
   4. CABEÇALHO
   ========================================================================== */

/* Faixa superior de boas-vindas */
.faixa-topo {
  height: var(--altura-faixa-topo);
  background: var(--cor-principal);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}
.faixa-topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.faixa-topo__mensagem { opacity: 0.9; }
.faixa-topo__links { display: flex; gap: 24px; }
.faixa-topo a:hover { color: var(--cor-destaque); }

/* Cabeçalho principal — fixo no topo com transição de sombra na rolagem */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  transition: box-shadow var(--transicao), background var(--transicao);
}
.cabecalho.rolando {
  box-shadow: var(--sombra-suave);
  border-bottom-color: transparent;
}

.cabecalho__interno {
  height: var(--altura-cabecalho);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo centralizado de verdade */
  align-items: center;
  gap: 20px;
}

/* Logotipo textual — TROQUE AQUI PELO LOGOTIPO DEFINITIVO */
.logo {
  grid-column: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.logo__nome {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-principal);
  line-height: 1;
}
.logo__slogan {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.logo img { max-height: 52px; width: auto; }

/* Menu principal (esquerda) */
.nav-principal { grid-column: 1; }
.menu-principal {
  display: flex;
  align-items: center;
  gap: 26px;
}
.menu-principal > li { position: relative; }
.menu-principal > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--altura-cabecalho);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto);
}
.menu-principal > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 26px;
  width: 0; height: 1px;
  background: var(--cor-destaque);
  transition: width var(--transicao);
}
.menu-principal > li:hover > a::after,
.menu-principal > li > a[aria-current="page"]::after { width: 100%; }
.menu-principal .seta {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transicao);
}
.menu-principal > li:hover .seta { transform: rotate(225deg) translateY(-2px); }

/* Mega-menu de Produtos */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 980px;
  max-width: calc(100vw - 80px);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-media);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu-principal > li:hover .mega-menu,
.menu-principal > li:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__titulo {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-destaque);
  margin-bottom: 16px;
}
.mega-menu__lista li + li { margin-top: 11px; }
.mega-menu__lista a { font-size: 14px; color: var(--cor-texto); }

/* Ícones da direita: busca, conta, carrinho */
.acoes-cabecalho {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.icone-acao {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  transition: background var(--transicao), color var(--transicao);
}
.icone-acao:hover { background: var(--cor-fundo-claro); color: var(--cor-destaque); }
.icone-acao svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Contador do carrinho */
.contador-carrinho {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cor-destaque);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contador-carrinho.visivel { transform: scale(1); }

/* Botão hambúrguer (só aparece no mobile — ver responsive.css) */
.botao-menu-mobile {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.botao-menu-mobile span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--cor-principal);
  transition: transform var(--transicao), opacity var(--transicao);
}

/* Campo de busca expansível */
.busca {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-suave);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao);
}
.busca.aberta { max-height: 220px; }
.busca__formulario {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
}
.busca__campo {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--cor-borda-forte);
  padding: 12px 4px;
  font-size: 17px;
  font-family: var(--fonte-titulo);
  background: transparent;
  color: var(--cor-texto);
}
.busca__campo:focus { outline: none; border-bottom-color: var(--cor-destaque); }
.busca__fechar { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-texto-suave); }

/* Resultados da busca */
.busca__resultados { padding-bottom: 24px; }
.busca__resultado {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--cor-borda);
}
.busca__resultado img { width: 52px; height: 52px; object-fit: cover; }
.busca__resultado-nome { font-size: 14px; }
.busca__resultado-preco { font-size: 13px; color: var(--cor-destaque); font-weight: 600; }
.busca__vazio { padding: 12px 0; color: var(--cor-texto-suave); font-size: 14px; }


/* ==========================================================================
   5. MENU MOBILE (gaveta lateral esquerda)
   ========================================================================== */
.sobreposicao {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
  z-index: var(--z-gaveta);
}
.sobreposicao.ativa { opacity: 1; visibility: visible; }

.gaveta-menu {
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  max-width: 86vw;
  height: 100%;
  background: var(--cor-fundo);
  z-index: calc(var(--z-gaveta) + 1);
  transform: translateX(-100%);
  transition: transform var(--transicao);
  display: flex;
  flex-direction: column;
}
.gaveta-menu.aberta { transform: translateX(0); }

.gaveta-menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cor-borda);
  min-height: 68px;
}
.gaveta-menu__titulo {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gaveta-fechar {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--cor-texto-suave);
}
.gaveta-fechar:hover { color: var(--cor-principal); }

.gaveta-menu__corpo { flex: 1; overflow-y: auto; padding: 8px 0; }

.menu-mobile > li { border-bottom: 1px solid var(--cor-borda); }
.menu-mobile > li > a,
.menu-mobile__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cor-texto);
}
.menu-mobile__botao .seta {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transicao);
}
.menu-mobile__botao[aria-expanded="true"] .seta { transform: rotate(225deg); }
.menu-mobile__submenu {
  max-height: 0;
  overflow: hidden;
  background: var(--cor-fundo-claro);
  transition: max-height var(--transicao);
}
.menu-mobile__submenu.aberto { max-height: 600px; }
.menu-mobile__submenu a {
  display: block;
  padding: 12px 24px 12px 40px;
  font-size: 14px;
  color: var(--cor-texto);
  text-transform: none;
}

.gaveta-menu__rodape {
  border-top: 1px solid var(--cor-borda);
  padding: 20px 24px 28px;
  display: grid;
  gap: 12px;
}
.gaveta-menu__contato {
  font-size: 13px;
  color: var(--cor-texto-suave);
  text-align: center;
}


/* ==========================================================================
   6. BANNER PRINCIPAL (slider)
   ========================================================================== */
.banner-principal {
  position: relative;
  width: 100%;
  height: 620px;                 /* altura no desktop */
  overflow: hidden;
  background: var(--cor-fundo-claro);
}
.banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.banner__slide.ativo { opacity: 1; visibility: visible; }
.banner__slide picture { display: block; width: 100%; height: 100%; }
.banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
.banner__slide.ativo img { transform: scale(1); }

/* Arte pronta do cliente: o texto já vem dentro da imagem, no computador E no
   celular. Escondemos o texto do site e o véu escuro em qualquer tela, senão
   fica texto sobre texto. */
.banner__slide--arte .banner__caixa { display: none; }
.banner__slide--arte::after { display: none; }

/* Como o botão do site some junto, a arte inteira vira o link. */
.banner__clique { display: none; }
.banner__slide--arte .banner__clique {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* O banner acompanha a proporção da arte para ela entrar inteira, sem cortar
   o texto que está desenhado nela: 3:1 deitada no computador, 900x1240 em pé
   no celular (a mesma arte, remontada — foto em cima, texto embaixo). */
@media (min-width: 769px) {
  .banner-principal:has(.banner__slide--arte) {
    height: auto;
    aspect-ratio: 3 / 1;
    max-height: 660px;
  }
}
@media (max-width: 768px) {
  .banner-principal:has(.banner__slide--arte) {
    height: auto;
    aspect-ratio: 900 / 1240;
    max-height: none;
    min-height: 0;
  }
}

/* Véu escuro para o texto ficar legível sobre a foto */
.banner__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.42), rgba(0,0,0,0.05));
  pointer-events: none;
}
.banner__slide[data-posicao="direita"]::after {
  background: linear-gradient(to left, rgba(0,0,0,0.42), rgba(0,0,0,0.05));
}
.banner__slide[data-posicao="centro"]::after {
  background: rgba(0, 0, 0, 0.32);
}

.banner__conteudo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.banner__caixa {
  max-width: 520px;
  color: #fff;
}
.banner__slide[data-posicao="centro"] .banner__conteudo { justify-content: center; text-align: center; }
.banner__slide[data-posicao="direita"] .banner__conteudo { justify-content: flex-end; text-align: right; }
.banner__slide[data-posicao="centro"] .banner__caixa { max-width: 640px; }

.banner__chapeu {
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.9;
}
.banner__titulo {
  font-size: 58px;
  color: #fff;
  margin-bottom: 18px;
}
.banner__subtitulo {
  font-size: 17px;
  margin-bottom: 32px;
  opacity: 0.92;
}

/* Setas laterais discretas */
.banner__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;   /* acima da camada de clique da arte (.banner__clique) */
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  transition: opacity var(--transicao), background var(--transicao);
}
.banner-principal:hover .banner__seta { opacity: 1; }
.banner__seta:hover { background: rgba(255, 255, 255, 0.2); }
.banner__seta--anterior { left: 30px; }
.banner__seta--proxima { right: 30px; }
.banner__seta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Indicadores inferiores */
.banner__indicadores {
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  z-index: 5;   /* acima da camada de clique da arte (.banner__clique) */
  display: flex;
  justify-content: center;
  gap: 10px;
}
.banner__indicador {
  width: 34px; height: 3px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  transition: background var(--transicao), width var(--transicao);
}
.banner__indicador.ativo { background: #fff; width: 52px; }


/* ==========================================================================
   7. FAIXA DE BENEFÍCIOS
   ========================================================================== */
.beneficios {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.beneficios__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.beneficio {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 34px 30px;
  position: relative;
}
/* Divisão visual entre os itens */
.beneficio + .beneficio::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 52px;
  background: var(--cor-borda);
}
.beneficio__icone {
  flex-shrink: 0;
  width: 42px; height: 42px;
  color: var(--cor-destaque);
}
.beneficio__icone svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.2; }
.beneficio__titulo {
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.beneficio__texto {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin: 0;
}


/* ==========================================================================
   8. CARDS DE PRODUTO E VITRINES
   ========================================================================== */

/* --- Card --- */
.card-produto {
  position: relative;
  background: var(--cor-fundo);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transicao);
}
.card-produto:hover { transform: translateY(-4px); }

.card-produto__midia {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;              /* fotos quadradas, como na referência */
  overflow: hidden;
  background: var(--cor-fundo-claro);
}
.card-produto__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, opacity var(--transicao);
}
.card-produto__imagem-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.card-produto:hover .card-produto__imagem-hover { opacity: 1; }
.card-produto:hover .card-produto__midia img { transform: scale(1.05); }

.card-produto__selos {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Botão "Ver detalhes" que sobe no hover */
.card-produto__espiar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  padding: 11px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--cor-principal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform var(--transicao), background var(--transicao);
}
.card-produto:hover .card-produto__espiar { opacity: 1; transform: translateY(0); }
.card-produto__espiar:hover { background: var(--cor-principal); color: #fff; }

.card-produto__corpo {
  padding: 18px 4px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.card-produto__nome {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.card-produto__nome a:hover { color: var(--cor-destaque); }
.card-produto__variacao {
  font-size: 12px;
  color: var(--cor-texto-suave);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.card-produto__precos { margin-bottom: 4px; }
.card-produto__preco-antigo {
  font-size: 13px;
  color: var(--cor-texto-suave);
  text-decoration: line-through;
  margin-right: 8px;
}
.card-produto__preco {
  font-size: 19px;
  font-weight: 700;
  color: var(--cor-principal);
}
.card-produto__pix {
  font-size: 12px;
  color: var(--cor-sucesso);
  margin-bottom: 16px;
}
.card-produto__pix strong { font-weight: 700; }
.card-produto__acoes { margin-top: auto; padding-bottom: 6px; }
.card-produto__acoes .botao { width: 100%; min-height: 44px; padding: 12px 18px; }

.card-produto.esgotado .card-produto__midia img { filter: grayscale(1); opacity: 0.7; }

/* --- Vitrine em carrossel horizontal --- */
.vitrine { position: relative; }
.vitrine__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 30px) / 5);  /* 5 produtos visíveis */
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;              /* Firefox */
}
.vitrine__trilho::-webkit-scrollbar { display: none; }
.vitrine__trilho > * { scroll-snap-align: start; }

.vitrine__seta {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px; height: 46px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-suave);
  transition: background var(--transicao), color var(--transicao), opacity var(--transicao);
}
.vitrine__seta:hover { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); }
.vitrine__seta[disabled] { opacity: 0.3; cursor: default; }
.vitrine__seta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.vitrine__seta--anterior { left: -22px; }
.vitrine__seta--proxima { right: -22px; }

/* --- Grade de produtos (segunda vitrine, categoria, relacionados) --- */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 30px;
}
.grade-produtos--tres { grid-template-columns: repeat(3, 1fr); }

/* Filtros por categoria (abas) */
.filtros-abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.filtro-aba {
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 40px;
  color: var(--cor-texto-suave);
  background: transparent;
  transition: all var(--transicao);
}
.filtro-aba:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.filtro-aba.ativo {
  background: var(--cor-principal);
  border-color: var(--cor-principal);
  color: #fff;
}

.secao__rodape { text-align: center; margin-top: 54px; }


/* ==========================================================================
   9. CATEGORIAS
   ========================================================================== */
.grade-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.card-categoria {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cor-principal);
}
.card-categoria img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}
.card-categoria:hover img { transform: scale(1.07); }
.card-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.05) 55%);
  transition: background var(--transicao);
}
.card-categoria:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 60%); }
.card-categoria__conteudo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 30px 26px;
  text-align: center;
  color: #fff;
}
.card-categoria__nome {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
}
.card-categoria__link {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  display: inline-block;
  transition: opacity var(--transicao), transform var(--transicao);
}
.card-categoria:hover .card-categoria__link { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   10. BANNERS INTERMEDIÁRIOS
   ========================================================================== */
.banners-duplos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.banner-duplo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cor-principal);
}
.banner-duplo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;      /* ajustável por produtos.js (posicaoImagem) */
  transition: transform 0.9s ease;
}
.banner-duplo:hover img { transform: scale(1.05); }
.banner-duplo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.banner-duplo__conteudo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 30px;
}
.banner-duplo__chapeu {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.9;
}
.banner-duplo__titulo {
  font-size: 34px;
  color: #fff;
  margin-bottom: 22px;
}


/* ==========================================================================
   11. HISTÓRIA DA MARCA E BLOCOS INSTITUCIONAIS
   ========================================================================== */
.historia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.historia__imagem { aspect-ratio: 4 / 5; overflow: hidden; }
.historia__imagem img { width: 100%; height: 100%; object-fit: cover; }
.historia__texto { max-width: 520px; }
.historia__titulo { font-size: 42px; margin-bottom: 24px; }
.historia__texto p { font-size: 16px; color: var(--cor-texto); }
.historia__texto p + p { color: var(--cor-texto-suave); }
.historia__texto .botao { margin-top: 18px; }

/* Blocos alternados */
.bloco-institucional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.bloco-institucional + .bloco-institucional { margin-top: 80px; }
.bloco-institucional__imagem { aspect-ratio: 4 / 3; overflow: hidden; }
.bloco-institucional__imagem img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}
.bloco-institucional__imagem:hover img { transform: scale(1.04); }
/* Segundo bloco: texto à esquerda, imagem à direita */
.bloco-institucional--invertido .bloco-institucional__imagem { order: 2; }
.bloco-institucional--invertido .bloco-institucional__texto { order: 1; }
.bloco-institucional__titulo { font-size: 32px; margin-bottom: 18px; }
.bloco-institucional__texto p { color: var(--cor-texto-suave); font-size: 15px; margin-bottom: 26px; }


/* ==========================================================================
   12. INSTAGRAM
   ========================================================================== */
.instagram__cabecalho { text-align: center; margin-bottom: 40px; }
.instagram__perfil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--cor-texto);
  margin-top: 6px;
}
.instagram__perfil svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* o número de colunas vem do js/script.js, conforme a quantidade de posts */
.instagram__grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas-instagram, 6), 1fr);
  gap: 14px;
}
.instagram__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
  background: var(--cor-fundo-claro);
}
.instagram__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.instagram__item:hover img { transform: scale(1.08); }
.instagram__item::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--transicao);
}
.instagram__item:hover::after { opacity: 1; }
.instagram__item svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 2;
  width: 26px; height: 26px;
  stroke: #fff; fill: none; stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--transicao), transform var(--transicao);
}
.instagram__item:hover svg { opacity: 1; transform: translate(-50%, -50%) scale(1); }


/* ==========================================================================
   13. NEWSLETTER
   ========================================================================== */
.newsletter { background: var(--cor-fundo-claro); text-align: center; }
.newsletter__titulo { font-size: 36px; margin-bottom: 12px; }
.newsletter__descricao { color: var(--cor-texto-suave); max-width: 520px; margin: 0 auto 30px; }
.newsletter__formulario {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.newsletter__campo {
  flex: 1;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--cor-texto);
}
.newsletter__campo:focus { outline: none; border-color: var(--cor-destaque); }
.newsletter__campo.invalido { border-color: var(--cor-alerta); }
.newsletter__aceite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}
.newsletter__aceite input { accent-color: var(--cor-destaque); width: 15px; height: 15px; }
.newsletter__mensagem {
  margin-top: 16px;
  font-size: 14px;
  min-height: 22px;
}
.newsletter__mensagem.sucesso { color: var(--cor-sucesso); }
.newsletter__mensagem.erro { color: var(--cor-alerta); }


/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */
.rodape {
  background: var(--cor-principal);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 70px;
  font-size: 14px;
}
.rodape a { color: rgba(255, 255, 255, 0.75); }
.rodape a:hover { color: var(--cor-destaque); }

.rodape__colunas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
}
.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.rodape__lista li + li { margin-top: 10px; }

.rodape__marca .logo__nome { color: #fff; font-size: 24px; }
.rodape__marca .logo__slogan { color: rgba(255,255,255,0.55); }
.rodape__sobre { margin-top: 18px; max-width: 300px; line-height: 1.7; }

.rodape__redes { display: flex; gap: 12px; margin-top: 22px; }
.rodape__redes a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition: background var(--transicao), border-color var(--transicao);
}
.rodape__redes a:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }
.rodape__redes svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.rodape__contato li { display: flex; gap: 10px; align-items: flex-start; }
.rodape__contato li + li { margin-top: 12px; }
.rodape__contato svg { width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; stroke: var(--cor-destaque); fill: none; stroke-width: 1.5; }

/* Bandeiras de pagamento e envio */
.rodape__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.selo-pagamento {
  height: 30px;
  min-width: 48px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.rodape__seguranca {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.rodape__seguranca svg { width: 16px; height: 16px; stroke: var(--cor-sucesso); fill: none; stroke-width: 1.6; }

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.rodape__base-links { display: flex; gap: 20px; }


/* ==========================================================================
   15. CARRINHO LATERAL (minicarrinho)
   ========================================================================== */
.gaveta-carrinho {
  position: fixed;
  top: 0; right: 0;
  width: 430px;
  max-width: 92vw;
  height: 100%;
  background: var(--cor-fundo);
  z-index: calc(var(--z-gaveta) + 1);
  transform: translateX(100%);
  transition: transform var(--transicao);
  display: flex;
  flex-direction: column;
}
.gaveta-carrinho.aberta { transform: translateX(0); }

.gaveta-carrinho__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--cor-borda);
}
.gaveta-carrinho__titulo {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gaveta-carrinho__itens {
  flex: 1;
  overflow-y: auto;
  padding: 6px 26px;
}

.item-carrinho {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.item-carrinho__imagem {
  width: 84px; height: 84px;
  object-fit: cover;
  background: var(--cor-fundo-claro);
}
.item-carrinho__nome { font-family: var(--fonte-titulo); font-size: 15px; margin-bottom: 2px; }
.item-carrinho__variacao { font-size: 12px; color: var(--cor-texto-suave); margin-bottom: 10px; }
.item-carrinho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.item-carrinho__preco { font-size: 15px; font-weight: 700; }
.item-carrinho__remover {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  text-decoration: underline;
}
.item-carrinho__remover:hover { color: var(--cor-alerta); }

/* Seletor de quantidade */
.seletor-quantidade {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  height: 36px;
}
.seletor-quantidade button {
  width: 32px; height: 100%;
  font-size: 16px;
  color: var(--cor-texto-suave);
  transition: color var(--transicao);
}
.seletor-quantidade button:hover { color: var(--cor-principal); }
.seletor-quantidade input {
  width: 38px;
  height: 100%;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  color: var(--cor-texto);
  background: transparent;
  -moz-appearance: textfield;
}
.seletor-quantidade input::-webkit-outer-spin-button,
.seletor-quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.carrinho-vazio {
  text-align: center;
  padding: 70px 20px;
  color: var(--cor-texto-suave);
}
.carrinho-vazio svg { width: 46px; height: 46px; stroke: var(--cor-borda-forte); fill: none; stroke-width: 1.2; margin: 0 auto 18px; }

/* Rodapé do carrinho: cupom, CEP, totais */
.gaveta-carrinho__rodape {
  border-top: 1px solid var(--cor-borda);
  padding: 20px 26px 26px;
  background: var(--cor-fundo-claro);
}
.carrinho-campo {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.carrinho-campo input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--cor-texto);
}
.carrinho-campo input:focus { outline: none; border-color: var(--cor-destaque); }
.carrinho-campo button {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cor-principal);
  background: var(--cor-principal);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--raio);
  transition: background var(--transicao);
}
.carrinho-campo button:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); }
.carrinho-aviso { font-size: 12px; min-height: 18px; margin-bottom: 8px; }
.carrinho-aviso.ok { color: var(--cor-sucesso); }
.carrinho-aviso.erro { color: var(--cor-alerta); }

.carrinho-totais { margin: 14px 0 16px; }
.carrinho-totais__linha {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
}
.carrinho-totais__linha.desconto { color: var(--cor-sucesso); }
.carrinho-totais__linha.total {
  border-top: 1px solid var(--cor-borda-forte);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-principal);
}
.carrinho-totais__pix { font-size: 12px; color: var(--cor-sucesso); text-align: right; }

/* Formas de pagamento — texto, não seletor.
   O valor da parcela é decidido na tela da InfinitePay, então o site não
   promete número que não controla. */
.carrinho-pagamento {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: var(--cor-fundo-claro);
  border-radius: var(--raio);
}
.carrinho-pagamento__titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin: 0 0 8px;
}
.carrinho-pagamento__linha {
  margin: 0 0 5px;
  font-size: 14px;
  color: var(--cor-texto);
}
.carrinho-pagamento__nota {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}
.gaveta-carrinho__botoes { display: grid; gap: 10px; }


/* ==========================================================================
   16. PÁGINA DE PRODUTO
   ========================================================================== */
.migalhas {
  padding: 22px 0;
  font-size: 12px;
  color: var(--cor-texto-suave);
  letter-spacing: 0.04em;
}
.migalhas ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.migalhas li + li::before { content: "/"; margin-right: 8px; color: var(--cor-borda-forte); }

.produto-topo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding-bottom: 70px;
}

/* Galeria */
.galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cor-fundo-claro);
  cursor: zoom-in;
  margin-bottom: 14px;
}
.galeria__principal img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.galeria__principal.com-zoom img { transform: scale(2); }
.galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.galeria__miniatura {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--cor-fundo-claro);
  padding: 0;
  transition: border-color var(--transicao);
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura.ativa { border-color: var(--cor-principal); }

/* Coluna de informações */
.produto-info__nome { font-size: 38px; margin-bottom: 12px; }
.produto-info__avaliacao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-bottom: 22px;
}
.estrelas { color: var(--cor-destaque); letter-spacing: 2px; font-size: 15px; }

.produto-info__precos {
  padding: 20px 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 26px;
}
.produto-info__preco-antigo {
  font-size: 15px;
  color: var(--cor-texto-suave);
  text-decoration: line-through;
  display: block;
}
.produto-info__preco {
  font-size: 34px;
  font-weight: 700;
  color: var(--cor-principal);
  line-height: 1.2;
}
.produto-info__pix { color: var(--cor-sucesso); font-size: 15px; margin-top: 4px; }
.produto-info__parcelas { font-size: 13px; color: var(--cor-texto-suave); }

.campo-grupo { margin-bottom: 22px; }
.campo-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.opcoes-variacao { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao-variacao {
  padding: 11px 20px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  font-size: 13px;
  background: #fff;
  transition: all var(--transicao);
}
.opcao-variacao:hover { border-color: var(--cor-principal); }
.opcao-variacao.ativa { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

.produto-compra {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.produto-compra .seletor-quantidade { height: 50px; }
.produto-compra .seletor-quantidade button { width: 40px; }
.produto-compra .botao { min-height: 50px; }

.botao-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.botao-whatsapp:hover { background: #1da851; border-color: #1da851; }
.botao-whatsapp svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.produto-frete { margin-top: 26px; }
.produto-vantagens {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cor-borda);
  display: grid;
  gap: 12px;
  font-size: 13px;
  color: var(--cor-texto-suave);
}
.produto-vantagens li { display: flex; gap: 10px; align-items: center; }
.produto-vantagens svg { width: 18px; height: 18px; stroke: var(--cor-destaque); fill: none; stroke-width: 1.4; flex-shrink: 0; }

/* Abas de conteúdo (descrição, características…) */
.abas-conteudo { padding: 60px 0; border-top: 1px solid var(--cor-borda); }
.abas-navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 34px;
}
.aba-botao {
  padding: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transicao), border-color var(--transicao);
}
.aba-botao:hover { color: var(--cor-principal); }
.aba-botao.ativa { color: var(--cor-principal); border-bottom-color: var(--cor-destaque); }
.aba-painel { display: none; max-width: 780px; }
.aba-painel.ativo { display: block; animation: aparecer 0.4s ease; }
.aba-painel ul { display: grid; gap: 10px; }
.aba-painel ul li { position: relative; padding-left: 20px; color: var(--cor-texto-suave); }
.aba-painel ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 1px;
  background: var(--cor-destaque);
}

/* Perguntas frequentes (acordeão) */
.faq-item { border-bottom: 1px solid var(--cor-borda); }
.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  color: var(--cor-principal);
}
.faq-pergunta .sinal {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--cor-destaque);
  transition: transform var(--transicao);
}
.faq-pergunta[aria-expanded="true"] .sinal { transform: rotate(45deg); }
.faq-resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao);
  color: var(--cor-texto-suave);
}
.faq-resposta.aberta { max-height: 400px; }
.faq-resposta p { padding-bottom: 20px; margin: 0; }


/* ==========================================================================
   17. PÁGINA DE CATEGORIA
   ========================================================================== */
.categoria-cabecalho {
  text-align: center;
  padding: 46px 0 40px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 40px;
}
.categoria-cabecalho__titulo { font-size: 44px; margin-bottom: 12px; }
.categoria-cabecalho__descricao { color: var(--cor-texto-suave); max-width: 640px; margin: 0 auto 10px; }
.categoria-cabecalho__contagem { font-size: 13px; color: var(--cor-texto-suave); letter-spacing: 0.06em; }

.categoria-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 50px;
  align-items: start;
  padding-bottom: 80px;
}

/* Barra de filtros lateral */
.filtros { position: sticky; top: calc(var(--altura-cabecalho) + 20px); }
.filtros__grupo { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--cor-borda); }
.filtros__titulo {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.filtros__opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cor-texto);
  cursor: pointer;
  padding: 5px 0;
}
.filtros__opcao input { accent-color: var(--cor-destaque); width: 15px; height: 15px; }
.filtros__faixa-preco { display: flex; align-items: center; gap: 10px; }
.filtros__faixa-preco input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  font-family: inherit;
  font-size: 13px;
}

.barra-ordenacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.barra-ordenacao select {
  height: 42px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--cor-texto);
  appearance: none;
}
.barra-ordenacao select:focus { outline: none; border-color: var(--cor-destaque); }

.botao-filtros-mobile { display: none; }

.sem-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--cor-texto-suave);
}
.paginacao { text-align: center; margin-top: 54px; }


/* ==========================================================================
   18. PÁGINA DE CARRINHO
   ========================================================================== */
.pagina-carrinho { padding: 46px 0 90px; }
.carrinho-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 50px;
  align-items: start;
}
.carrinho-tabela__cabecalho {
  display: grid;
  grid-template-columns: 100px 1fr 130px 120px 40px;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cor-borda-forte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.carrinho-linha {
  display: grid;
  grid-template-columns: 100px 1fr 130px 120px 40px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.carrinho-linha img { width: 100px; height: 100px; object-fit: cover; background: var(--cor-fundo-claro); }
.carrinho-linha__nome { font-family: var(--fonte-titulo); font-size: 17px; margin-bottom: 4px; }
.carrinho-linha__variacao { font-size: 12px; color: var(--cor-texto-suave); }
.carrinho-linha__total { font-size: 17px; font-weight: 700; text-align: right; }
.carrinho-linha__remover {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cor-texto-suave);
  font-size: 20px;
  border-radius: 50%;
  transition: background var(--transicao), color var(--transicao);
}
.carrinho-linha__remover:hover { background: var(--cor-fundo-claro); color: var(--cor-alerta); }

.resumo-pedido {
  background: var(--cor-fundo-claro);
  padding: 30px 28px;
  position: sticky;
  top: calc(var(--altura-cabecalho) + 20px);
}
.resumo-pedido__titulo {
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}


/* ==========================================================================
   19. ELEMENTOS FLUTUANTES
   ========================================================================== */

/* Botão de WhatsApp */
.botao-whatsapp-flutuante {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: var(--z-flutuante);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
  transition: transform var(--transicao);
}
.botao-whatsapp-flutuante:hover { transform: scale(1.08); color: #fff; }
.botao-whatsapp-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* Voltar ao topo */
.botao-topo {
  position: fixed;
  right: 22px; bottom: 90px;
  z-index: var(--z-flutuante);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cor-principal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transicao);
}
.botao-topo.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.botao-topo:hover { background: var(--cor-destaque); color: #fff; }
.botao-topo svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Mensagem "Adicionado ao carrinho" */
.aviso-flutuante {
  position: fixed;
  top: 100px; right: 22px;
  z-index: 1200;
  background: var(--cor-principal);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--raio);
  box-shadow: var(--sombra-media);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(20px);
  visibility: hidden;
  transition: all var(--transicao);
}
.aviso-flutuante.visivel { opacity: 1; transform: translateX(0); visibility: visible; }
.aviso-flutuante svg { width: 18px; height: 18px; stroke: var(--cor-destaque); fill: none; stroke-width: 2; }

/* Aviso de cookies */
.aviso-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  background: var(--cor-principal);
  color: rgba(255, 255, 255, 0.85);
  padding: 18px 0;
  font-size: 13px;
  transform: translateY(100%);
  transition: transform var(--transicao);
}
.aviso-cookies.visivel { transform: translateY(0); }
.aviso-cookies .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.aviso-cookies a { color: var(--cor-destaque); text-decoration: underline; }
.aviso-cookies .botao { min-height: 40px; padding: 10px 26px; }


/* ==========================================================================
   20. ANIMAÇÕES DE ENTRADA
   ========================================================================== */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Elementos com [data-animar] entram suavemente ao rolar (ver script.js) */
[data-animar] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animar].visivel { opacity: 1; transform: translateY(0); }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animar] { opacity: 1; transform: none; }
}

/* ==========================================================================
   DADOS DE ENTREGA (carrinho)
   Aparece depois que o cliente calcula o frete.
   ========================================================================== */
.dados-entrega {
  margin: 22px 0 6px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-borda);
}
.dados-entrega__titulo {
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--cor-texto);
}
.dados-entrega .campo { margin-bottom: 12px; }
.dados-entrega .campo label {
  display: block;
  font-size: 12px;
  color: var(--cor-texto-suave);
  margin-bottom: 5px;
}
.dados-entrega .campo input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--cor-borda);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--cor-texto);
}
.dados-entrega .campo input:focus {
  outline: none;
  border-color: var(--cor-destaque);
}
.campo-duplo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.dados-entrega__cidade {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}
.dados-entrega__cidade:empty { display: none; }

/* Dica ao lado do nome do campo — substitui o texto de exemplo dentro da
   caixa, que o cliente confundia com campo já preenchido. */
.dados-entrega .campo label .campo__dica {
  text-transform: none;
  letter-spacing: 0;
  color: var(--cor-texto-suave);
  opacity: .75;
  font-size: 11px;
}