/* Player da TV. Compatível com Chromium 94 (Tizen 7): sem :has(), container queries ou unidades novas.
   Todas as medidas usam --u, que vale 1% da largura de um palco 16:9 encaixado na tela. */

:root {
  --u: 1vw;
  --branco: #ffffff;
  --grafite: #191919;
  --texto-suave: #4a4a4a;
  --cinza: #7a7a7a;
  --marrom: #865835;
  --vinho: #691916;
  --troca: 700ms;
}

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 56.25);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.retrato #stage {
  width: calc(var(--u) * 56.25);
  height: calc(var(--u) * 100);
  background: var(--branco);
  color: var(--grafite);
  font-family: "Poppins", sans-serif;
}

.layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--troca) ease, visibility 0s linear var(--troca);
}
.layer.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--troca) ease, visibility 0s;
}

/* Vídeo */
#video-layer { background: #000; }
#video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Tela de conexão */
#boot-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--branco);
}
.boot-logo { width: calc(var(--u) * 28); height: auto; }
.boot-msg { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 1.2); color: var(--cinza); }

/* Slides de produto */
#slides-layer { background: var(--branco); }
.slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity var(--troca) ease;
}
.slide.is-active { opacity: 1; }

.foto { position: relative; overflow: hidden; background: #f0f0f0; }
.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1);
  transition-property: transform;
  transition-timing-function: linear;
}
/* O único movimento contínuo: aproximação lenta da foto enquanto o slide está na tela. */
.slide.is-active .foto img { transform: scale(1.05); }
.sem-movimento .foto img, .sem-movimento .slide.is-active .foto img { transform: none; }

.marca {
  margin: 0;
  font-weight: 500;
  color: var(--marrom);
  letter-spacing: 0.02em;
}
.nome {
  margin: 0;
  font-family: "Alegreya", serif;
  font-weight: 500;
  color: var(--grafite);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preco-de { margin: 0; color: var(--cinza); text-decoration: line-through; }
.preco { margin: 0; font-weight: 600; color: var(--grafite); white-space: nowrap; }
.desconto {
  display: inline-block;
  vertical-align: middle;
  background: var(--vinho);
  color: var(--branco);
  font-weight: 600;
  border-radius: 999px;
}
.condicoes { margin: 0; color: var(--texto-suave); }
.condicoes strong { font-weight: 600; color: var(--grafite); }

/* Layout "destaque": um produto por vez */
.destaque { display: flex; height: 100%; }
.destaque .foto {
  /* Mesma proporção das fotos da Tray (1104x1600): a imagem ocupa a altura toda sem cortes. */
  flex: 0 0 calc(var(--u) * 56.25 * 0.69);
  height: 100%;
}
.destaque .info {
  position: relative;
  flex: 1 1 auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5.5);
  display: flex;
  flex-direction: column;
}
.destaque .texto { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.destaque .marca { font-size: calc(var(--u) * 1.6); }
.destaque .nome {
  margin-top: calc(var(--u) * 1.1);
  font-size: calc(var(--u) * 4.3);
  line-height: 1.1;
  -webkit-line-clamp: 3;
}
.destaque .nome.longo { font-size: calc(var(--u) * 3.5); }
.destaque .regua {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 0.18);
  background: var(--marrom);
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 2.6);
}
.destaque .preco-de { font-size: calc(var(--u) * 1.7); margin-bottom: calc(var(--u) * 0.3); }
.destaque .preco { font-size: calc(var(--u) * 4.6); line-height: 1.1; }
.destaque .desconto {
  font-size: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1);
  margin-left: calc(var(--u) * 1.4);
}
.destaque .condicoes { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.6); line-height: 1.55; }

.destaque .rodape { display: flex; align-items: flex-end; justify-content: space-between; }
.destaque .logo { height: calc(var(--u) * 4.4); width: auto; }
.qr { display: flex; align-items: center; }
.qr-codigo { width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); }
.qr-codigo svg { display: block; width: 100%; height: 100%; }
.qr-texto {
  margin: 0 calc(var(--u) * 1.4) 0 0;
  max-width: calc(var(--u) * 11);
  text-align: right;
  font-size: calc(var(--u) * 1.05);
  line-height: 1.4;
  color: var(--texto-suave);
}

/* Layout "trio": três produtos por vez */
.trio {
  height: 100%;
  box-sizing: border-box;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 4) calc(var(--u) * 2.4);
  display: flex;
  flex-direction: column;
}
.trio .grade { flex: 1 1 auto; display: flex; justify-content: space-between; }
.trio .item { width: calc(var(--u) * 28.5); display: flex; flex-direction: column; }
.trio .foto { width: 100%; height: calc(var(--u) * 33); }
.trio .marca { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.05); }
.trio .nome {
  margin-top: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 1.85);
  line-height: 1.15;
  -webkit-line-clamp: 2;
  /* Sempre duas linhas reservadas: os preços dos três cards ficam na mesma altura. */
  min-height: calc(var(--u) * 1.85 * 1.15 * 2);
}
.trio .linha-preco { margin-top: calc(var(--u) * 0.9); display: flex; align-items: baseline; }
.trio .preco { font-size: calc(var(--u) * 2.1); }
.trio .preco-de { font-size: calc(var(--u) * 1.1); margin-left: calc(var(--u) * 0.9); }
.trio .desconto { font-size: calc(var(--u) * 0.95); padding: calc(var(--u) * 0.2) calc(var(--u) * 0.65); margin-left: calc(var(--u) * 0.9); }
.trio .condicoes { margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 1.05); line-height: 1.45; }
.trio .rodape { display: flex; justify-content: flex-end; }
.trio .logo { height: calc(var(--u) * 2.6); width: auto; }

/* ===== Tela vertical (TV em pé, 9:16). O palco mede 56,25u de largura por 100u de altura. ===== */

.retrato .boot-logo { width: calc(var(--u) * 34); }
.retrato .boot-msg { font-size: calc(var(--u) * 1.4); }

/* Um produto por vez: foto em cima, informações embaixo */
.retrato .destaque { flex-direction: column; }
.retrato .destaque .foto {
  flex: 0 0 calc(var(--u) * 65);
  width: 100%;
  height: auto;
}
.retrato .destaque .foto img { object-position: center 30%; }
.retrato .destaque .info {
  flex-direction: row;
  align-items: stretch;
  padding: calc(var(--u) * 3.4) calc(var(--u) * 3.6) calc(var(--u) * 3);
}
.retrato .destaque .texto { justify-content: flex-start; min-width: 0; }
.retrato .destaque .marca { font-size: calc(var(--u) * 1.5); }
.retrato .destaque .nome {
  margin-top: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 3.4);
  line-height: 1.1;
  -webkit-line-clamp: 2;
}
.retrato .destaque .nome.longo { font-size: calc(var(--u) * 2.9); }
.retrato .destaque .regua { margin: calc(var(--u) * 1.8) 0 calc(var(--u) * 1.6); width: calc(var(--u) * 4.5); }
.retrato .destaque .preco-de { font-size: calc(var(--u) * 1.5); }
.retrato .destaque .preco { font-size: calc(var(--u) * 4.4); }
.retrato .destaque .desconto { font-size: calc(var(--u) * 1.35); margin-left: calc(var(--u) * 1.1); }
.retrato .destaque .condicoes { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.5); }
.retrato .destaque .rodape {
  flex: 0 0 auto;
  margin-left: calc(var(--u) * 2.5);
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.retrato .destaque .logo { height: calc(var(--u) * 3.4); order: 2; }
.retrato .qr { flex-direction: column; align-items: flex-end; }
.retrato .qr-codigo { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.retrato .qr-texto {
  order: 2;
  margin: calc(var(--u) * 0.8) 0 0;
  max-width: calc(var(--u) * 12);
  font-size: calc(var(--u) * 1.1);
}

/* Três produtos por vez: três faixas, foto à esquerda e texto à direita */
.retrato .trio { padding: calc(var(--u) * 3.6) calc(var(--u) * 3.4) calc(var(--u) * 2.6); }
.retrato .trio .grade { flex-direction: column; justify-content: space-between; }
.retrato .trio .item { width: 100%; height: calc(var(--u) * 28.5); flex-direction: row; align-items: center; }
.retrato .trio .foto { flex: 0 0 calc(var(--u) * 28.5 * 0.69); width: auto; height: 100%; }
.retrato .trio .item-texto { flex: 1 1 auto; min-width: 0; padding-left: calc(var(--u) * 3.2); }
.retrato .trio .marca { margin-top: 0; font-size: calc(var(--u) * 1.35); }
.retrato .trio .nome { margin-top: calc(var(--u) * 0.5); font-size: calc(var(--u) * 2.7); min-height: 0; }
/* Preço e selo de desconto na mesma linha; preço antigo logo abaixo. */
.retrato .trio .linha-preco { margin-top: calc(var(--u) * 1.4); flex-wrap: wrap; align-items: center; }
.retrato .trio .preco { font-size: calc(var(--u) * 3.1); }
.retrato .trio .desconto { order: 1; font-size: calc(var(--u) * 1.25); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.8); margin-left: calc(var(--u) * 1.1); }
.retrato .trio .preco-de { order: 2; flex-basis: 100%; font-size: calc(var(--u) * 1.45); margin: calc(var(--u) * 0.3) 0 0; }
.retrato .trio .condicoes { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.4); }
.retrato .trio .rodape { justify-content: center; padding-top: calc(var(--u) * 2); }
.retrato .trio .logo { height: calc(var(--u) * 3); }

/* Diagnóstico (?debug=1) */
#debug {
  position: fixed;
  left: 8px; bottom: 8px;
  margin: 0;
  padding: 8px 10px;
  max-width: 50vw;
  background: rgba(0, 0, 0, 0.75);
  color: #9f9;
  font: 12px/1.4 monospace;
  white-space: pre-wrap;
  z-index: 10;
}