/* =====================================================================
   WIDGET Galeria do produto (product_gallery) — miniaturas + lightbox.

   Nenhum hex em regra de componente: tudo deriva de --wc-widget-* (override
   só-widgets do admin) → --bs-* (paleta central) → default DashLite. Assim a
   tira e o lightbox acompanham a cor configurada em qualquer tema.

   Exceção consciente: o PALCO do lightbox é um overlay escuro fixo
   (rgba(9,11,20,…)) e seus controles são brancos. Ali a cor não é decorativa —
   é o contraste que faz a foto do produto aparecer. Um overlay derivado da
   paleta ficaria claro num tema claro e a imagem perderia leitura.
   ===================================================================== */
.wpg,
.wpg-lb {
  --wpg-accent: var(--wc-widget-accent, var(--bs-primary, #6576ff));
  --wpg-accent-rgb: var(--wc-widget-accent-rgb, var(--bs-primary-rgb, 101, 118, 255));
  --wpg-surface: var(--wc-widget-surface, var(--bs-card-bg, #ffffff));
  --wpg-border: var(--wc-widget-border, var(--bs-border-color, #e5e9f2));
  --wpg-muted: var(--wc-muted, var(--bs-secondary-color, #8094ae));
  --wpg-bg-alt: var(--wc-bg-alt, var(--bs-secondary-bg, #f5f6fa));
}

/* ---- tira de miniaturas ---------------------------------------------- */
/* text-align centra a legenda: .wpg-hint é inline-flex, então se comporta como
   conteúdo em linha e obedece ao alinhamento do bloco pai. */
.wpg { margin-top: 18px; text-align: center; }

/* Rolagem horizontal em vez de quebra de linha: a tira fica com altura
   previsível (não empurra o conteúdo abaixo conforme o nº de fotos) e no
   celular vira um carrossel com scroll-snap. */
.wpg-thumbs {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wpg-accent-rgb), .45) transparent;
  /* Centralizado quando as miniaturas CABEM (o caso comum: 2–5 fotos ficam
     alinhadas ao eixo da imagem principal em vez de encostadas à esquerda).
     O "safe" é o que impede o bug clássico de centralizar + rolar: com muitas
     fotos, o center puro empurra as primeiras para fora à esquerda e elas ficam
     inalcançáveis pelo scroll. Quem não entende "safe" fica no center da linha
     anterior — não some nada, só volta o comportamento antigo. */
  justify-content: center;
  justify-content: safe center;
}
.wpg-thumbs::-webkit-scrollbar { height: 6px; }
.wpg-thumbs::-webkit-scrollbar-track { background: transparent; }
.wpg-thumbs::-webkit-scrollbar-thumb { background: rgba(var(--wpg-accent-rgb), .4); border-radius: 20px; }

.wpg-thumb {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 76px; height: 76px; padding: 0;
  border: 1px solid var(--wpg-border); border-radius: 12px;
  background: var(--wpg-bg-alt); overflow: hidden; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wpg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpg-thumb:hover,
.wpg-thumb:focus-visible {
  border-color: var(--wpg-accent); transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--wpg-accent-rgb), .22);
  outline: none;
}

.wpg-hint { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; color: var(--wpg-muted); }
.wpg-hint .icon { color: var(--wpg-accent); }

@media (max-width: 575px) {
  .wpg-thumb { width: 64px; height: 64px; }
}

/* ---- lightbox --------------------------------------------------------- */
/* z-index acima dos flutuantes PERSISTENTES da página, não só dos modais: o balão
   do chat de IA (.wcai, 99990) e o modal de orçamento (.jwc_quote_modal, 99998)
   vivem no mesmo body. Num valor baixo o balão do chat ficaria sobre a foto
   ampliada e a tela pareceria quebrada. */
.wpg-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: rgba(9, 11, 20, .92);
  opacity: 0; transition: opacity .22s ease;
}
.wpg-lb.is-open { display: flex; opacity: 1; }
/* Sem animação para quem pediu menos movimento (vestibular/enxaqueca).
   O arrasto continua funcionando — só não desliza: a imagem troca direto. */
@media (prefers-reduced-motion: reduce) {
  .wpg-lb, .wpg-lb-stage img, .wpg-lb-stage img.is-settling { transition: none; }
}

.wpg-lb-stage {
  max-width: min(92vw, 1100px); max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.wpg-lb-stage img {
  max-width: 100%; max-height: 82vh;
  display: block; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  /* pinch-zoom mantém o zoom de pinça do sistema funcionando dentro do palco e,
     por desligar o pan, garante que o arrasto horizontal chegue como pointermove
     em vez de ser engolido pela rolagem do navegador. */
  touch-action: pinch-zoom;
  /* Arrastável: sem seleção de texto nem "fantasma" de imagem atrapalhando. */
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none;
}
.wpg-lb.is-dragging .wpg-lb-stage img { cursor: grabbing; }
/* Transição SÓ no acomodar (voltar ao lugar / entrar pelo lado). Durante o arrasto
   a classe sai, senão a imagem correria atrás do cursor com atraso. */
.wpg-lb-stage img.is-settling { transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .28s ease; }

.wpg-lb-btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.wpg-lb-btn:hover,
.wpg-lb-btn:focus-visible { background: var(--wpg-accent); border-color: transparent; transform: scale(1.06); outline: none; }
.wpg-lb-close { top: 18px; right: 18px; }
.wpg-lb-prev { left: 18px; top: 50%; margin-top: -23px; }
.wpg-lb-next { right: 18px; top: 50%; margin-top: -23px; }
/* Uma imagem só: nada para navegar ⇒ some com as setas e o contador. */
.wpg-lb.is-single .wpg-lb-prev,
.wpg-lb.is-single .wpg-lb-next,
.wpg-lb.is-single .wpg-lb-count { display: none; }

.wpg-lb-caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 54px; max-width: 80vw;
  color: rgba(255, 255, 255, .88); font-size: .88rem; text-align: center;
}
.wpg-lb-count {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 22px;
  color: rgba(255, 255, 255, .6); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em;
}

@media (max-width: 575px) {
  .wpg-lb-btn { width: 40px; height: 40px; font-size: 1.15rem; }
  .wpg-lb-close { top: 12px; right: 12px; }
  .wpg-lb-prev { left: 8px; }
  .wpg-lb-next { right: 8px; }
  .wpg-lb-stage { max-width: 96vw; }
  .wpg-lb-caption { bottom: 48px; font-size: .8rem; }
}

/* ---- gatilhos marcados pelo tema (ex.: a capa do produto) -------------
   Mesmo seletor do JS (:not(="")) para o cursor não prometer zoom onde o
   atributo está vazio e o clique não abre nada. */
[data-wc-pgal-full]:not([data-wc-pgal-full=""]) { cursor: zoom-in; }