/* KC Product Video — frontend */
.kc-video--vertical {
  --kc-video-ratio: 9/16;
}
.kc-video--horizontal {
  --kc-video-ratio: 16/9;
}
.kc-video--square {
  --kc-video-ratio: 1/1;
}
.kc-video-slide {
  width: 100%;
  aspect-ratio: var(--kc-video-ratio, 9/16);
  background: #000;
  position: relative;
  overflow: hidden;
}
.kc-video-slide video,
.kc-video-slide iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* Bloqueia menu de long-press iOS/Chrome (copiar link, compartilhar). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.kc-video-facade {
  width: 100%;
  height: 100%;
  background: #000 no-repeat center / cover;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.kc-video-play {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 68px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.kc-video-play:hover,
.kc-video-play:focus-visible {
  transform: scale(1.08);
}
.kc-video-play-icon {
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
/* Thumbnail */
.kc-video-thumb {
  position: relative;
  touch-action: manipulation;
}
.kc-video-thumb a {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.kc-video-thumb img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.kc-video-thumb-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  pointer-events: none;
  transition: background 0.15s ease;
}
.kc-video-thumb-badge svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.kc-video-thumb:hover .kc-video-thumb-badge {
  background: rgba(0, 0, 0, 0.12);
}
.kc-video-thumb.kc-active {
  outline: 2px solid #AE8184;
  outline-offset: -2px;
}
/* Modo mobile: o Owl mostra items:1 e o player vive dentro do próprio <li>
   da thumb (figure principal está oculta pelo tema em ≤576px). O <li>
   herda display:inline-block do tema e encolhe ao conteúdo da img;
   forçamos block + 100% pra ocupar toda a largura do slide do Owl. A
   thumb estática usa o mesmo aspect-ratio do vídeo (object-fit cover na
   imagem) pra ficar coerente com o player vertical. */
@media (max-width: 989px) {
  /* Especificidade casada com .single-product .product-thumbnails li img do
	   tema, que seta height:auto e venceria com seletor menos específico.
	   A thumb estática fica quadrada como as imagens do produto; o slide do
	   vídeo (facade/iframe) expande pra var(--kc-video-ratio) quando ativado. */
  .single-product .product-thumbnails .kc-video-thumb {
    display: block;
    width: 100%;
  }
  .single-product .product-thumbnails .kc-video-thumb > a {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .single-product .product-thumbnails .kc-video-thumb > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.kc-video-thumb-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #222;
}
/* Anti-FOUC: esconde thumb até Owl reinicializar */
.product-thumbnails:not(.kc-pv-ready) .kc-video-thumb {
  visibility: hidden;
}
/* Desktop: vídeo vertical (9:16) em 100% da largura do carrossel fica bem
   mais alto que as imagens 1:1 do produto, quebrando a harmonia visual.
   Centralizamos e limitamos a largura a 9/16 (~56.25%) da galeria: com
   aspect-ratio 9/16, a altura resultante iguala a largura da figure — ou
   seja, a mesma altura de uma imagem quadrada ao lado. Só aplica na figure
   principal; lightbox tem seu próprio sizing. */
@media (min-width: 990px) {
  figure.woocommerce-product-gallery__wrapper .kc-video-slide.kc-video--vertical {
    max-width: calc(100% * 9 / 16);
    margin-left: auto;
    margin-right: auto;
  }
}
/* Lightbox */
.kc-video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kc-video-lightbox.is-open {
  display: flex;
}
.kc-video-lightbox__content {
  position: relative;
  max-width: min(900px, 95vw);
  max-height: 90vh;
  width: 100%;
}
.kc-video-lightbox__content .kc-video-slide {
  max-height: 90vh;
}
.kc-video-lightbox__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  z-index: 1;
}
.kc-video-lightbox__close:hover,
.kc-video-lightbox__close:focus-visible {
  opacity: 0.7;
}
/* Mobile */
@media (max-width: 989px) {
  .kc-video-lightbox__close {
    top: 6px;
    right: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kc-video-play {
    transition: none;
  }
}