/* ==========================================================================
   ZENTH TRADE — componente: ficha
   ficha.css  ·  v1.0.0
   Depende de zt-components.css
   --------------------------------------------------------------------------
   Galeria, seletor de opcoes, caixa de preco e tabela de especificacoes.
   Carregado apenas no single do aparelho.
   ========================================================================== */

.zt-ficha-main .zt-migalhas { padding-block: var(--zt-esp-6) 0; }

.zt-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--zt-esp-8);
  align-items: start;
  padding-block: var(--zt-esp-6) var(--zt-esp-8);
}

/* ---------------------------------------------------------------- galeria */

.zt-galeria__palco {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, var(--zt-roxo-25) 60%, var(--zt-roxo-50) 100%);
  border: var(--zt-regra);
  border-radius: var(--zt-raio-lg);
  overflow: hidden;
}

/* Trilha de rolagem: o dedo arrasta no celular, as setas no desktop.
   Sem autoplay — a foto do produto nunca deve trocar sozinha. */
.zt-galeria__trilha {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.zt-galeria__trilha::-webkit-scrollbar { display: none; }

.zt-galeria__quadro {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--zt-esp-8);
}
.zt-galeria__quadro img { width: 100%; height: 100%; object-fit: contain; }
.zt-galeria__quadro .zt-figura i { font-size: 3rem; }

.zt-galeria__selo { position: absolute; top: var(--zt-esp-5); left: var(--zt-esp-5); z-index: 2; }
.zt-galeria__ref { position: absolute; top: var(--zt-esp-5); right: var(--zt-esp-5); z-index: 2; font-size: var(--zt-txt-xs); color: var(--zt-tinta-tenue); }

/* Setas em vidro: aqui existe imagem por tras, entao o borrao faz sentido. */
.zt-galeria__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--zt-raio-full);
  border: 1px solid var(--zt-vidro-borda);
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur-leve);
  backdrop-filter: var(--zt-vidro-blur-leve);
  color: var(--zt-tinta);
  cursor: pointer;
  transition: background var(--zt-transicao), opacity var(--zt-transicao);
}
.zt-galeria__seta:hover { background: rgba(255,255,255,0.92); }
.zt-galeria__seta[disabled] { opacity: 0; pointer-events: none; }
.zt-galeria__seta--antes { left: var(--zt-esp-4); }
.zt-galeria__seta--depois { right: var(--zt-esp-4); }

.zt-galeria__contagem {
  position: absolute;
  bottom: var(--zt-esp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--zt-txt-xs);
  font-weight: var(--zt-peso-medio);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--zt-raio-full);
  border: 1px solid var(--zt-vidro-borda);
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur-leve);
  backdrop-filter: var(--zt-vidro-blur-leve);
  color: var(--zt-tinta-suave);
}

.zt-galeria__tiras { display: flex; gap: var(--zt-esp-3); margin-top: var(--zt-esp-3); flex-wrap: wrap; }
.zt-tira {
  flex: 1 1 64px; max-width: 84px; aspect-ratio: 1;
  border: 1px solid var(--zt-neutro-200); border-radius: var(--zt-raio-md);
  background: var(--zt-superficie); padding: 10px; cursor: pointer;
  transition: border-color var(--zt-transicao);
}
.zt-tira img { width: 100%; height: 100%; object-fit: contain; }
.zt-tira[aria-current="true"] { border-color: var(--zt-marca); }
.zt-tira:hover { border-color: var(--zt-roxo-300); }

/* ----------------------------------------------------------------- coluna */

.zt-ficha__marca { font-size: var(--zt-txt-sm); color: var(--zt-tinta-tenue); }
.zt-ficha h1 { font-size: clamp(var(--zt-txt-2xl), 3vw, var(--zt-txt-3xl)); margin-block: var(--zt-esp-2) var(--zt-esp-4); }

.zt-variacao { margin-top: var(--zt-esp-6); }
.zt-variacao__rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--zt-esp-3); margin-bottom: var(--zt-esp-3); }
.zt-variacao__rotulo strong { font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-semi); }
.zt-variacao__rotulo span { font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); }
.zt-escolhas { display: flex; flex-wrap: wrap; gap: var(--zt-esp-2); }

.zt-cor-btn {
  width: 40px; height: 40px; padding: 3px;
  border-radius: var(--zt-raio-full); border: 2px solid transparent;
  background: none; cursor: pointer; transition: border-color var(--zt-transicao);
}
.zt-cor-btn span { display: block; width: 100%; height: 100%; border-radius: var(--zt-raio-full); box-shadow: inset 0 0 0 1px rgba(18,12,63,0.18); }
.zt-cor-btn[aria-pressed="true"] { border-color: var(--zt-marca); }

.zt-cap-btn {
  font-family: inherit; font-size: var(--zt-txt-sm); font-weight: var(--zt-peso-medio);
  padding: 0.625rem 1rem; border-radius: var(--zt-raio-full);
  border: 1px solid var(--zt-neutro-200); background: var(--zt-superficie); color: var(--zt-tinta);
  cursor: pointer; transition: background var(--zt-transicao), border-color var(--zt-transicao), color var(--zt-transicao);
}
.zt-cap-btn:hover { border-color: var(--zt-roxo-300); }
.zt-cap-btn[aria-pressed="true"] { background: var(--zt-marca); border-color: var(--zt-marca); color: var(--zt-tinta-inversa); }
.zt-cap-btn[data-esgotado="sim"] { color: var(--zt-tinta-tenue); text-decoration: line-through; cursor: not-allowed; }

.zt-caixa-preco {
  margin-top: var(--zt-esp-6);
  padding-top: var(--zt-esp-5);
  border-top: var(--zt-regra);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--zt-esp-4); flex-wrap: wrap;
}
.zt-caixa-preco .zt-preco { font-size: var(--zt-txt-3xl); }
.zt-caixa-preco .zt-preco--consulta { font-size: var(--zt-txt-lg); }

.zt-acoes-ficha { display: grid; gap: var(--zt-esp-3); margin-top: var(--zt-esp-5); }
.zt-ficha__nota { margin-top: var(--zt-esp-5); }

.zt-confianca { display: grid; gap: var(--zt-esp-3); margin-top: var(--zt-esp-6); }
.zt-confianca div { display: flex; gap: var(--zt-esp-3); align-items: flex-start; font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); }
.zt-confianca i { font-size: 1.2rem; color: var(--zt-marca-clara); flex: none; margin-top: 1px; }

/* --------------------------------------------------------------- detalhes */

.zt-detalhes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--zt-esp-8); padding-bottom: var(--zt-esp-8); }
.zt-detalhes h2 { margin-bottom: var(--zt-esp-4); }
.zt-especs-tabela { width: 100%; border-collapse: collapse; font-size: var(--zt-txt-sm); }
.zt-especs-tabela th, .zt-especs-tabela td { text-align: left; padding: var(--zt-esp-3) 0; border-bottom: var(--zt-regra-clara); }
.zt-especs-tabela th { font-weight: var(--zt-peso-normal); color: var(--zt-tinta-tenue); width: 42%; }
.zt-especs-tabela td { color: var(--zt-tinta); }
.zt-texto-bloco p { margin-bottom: var(--zt-esp-4); color: var(--zt-tinta-suave); font-size: var(--zt-txt-sm); line-height: var(--zt-lh-solto); }

.zt-relacionados { padding-top: 0; }

@media (max-width: 900px) {
  .zt-ficha { grid-template-columns: 1fr; gap: var(--zt-esp-6); }
  .zt-detalhes { grid-template-columns: 1fr; gap: var(--zt-esp-6); }
}
@media (max-width: 560px) {
  .zt-galeria__quadro { padding: var(--zt-esp-6); }
  .zt-galeria__seta { display: none; }
}