/* ============================================================
   BILHART'S — O visualizador 3D (página do produto e painel)
   Só entra na página de produto QUE TEM modelos 3D, e no formulário
   de produto do painel. Ver public/js/visualizador-3d.js.
   ============================================================ */

.v3d-caixa {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: #f3f1ed;
  overflow: hidden;
}

.v3d model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
}

.v3d-barra {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: rgba(0, 0, 0, .08);
  pointer-events: none;
}
.v3d-barra span {
  display: block;
  height: 100%;
  background: var(--tan, #C89A63);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s linear;
}

.v3d-status,
.v3d-dica {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: .02em;
  color: #3a3631;
  pointer-events: none;
  white-space: nowrap;
}
.v3d-status { top: 50%; }
.v3d-dica {
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--r, 4px);
  background: rgba(255, 255, 255, .85);
  animation: v3d-some .4s ease 3.1s forwards;
}
@keyframes v3d-some { to { opacity: 0; } }

.v3d-erro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px;
  background: #f3f1ed;
  color: #3a3631;
}
.v3d-erro p { margin: 0; }
.v3d-erro[hidden], .v3d-status[hidden], .v3d-dica[hidden], .v3d-barra[hidden] { display: none; }

.v3d-tentar,
.v3d-ar {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--r, 4px);
  padding: 9px 16px;
  border: 1px solid #1d1b18;
  background: #fff;
  color: #1d1b18;
}
/* Canto superior esquerdo: o direito é dos controles de zoom/rotação, e
   o de baixo fica livre para a dica de arrastar. */
.v3d-ar {
  position: absolute;
  left: 12px;
  top: 12px;
}
/* Dentro do AR este canto é do botão de sair (.v3d-ra-sair) */
model-viewer[ar-status="session-started"] .v3d-ar,
model-viewer[ar-status="object-placed"] .v3d-ar { display: none; }
/* + e − do zoom e o play/pausa da rotação: só com o modelo na tela */
.v3d-controles {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3d:not([data-estado="pronto"]) .v3d-controles { display: none; }
.v3d-zoom {
  display: flex;
  flex-direction: column;
  border: 1px solid #1d1b18;
  border-radius: var(--r, 4px);
  background: #fff;
  overflow: hidden;
}
.v3d-zoom-btn,
.v3d-girar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #1d1b18;
  cursor: pointer;
}
.v3d-zoom-btn + .v3d-zoom-btn { border-top: 1px solid rgba(29, 27, 24, .18); }
/* do mesmo tamanho da coluna do zoom (40 + a borda) */
.v3d-girar {
  width: 42px;
  height: 42px;
  border: 1px solid #1d1b18;
  border-radius: var(--r, 4px);
  background: #fff;
}
.v3d-zoom-btn:hover,
.v3d-girar:hover { background: #f3f1ed; }
.v3d-zoom-btn:focus-visible { outline: 2px solid var(--tan, #C89A63); outline-offset: -3px; }
.v3d-girar:focus-visible { outline: 2px solid var(--tan, #C89A63); outline-offset: 2px; }

.v3d-tentar:focus-visible,
.v3d-ar:focus-visible {
  outline: 2px solid var(--tan, #C89A63);
  outline-offset: 2px;
}

/* ---------- realidade aumentada: foto e brilho ----------
   Filhos do <model-viewer>: no AR do Chrome (WebXR) ficam por cima da
   câmera. Fora da sessão, escondidos — menos o painel da foto. */
.v3d-ra {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 28px);
  pointer-events: none;
}
model-viewer[ar-status="session-started"] .v3d-ra,
model-viewer[ar-status="object-placed"] .v3d-ra { display: flex; }
.v3d-ra > * { pointer-events: auto; }

/* Sair do AR: no slot exit-webxr-ar-button, que o próprio model-viewer só
   mostra com a sessão WebXR aberta. Canto superior esquerdo, abaixo da
   barra de status, acima do .v3d-ra (que só ocupa a faixa de baixo). */
.v3d-ra-sair {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.v3d-ra-sair svg { flex: none; }
.v3d-ra-sair:focus-visible { outline: 2px solid var(--tan, #C89A63); outline-offset: 3px; }

.v3d-ra-disparo {
  width: 68px;
  height: 68px;
  padding: 5px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.v3d-ra-disparo span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: transform .12s ease-out;
}
.v3d-ra-disparo:active span { transform: scale(.88); }
.v3d-ra-disparo[hidden] { display: none; }
.v3d-ra-disparo:focus-visible { outline: 2px solid var(--tan, #C89A63); outline-offset: 3px; }

.v3d-ra-brilho {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(29, 27, 24, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.v3d-ra-brilho svg { flex: none; }
.v3d-ra-brilho input {
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0;
  accent-color: var(--tan, #C89A63);
  cursor: pointer;
}

.v3d-ra-aviso {
  margin: 0;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--r, 4px);
  background: rgba(29, 27, 24, .8);
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.v3d-ra-aviso[hidden] { display: none; }

.v3d-ra-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.v3d-ra-flash--on { animation: v3d-flash .35s ease-out; }
@keyframes v3d-flash { from { opacity: .7; } to { opacity: 0; } }

.v3d-ra-foto {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: rgba(15, 14, 12, .92);
  pointer-events: auto;
}
.v3d-ra-foto[hidden] { display: none; }
.v3d--foto .v3d-controles { display: none; }
.v3d-ra-foto img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}
.v3d-ra-acoes {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.v3d-ra-acoes button {
  font: inherit;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r, 4px);
  border: 1px solid #fff;
  cursor: pointer;
}
.v3d-ra-fechar { background: transparent; color: #fff; }
.v3d-ra-salvar { background: #fff; color: #1d1b18; }
.v3d-ra-acoes button:focus-visible { outline: 2px solid var(--tan, #C89A63); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .v3d-ra-flash--on { animation: none; }
  .v3d-ra-disparo span { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v3d-barra span { transition: none; }
  .v3d-dica { animation: none; }
}

/* ============================================================
   A seção "Em 3D" da página do produto (views/produto.ejs, 3b).
   Mora aqui, e não no produto.css, de propósito: este arquivo só entra
   na página que TEM modelo 3D, e mexer no produto.css trocaria o selo
   `?v=` dele no HTML de todo produto — inclusive dos que não têm 3D.
   ============================================================ */

.pd3d .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

/* 960 px no máximo e centrado no .wrap; no celular o min() já dá 100%.
   21:9 (411 px de altura a 960 px): mais baixo que o 16:9 de antes. A
   proporção fixa faz a vista salva enquadrar igual em qualquer largura,
   e o enquadrar() do visualizador mede a caixa real, então o modelo
   continua inteiro no quadro. */
.pd3d-palco {
  position: relative;
  width: min(100%, 960px);
  margin-inline: auto;
  aspect-ratio: 21 / 9;
  max-height: 62vh;
  border-radius: var(--r, 4px);
  overflow: hidden;
  background: #ECE8E2
}

.pd3d-capa,
.pd3d-visual,
.pd3d-visual .v3d-caixa {
  position: absolute;
  inset: 0
}

.pd3d-capa {
  display: flex;
  align-items: center;
  justify-content: center
}

.pd3d-capa img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain
}

.pd3d-abrir {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4%, 32px);
  transform: translateX(-50%)
}

.pd3d-abrir svg {
  flex: none
}

.pd3d-abrir:focus-visible {
  outline: 2px solid var(--tan, #C89A63);
  outline-offset: 3px
}

.pd3d-capa[hidden],
.pd3d-visual[hidden] {
  display: none
}

/* ---------- a fileira de modelos (com mais de um) ---------- */

/* Nunca mais larga que o palco (e o .userInput do visualizador, que o
   ocupa inteiro): mesma régua min(100%, 960px), centrada. */
.pd3d-faixa {
  position: relative;
  width: min(100%, 960px);
  margin: 20px auto 0
}

/* Uma linha só: quando as miniaturas não cabem, a fileira rola para o
   lado (dedo, trackpad ou as setas), nunca a página. */
.pd3d-opcoes {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* o respiro do contorno da miniatura escolhida; o snap respeita o mesmo */
  padding: 3px 3px 4px;
  scroll-padding-inline: 3px
}

.pd3d-opcoes::-webkit-scrollbar {
  display: none
}

/* Centrado só quando cabe tudo: com rolagem, centrar cortaria o primeiro. */
.pd3d-faixa:not(.rola) .pd3d-opcoes {
  justify-content: center
}

/* O degradê escuro na ponta que ainda tem miniaturas: diz, sem
   escrever, que a fileira continua. Abaixo das setas (z-index 2) e sem
   pegar clique. Some na ponta a que a rolagem chegou (.mais-dir /
   .mais-esq vêm do produto-3d.js). */
.pd3d-faixa::before,
.pd3d-faixa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 96px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease
}

.pd3d-faixa::before {
  left: 0;
  background: linear-gradient(to left, transparent, var(--bg, #0A0908) 85%)
}

.pd3d-faixa::after {
  right: 0;
  background: linear-gradient(to right, transparent, var(--bg, #0A0908) 85%)
}

.pd3d-faixa.mais-esq::before,
.pd3d-faixa.mais-dir::after {
  opacity: 1
}

/* 128 px para uma imagem de 120: com o gap de 8, ficam 16 px entre as
   miniaturas, e o nome ainda tem 4 px de folga de cada lado */
.pd3d-opcao {
  flex: 0 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 128px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mut, #948D85);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start
}

.pd3d-opcao img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--r, 4px);
  border: 1px solid var(--line2, rgba(244, 239, 233, .19));
  background: #ECE8E2;
  transition: border-color .25s ease
}

/* O nome inteiro ("Cor tal tecido tal"), quebrando em quantas linhas
   precisar — sem reticências. */
.pd3d-opcao span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere
}

/* ---------- as setas (só com rolagem) ---------- */

.pd3d-seta {
  position: absolute;
  /* no meio da miniatura: 3px de respiro + 120px / 2 */
  top: 63px;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line2, rgba(244, 239, 233, .19));
  border-radius: 50%;
  background: var(--bg, #1A1714);
  color: var(--txt, #F4EFE9);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .2s ease
}

.pd3d-seta--ant {
  left: 4px
}

.pd3d-seta--prox {
  right: 4px
}

.pd3d-seta:hover {
  background: var(--cream, #F4EFE9);
  color: var(--bg, #1A1714);
  border-color: var(--cream, #F4EFE9)
}

.pd3d-seta:focus-visible {
  outline: 2px solid var(--tan, #C89A63);
  outline-offset: 2px
}

.pd3d-seta[hidden] {
  display: none
}

.pd3d-seta:disabled {
  opacity: 0;
  pointer-events: none
}

.pd3d-opcao:hover img {
  border-color: var(--cream, #F4EFE9)
}

.pd3d-opcao[aria-pressed="true"] {
  color: var(--cream, #F4EFE9)
}

.pd3d-opcao[aria-pressed="true"] img {
  border-color: var(--tan, #C89A63);
  box-shadow: 0 0 0 1px var(--tan, #C89A63)
}

.pd3d-opcao:focus-visible {
  outline: none
}

.pd3d-opcao:focus-visible img {
  outline: 2px solid var(--tan, #C89A63);
  outline-offset: 2px
}

@media (max-width: 760px) {
  /* 4:3 no celular: mais baixo que o quadrado de antes, e ainda alto o
     bastante para girar com o dedo */
  .pd3d-palco {
    aspect-ratio: 4 / 3
  }

  /* Num celular de 375 px cabem quase três: a terceira fica sob o
     degradê — o sinal de que a fileira rola, além da seta. */
  /* 108 px para a imagem de 104 + gap de 6: 10 px entre as miniaturas */
  .pd3d-opcoes {
    gap: 6px
  }

  .pd3d-opcao {
    flex-basis: 108px;
    width: 108px;
    font-size: 12px
  }

  .pd3d-opcao img {
    width: 104px;
    height: 104px
  }

  .pd3d-faixa::before,
  .pd3d-faixa::after {
    width: 56px
  }

  .pd3d-seta {
    top: 55px;
    width: 36px;
    height: 36px
  }
}