/* ============================================================
   Vitrine Pública - Mobile First
   Paleta: terracota / dourado / off-white
   ============================================================ */
:root {
  --cor-terracota: #C1652F;
  --cor-terracota-escura: #A34F22;
  --cor-dourado: #E8A33D;
  --cor-off-white: #FDF8F3;
  --cor-texto: #3B2A1F;
  --cor-texto-suave: #8A7A6C;
  --cor-borda: #F0E4D6;
  --raio: 18px;
  --raio-peq: 12px;
  --sombra: 0 6px 20px rgba(59, 42, 31, 0.10);
  --sombra-flutuante: 0 8px 24px color-mix(in srgb, var(--cor-terracota) 35%, transparent);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--cor-off-white);
  color: var(--cor-texto);
  line-height: 1.5;
}

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

/* ---------- Preloader (tela cheia, some quando a página termina de carregar) ---------- */
.preloader-vitrine {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 1;
  transition: opacity .35s ease;
}
.preloader-vitrine.preloader-escondido { opacity: 0; pointer-events: none; }
.preloader-vitrine i { font-size: 2.4rem; color: var(--cor-terracota); }
.preloader-vitrine span { font-size: .82rem; font-weight: 600; color: var(--cor-terracota); opacity: .8; }

/* ---------- Animação de entrada (page load) ---------- */
@keyframes entrada-suave {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rodape-vitrine { animation: entrada-suave .5s ease both; }
.produto-detalhe { animation: entrada-suave .5s ease .05s both; }

/* .secao-categoria (que contém o modal de descrição) não anima: tanto
   "transform" quanto "opacity" animados criam um contexto de
   empilhamento novo, o que prendia o modal (z-index alto) dentro dele
   e o fazia perder para o header/rodapé. Os cards já animam individualmente. */

.cartao-produto { animation: entrada-suave .45s ease both; }
.cartao-produto:nth-child(1) { animation-delay: .03s; }
.cartao-produto:nth-child(2) { animation-delay: .07s; }
.cartao-produto:nth-child(3) { animation-delay: .11s; }
.cartao-produto:nth-child(4) { animation-delay: .15s; }
.cartao-produto:nth-child(5) { animation-delay: .19s; }
.cartao-produto:nth-child(6) { animation-delay: .23s; }
.cartao-produto:nth-child(7) { animation-delay: .27s; }
.cartao-produto:nth-child(8) { animation-delay: .31s; }

@media (prefers-reduced-motion: reduce) {
  .rodape-vitrine, .produto-detalhe, .cartao-produto {
    animation: none;
  }
}

/* ---------- Faixa de pré-visualização de skin ---------- */
.faixa-preview-skin {
  background: var(--cor-texto);
  color: #fff;
  text-align: center;
  font-size: .85rem;
  padding: 10px 16px;
}
.faixa-preview-skin a { color: #fff; text-decoration: underline; font-weight: 700; margin-left: 8px; }

/* Trocador rápido de layout dentro da própria pré-visualização — evita
   ter que voltar pro admin e clicar em "Ver" de novo a cada troca. */
.faixa-preview-layout { text-align: left; }
.faixa-preview-layout-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  text-align: center;
}
.faixa-preview-layout-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
/* Especificidade extra (.faixa-preview-layout-links .faixa-preview-layout-link,
   não só .faixa-preview-layout-link) de propósito: precisa vencer a regra
   genérica ".faixa-preview-skin a" (sublinhado + margin-left), que também
   bateria nesses links por eles estarem dentro de .faixa-preview-skin. */
.faixa-preview-layout-links .faixa-preview-layout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .78rem;
  padding: 5px 10px;
  margin-left: 0;
  border-radius: 20px;
  transition: background .15s ease;
}
.faixa-preview-layout-links .faixa-preview-layout-link:hover { background: rgba(255, 255, 255, .2); }
.faixa-preview-layout-links .faixa-preview-layout-link.ativo { background: var(--cor-terracota); font-weight: 800; }

/* ---------- Cabeçalho da loja (barra fina, fixa ao rolar) ---------- */
.cabecalho-loja {
  background: linear-gradient(135deg, var(--cor-terracota), var(--cor-dourado));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  transition: opacity .2s ease;
}
.cabecalho-loja.rolado { opacity: .93; }
.cabecalho-linha {
  max-width: 1280px;
  margin: 0 auto;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.cabecalho-marca { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; }
.nome-loja-texto { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }

.logo-loja-caixa {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .8);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .18);
}
.logo-loja-caixa::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 2px dotted rgba(0, 0, 0, .16);
  border-radius: 9px;
  pointer-events: none;
}
.logo-loja {
  max-height: 50px;
  width: auto;
  display: block;
}

/* ---------- Navegação de categorias (botões com fundo escuro translúcido —
   garante contraste do texto branco mesmo em skins de degradê claro,
   onde texto branco puro por cima do gradiente ficava apagado) ---------- */
.nav-categorias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* O código dos filtros de categoria fica mantido (pra religar no
   futuro), só oculto por ora — como .nav-categorias tem display:flex
   via classe, precisa dessa regra explícita pra [hidden] realmente
   esconder (o atributo sozinho perde pra especificidade da classe). */
.nav-categorias[hidden] { display: none; }
.aba-categoria {
  flex-shrink: 0;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  font-family: var(--fonte);
  cursor: pointer;
  transition: background .2s ease;
}
.aba-categoria:hover { background: rgba(0, 0, 0, .55); }
.aba-categoria.ativa { background: rgba(0, 0, 0, .65); font-weight: 800; }

/* ---------- Menu principal do header: Início (ícone), Favoritos e
   Sobre (só se configurado) — substitui as antigas abas de categoria
   como navegação sempre visível no header. ---------- */
.nav-menu-principal {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
/* Abaixo de 560px o texto some sozinho, sobrando só os ícones — mantém o
   menu sempre alinhado à direita, na mesma linha da logo/marca, em vez de
   quebrar pra uma segunda linha (ver .cabecalho-linha, flex-wrap:wrap
   continua como rede de segurança pra logos muito largas). */
@media (max-width: 560px) {
  .texto-botao-cabecalho { display: none; }
  .botao-categorias-cabecalho,
  .botao-sobre-cabecalho {
    width: 34px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
}
.botao-home-cabecalho {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, .45);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.botao-home-cabecalho:hover { background: rgba(0, 0, 0, .55); }
.botao-sobre-cabecalho {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 34px;
  gap: 6px;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  font-family: var(--fonte);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.botao-sobre-cabecalho:hover { background: rgba(0, 0, 0, .55); }

/* Dropdown "Categorias": abre no hover (desktop) ou no clique (classe
   .aberto, tocado via JS — necessário no touch, onde hover não é
   confiável). .nav-categorias vira o painel do dropdown aqui — as
   antigas pills inline foram substituídas por este menu, então essas
   regras (escopadas em .menu-categorias-cabecalho) não têm efeito no
   grid de blocos de categoria do layout Blocos (usa outra classe). */
.menu-categorias-cabecalho { position: relative; flex-shrink: 0; }
.botao-categorias-cabecalho {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 34px;
  gap: 6px;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  font-family: var(--fonte);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.botao-categorias-cabecalho:hover { background: rgba(0, 0, 0, .55); }
/* top:100% SEM margin-top: o painel encosta direto no botão, zero
   distância entre os dois. Qualquer margem externa aqui recria uma
   faixa que não pertence a elemento nenhum do dropdown — o cursor
   perde o :hover ao atravessá-la e o menu fecha antes de dar tempo de
   clicar num link. O respiro visual vem de padding-top (por dentro da
   própria caixa hoverável, não por fora). */
.menu-categorias-cabecalho .nav-categorias {
  position: absolute;
  top: 100%;
  /* Ancorado pela DIREITA (não left:0): o botão de Categorias agora mora
     perto da borda direita do header (menu mobile alinhado à direita, ver
     .nav-menu-principal). Com left:0 o dropdown (min-width 200px) abria
     pra fora da tela — mesmo fechado (opacity:0/visibility:hidden, que
     não tira do fluxo de overflow), isso empurrava a largura de scroll de
     todo o body, distorcendo modal e botões fixos que dependiam de
     100vw/100%. Ancorando pela direita, ele abre pra dentro da tela sempre. */
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  padding: 14px 8px 8px;
  min-width: 200px;
  max-width: calc(100vw - 40px);
  max-height: 60vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}
.menu-categorias-cabecalho:hover .nav-categorias,
.menu-categorias-cabecalho.aberto .nav-categorias {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menu-categorias-cabecalho .aba-categoria {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--cor-texto);
  text-shadow: none;
  padding: 9px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .88rem;
  font-family: var(--fonte);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.menu-categorias-cabecalho .aba-categoria:hover { background: var(--cor-off-white); }
.menu-categorias-cabecalho .aba-categoria.ativa { background: var(--cor-off-white); color: var(--cor-terracota-escura); font-weight: 800; }

/* ---------- Slideshow (recurso Premium) ---------- */
.vitrine-slideshow-wrapper {
  max-width: 1280px;
  margin: 20px auto 0;
  padding: 0 20px;
}
.vitrine-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio, 14px);
}
.vitrine-slideshow-trilho {
  display: flex;
  transition: transform .5s ease;
}
.vitrine-slideshow-slide {
  flex: 0 0 100%;
  aspect-ratio: 21 / 8;
  border-radius: var(--raio, 14px);
  overflow: hidden;
}
.vitrine-slideshow-slide img,
.vitrine-slideshow-slide a {
  width: 100%;
  height: 100%;
  display: block;
}
.vitrine-slideshow-slide img { object-fit: cover; }

.vitrine-slideshow-seta {
  position: absolute;
  top: 50%;
  /* Sem isso, no modo fade o slide ativo (z-index:1, ver bloco de
     transição mais abaixo) pintava por cima da seta — z-index explícito
     sempre vence um elemento sem z-index, mesmo vindo depois no HTML. */
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .85);
  color: #3B2A1F;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: background .2s ease;
}
.vitrine-slideshow-seta:hover { background: #fff; }
.vitrine-slideshow-seta-esq { left: 32px; }
.vitrine-slideshow-seta-dir { right: 32px; }

.vitrine-slideshow-bullets {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 2; /* mesmo motivo da seta acima: fica por cima do slide ativo no modo fade */
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.vitrine-slideshow-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.vitrine-slideshow-bullet.ativo { background: #fff; transform: scale(1.3); }

.vitrine-slideshow-miniaturas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.vitrine-slideshow-miniatura {
  width: var(--slideshow-miniatura-tamanho, 70px);
  height: var(--slideshow-miniatura-tamanho, 70px);
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: border-color .2s ease, transform .15s ease;
}
.vitrine-slideshow-miniatura:hover { transform: translateY(-2px); }
.vitrine-slideshow-miniatura.ativa { border-color: var(--cor-terracota); }
.vitrine-slideshow-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .vitrine-slideshow-slide { aspect-ratio: 16 / 10; }
  .vitrine-slideshow-seta { width: 32px; height: 32px; font-size: 1.1rem; }
  .vitrine-slideshow-seta-esq { left: 14px; }
  .vitrine-slideshow-seta-dir { right: 14px; }
}

/* ---------- Transição Fade (alternativa ao Slide padrão) ----------
   Escopado inteiramente em [data-transicao="fade"] — não toca em nenhuma
   regra do modo "slide" (padrão), que continua com transform+translateX
   normalmente. No fade, os slides ficam empilhados (position:absolute) e
   só a opacidade troca; o próprio .vitrine-slideshow-slide.ativo mantém
   o aspect-ratio real (é ele quem dá altura ao trilho), os outros ficam
   com position:absolute só pra não empurrar layout. */
.vitrine-slideshow[data-transicao="fade"] .vitrine-slideshow-trilho {
  display: block;
  position: relative;
  transition: none;
}
.vitrine-slideshow[data-transicao="fade"] .vitrine-slideshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.vitrine-slideshow[data-transicao="fade"] .vitrine-slideshow-slide.ativo {
  position: relative;
  opacity: 1;
  z-index: 1;
}

/* ---------- Título padrão de seção da vitrine (Destaques, Recentes, futuras) ---------- */
.vitrine-secao-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  margin: 0 0 16px;
  color: var(--cor-texto);
}
.vitrine-secao-titulo i { color: #C9A227; }
.vitrine-secao-titulo-centralizado { justify-content: center; }

/* ---------- Layout Vitrine Instagram: carrossel por categoria ---------- */
.secao-carrossel-instagram {
  padding: 20px 0 4px 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.secao-carrossel-instagram .vitrine-secao-titulo { padding-right: 20px; }

.carrossel-instagram {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  padding-right: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.cartao-instagram {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  scroll-snap-align: start;
}
.cartao-instagram-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cor-texto);
  text-decoration: none;
}
.cartao-instagram .botao-favoritar { top: -4px; right: 6px; }

/* .cartao-instagram-imagem NÃO recorta (sem overflow:hidden) — só serve
   de âncora pro badge "Oferta" no canto. Quem recorta em círculo é o
   .cartao-instagram-imagem-recorte, por dentro. Antes o recorte e a
   âncora eram o mesmo elemento, e o círculo cortava o badge posicionado
   no canto (bottom/right ficava fora da área visível do círculo). */
.cartao-instagram-imagem {
  position: relative;
  width: 168px;
  height: 168px;
}
.cartao-instagram-imagem-recorte {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cor-off-white);
  border: 3px solid var(--cor-dourado);
  padding: 3px;
  background-clip: content-box;
  box-sizing: border-box;
}
.cartao-instagram-imagem-recorte img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cartao-instagram-imagem-vazia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 50%;
}

.cartao-instagram-oferta {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: .58rem;
  padding: 3px 8px;
  z-index: 2;
}

.cartao-instagram-nome {
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao-instagram-preco {
  font-size: .78rem;
  font-weight: 800;
  color: var(--cor-terracota-escura);
  text-align: center;
}
.cartao-instagram-preco .etiqueta-preco-riscado { display: block; font-size: .68rem; }

/* ---------- Destaques (recurso Premium) ---------- */
.secao-destaques {
  padding: 28px 20px 4px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.grade-destaques {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.grade-destaques::-webkit-scrollbar { height: 6px; }
.grade-destaques::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 10px; }

.destaque-item {
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
}
.destaque-item::before {
  content: '\2728 Destaque';
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #F5C518, #C9A227);
  color: #3D2F05;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.destaque-item .cartao-produto {
  border: 2px solid #E8C766;
  box-shadow: 0 8px 22px rgba(201, 162, 39, .22);
}

/* ---------- Layout: Blocos por Categoria (recurso Premium) ---------- */
.cabecalho-linha-centro { justify-content: center; }

.secao-blocos-categoria {
  padding: 24px 20px 0;
  max-width: 1280px;
  margin: 0 auto;
}
/* max fixo (não 1fr) em vez de auto-fit: com poucas categorias, 1fr
   fazia cada bloco esticar pra preencher o espaço todo (2 categorias
   viravam 2 blocos gigantes). Com minmax(150px, 220px) os blocos nunca
   passam de ~220px, dando uns 4-5 por linha em telas largas — o
   mesmo tamanho independente de ter 2 ou 20 categorias. */
.blocos-categoria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 220px));
  justify-content: start;
  gap: 14px;
}
.bloco-categoria {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--raio, 14px);
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--cor-off-white);
  color: transparent;
  transition: transform .15s ease;
}
.bloco-categoria::after { content: none; }
.bloco-categoria:hover { transform: translateY(-3px); }
.bloco-categoria.ativa { outline: 3px solid var(--cor-terracota); outline-offset: -3px; }
.bloco-categoria-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloco-categoria-imagem-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--cor-terracota), var(--cor-dourado));
}
.bloco-categoria-nome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 46px 8px 10px;
  /* Gradiente "easing" (muitos stops seguindo uma curva, não 2-3 retos):
     um fade linear de opacidade sempre cria uma "borda" visível onde os
     olhos percebem a transição — sensibilidade ao contraste não é
     linear. Com stops mais próximos perto do topo (onde a opacidade já
     está baixa) e mais espaçados perto da base, o olho não pega o corte. */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .6) 0%,
    rgba(0, 0, 0, .57) 8%,
    rgba(0, 0, 0, .49) 16%,
    rgba(0, 0, 0, .39) 24%,
    rgba(0, 0, 0, .29) 33%,
    rgba(0, 0, 0, .2) 42%,
    rgba(0, 0, 0, .13) 51%,
    rgba(0, 0, 0, .08) 61%,
    rgba(0, 0, 0, .04) 72%,
    rgba(0, 0, 0, .015) 85%,
    transparent 100%
  );
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
}

/* ---------- Layout: Editorial (recurso Premium) ---------- */
.cabecalho-loja-editorial { text-align: center; }
.cabecalho-editorial-marca { display: flex; justify-content: center; padding: 14px 20px 8px; text-decoration: none; color: inherit; }
.nome-loja-texto-editorial { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.cabecalho-loja-editorial .nav-menu-principal { justify-content: center; padding: 0 20px 12px; }
.nav-categorias-editorial { justify-content: center; padding: 0 20px 12px; }

.secao-destaques-hero .grade-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  overflow: visible;
}
.secao-destaques-hero .destaque-item { flex: none; width: auto; }

.grade-produtos-densa { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

/* ---------- Seções de categoria ---------- */
.secao-categoria {
  padding: 20px 20px 6px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.grade-produtos {
  display: grid;
  /* Colunas fixas por breakpoint (não auto-fit/minmax): com auto-fit, o
     número de colunas que cabe varia conforme a largura exata do
     container, e como as faixas não têm unidade fr, elas não esticam pra
     preencher — sobra um vão vazio na última linha e o item seguinte
     quebra sozinho pra uma nova linha (ver comentário no card do produto). */
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1080px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .grade-produtos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grade-produtos { grid-template-columns: 1fr; } }

/* ---------- Layout Cardápio: linhas compactas ---------- */
.lista-produtos-compacta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}

.linha-produto-lista {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--raio-peq);
  box-shadow: var(--sombra);
  padding: 10px 14px;
  animation: entrada-suave .4s ease both;
}

.linha-produto-lista-imagem {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cor-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.linha-produto-lista-imagem img { width: 100%; height: 100%; object-fit: cover; }
.linha-produto-lista-imagem-vazia { font-size: 1.6rem; }

.linha-produto-lista-info { flex: 1; min-width: 0; }
.linha-produto-lista-info h3 { margin: 0 0 2px; font-size: .95rem; font-weight: 700; }
.linha-produto-lista-info h3 a { color: var(--cor-texto); }
.linha-produto-lista-descricao {
  margin: 0;
  font-size: .8rem;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-produto-lista-preco-acao {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.linha-produto-lista-preco {
  font-weight: 800;
  color: var(--cor-terracota-escura);
  font-size: .92rem;
  text-align: right;
  line-height: 1.3;
}
.linha-produto-lista-preco .etiqueta-preco-riscado { display: block; }

.botao-lista-whatsapp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.botao-lista-whatsapp:hover { transform: scale(1.08); }

@media (max-width: 480px) {
  .linha-produto-lista-descricao { display: none; }
}

/* ---------- Layout Mosaico: grid tipo Pinterest (colunas CSS) ---------- */
.mosaico-produtos {
  columns: 3 280px;
  column-gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}
.mosaico-produtos .cartao-produto {
  break-inside: avoid;
  margin-bottom: 18px;
}
/* Sem isso a imagem fica quadrada (herdado do card padrão) — no
   mosaico ela precisa manter a proporção natural pra criar a
   altura variável que dá o efeito "Pinterest". */
.mosaico-produtos .cartao-produto-imagem,
.mosaico-produtos .cartao-produto-imagem-vazia {
  aspect-ratio: auto;
}

@media (max-width: 700px) {
  .mosaico-produtos { columns: 2 200px; }
}
@media (max-width: 420px) {
  .mosaico-produtos { columns: 1; }
}

/* ---------- Layout Minimalista: linhas grandes, sem sombra, tipografia editorial ---------- */
.secao-categoria-minimalista { max-width: 900px; padding-top: 48px; }

.vitrine-secao-titulo-minimalista {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cor-texto-suave);
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}

.lista-produtos-minimalista {
  display: flex;
  flex-direction: column;
}

.cartao-minimalista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.cartao-minimalista:first-child { padding-top: 0; }

.cartao-minimalista-imagem-caixa { position: relative; width: 100%; }
.cartao-minimalista-imagem {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cor-off-white);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio, 10px);
  overflow: hidden;
}
.cartao-minimalista-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-minimalista-imagem-vazia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.cartao-minimalista-info { text-align: center; }
.cartao-minimalista-info h3 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 400; letter-spacing: .01em; }
.cartao-minimalista-info h3 a { color: var(--cor-texto); }
.cartao-minimalista-descricao {
  margin: 0 auto 16px;
  max-width: 480px;
  color: var(--cor-texto-suave);
  font-size: .92rem;
  line-height: 1.7;
}
.cartao-minimalista-preco {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cor-terracota-escura);
  margin-bottom: 18px;
}
.cartao-minimalista-botao { margin: 0 auto; }

@media (min-width: 700px) {
  .cartao-minimalista { flex-direction: row; align-items: center; gap: 40px; }
  .cartao-minimalista-imagem-caixa { width: 45%; flex-shrink: 0; }
  .cartao-minimalista-info { text-align: left; }
  .cartao-minimalista-descricao { margin-left: 0; }
  .cartao-minimalista-botao { margin: 0; }

  /* Visual "zig-zag": alterna a imagem de lado a cada linha (2ª, 4ª, 6ª...
     à direita), separadas pelo border-bottom que cada .cartao-minimalista
     já tem — dá o efeito de páginas de revista/editorial. */
  .cartao-minimalista:nth-child(even) { flex-direction: row-reverse; }
}

/* ---------- Botão "Carregar mais" (lazy load por categoria) ---------- */
.acoes-carregar-mais {
  display: flex;
  justify-content: center;
  padding: 24px 16px 8px;
}
.acoes-carregar-mais[hidden] { display: none; }
.botao-carregar-mais {
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-family: var(--fonte);
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: border-color .2s ease, transform .15s ease;
}
.botao-carregar-mais:hover { border-color: var(--cor-terracota); transform: translateY(-2px); }

/* ---------- Cartão de produto ---------- */
.cartao-produto {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cartao-produto:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(59,42,31,.14); }

.cartao-produto-imagem-area { position: relative; }

.cartao-produto-imagem-botao {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
}

.cartao-produto-imagem {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--cor-off-white);
}

.cartao-produto-imagem-vazia {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  background: var(--cor-off-white);
  color: var(--cor-texto-suave);
}

/* Hover na imagem principal: ícone de câmera indicando que é clicável (abre o lightbox). */
.cartao-produto-imagem-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  font-size: 1.7rem;
  opacity: 0;
  transition: opacity .2s ease;
}
.cartao-produto-imagem-botao:hover .cartao-produto-imagem-hover,
.cartao-produto-imagem-botao:focus-visible .cartao-produto-imagem-hover { opacity: 1; }

/* Preço + descrição flutuando sobre o canto inferior esquerdo da imagem. */
.cartao-produto-flutuantes {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.etiqueta-preco-flutuante {
  background: #fff;
  color: var(--cor-terracota-escura);
  font-weight: 800;
  font-size: .88rem;
  padding: 7px 14px;
  border-radius: 30px;
  box-shadow: var(--sombra);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.etiqueta-preco-riscado {
  color: var(--cor-texto-suave);
  font-weight: 600;
  font-size: .78rem;
  text-decoration: line-through;
}

.etiqueta-oferta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #F75A68, #C6303E);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.etiqueta-descricao-flutuante {
  background: rgba(255, 255, 255, .92);
  color: #3B2A1F;
  font-weight: 700;
  font-size: .76rem;
  padding: 7px 12px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: background .15s ease, color .15s ease;
}
.etiqueta-descricao-flutuante:hover { background: #fff; color: var(--cor-terracota); }

.mini-galeria-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 0;
}
.mini-galeria-wrapper .mini-galeria { padding: 0; }

.mini-galeria {
  display: flex;
  gap: 6px;
  padding: 8px 8px 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  justify-content: center;
}
.mini-galeria::-webkit-scrollbar { display: none; }
.mini-galeria-thumb {
  border: 1.5px solid var(--cor-borda);
  border-radius: 8px;
  padding: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  width: 44px;
  height: 44px;
}
.mini-galeria-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Setas de navegação da mini-galeria: ficam ocultas até o JS detectar
   que há mais miniaturas do que cabem na largura do card (5, 10, 20...). */
.mini-galeria-seta {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: #fff;
  color: var(--cor-texto);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  transition: border-color .15s ease;
}
.mini-galeria-seta:hover { border-color: var(--cor-terracota); }
.mini-galeria-seta[hidden] { display: none; }

.cartao-produto-corpo {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  text-align: center;
}

.cartao-produto h3 { margin: 0; font-size: 1.12rem; font-weight: 800; }

.cartao-produto-rodape {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

/* ---------- Modal de descrição (CSS puro, via :target) ---------- */
.modal-descricao-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-descricao-overlay:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-descricao-caixa {
  background: #fff;
  border-radius: var(--raio);
  padding: 26px 24px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--sombra-flutuante);
  transform: scale(.94);
  transition: transform .25s ease;
}
.modal-descricao-overlay:target .modal-descricao-caixa { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .modal-descricao-overlay, .modal-descricao-caixa { transition: none; }
}
.modal-descricao-caixa h3 { margin: 0 0 10px; font-size: 1.15rem; }
.modal-descricao-caixa p { margin: 0; color: var(--cor-texto-suave); white-space: pre-line; }

.modal-descricao-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cor-off-white);
  color: var(--cor-texto);
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s ease;
}
.modal-descricao-fechar:hover { background: var(--cor-borda); }

.estado-vazio-vitrine { text-align: center; padding: 60px 20px; color: var(--cor-texto-suave); }
.grade-produtos .estado-vazio-vitrine { grid-column: 1 / -1; }

/* ---------- Botão "Mais Informações" (WhatsApp) ---------- */
.botao-mais-informacoes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cor-terracota);
  color: #fff;
  border: none;
  border-radius: var(--raio-peq);
  padding: 11px 18px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.botao-mais-informacoes:hover { background: var(--cor-terracota-escura); transform: translateY(-1px); }

.botao-mais-informacoes-card { width: 100%; padding: 12px 16px; font-size: .88rem; }

/* ---------- Compartilhar (Facebook, WhatsApp, X, Telegram, copiar link) ---------- */
.compartilhar-produto {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.compartilhar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--cor-off-white);
  color: var(--cor-texto-suave);
  font-size: .8rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.compartilhar-icone:hover { background: var(--cor-terracota); color: #fff; }
.compartilhar-icone.copiado { background: #16A34A; color: #fff; }

.rodape-vitrine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 20px 36px;
  margin-top: 40px;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: .85rem;
}

.rodape-redes { display: flex; justify-content: center; gap: 12px; }
.rodape-rede-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-off-white);
  color: var(--cor-texto-suave);
  transition: background .15s ease, color .15s ease;
}
.rodape-rede-social:hover { background: var(--cor-terracota); color: #fff; }
.rodape-rede-social svg { width: 17px; height: 17px; }

.rodape-endereco {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: .85rem;
}
.rodape-endereco:hover { color: var(--cor-terracota); }
.rodape-endereco svg { width: 15px; height: 15px; flex-shrink: 0; }

.rodape-assinatura { margin: 0; font-weight: 400; color: var(--cor-texto); max-width: 420px; }
.rodape-assinatura strong { font-weight: 600; }

.rodape-vitrine-cta {
  color: var(--cor-texto-suave);
  font-size: .72rem;
  opacity: .75;
  text-decoration: underline;
}
.rodape-vitrine-cta:hover { opacity: 1; color: var(--cor-terracota); }

/* ---------- Botão flutuante de WhatsApp ---------- */
.botao-whatsapp-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  z-index: 100;
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao-whatsapp-flutuante:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
/* Verde do WhatsApp é forte demais sobre fundo escuro (contraste
   ofuscante) — no modo escuro usa um verde mais fechado/dessaturado e
   uma sombra mais discreta, sem perder a identidade da marca. */
html[data-tema="escuro"] .botao-whatsapp-flutuante {
  background: #1B8A46;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
html[data-tema="escuro"] .botao-whatsapp-flutuante:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }

/* ---------- Página de produto individual (link compartilhável) ---------- */
.pagina-produto { max-width: 960px; margin: 0 auto; padding: 20px 20px 40px; padding-bottom:0;}

.produto-detalhe {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.produto-detalhe-imagem-botao { border: none; padding: 0; background: none; cursor: pointer; display: block; width: 100%; }
.produto-detalhe-imagem { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--cor-off-white); }
.produto-detalhe-imagem-vazia {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--cor-off-white);
  color: var(--cor-texto-suave);
}

.mini-galeria-detalhe { padding: 10px 14px 14px; }

.produto-detalhe-info { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.produto-detalhe-categoria {
  align-self: flex-start;
  background: var(--cor-off-white);
  color: var(--cor-texto-suave);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
.produto-detalhe-info h1 { margin: 0; font-size: 1.4rem; }
.produto-detalhe-descricao { margin: 0; color: var(--cor-texto-suave); font-size: .95rem; }
.produto-detalhe-preco { font-size: 1.5rem; font-weight: 800; color: var(--cor-terracota-escura); }
.produto-detalhe-acoes { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.produto-detalhe-info .botao-mais-informacoes { margin-top: 0; align-self: flex-start; padding: 14px 24px; font-size: 1rem; }
.produto-detalhe-info .compartilhar-produto { justify-content: flex-start; }

@media (min-width: 640px) {
  .produto-detalhe { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .produto-detalhe-imagem-botao,
  .produto-detalhe-imagem-vazia { grid-column: 1; grid-row: 1; }
  .mini-galeria-detalhe { grid-column: 1; grid-row: 2; }
  .produto-detalhe-info { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Lightbox de fotos do produto (com animação de abrir/fechar) ---------- */
.overlay-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay-lightbox.aberto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-imagem {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 10px;
  transform: scale(.94);
  transition: transform .25s ease;
}
.overlay-lightbox.aberto .lightbox-imagem { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .overlay-lightbox, .lightbox-imagem { transition: none; }
}

.lightbox-fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}
.lightbox-anterior { left: 14px; }
.lightbox-proxima { right: 14px; }

/* ---------- Modo escuro (recurso Premium, ligado manualmente pelo visitante) ----------
   As variáveis de fundo/texto já invertem sozinhas via tema.php quando
   :root tem [data-tema="escuro"], mas algumas superfícies têm fundo
   branco fixo (não usam variável) — sem isso, o texto (que virou claro)
   ficaria ilegível em cima de branco. --cor-superficie-escura(-2) também
   vêm do tema.php, já tingidas com o matiz do skin ativo (não um marrom
   fixo), pra manter coerência com o header/acento do lojista. Atributo
   setado via JS (botão flutuante + localStorage, ver vitrine.js) — nunca
   via SO/prefers-color-scheme, pra não sobrepor à paleta escolhida. */
html[data-tema="escuro"] .cartao-produto,
html[data-tema="escuro"] .linha-produto-lista,
html[data-tema="escuro"] .cartao-instagram-imagem,
html[data-tema="escuro"] .modal-descricao-caixa,
html[data-tema="escuro"] .modal-sobre-caixa,
html[data-tema="escuro"] .menu-categorias-cabecalho .nav-categorias,
html[data-tema="escuro"] .produto-detalhe,
html[data-tema="escuro"] .botao-carregar-mais,
html[data-tema="escuro"] .mini-galeria-seta {
  background: var(--cor-superficie-escura, #241F1A);
}
html[data-tema="escuro"] .cartao-produto-imagem,
html[data-tema="escuro"] .cartao-produto-imagem-vazia,
html[data-tema="escuro"] .produto-detalhe-imagem,
html[data-tema="escuro"] .produto-detalhe-imagem-vazia,
html[data-tema="escuro"] .linha-produto-lista-imagem,
html[data-tema="escuro"] .cartao-minimalista-imagem {
  background: var(--cor-superficie-escura-2, #15120F);
}

/* ---------- Botão flutuante de alternar Modo Escuro (recurso Premium) ----------
   Fundo escuro no modo claro (ícone de lua) e fundo claro no modo escuro
   (ícone de sol) — o botão representa o estado pra onde o clique leva,
   e não o tema atual da página. */
.botao-modo-escuro-flutuante {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #2B2622;
  color: #F2EDE6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  z-index: 100;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
}
.botao-modo-escuro-flutuante:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
html[data-tema="escuro"] .botao-modo-escuro-flutuante { background: #fff; color: var(--cor-terracota-escura); }

/* ---------- Tooltip padronizado (substitui o title="" nativo do navegador) ---------- */
.tooltip-flutuante {
  position: fixed;
  z-index: 2000;
  background: #1F2430;
  color: #fff;
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--fonte);
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.3;
  max-width: 240px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tooltip-flutuante.visivel { opacity: 1; transform: translateY(0); }
.tooltip-flutuante::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
}
.tooltip-flutuante[data-posicao="cima"]::after { top: 100%; border-top-color: #1F2430; }
.tooltip-flutuante[data-posicao="baixo"]::after { bottom: 100%; border-bottom-color: #1F2430; }

/* ---------- Favoritos (100% localStorage do visitante, sem servidor) ---------- */
.botao-favoritar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .92);
  color: #8A7A6C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: transform .15s ease, color .15s ease;
}
.botao-favoritar:hover { transform: scale(1.08); }
.botao-favoritar.favoritado { color: #E63950; }

/* Variante inline (sem posicionamento absoluto), usada em layouts sem
   moldura de imagem própria pra sobrepor (lista compacta, produto individual). */
.botao-favoritar-inline {
  position: static;
  width: 40px;
  height: 40px;
  background: var(--cor-off-white);
  box-shadow: none;
  flex-shrink: 0;
}

/* Mesmo visual das abas de categoria (.aba-categoria) — fica junto do
   grupo de filtros do topo, não flutuando isolado num canto. */
.botao-favoritos-cabecalho[hidden] { display: none; }
.botao-favoritos-cabecalho {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 34px;
  gap: 6px;
  background: rgba(0, 0, 0, .45);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  font-family: var(--fonte);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.botao-favoritos-cabecalho:hover { background: rgba(0, 0, 0, .55); }
.contador-favoritos {
  background: #fff;
  color: var(--cor-terracota-escura);
  font-size: .72rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
@media (max-width: 480px) {
  .botao-favoritos-texto { display: none; }
  .rodape-endereco svg{ display:none;}
}

.modal-favoritos-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 15, 10, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-favoritos-overlay.aberto { opacity: 1; pointer-events: auto; }

.modal-favoritos-caixa {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-favoritos-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cor-borda);
  flex-shrink: 0;
}
.modal-favoritos-cabecalho h2 { margin: 0; font-size: 1.15rem; }
.modal-favoritos-fechar {
  border: none;
  background: var(--cor-off-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
}
.modal-favoritos-fechar:hover { color: var(--cor-terracota); }

.modal-favoritos-vazio {
  padding: 40px 22px;
  text-align: center;
  color: var(--cor-texto-suave);
  margin: 0;
}

.grade-favoritos-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  padding: 20px 22px;
  overflow-y: auto;
}
.item-favorito-modal { position: relative; text-align: center; }
.item-favorito-modal-imagem {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cor-off-white);
}
.item-favorito-modal-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-favorito-modal-imagem-vazia {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.item-favorito-modal-info { margin-top: 6px; }
.item-favorito-modal-nome {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cor-texto);
  text-decoration: none;
  line-height: 1.3;
}
.item-favorito-modal-preco { display: block; font-size: .8rem; font-weight: 800; color: var(--cor-terracota-escura); margin-top: 2px; }
.item-favorito-modal-remover {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  color: var(--cor-texto-suave);
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-favorito-modal-remover:hover { color: #E63950; }

/* ---------- Modal "Sobre" (texto livre configurado no admin) ---------- */
.modal-sobre-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 15, 10, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-sobre-overlay.aberto { opacity: 1; pointer-events: auto; }
.modal-sobre-caixa {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-sobre-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cor-borda);
  flex-shrink: 0;
}
.modal-sobre-cabecalho h2 { margin: 0; font-size: 1.15rem; }
.modal-sobre-fechar {
  border: none;
  background: var(--cor-off-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
}
.modal-sobre-fechar:hover { color: var(--cor-terracota); }
.modal-sobre-texto {
  padding: 20px 22px 26px;
  overflow-y: auto;
  color: var(--cor-texto);
  line-height: 1.5;
  white-space: pre-line;
}