* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* É um seletor especial que aponta pro elemento mais alto do documento (o <html>). Variáveis declaradas dentro dele ficam visíveis pra qualquer seletor do arquivo inteiro
 — é o lugar padrão pra guardar "tokens" de design (cores, espaçamentos, etc.) que você vai reusar em várias regras. */
:root{
  --glass-fill: rgba(88, 130, 193, .28);
  --glass-blur: 8.9px;
}

/* Corpo */
body {
  font-family: var(--font-brand);
  color: var(--white);
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 55% 45%, var(--blue-500) 0%, var(--blue-900) 100%);
}

/* ########################################################################## */
/* header */
header {
  /* fixo no topo, ocupando a largura inteira — não é mais um pill */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;

  background: var(--glass-fill);   /*var(--glass-fill)*/
  backdrop-filter: blur(var(--glass-blur));  /* 8.9px */
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.logo{
    /* padding: ; */
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* a imagem original (que pode ser retangular) é cortada pra caber no quadrado sem distorcer/esticar */
    object-fit: cover;
}

/* logo um pouco menor dentro do header fixo, pra caber bem numa barra fina */
header .logo {
    width: 44px;
    height: 44px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* grupo da direita do header: Loja + login (ou foto+nome de quem já
   está logado), todos colados uns nos outros */
.nav-auth {
  position: relative;
  top: 3px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.navegacao{
  display: inline-block;
  text-decoration: none;
  color: white;
  transition: transform 0.2s;
  line-height: 1;
}

.navegacao:hover{
  transform: scale(1.10);
}

/* Foto + nome + função de quem já está logado (funcionário ou cliente) —
   preenchido via JS (landing.js) a partir de /auth/me, ao LADO do link
   "Área do Funcionário" (não no lugar — as duas coisas ficam visíveis).
   Só a foto é clicável (abre o modal "Meu perfil" mais abaixo nesse
   arquivo) — nome e função são só texto, .nav-user-link é um <span> comum. */
.nav-user-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.nav-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  /* Sem overflow:hidden aqui de propósito — o corte em círculo da foto é
     feito no <img> (border-radius abaixo), não no wrapper. Se o wrapper
     escondesse o overflow, o anel do cometa (que "vaza" ~3px pra fora do
     avatar no hover) ficaria cortado junto e nunca apareceria. */
}

/* Reset de <button> só no avatar do header — seletor por tag+classe pra não
   afetar o avatar de dentro do modal, que é um <span> (não clicável). */
button.nav-user-avatar {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ── Anel-cometa no hover (só na foto, não no botão inteiro) ──
   Mesma receita do painel (.hover-comet lá em painel.html): rastro cônico
   girando no contorno do avatar. Aplicado só no avatar do header via JS
   (classList.add('hover-comet')) — o avatar de dentro do modal "Meu perfil"
   não recebe essa classe, porque lá ele só exibe, quem é clicável são os
   botões "Trocar foto"/"Remover foto" abaixo dele, igual no painel. */
.hover-comet {
  position: relative;
  transition: transform 0.15s cubic-bezier(.22,1,.36,1);
}

.hover-comet:hover {
  transform: scale(1.06);
}

.hover-comet::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.7) 20deg, #ffffff 40deg, transparent 70deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 3px #ffffff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.hover-comet:hover::after {
  opacity: 1;
  animation: hoverCometSpin 1.1s linear infinite;
}

@keyframes hoverCometSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hover-comet:hover { transform: none; }
  .hover-comet::after { display: none; }
}

.nav-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.nav-user-textos {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav-user-nome {
  font-size: 0.85rem;
}

.nav-user-role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.72;
}

/* ########################################################################## */
/* Modal "Meu perfil" — aberto pelo botão .nav-user-link no header */

.perfil-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.perfil-modal-overlay.open {
  display: flex;
}

.perfil-modal-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  /* Mesmo "vidro" do resto do sistema — --glass-fill/--glass-blur são os
     mesmos valores usados no .modal-box do painel (rgba(88,130,193,.28) +
     blur), não uma cor inventada pra landing page. */
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-card);
  padding: 28px 24px 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.perfil-modal-box h3 {
  margin-bottom: 20px;
  font-size: 1.15rem;
}

.perfil-modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.perfil-modal-fechar:hover {
  background: rgba(255, 255, 255, 0.2);
}

.perfil-modal-foto-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.perfil-modal-avatar-grande {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.2rem !important;
}

.perfil-modal-foto-botoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perfil-modal-btn-trocar-foto,
.perfil-modal-btn-remover-foto {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.perfil-modal-btn-remover-foto {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.35);
  display: none;
}

.perfil-modal-label {
  display: block;
  font-size: 0.78rem;
  opacity: 0.8;
  margin-bottom: 4px;
  margin-top: 14px;
}

.perfil-modal-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-family: inherit;
  font-size: 0.9rem;
}

.perfil-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.perfil-modal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 12px;
}

.perfil-modal-msg {
  font-size: 0.8rem;
  opacity: 0.85;
}

.perfil-modal-btn-salvar {
  padding: 9px 22px;
  border-radius: var(--radius-btn);
  border: none;
  background-color: #25D366;
  color: white;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.perfil-modal-btn-salvar:hover {
  filter: brightness(1.08);
}

/* Lista de ações secundárias no fim do modal de perfil (ex: "Área do
   Funcionário", "Sair") — mesma estrutura replicada no painel.html. */
.perfil-modal-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.perfil-modal-link {
  width: 100%;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.perfil-modal-link:hover {
  color: white;
}

.perfil-modal-link--sair:hover {
  color: #f87171;
}

.perfil-modal-link--perigo,
.perfil-modal-link--perigo:hover {
  color: #f87171;
}

/* ########################################################################## */

/* Texto */
h1{
    font-size: 3rem;
    font-weight: 700;
}

/* ########################################################################## */
/* hero */

#hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;

  /* o header agora é fixed (saiu do fluxo normal) — esse respiro evita
     que o conteúdo do hero comece escondido atrás dele */
  padding-top: 100px;
}

.shape {
  position: absolute;
  width: 200px;
  opacity: 0.6;
  z-index: -1;
  animation: flutuar 4s ease-in-out infinite alternate;
}

.shape-1 { top: 10%; left: 15%; }
.shape-2 { top: 60%; left: 70%; }
.shape-3 { top: 10%; left: 15%; }

/* left: calc(50% - 50vw) escapa do container centralizado (max-width: 900px)
   e alinha com a borda esquerda real da viewport, não da section */
.shape-4 { top: 60%; left: calc(50% - 50vw); }

.shape-5 { top: 35%; left: 10%; width: 80px; }
.shape-6 { top: 60%; left: 70%; }

/* mesma lógica do shape-4, mas pela direita */
.shape-7 { top: 85%; right: calc(50% - 50vw); }

.shape-8 { top: 40%; left: 70%; }


@keyframes flutuar {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}

/* ########################################################################## */
/* botão do whatsapp */
.btn-whatsapp{
    display: inline-block;

    padding: 20px 60px;

    /* cor do botão */
    background-color: #25D366;

    /* cor do texto */
    color:white;

    /* borda */
    border-radius: var(--radius-btn);
    
    /* aplica negrito */
    font-weight: 700;

    /* remove o sublinhado */
    text-decoration: none;

    /* transition anima suavemente */
    transition: transform 0.2s;

    /* O "anel" que vai pulsar (o ::before) vai ser posicionado com position: absolute, e um elemento com position: absolute se posiciona relativo ao ancestral
     mais próximo que tenha position diferente do padrão. Sem isso no .btn-whatsapp, o anel se posicionaria relativo à página inteira, não ao botão. */
    position: relative;

    
}
  

/* hover: é uma pseudo-classe — um seletor que só aplica o estilo quando uma condição acontece */
.btn-whatsapp:hover{
    transform: scale(1.10);
}

#hero .btn-whatsapp{
  margin-top: 140px;
}

#contato .btn-whatsapp {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;   
  margin-top: 50px;
}

/* pulso */
.btn-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #25D366;
  animation: pulso 1.5s infinite;
  z-index: -1;
}

.whatsapp-float{
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* sem isso, o botão flutuante fica com z-index "auto" — qualquer elemento
       da página com z-index positivo (como o .cards-grid de Diferenciais)
       pinta por cima dele quando os dois ocupam a mesma área da tela */
    z-index: 999;
    transition: transform 0.2s;
}

.whatsapp-float:hover{
    transform: scale(1.10);
}


.whatsapp-float img {
  width: 60px;
  height: 60px;
}

/* Animação do botão do whatsapp */
/* @keyframes — define uma sequência de estados ao longo de uma animação */
@keyframes pulso {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* ########################################################################## */
/* modelo 3d */

model-viewer {
    /* garante que cada um ocupa a linha inteira sozinho */
    display: block;

    /* o tamanho fixo que resolve o problema de "sumir" da tela */
    width: 300px;
    height: 300px;

    /* espaço entre um modelo e o próximo, já que estão empilhados */
    margin-bottom: 24px;
}

#produtos {
  position: relative;
  z-index: 0;
  overflow-x: visible;
  overflow-y: hidden;

  /* Em vez de fazer o carrossel "escapar" de um container estreito com
     cálculo (calc/vw), removemos a restrição de largura direto daqui —
     essa section específica passa a ocupar a tela inteira, sem depender
     de nenhuma conta. As outras sections continuam com a regra genérica
     "section" (max-width: 900px), só a #produtos é a exceção. */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Como a #produtos agora é full-width, o título "Produtos" precisa da
   própria centralização pra não esticar a tela toda junto */
#produtos h2 {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 24 0px;
}

/* ########################################################################## */
/* carrossel de produtos (estilo "marquee" — desliza sozinho, sem parar) */

/* Wrapper externo: é ele que corta (esconde) o que sair da largura visível.
   Sem isso, o trilho inteiro (2x mais largo que a tela) apareceria esticado. */
.carrossel-wrapper {
    overflow: hidden;

    /* 100% do #produtos, que já é full-width agora — sem cálculo nenhum */
    width: 100%;
    position: relative;
}

/* As duas faixas de esmaecimento nas pontas — usam background comum (não
   mask-image), então funcionam em qualquer navegador. content: "" é
   obrigatório em todo ::before/::after, mesmo vazio. */
.carrossel-wrapper::before,
.carrossel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;              /* largura da faixa que esmaece */
    z-index: 1;                /* fica por cima dos cards */
    pointer-events: none;      /* deixa cliques/arrastos atravessarem — sem isso bloquearia os cards embaixo */
}

/* faixa esquerda: cor sólida (mesma do fundo da página) até transparente */
.carrossel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--blue-900), transparent);
}

.carrossel-aviso-3d {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 16px;
}

/* faixa direita: mesma lógica, espelhada */
.carrossel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--blue-900), transparent);
}

/* Trilho: fileira com TODOS os cards (original + cópia) lado a lado.
   É esse elemento que se move — o wrapper de fora fica parado. */
.carrossel-trilho {
  display: flex;                          /* cards em linha, um do lado do outro */
  width: max-content;                     /* a largura se ajusta ao conteúdo, sem nunca quebrar linha */
  /* O espaçamento entre os cards fica no margin-right de .produto-card, não
     aqui — ver o comentário lá pra entender por quê (gap não é simétrico
     o suficiente pro truque do -50% funcionar sem soluço). */
  animation: rolar 20s linear infinite;   /* nome da receita, duração de 1 ciclo, velocidade constante, repete pra sempre */

  /* mantém a camada de composição do elemento sempre viva. Sem isso, pausar
     e retomar a animação (hover) pode fazer o navegador recriar a camada e
     zerar o relógio interno dela — o carrossel "trava" e parece reiniciar
     do zero depois de alguns ciclos */
  will-change: transform;
}

/* Pausa o carrossel quando o mouse passa por cima — dá tempo de examinar o modelo 3D com calma.
   Só em dispositivos com hover de verdade (mouse): em touch, o toque simula um
   ":hover" que nunca "sai" (não existe mouse saindo do elemento), então no
   celular o carrossel travava pausado pra sempre assim que você encostava nele. */
@media (hover: hover) and (pointer: fine) {
  .carrossel-trilho:hover {
    animation-play-state: paused;
  }
}

/* Equivalente pro toque no celular: como não existe ":hover" de verdade em
   touch, quem controla essa pausa é o JS (landing.js), via touchstart/touchend
   no trilho, que só alterna esta classe. */
.carrossel-trilho.pausado {
  animation-play-state: paused;
}

/* A receita da animação: sai da posição original (0) e desliza exatamente
   50% da LARGURA TOTAL do trilho (que já tem os cards duplicados). Como a
   segunda metade do trilho é uma cópia idêntica da primeira, ao chegar em
   -50% a tela mostra exatamente a mesma coisa que mostrava no começo — o
   "salto" de volta ao 0% fica invisível, parece que nunca parou de deslizar. */
@keyframes rolar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Aparência de cada card */
.produto-card {
  background-color: var(--white);     /* fundo branco, contrasta com o azul da página */
  color: var(--blue-900);             /* texto escuro, legível em cima do branco */
  border-radius: var(--radius-card);  /* cantos arredondados, reaproveitando o token do theme.css */
  padding: 24px;                      /* respiro interno entre a borda do card e o conteúdo */
  text-align: center;                 /* centraliza título, descrição e o modelo 3D */
  width: 320px;                       /* largura fixa de cada card */

  /* Espaço entre os cards fica aqui (em vez de gap no .carrossel-trilho)
     porque margin-right entra depois de TODO card, inclusive o último —
     isso garante que as duas metades do trilho (original + cópia) tenham
     largura idênticas, o que o truque do @keyframes rolar (-50%) exige pra
     não dar um pequeno salto visível a cada volta do loop. */
  margin-right: 24px;

  /* Por padrão, itens de um flex container podem ENCOLHER pra caber no
     espaço disponível — aqui isso quebraria o carrossel (os cards
     murchariam em vez de formar uma fileira mais larga que a tela).
     flex-shrink: 0 proíbe esse encolhimento, mantendo o tamanho fixo. */
  flex-shrink: 0;

  /* Isola o card: o <model-viewer> por dentro monta WebGL/shadow DOM aos
     poucos enquanto o modelo 3D carrega, e isso pode forçar o navegador a
     reconstruir a camada de composição do card. Sem "contain", essa
     reconstrução se propaga até a .carrossel-trilho (que está animando) e
     reinicia o relógio da animação — o carrossel "trava e recomeça do
     zero". Com "contain: content", o que acontece dentro do card fica
     preso nele, sem afetar a trilha. */
  contain: content;
}

/* Dentro do card, o model-viewer usa a largura toda do card (em vez do
   300px fixo da regra geral acima), se ajustando ao tamanho do card */
.produto-card model-viewer {
  width: 100%;
  height: 220px;
}

/* ########################################################################## */
/* Editar modelo 3D (admin) — botão + popover injetados por modelo3d-admin.js
   em cima de cada <model-viewer> editável (landing e loja), e o espaço
   reservado que aparece quando o admin exclui o modelo de um slug. */

.modelo3d-wrap {
  position: relative;
}

.modelo3d-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 120px;
  border-radius: var(--radius-btn);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.78rem;
}

.modelo3d-btn-editar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modelo3d-btn-editar:hover {
  background: rgba(0, 0, 0, 0.65);
}

.modelo3d-popover {
  display: none;
  position: absolute;
  top: 42px;
  right: 8px;
  z-index: 6;
  width: 150px;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--radius-btn);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.modelo3d-popover.open {
  display: flex;
}

.modelo3d-popover-item {
  border: none;
  background: none;
  padding: 8px 6px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-900);
  text-align: left;
  cursor: pointer;
}

.modelo3d-popover-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.modelo3d-popover-item--excluir {
  color: #dc2626;
}

/* ########################################################################## */
/* Vitrine da loja (#produtos em loja.html) — grade de cards preenchida via
   JS (loja.js) a partir de GET /loja/produtos. O botão de editar de cada
   card reaproveita .modelo3d-btn-editar (mesmo círculo/ícone/posição do
   lápis do modelo 3D) em vez de duplicar o estilo. */

/* Busca + filtros acima da grade — reaproveita .perfil-modal-input/-label
   (mesmo visual "vidro" translúcido do modal de perfil/edição de produto).
   Duas linhas: a busca sozinha em cima (ocupa a largura toda), categoria/
   marca/linha/lado + "Limpar filtros" numa fileira embaixo. */
.loja-filtros {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 28px;
}

.loja-filtros-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.loja-filtro-campo {
  min-width: 150px;
}

.loja-filtro-busca {
  width: 100%;
}

.loja-filtro-campo .perfil-modal-label {
  margin-top: 0;
}

.loja-filtro-limpar {
  align-self: flex-end;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.loja-filtro-limpar:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.loja-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.loja-filtros-vazio {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  padding: 32px 0;
}

.loja-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  color: var(--blue-900);
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.loja-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Produto do Varejo com saldo zerado (grupo.tem_estoque=false, ver loja.js
   montarCard) — sem interação, só exibição: mais apagado, sem os botões de
   ação, com um badge avisando. */
.loja-card--sem-estoque {
  cursor: default;
  opacity: 0.55;
}

.loja-card--sem-estoque:hover {
  transform: none;
  box-shadow: none;
}

.loja-card--sem-estoque .loja-card-comet {
  display: none;
}

.loja-card-badge-sem-estoque {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Anel-cometa no hover do card inteiro — NÃO usa a receita do .hover-comet
   (conic-gradient rotacionando o anel inteiro), porque aquilo só funciona em
   formas circulares/quadradas: rotacionar o anel todo num avatar redondo é
   imperceptível (um círculo girando parece parado), mas num card retangular
   alto o anel se desalinha da borda real em vez de percorrê-la. Aqui usamos
   um <rect> de SVG com stroke-dasharray animado (mesma ideia do
   .hover-comet-sq do painel) — isso percorre o contorno de verdade, em
   qualquer proporção. O <svg class="loja-card-comet"> é montado/dimensionado
   via JS (montarCard() em loja.js), porque o card é responsivo e o
   viewBox/perímetro precisam bater com o tamanho real renderizado. */
.loja-card-comet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.loja-card:hover .loja-card-comet {
  opacity: 1;
}

/* A calda (ponta branca, rastro esmaecendo) não dá pra fazer com stroke
   gradient de verdade — um <linearGradient> teria direção fixa e ficaria
   errado nos lados perpendiculares do retângulo conforme o traço percorre os
   4 lados. Em vez disso, _dimensionarComet() (loja.js) desenha o mesmo <rect>
   em N cópias empilhadas, cada uma com um trecho curto do traço (via um
   stroke-dasharray com prefixo de "gap" diferente) e stroke-opacity
   decrescente — juntas formam a calda esmaecendo, e como todas compartilham
   a mesma animação (idêntica em todas, só o dasharray estático muda), elas
   se movem em conjunto, sempre com o mesmo espaçamento relativo. */
.loja-card-comet rect {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px rgba(255, 255, 255, .9));
}

.loja-card:hover .loja-card-comet rect {
  animation: cometTraceMove 1.6s linear infinite, cometPulse 1s ease-in-out infinite;
}

@keyframes cometTraceMove {
  to { stroke-dashoffset: var(--comet-perimeter, 0); }
}

@keyframes cometPulse {
  0%, 100% { stroke-width: 2.5; filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px rgba(255, 255, 255, .9)); }
  50%      { stroke-width: 3.5; filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 16px rgba(255, 255, 255, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .loja-card-comet { display: none; }
}

.loja-card-foto {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  /* Fundo branco: com object-fit:contain a foto nem sempre preenche a caixa
     toda, e a sobra (letterbox) nas laterais/topo fica mais discreta em
     branco do que no tom azulado que era usado antes. */
  background: var(--white);
  color: rgba(30, 64, 175, 0.5);
  overflow: hidden;
  margin-bottom: 14px;
}

.loja-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.loja-card-nome {
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.loja-card-marca {
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 8px;
}

.loja-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.loja-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--blue-900);
}

.loja-card-preco {
  font-weight: 700;
  margin-bottom: 6px;
}

.loja-card-preco-aluguel {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f59e0b;
  margin: -2px 0 14px;
}

.loja-card-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  cursor: default;
}

.loja-btn-comprar,
.loja-btn-alugar,
.loja-btn-whatsapp {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.loja-btn-comprar {
  background: var(--blue-900);
  color: white;
}

.loja-btn-comprar:hover {
  filter: brightness(1.15);
}

/* Laranja usado em todo o sistema pra sinalizar aluguel/pendência (ver
   badges de solicitações e destaques de responsável no painel.html). */
.loja-btn-alugar {
  background-color: #f59e0b;
  color: white;
}

.loja-btn-alugar:hover {
  filter: brightness(1.1);
}

.loja-btn-whatsapp {
  background-color: #25D366;
  color: white;
}

.loja-btn-whatsapp:hover {
  filter: brightness(1.08);
}

/* Toast do botão "Comprar" — a loja não carrega o sistema de toast do
   painel.html, então isso é só um aviso fixo simples no rodapé da tela. */
.loja-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.loja-toast.open {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ########################################################################## */
/* Página de detalhe do produto (loja-produto.html) */

#produto-detalhe {
  padding-top: 100px;
  position: relative;
  z-index: 1;
}

.produto-voltar {
  display: inline-block;
  margin-bottom: 24px;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.8;
}

.produto-voltar:hover {
  opacity: 1;
}

.produto-carregando,
.produto-nao-encontrado {
  color: white;
  opacity: 0.8;
}

.produto-galeria {
  margin-bottom: 24px;
}

/* As setas ficam sobrepostas na imagem (absolute), não do lado dela numa
   linha — assim a imagem sempre pode ocupar 100% da largura disponível
   sem as setas roubarem espaço e estourarem o card numa tela estreita. */
.produto-galeria-principal {
  position: relative;
  width: min(420px, 100%);
  margin: 0 auto;
}

.produto-galeria-item-atual {
  width: 100%;
  height: 340px;
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
}

.produto-galeria-item-atual img,
.produto-galeria-item-atual model-viewer {
  width: 100%;
  height: 100%;
  display: block;
}

/* object-fit: contain — mostra a foto inteira em vez de cortar pra preencher
   a caixa. O model-viewer fica de fora: ele renderiza o próprio modelo 3D,
   não faz sentido "conter"/"cobrir" uma imagem nele. */
.produto-galeria-item-atual img {
  object-fit: contain;
  cursor: zoom-in;
}

.produto-galeria-item-atual model-viewer {
  object-fit: cover;
}

/* ── Zoom da foto — painel flutuante ao lado, em position:fixed pra nunca
   ficar cortado pelo max-width da section. Só aparece em telas largas com
   mouse (hover) — em telas estreitas não sobra espaço "do lado" e touch não
   tem hover pra acionar. */
.produto-zoom-painel {
  display: none;
  position: fixed;
  width: 380px;
  height: 380px;
  background-color: var(--white);
  background-repeat: no-repeat;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  z-index: 80;
  pointer-events: none;
}

@media (min-width: 1100px) and (hover: hover) {
  .produto-zoom-painel.ativo {
    display: block;
  }
}

.produto-galeria-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.produto-galeria-anterior {
  left: 8px;
}

.produto-galeria-proxima {
  right: 8px;
}

.produto-galeria-seta:hover {
  background: rgba(0, 0, 0, 0.65);
}

.produto-galeria-aviso {
  text-align: center;
  font-size: 0.75rem;
  color: var(--white);
  margin: 8px auto 0;
  max-width: 420px;
}

.produto-galeria-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.produto-galeria-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.produto-galeria-dot.ativo {
  background: white;
}

.produto-galeria-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.produto-galeria-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.produto-galeria-thumb-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-btn);
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}

.produto-galeria-thumb.ativo .produto-galeria-thumb-img {
  border-color: white;
}

.produto-galeria-thumb-img img,
.produto-galeria-thumb-img model-viewer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.produto-galeria-thumb-acoes {
  display: flex;
  gap: 4px;
}

.produto-galeria-mover,
.produto-galeria-excluir {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.produto-galeria-mover:disabled {
  opacity: 0.25;
  cursor: default;
}

.produto-galeria-excluir {
  background: rgba(220, 38, 38, 0.35);
}

.produto-arquivo-generico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--blue-900);
  text-align: center;
  padding: 12px;
  font-size: 0.85rem;
  text-decoration: none;
}

.produto-galeria-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(420px, 100%);
  height: 220px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}

.produto-info {
  background-color: var(--white);
  color: var(--blue-900);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 24px;
}

.produto-info h1 {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.produto-marca {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.65;
  margin-bottom: 12px;
}

/* Reaproveita o badge do card da vitrine (.loja-card-badge-sem-estoque é
   position:absolute, pensado pra ficar sobre a foto do card — aqui vira uma
   pílula inline normal, sem posicionamento próprio). */
.produto-badge-sem-estoque {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
}

.produto-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Dimensão com só 1 valor (ex: toda variante do grupo é cor "Bege") vira
   uma .loja-tag informativa (sem nada pra escolher); com 2+ valores vira um
   grupo de pills clicáveis (produto-variante-pill) — ver _blocoDimensao em
   loja-produto.js. */
.produto-variante-dim {
  margin-bottom: 14px;
}

.produto-variante-dim-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue-900);
  opacity: 0.7;
  margin-bottom: 6px;
}

.produto-variante-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.produto-variante-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(30, 64, 175, 0.25);
  background: transparent;
  color: var(--blue-900);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.produto-variante-pill:hover {
  background: rgba(30, 64, 175, 0.08);
}

.produto-variante-pill.ativo {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: #fff;
}

/* Continua clicável (dá pra selecionar e ver "Sem estoque" embaixo), só
   marca visualmente que aquele valor específico está zerado — assim não
   precisa clicar em cada opção pra descobrir qual tem saldo. */
.produto-variante-pill.indisponivel {
  opacity: 0.45;
  text-decoration: line-through;
}

.produto-variante-pill.indisponivel.ativo {
  background: rgba(30, 64, 175, 0.35);
  border-color: transparent;
}

.produto-preco {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.produto-preco-aluguel {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 14px;
}

.produto-descricao {
  opacity: 0.85;
  margin-bottom: 20px;
}

.produto-acoes-principais {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 420px;
  margin-bottom: 16px;
}

/* .loja-btn-comprar/.loja-btn-alugar/.loja-btn-whatsapp são "width:100%" pra
   empilhar sozinhos no card da grade (.loja-card-acoes) — aqui eles dividem
   a mesma linha, então cada um vira flex:1 em vez de brigar pelos 100% da
   linha inteira. */
.produto-acoes-principais .loja-btn-comprar,
.produto-acoes-principais .loja-btn-alugar,
.produto-acoes-principais .loja-btn-whatsapp {
  flex: 1 1 160px;
  width: auto;
}

.produto-btn-anexar {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(30, 64, 175, 0.3);
  color: var(--blue-900);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.produto-btn-anexar:hover {
  background: rgba(30, 64, 175, 0.06);
}

.produto-acoes-admin {
  display: flex;
  align-items: center;
  gap: 16px;
}

.produto-btn-editar {
  display: inline-block;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--blue-900);
  color: white;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.produto-btn-editar:hover {
  filter: brightness(1.15);
}

.produto-btn-ocultar {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: var(--radius-btn);
  background: transparent;
  color: #dc2626;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.produto-btn-ocultar:hover {
  background: rgba(220, 38, 38, 0.08);
}

#como-funciona {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* ########################################################################## */
/* cards de vidro (Como Funciona / Diferenciais) */

.cards-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* mesma receita de vidro do header/rodapé (fundo escuro translúcido + blur) —
   por cima do gradiente azul e das .shape flutuando atrás, dá o efeito de
   "vidro líquido" com o fundo borrado através do card */
.card-vidro {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  color: var(--white);
}

.card-vidro h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.card-vidro p {
  font-size: 0.9rem;
  opacity: 0.85;
}

.card-vidro-icone {
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  display: block;
}

/* Como Funciona usa número (a ordem importa) em vez de ícone */
.card-vidro-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

#contato {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

#rodape{
  padding: 40px 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); 
}

/* mesmo grid do .rodape-colunas (3 colunas, mesmo gap/largura) — garante
   que a coluna 1 (marca Axion) caia exatamente na mesma posição/largura
   da coluna 1 de cima (marca Ortopedia), sem precisar calcular pixel */
.creditos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: center;

  max-width: 900px;
  margin: 16px auto 0;

  font-size: 0.85rem;
  opacity: 0.7;
}

/* ocupa as colunas 2 e 3 juntas (grid-column: início / fim) — o texto de
   crédito + telefone + email dividem o espaço que sobra ao lado da marca */
.creditos-info {
  grid-column: 2 / 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ícones de telefone/email dentro do address de contato — desenhados em
   preto sólido, então invertemos pra branco (senão somem no fundo escuro) */
.icone-contato {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  filter: invert(1);
}

/* tira a "cara de link" padrão do navegador (azul + sublinhado) dos
   telefones/emails — tanto na section Contato quanto no rodapé */
address a,
.rodape-coluna a,
.creditos a {
  color: inherit;
  text-decoration: none;
}

/* ########################################################################## */
/* rodapé: layout em colunas */

.rodape-colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: left;
}

.rodape-coluna {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rodape-coluna h4 {
  margin-bottom: 4px;
}

/* usada tanto na logo da Ortopedia (coluna 1) quanto na da Axion (créditos)
   — as duas ficam com o mesmo padrão: logo em cima, texto centralizado embaixo */
.rodape-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.rodape-divisor {
  max-width: 900px;
  margin: 24px auto;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ########################################################################## */

/* Restante */

section {

    /* dá espaço entre o conteúdo e a borda da tela */
    padding: 60px 24px;

    /* max-width limita a largura máxima do conteúdo */
    max-width: 900px;

    /* margin: 0 auto centraliza esse bloco horizontalmente: 0 = sem margem em cima/baixo, auto nos lados */
    margin: 0 auto;
}

h2 {
  margin-bottom: 24px;
}

ol, ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

/* ########################################################################## */
/* responsividade */

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    /* continua em linha (logo+nome de um lado, menu do outro) — só encolhe
       tudo (padding, logo, fontes, espaçamentos) pra caber numa tela estreita
       sem precisar empilhar */
    header {
        padding: 8px 14px;
        gap: 6px;
    }

    header .logo {
        width: 28px;
        height: 28px;
    }

    .marca {
        gap: 6px;
    }

    .marca .navegacao {
        font-size: 0.8rem;
    }

    .nav-auth {
        gap: 8px;
    }

    .nav-auth .navegacao {
        font-size: 0.7rem;
    }

    /* sections: menos respiro vertical/lateral, evita espaço vazio exagerado */
    section {
        padding: 40px 16px;
    }

    /* formas decorativas: escondidas no mobile — em tela estreita elas
       atrapalham mais do que embelezam, competindo com o pouco espaço
       que já tem pro conteúdo real */
    .shape {
        display: none;
    }

    /* cards do carrossel: um pouco menores, pra caber melhor numa tela
       estreita sem cortar demais o próximo card */
    .produto-card {
        width: 220px;
        padding: 16px;
    }

    .produto-card model-viewer {
        height: 160px;
    }

    /* faixas de esmaecimento nas pontas do carrossel: mais estreitas,
       já que o card inteiro é bem menor numa tela pequena */
    .carrossel-wrapper::before,
    .carrossel-wrapper::after {
        width: 40px;
    }

    /* o header no mobile é um pouco mais baixo que no desktop (fontes e
       logo menores), então o respiro do #hero pode ser um pouco menor que
       os 100px do desktop — sem esse ajuste, o título do Hero nasce
       escondido atrás do header fixo */
    #hero {
        padding-top: 90px;
    }

    /* 140px fixos faziam sentido sobrando espaço no desktop; no mobile só
       empurravam o botão pra fora da primeira tela à toa */
    #hero .btn-whatsapp {
        margin-top: 40px;
    }

    /* cards de vidro (Como Funciona/Diferenciais): força 3 por linha em vez
       de deixar o auto-fit do desktop empilhar 1 por linha numa tela
       estreita — encolhe o card inteiro (padding, ícone/número, fontes)
       pra 3 caberem lado a lado */
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .card-vidro {
        padding: 14px 8px;
    }

    .card-vidro h3 {
        font-size: 0.78rem;
        margin-bottom: 4px;
    }

    .card-vidro p {
        font-size: 0.68rem;
    }

    .card-vidro-icone,
    .card-vidro-numero {
        width: 24px;
        height: 24px;
        margin: 0 auto 8px;
    }

    /* 3 colunas fixas espremem telefone/email/endereço numa tela estreita —
       empilha tudo numa coluna só, centralizado */
    .rodape-colunas,
    .creditos {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .rodape-coluna {
        align-items: center;
    }

    /* essa coluna só fazia sentido ocupando "2/4" quando existiam 3 colunas
       de verdade; com 1 coluna só, isso bugava o grid */
    .creditos-info {
        grid-column: auto;
        justify-content: center;
    }

    /* vitrine da loja (#produtos em loja.html) */
    .loja-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .loja-card {
        padding: 14px;
    }

    .loja-card-foto {
        height: 110px;
        margin-bottom: 10px;
    }

    .loja-card-nome {
        font-size: 0.85rem;
    }

    /* página de detalhe (loja-produto.html) — mesmo ajuste do #hero: o
       header fica mais baixo no mobile, então o respiro do topo pode ser
       menor sem esconder o título atrás dele */
    #produto-detalhe {
        padding-top: 90px;
    }

    .produto-galeria-item-atual {
        height: 220px;
    }

    .produto-galeria-thumb-img {
        width: 48px;
        height: 48px;
    }

    .produto-info {
        padding: 20px 16px;
    }

    .produto-acoes-admin {
        flex-wrap: wrap;
        gap: 10px;
    }
}