/* Card com galeria: as fotos ficam empilhadas no mesmo quadro e as bolinhas
   trocam qual está visível. Usado no espaçador, onde cerâmica e porcelanato
   pedem peças diferentes. */

.galeria-midia{
  position:relative;
  width:100%;
  aspect-ratio:1;
}
.galeria-foto{
  display:block;
  width:100%;
  height:100%;
}
.galeria-midia .produto-foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .25s ease;
}
.galeria-midia .produto-foto.ativa{opacity:1}

.galeria-bolinhas{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  display:flex;
  justify-content:center;
  gap:7px;
}
.galeria-bolinha{
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:.18s ease;
}
.galeria-bolinha:hover{transform:scale(1.25)}
.galeria-bolinha.ativa{
  background:var(--verde);
  border-color:var(--verde);
}
.galeria-bolinha:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:2px;
}

/* Seletor de montagem: cerâmica ou porcelanato. Cada opção troca a galeria
   inteira, com as peças daquele sistema. */
.montagem-troca{
  display:flex;
  width:100%;
  background:#eef4f0;
  border:1px solid var(--borda);
  border-radius:3px;
  padding:2px;
  gap:2px;
}
.montagem-opcao{
  flex:1;
  padding:5px 4px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.montagem-opcao:hover{color:var(--verde-escuro)}
.montagem-opcao.ativa{
  background:var(--verde);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.montagem-opcao:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:2px;
}

/* O selo do modelo muda de texto a cada bolinha e os rótulos mais longos
   quebram em duas linhas nos cards estreitos. A caixa reserva a altura de
   duas linhas para a grade não pular quando o modelo troca. */
.galeria-rotulo-caixa{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
}
/* O seletor de marca ocupa uma faixa que os cards sem carrossel não têm, então
   sem isto o "Pedir pelo WhatsApp" fica em alturas diferentes na mesma linha.
   Crescendo até o fim do card, o margin-top:auto do link volta a alinhar. */
.galeria-texto{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
  gap:8px;
  text-decoration:none;
  color:inherit;
}
/* As medidas ficam num bloco só porque trocam junto com a montagem.
   O gap menor reproduz o espaçamento que elas têm soltas no card. */
.galeria-medidas{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.produto-card-galeria:hover .produto-pedir{color:#12833f;text-decoration:underline}
.produto-card-galeria:hover .produto-foto.ativa{
  border-color:var(--verde-vivo);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* Mostruário de cores do rejunte. Fica fechado por padrão: são muitas cores
   por linha, e abrir todas de uma vez empurraria o resto da página para longe.
   O botão traz uma prévia das primeiras cores para não virar um clique às
   cegas. */

.rejunte-cores{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}
.cores-chamada{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:520px;
}
.cores-chamada strong{color:var(--texto)}
.cores-toggle{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:3px;
  padding:9px 18px 9px 12px;
  font:inherit;
  font-size:14px;
  font-weight:800;
  color:var(--verde-escuro);
  cursor:pointer;
  transition:.18s ease;
}
.cores-toggle:hover{border-color:var(--verde-vivo);background:#eefaf0}
.cores-toggle:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:2px;
}
.cores-previa{display:inline-flex}
/* as bolinhas se sobrepõem um pouco, como um leque de amostras */
.cores-previa-ponto{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.cores-previa-ponto + .cores-previa-ponto{margin-left:-7px}
.cores-toggle-seta{
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  transition:transform .18s ease;
}
.cores-toggle[aria-expanded="true"] .cores-toggle-seta{transform:rotate(180deg)}

.cores-conteudo{width:100%}
.cores-conteudo .paleta-cores{margin-top:0}
.cores-conteudo .linha-tinta-nota{margin-top:16px}

@media (max-width:600px){
  .cores-toggle{font-size:13px;padding:8px 14px 8px 10px}
  .cores-previa-ponto{width:16px;height:16px}
}

/* Chamada da calculadora de pisos, no fim da página */
.calculadora-callout{margin-top:4px}
.calculadora-callout .visualizer-callout-texto p{max-width:620px}

/* ---------------------------------------------------------------
   "Monte seu pedido de piso" — o bloco do topo da página.
   As amostras de visual são desenhadas em CSS de propósito: representam
   um ESTILO (madeira, cimento, mármore...), não um modelo em estoque.
   Foto de produto aqui envelheceria a cada lote; um gradiente, não.
   --------------------------------------------------------------- */
.monte-piso{
  border-top:5px solid var(--amarelo);
}
.monte-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 28px;
  margin-top:6px;
}
.monte-passo{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.monte-passo legend{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  margin-bottom:10px;
  font-family:var(--display);
  font-size:19px;
  color:var(--verde-escuro);
}
.monte-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--verde);
  color:#fff;
  font-family:var(--corpo);
  font-size:13px;
  font-weight:800;
  flex:0 0 auto;
}
.monte-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* Mesmo desenho dos chips do visualizador de tintas: contorno fino, verde
   chapado quando marcado. Altura mínima de 44px = alvo de toque no celular. */
.monte-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:9px 14px;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:3px;
  color:var(--texto);
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.monte-chip:hover{border-color:var(--verde)}
.monte-chip.ativa{
  background:var(--verde);
  border-color:var(--verde);
  color:#fff;
}
.monte-chip:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.monte-amostra{
  width:26px;
  height:26px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.12);
  flex:0 0 auto;
}
.monte-chip.ativa .monte-amostra{border-color:rgba(255,255,255,.7)}
/* veios finos em dois tons de castanho */
.monte-amostra--madeira{
  background:repeating-linear-gradient(100deg,#a9784e 0 5px,#b98a5e 5px 8px,#9c6d44 8px 13px);
}
/* cinza chapado com uma mancha mais clara, como o piso queimado de verdade */
.monte-amostra--cimento{
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),transparent 58%),
    linear-gradient(135deg,#a8a9a4,#8b8d88);
}
/* branco-osso com um único veio diagonal */
.monte-amostra--marmore{
  background:linear-gradient(115deg,#f2f0eb 0 45%,#d6d3cb 47% 50%,#f2f0eb 52%);
}
/* pedra: fundo escuro com duas lajes mais claras */
.monte-amostra--pedra{
  background:
    radial-gradient(circle at 28% 34%,#77726a 0 19%,transparent 20%),
    radial-gradient(circle at 70% 66%,#807a70 0 22%,transparent 23%),
    #5c5850;
}
.monte-amostra--liso{background:#d9d3c5}

.monte-area{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--muted);
}
.monte-area input{
  width:120px;
  min-height:44px;
  padding:9px 12px;
  border:1px solid var(--borda);
  border-radius:3px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--texto);
  background:#fff;
}
.monte-area input:focus-visible{outline:2px solid var(--verde);outline-offset:1px}

.monte-dica{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.monte-dica a{color:var(--verde);font-weight:800}
#monteDica{
  background:#eefaf0;
  border:1px solid #cfeed6;
  border-radius:3px;
  padding:10px 12px;
  color:var(--verde-escuro);
}

.monte-resumo{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--linha);
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 20px;
  align-items:center;
}
.monte-resumo-rotulo{
  grid-column:1 / -1;
  margin:0;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.monte-mensagem{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--texto);
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:3px;
  padding:12px 14px;
}
.monte-enviar{justify-self:end}

@media (max-width:900px){
  .monte-grid{grid-template-columns:1fr;gap:18px}
  .monte-resumo{grid-template-columns:1fr}
  .monte-enviar{justify-self:stretch;justify-content:center}
}
@media (max-width:600px){
  .monte-chip{font-size:13px;padding:8px 12px}
  .monte-passo legend{font-size:17px}
}

/* O tipo ocupa a linha inteira: é a primeira escolha e a que define os
   tamanhos. Os outros quatro passos ficam em duas colunas embaixo. */
.monte-passo--tipo{grid-column:1 / -1}
/* .monte-chip é display:inline-flex, que venceria o [hidden] do navegador */
.monte-chip[hidden]{display:none}
.monte-chip-nota{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
}
.monte-chip.ativa .monte-chip-nota{color:rgba(255,255,255,.85)}