/*
 * Galeria de fotos da joia (módulo 3 do redesenho). Partial: Partials/jv/pdp-gallery.template; comportamento:
 * Scripts/jv/pdp-gallery.js. Celular: foto que passa com o dedo e fileira de miniaturas, com o vídeo no fim
 * (Figma 1886:5584). Computador: coluna de miniaturas à esquerda, com setas, e setas sobre a foto (1418:8337).
 * Do Figma para os tokens: raio da foto 4,8 (celular) → --jv-radius-sm e 12 (computador) → --jv-radius-md;
 * raio das miniaturas 8 (celular) e 4 (computador) → --jv-radius-sm nas duas; borda da miniatura escolhida
 * 2 (celular) e 3 (computador) → --jv-border-thick; seta da foto de 42px → --jv-touch-min (44).
 * Setas e Fechar sobre a foto: contorno fino e fundo branco transparente (usuário, 15/10/2026).
 */

.jv-pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-2);
  padding-inline: var(--jv-space-4);
}

.jv-pdp-gallery__stage {
  position: relative;
  min-inline-size: 0;
}

/* Fotos lado a lado, uma por vez: passam com o dedo sem biblioteca (scroll-snap). */
.jv-pdp-gallery__slides {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface);
}

.jv-pdp-gallery__slides::-webkit-scrollbar {
  display: none;
}

.jv-pdp-gallery__slide {
  flex: 0 0 100%;
  aspect-ratio: 1;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* O [hidden] do Tailwind perde para o display das classes acima: a foto de outra cor some de verdade. */
.jv-pdp-gallery__slide[hidden],
.jv-pdp-gallery__thumb-item[hidden] {
  display: none;
}

.jv-pdp-gallery__zoom {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
}

/* A foto ocupa a caixa toda: o foco do teclado fica por dentro, senão a rolagem cortaria o contorno. */
.jv-pdp-gallery__zoom:focus-visible {
  outline-offset: calc(-1 * (var(--jv-focus-width) + var(--jv-focus-offset)));
}

.jv-pdp-gallery__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Zoom ao passar o mouse, como na galeria antiga: o pdp-gallery.js marca a foto e passa a posição do ponteiro. */
.jv-pdp-gallery__zoom[data-zoom] .jv-pdp-gallery__image {
  transform: scale(var(--jv-pdp-gallery-zoom));
  transform-origin: var(--jv-pdp-gallery-x, 50%) var(--jv-pdp-gallery-y, 50%);
}

@media (hover: hover) and (pointer: fine) {
  .jv-pdp-gallery__zoom {
    cursor: zoom-in;
  }
}

/* Setas da foto: só no computador (no celular a foto passa com o dedo), na página e na janela ampliada. */
.jv-pdp-gallery__arrow {
  display: none;
}

.jv-pdp-gallery__nav {
  display: flex;
  gap: var(--jv-space-2);
  min-inline-size: 0;
}

.jv-pdp-gallery__thumbs {
  display: flex;
  flex: 0 1 auto;
  gap: var(--jv-space-2);
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.jv-pdp-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.jv-pdp-gallery__thumb-item {
  flex: none;
}

/* Miniatura: a borda transparente reserva o espaço da escolhida, para nada pular ao trocar de foto. */
.jv-pdp-gallery__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-1);
  inline-size: var(--jv-size-pdp-thumb);
  aspect-ratio: 1;
  padding: 0;
  border: var(--jv-border-thick) solid transparent;
  border-radius: var(--jv-radius-sm);
  overflow: hidden;
  background: var(--jv-color-surface);
}

.jv-pdp-gallery__thumb:focus-visible {
  outline-offset: calc(-1 * var(--jv-focus-width));
}

.jv-pdp-gallery__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.jv-pdp-gallery__thumb[aria-current="true"] {
  border-color: var(--jv-color-selected);
}

/* Vídeo: quadro branco com contorno escuro, o play verde e o rótulo, sempre no fim das miniaturas. */
.jv-pdp-gallery__thumb--video {
  flex: none;
  border: var(--jv-border-thin) solid var(--jv-color-border);
  color: var(--jv-color-text);
  font-size: var(--jv-text-xs);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-none);
  text-decoration: none;
}

/* O CSS antigo pinta todo link no hover; aqui o rótulo continua na cor do texto. */
.jv-pdp-gallery__thumb--video:hover {
  color: var(--jv-color-text);
}

/* Escolhido, o vídeo troca o contorno escuro pelo lilás da miniatura escolhida. */
.jv-pdp-gallery__thumb--video[aria-current="true"] {
  border: var(--jv-border-thick) solid var(--jv-color-selected);
}

.jv-pdp-gallery__play {
  flex: none;
  inline-size: var(--jv-size-pdp-play);
  block-size: var(--jv-size-pdp-play);
}

.jv-pdp-gallery__play circle {
  fill: var(--jv-color-action);
}

.jv-pdp-gallery__play path {
  fill: var(--jv-color-on-action);
}

/* Setas da coluna de miniaturas: só no computador, e só quando as miniaturas não cabem (pdp-gallery.js). */
.jv-pdp-gallery__scroll {
  display: none;
}

/* Janela da foto ampliada e do vídeo (pedidos do usuário, 15/10/2026): um cartão no meio da tela, na proporção
   do item, sobre a página desfocada e clara, com as miniaturas embaixo. A janela cobre a tela toda, transparente:
   o clique fora do cartão e das miniaturas fecha (pdp-gallery.js). O CSS antigo zera a margem de tudo; aqui ela
   vem explícita. */
.jv-pdp-gallery__viewer {
  --jv-pdp-gallery-margem: var(--jv-space-6);
  --jv-pdp-gallery-folga: calc(2 * var(--jv-pdp-gallery-margem) + var(--jv-size-pdp-thumb) + var(--jv-space-3));
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: var(--jv-pdp-gallery-margem);
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: none;
}

.jv-pdp-gallery__viewer[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jv-space-3);
}

/* Uma foto só, sem miniaturas: o cartão usa a altura toda. */
.jv-pdp-gallery__viewer:has(.jv-pdp-gallery__viewer-thumbs[hidden]) {
  --jv-pdp-gallery-folga: calc(2 * var(--jv-pdp-gallery-margem));
}

.jv-pdp-gallery__viewer::backdrop {
  background: var(--jv-color-overlay);
  -webkit-backdrop-filter: blur(var(--jv-blur-overlay));
  backdrop-filter: blur(var(--jv-blur-overlay));
}

/* Com a janela aberta, a página por trás não rola. No site, quem rola a página é o body: o html tem
   "overflow: inherit !important" no Templates/masters/1Column.template, que vence a regra do :root. */
:root:has(.jv-pdp-gallery__viewer[open]),
body:has(.jv-pdp-gallery__viewer[open]) {
  overflow: hidden;
}

/* Cartão: maior que a foto da página, na proporção do item (o pdp-gallery.js passa --jv-pdp-gallery-proporcao).
   A segunda largura usa a altura visível do celular (dvh); navegador antigo fica com a primeira. Quando a
   proporção muda (foto para vídeo, ou o vídeo medido depois de aberto), o tamanho muda sem pulo. */
.jv-pdp-gallery__viewer-card {
  position: relative;
  flex: none;
  inline-size: min(100%, (100vh - var(--jv-pdp-gallery-folga)) * var(--jv-pdp-gallery-proporcao, 1), var(--jv-size-pdp-viewer));
  inline-size: min(100%, (100dvh - var(--jv-pdp-gallery-folga)) * var(--jv-pdp-gallery-proporcao, 1), var(--jv-size-pdp-viewer));
  aspect-ratio: var(--jv-pdp-gallery-proporcao, 1);
  transition: inline-size var(--jv-duration-base) var(--jv-ease);
}

/* Vídeo: em pé por padrão (9:16, como a maioria dos vídeos da loja); o pdp-gallery.js mede o formato de cada um.
   O Fechar sobe para fora do cartão, para não cobrir o volume e o menu do YouTube, no canto de cima. */
.jv-pdp-gallery__viewer-card[data-tipo="video"] {
  --jv-pdp-gallery-proporcao: var(--jv-pdp-video-proporcao);
  margin-block-start: calc(var(--jv-touch-min) + var(--jv-space-2));
  inline-size: min(100%, (100vh - var(--jv-pdp-gallery-folga) - var(--jv-touch-min) - var(--jv-space-2)) * var(--jv-pdp-gallery-proporcao), var(--jv-size-pdp-video));
  inline-size: min(100%, (100dvh - var(--jv-pdp-gallery-folga) - var(--jv-touch-min) - var(--jv-space-2)) * var(--jv-pdp-gallery-proporcao), var(--jv-size-pdp-video));
}

.jv-pdp-gallery__viewer-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-surface);
}

.jv-pdp-gallery__viewer-card[data-tipo="video"] .jv-pdp-gallery__viewer-stage {
  background: var(--jv-color-surface-dark);
}

.jv-pdp-gallery__viewer-image,
.jv-pdp-gallery__viewer-stage iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  animation: jv-pdp-gallery-surgir var(--jv-duration-base) var(--jv-ease);
}

.jv-pdp-gallery__viewer-image {
  object-fit: contain;
}

/* O item novo aparece aos poucos; quem pede menos movimento no aparelho tem duração zero (tokens.css). */
@keyframes jv-pdp-gallery-surgir {
  from {
    opacity: 0;
  }
}

/* Fechar: sobre a foto, no canto de cima (usuário, 15/10/2026). Fica antes das setas e do item no código, para ser
   o primeiro foco da janela. */
.jv-pdp-gallery__close {
  position: absolute;
  inset-block-start: var(--jv-space-2);
  inset-inline-end: var(--jv-space-2);
  z-index: var(--jv-z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--jv-touch-min);
  block-size: var(--jv-touch-min);
  padding: 0;
  border: var(--jv-border-thin) solid var(--jv-color-border);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-photo-control);
  color: var(--jv-color-text);
}

.jv-pdp-gallery__viewer-card[data-tipo="video"] .jv-pdp-gallery__close {
  inset-block-start: calc(-1 * (var(--jv-touch-min) + var(--jv-space-2)));
  inset-inline-end: 0;
}

/* Miniaturas da janela: a mesma miniatura da página, em fileira embaixo do cartão. */
.jv-pdp-gallery__viewer-thumbs {
  display: flex;
  flex: none;
  gap: var(--jv-space-2);
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.jv-pdp-gallery__viewer-thumbs::-webkit-scrollbar {
  display: none;
}

.jv-pdp-gallery__viewer-thumbs[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  /* Miniaturas à esquerda, como no Figma; no código, a foto vem antes, para o celular. */
  .jv-pdp-gallery {
    flex-direction: row-reverse;
    align-items: stretch;
    padding-inline: 0;
  }

  .jv-pdp-gallery__stage {
    flex: 1;
  }

  .jv-pdp-gallery__slides {
    border-radius: var(--jv-radius-md);
  }

  /* contain: size faz a coluna medir só a altura da foto; as miniaturas que sobram rolam. */
  .jv-pdp-gallery__nav {
    flex: 0 0 var(--jv-size-pdp-thumbs);
    flex-direction: column;
    gap: var(--jv-space-3);
    contain: size;
  }

  .jv-pdp-gallery__thumbs {
    flex-direction: column;
    gap: var(--jv-space-3);
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .jv-pdp-gallery__nav .jv-pdp-gallery__thumb {
    inline-size: 100%;
  }

  .jv-pdp-gallery__nav .jv-pdp-gallery__thumb--video {
    font-size: var(--jv-text-md);
  }

  .jv-pdp-gallery__nav .jv-pdp-gallery__play {
    inline-size: var(--jv-size-pdp-play-lg);
    block-size: var(--jv-size-pdp-play-lg);
  }

  .jv-pdp-gallery__scroll:not([hidden]) {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    block-size: var(--jv-touch-min);
    padding: 0;
    border: 0;
    background: none;
    color: var(--jv-color-text);
  }

  .jv-pdp-gallery__scroll[aria-disabled="true"] {
    color: var(--jv-color-text-muted);
    cursor: default;
  }

  .jv-pdp-gallery__arrow:not([hidden]) {
    position: absolute;
    inset-block-start: 50%;
    z-index: var(--jv-z-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--jv-touch-min);
    block-size: var(--jv-touch-min);
    padding: 0;
    border: var(--jv-border-thin) solid var(--jv-color-border);
    border-radius: var(--jv-radius-pill);
    background: var(--jv-color-photo-control);
    color: var(--jv-color-text);
    transform: translateY(-50%);
  }

  .jv-pdp-gallery__arrow--prev {
    inset-inline-start: var(--jv-space-5);
  }

  .jv-pdp-gallery__arrow--next {
    inset-inline-end: var(--jv-space-5);
  }

  .jv-pdp-gallery__viewer {
    --jv-pdp-gallery-margem: var(--jv-space-8);
  }
}

/* Foto bem maior no computador (usuário, 16/10/2026), na proporção do Figma (1418:8337): a coluna de compra fica com
   --jv-size-pdp-buy (465 dos 1586px) e a galeria, miniaturas e foto, com o resto (1101), 20px entre as duas. O CSS antigo
   (styles.css) dava 55% e 45%. Só na página de produto: o detalhe do leilão tem a coluna dele. */
@media (min-width: 1024px) {
  body[class*="context-product"] #product-detail .wp-pdp .main {
    gap: var(--jv-space-5);
  }

  body[class*="context-product"] #product-detail .wp-pdp .main > .product-info {
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: none;
  }

  body[class*="context-product"] #product-detail .wp-pdp .main > .details {
    flex: 0 0 var(--jv-size-pdp-buy);
    min-inline-size: 0;
  }
}

/* Abas embaixo da foto no computador (usuário, 19/10/2026: "diminuir a imagem principal... pelo menos até aparecer as
   abas... para dar continuidade no conteúdo"): galeria e abas (Descrição, Garantia, Trocas, Personal Shopper) na coluna
   da esquerda, e a coluna de compra à direita, nas duas linhas. No modelo (Pages/product.template), as abas vêm depois da
   coluna de compra, para o celular continuar com foto, compra e abas. A foto fica no máximo com --jv-size-pdp-photo-max
   (altura da tela menos o topo e o começo das abas), e a coluna da esquerda encolhe junto (--jv-size-pdp-gallery-max):
   a coluna de compra fica com o resto, sem vão entre a foto e o texto (usuário, 19/10/2026: "aumentar a área do texto").
   As abas perdem o fundo branco e o espaço do bloco antigo (.more-descriptions do styles.css), que no celular continuam. */
@media (min-width: 1024px) {
  body[class*="context-product"] #product-detail .wp-pdp .main {
    display: grid;
    grid-template-columns: minmax(0, var(--jv-size-pdp-gallery-max)) minmax(var(--jv-size-pdp-buy), 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--jv-space-8) var(--jv-space-5);
  }

  /* O CSS antigo dá 48px embaixo da galeria; aqui o espaço até as abas é o da grade. */
  body[class*="context-product"] #product-detail .wp-pdp .main > .product-info {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 0;
  }

  body[class*="context-product"] #product-detail .wp-pdp .main > .details {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  body[class*="context-product"] #product-detail .wp-pdp .main > .more-descriptions {
    grid-column: 1;
    grid-row: 2;
    padding-block: 0;
    background: none;
  }

  body[class*="context-product"] #product-detail .wp-pdp .main > .more-descriptions > .container {
    padding-inline: 0;
  }

  /* A galeria é uma fileira invertida (miniaturas à esquerda): flex-end junta foto e miniaturas à esquerda. */
  body[class*="context-product"] #product-detail .wp-pdp .jv-pdp-gallery {
    justify-content: flex-end;
  }

  body[class*="context-product"] #product-detail .wp-pdp .jv-pdp-gallery__stage {
    max-inline-size: var(--jv-size-pdp-photo-max);
  }
}

/* Uma foto só e sem vídeo (Partials/jv/pdp-gallery): no computador, a coluna fica com a miniatura da foto, para a foto
   ficar junto do texto como nas outras joias (usuário, 19/10/2026: sem a coluna, sobrava um vão entre a foto e o texto);
   no celular, a fileira só repetiria a foto, então fica escondida. */
@media (max-width: 1023px) {
  .jv-pdp-gallery__nav--uma {
    display: none;
  }
}