/*
 * Destaque flutuante (Partials/jv/destaque-flutuante e Scripts/jv/destaque-flutuante.js; Figma "SUPERLIVE -
 * INSTAGRAM", 367:1651; usuário, 22/10/2026). O ícone fica em cima do botão do WhatsApp, à direita, centralizado
 * com ele (usuário, 22/10: no computador, do tamanho de antes e mais longe da borda; no celular, depois que o destaque
 * saiu da página de produto, o WhatsApp voltou aos 72px e o destaque foi a 88px). Aberta a janela, sobre o véu claro
 * do site, sem desfoque: no computador, a arte abre ao lado do ícone, à esquerda, e o ícone continua no lugar, por
 * cima; no celular, a arte fica no meio da tela, e o ícone fica atrás da janela (usuário, 22/10/2026). Arte de até 359px, com cantos de 10px (Figma). Com vídeo do YouTube, o player
 * fica no lugar da arte e o link vira um botão embaixo dele.
 */

/* Botões flutuantes da direita: WhatsApp embaixo e destaque em cima. As medidas ficam no :root porque o WhatsApp
   (Partials/footer.template, posição no styles.css) está fora do destaque. */
:root {
  --jv-flutuante-margem: var(--jv-space-4);  /* 16px da borda da direita; 40px no computador */
  --jv-flutuante-base: 5rem;                 /* 80px do fim da tela, onde o WhatsApp já ficava */
  --jv-flutuante-whatsapp-escala: 1;         /* WhatsApp de 72px, o tamanho do sprite */
  --jv-flutuante-whatsapp: calc(4.5rem * var(--jv-flutuante-whatsapp-escala));
  --jv-flutuante-destaque: 5.5rem;           /* destaque com 88px de largura no celular */
  --jv-flutuante-vao: var(--jv-space-2);     /* 8px entre o WhatsApp e o destaque */
}

/* Computador: WhatsApp de 72px e destaque de 92px (o do Figma), a 40px da borda. */
@media (min-width: 1024px) {
  :root {
    --jv-flutuante-margem: var(--jv-space-10);
    --jv-flutuante-destaque: 5.75rem;
  }
}

/* iPhone (Safari e os outros navegadores do iOS, todos WebKit): a barra do navegador fica embaixo, e a distância conta
   a partir de uns 17px acima dela. Com 80px, o WhatsApp ficava a 178px do fim da tela (print do usuário, 22/10/2026),
   contra uns 100px no Android. No iPhone, 16px. O -webkit-touch-callout só existe no iOS: o Safari do Mac e o Android
   ficam de fora. O iPad deitado (1024px ou mais, com a barra do navegador em cima) também fica com os 80px. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1023px) {
    :root {
      --jv-flutuante-base: var(--jv-space-4);
    }
  }
}

/* Página de produto no celular: com a barra fixa de compra à mostra (pdp-buybar.js), os botões ficam pelo menos 12px
   acima dela. Com a barra de 68px, continuam nos 80px; só sobem se a barra crescer. */
body.jv-com-barra {
  --jv-flutuante-base: max(5rem, var(--jv-barra-altura, 0px) + var(--jv-space-3));
}

/* O desenho do WhatsApp no sprite tem 72px fixos (width e height no <symbol>): encolher o botão pela largura do <svg>
   cortava o círculo. Por isso a escala, a partir do canto de baixo à direita: as distâncias da borda e do fim da tela
   continuam valendo, e a área de toque encolhe junto. */
#footer .service-float {
  right: var(--jv-flutuante-margem);
  bottom: var(--jv-flutuante-base);
  transform: scale(var(--jv-flutuante-whatsapp-escala));
  transform-origin: 100% 100%;
}

#footer .service-float > a,
#footer .service-float svg {
  display: block;
  line-height: 0;
}

.jv-destaque,
.jv-destaque__janela {
  --jv-destaque-icone: var(--jv-flutuante-destaque);
  --jv-destaque-arte: 22.4375rem;            /* 359px */
  --jv-destaque-raio: 10px;
  /* Centralizado em cima do WhatsApp, com o vão entre os dois. */
  --jv-destaque-direita: calc(var(--jv-flutuante-margem) + (var(--jv-flutuante-whatsapp) - var(--jv-destaque-icone)) / 2);
  --jv-destaque-baixo: calc(var(--jv-flutuante-base) + var(--jv-flutuante-whatsapp) + var(--jv-flutuante-vao));
}

/* Camada 2, a do WhatsApp (styles.css): o topo (4), as janelas antigas (3), as gavetas de busca, conta e sacola e o
   fundo escuro delas (5) e o menu do celular (100) passam por cima do ícone, como passam pelo WhatsApp. */
.jv-destaque {
  position: fixed;
  inset-inline-end: var(--jv-destaque-direita);
  inset-block-end: var(--jv-destaque-baixo);
  z-index: 2;
}

.jv-destaque[hidden] {
  display: none;
}

/* Com a janela aberta, quem aparece é a cópia do ícone dentro dela, no mesmo lugar. */
.jv-destaque--aberto {
  visibility: hidden;
}

.jv-destaque__icone {
  display: block;
  inline-size: var(--jv-destaque-icone);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
}

.jv-destaque__icone img {
  inline-size: 100%;
}

/* A janela ocupa a tela toda, transparente: o toque fora da arte cai nela e fecha (destaque-flutuante.js). */
.jv-destaque__janela {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: var(--jv-space-4) var(--jv-destaque-direita) var(--jv-destaque-baixo) var(--jv-space-4);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.jv-destaque__janela[open] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

/* Fundo da janela: o véu claro das janelas do site, sem o desfoque (usuário, 22/10/2026). */
.jv-destaque__janela::backdrop {
  background: var(--jv-color-overlay);
}

/* Com a janela aberta, a página por trás não rola (como na janela da galeria, pdp-gallery.css). */
:root:has(.jv-destaque__janela[open]),
body:has(.jv-destaque__janela[open]) {
  overflow: hidden;
}

.jv-destaque__caixa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.jv-destaque__caixa > * {
  pointer-events: auto;
}

/* O X do site (Shared/Svg/close-button.svg, o mesmo da janela de excluir do carrinho), sobre fundo branco. */
.jv-destaque__fechar {
  align-self: flex-end;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin: 0 0 var(--jv-space-2);
  padding: 0;
  border: 0;
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-bg) url("/Custom/Content/Themes/Shared/Svg/close-button.svg") center / contain no-repeat;
}

/* O link tem a largura da arte, para os cantos arredondados cortarem a imagem. */
.jv-destaque__arte {
  display: block;
  inline-size: fit-content;
  border-radius: var(--jv-destaque-raio);
  overflow: hidden;
  /* A arte cresce a partir do meio do ícone, como a animação do Figma. */
  transform-origin: calc(100% - var(--jv-destaque-icone) / 2) 100%;
}

/* Arte: até 359px de largura; no celular estreito, a largura da tela menos as margens; na tela baixa (celular
   deitado), a altura que cabe acima do ícone: margem de cima, X com o vão, o ícone (cerca de 1,3 vez a largura, a
   proporção do Lottie da live) menos os 16px que a arte cobre, e a distância do fim da tela. Com largura e altura
   automáticas e os dois limites, a imagem encolhe na própria proporção, sem depender das medidas do painel. A segunda
   altura usa a altura visível do celular (dvh); navegador antigo fica com a primeira. Com vídeo, sai também o botão
   de baixo com o vão (--jv-destaque-extra). */
.jv-destaque__arte img {
  --jv-destaque-reserva: calc(var(--jv-space-4) + 2.25rem + var(--jv-space-2) + var(--jv-destaque-icone) * 1.3 - var(--jv-space-4) + var(--jv-destaque-baixo));
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(var(--jv-destaque-arte), 100vw - var(--jv-space-4) - var(--jv-destaque-direita));
  max-block-size: calc(100vh - var(--jv-destaque-reserva) - var(--jv-destaque-extra, 0px));
  max-block-size: calc(100dvh - var(--jv-destaque-reserva) - var(--jv-destaque-extra, 0px));
}

/* Vídeo do YouTube (usuário, 22/10/2026): a capa (a imagem do banner) com o player por cima, que aparece quando o
   vídeo começa (destaque-flutuante.js); embaixo, o botão do link, da largura do vídeo, no formato dos botões do site
   (verde, lilás no hover; pdp-notice.css). */
.jv-destaque__arte--video {
  --jv-destaque-extra: calc(var(--jv-touch-min) + var(--jv-space-2));
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  border-radius: 0;
  overflow: visible;
}

.jv-destaque__video {
  position: relative;
  border-radius: var(--jv-destaque-raio);
  overflow: hidden;
}

.jv-destaque__video img {
  display: block;
}

.jv-destaque__video iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jv-duration-base) var(--jv-ease);
}

.jv-destaque__video--pronto iframe {
  opacity: 1;
  pointer-events: auto;
}

/* contain: o texto do botão não alarga a janela; o botão fica da largura do vídeo e quebra a linha se precisar. */
.jv-destaque__acao {
  display: flex;
  align-items: center;
  justify-content: center;
  contain: inline-size;
  min-block-size: var(--jv-touch-min);
  padding: var(--jv-space-3) var(--jv-space-6);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-action);
  color: var(--jv-color-on-action);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--jv-duration-fast) var(--jv-ease);
}

/* O CSS antigo pinta todo link no hover; aqui vale o padrão dos botões do site. */
.jv-destaque__acao:hover {
  color: var(--jv-color-on-accent);
  text-decoration: none;
}

@media (hover: hover) {
  .jv-destaque__acao:hover {
    background: var(--jv-color-accent);
  }
}

/* A cópia do ícone fica por cima dos 16px de baixo da arte. */
.jv-destaque__janela .jv-destaque__icone {
  position: relative;
  margin-block-start: calc(-1 * var(--jv-space-4));
}

/* Celular (usuário, 22/10/2026): a arte no meio da tela, na vertical e na horizontal, e o ícone continua no lugar,
   atrás da janela. A cópia do ícone por cima da arte fica só no computador. */
@media (max-width: 1023px) {
  .jv-destaque--aberto {
    visibility: visible;
  }

  .jv-destaque__janela {
    padding: var(--jv-space-4);
  }

  .jv-destaque__janela[open] {
    justify-content: center;
    align-items: center;
  }

  .jv-destaque__janela .jv-destaque__icone {
    display: none;
  }

  .jv-destaque__arte {
    transform-origin: 50% 50%;
  }

  /* Na tela baixa, cabe o que sobra das margens de cima e de baixo e do X com o vão. */
  .jv-destaque__arte img {
    --jv-destaque-reserva: calc(2 * var(--jv-space-4) + 2.25rem + var(--jv-space-2));
    max-inline-size: min(var(--jv-destaque-arte), 100vw - 2 * var(--jv-space-4));
  }

  /* Vídeo menor que a arte (usuário, 22/10/2026): 70% da largura da tela, para a janela não tomar a tela toda. */
  .jv-destaque__arte--video img {
    max-inline-size: min(var(--jv-destaque-arte), 70vw);
  }
}

/* Computador (usuário, 22/10/2026): a arte abre ao lado do ícone, à esquerda dele, com as bases alinhadas, e cresce a
   partir do lado do ícone; o X fica em cima da arte, no canto da direita. */
@media (min-width: 1024px) {
  .jv-destaque__caixa {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: var(--jv-space-4);
  }

  .jv-destaque__fechar {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .jv-destaque__arte {
    grid-column: 1;
    grid-row: 2;
    transform-origin: 100% 100%;
  }

  .jv-destaque__janela .jv-destaque__icone {
    grid-column: 2;
    grid-row: 2;
    margin-block-start: 0;
  }

  /* Na tela baixa, cabe o que sobra da margem de cima, do X com o vão e da distância do fim da tela até a base. */
  .jv-destaque__arte img {
    --jv-destaque-reserva: calc(var(--jv-space-4) + 2.25rem + var(--jv-space-2) + var(--jv-destaque-baixo));
  }
}

.jv-destaque__janela[open] .jv-destaque__arte {
  animation: jv-destaque-abrir var(--jv-duration-base) var(--jv-ease);
}

.jv-destaque__janela[open] .jv-destaque__fechar {
  animation: jv-destaque-surgir var(--jv-duration-base) var(--jv-ease);
}

@keyframes jv-destaque-abrir {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
}

@keyframes jv-destaque-surgir {
  from {
    opacity: 0;
  }
}