/* Woman Gallery v3.4 — UI limpa + thumbs HD + monetização */

/* Mobile: não esmagar os seletores quando há 4+ tabs.
   Em vez disso, permitir scroll horizontal e manter touch-target bom. */
@media (max-width: 520px){
  /* container dos botões (barra) */
  .wg-nav{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-padding: 0 18px;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding:10px 18px;
    scrollbar-width:none;
  }
  .wg-nav::-webkit-scrollbar{ display:none; }

  /* botão */
  .wg-nav-item{
    flex:0 0 auto;
    min-height:44px;
    padding:10px 12px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:92px; /* evita ficar microscópico com 4+ */
  }

  /* ícone */
  .wg-nav-item img{
    width:22px;
    height:22px;
    object-fit:contain;
    flex:0 0 auto;
  }

  /* label */
  .wg-nav-label{
    font-size:11px;
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap;
  }
}

/* Hide Elementor rotation hints / rotated headings behind the lightbox (mobile issue) */
body.wg-lb-open .rotate-270{ display:none !important; }
body.wg-lb-open .wg-rotate-hint, body.wg-lb-open .rotate-hint{ display:none !important; }

/* Grid: ALWAYS 3 columns on all devices */
.wg-wrapper { background: transparent; padding: 0; margin: 0;
  display:block;
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 1px;
  overflow: visible !important;
  clear: both;
  z-index: 0;
}

/* Se o tema/Elementor estiver a dar uma altura fixa ao wrapper do shortcode,
   isto garante que a galeria cresce e empurra as secções de baixo. */
.elementor-widget-shortcode,
.elementor-widget-shortcode .elementor-widget-container{
  height: auto !important;
  overflow: visible !important;
}

.wg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: transparent; }
.wg-item {
  position: relative;
  padding-top: 100%;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
}
.wg-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
  image-rendering: -webkit-optimize-contrast;
}

/* Leve zoom + leve clarear */
.wg-item:hover img { transform: scale(1.035); filter: brightness(1.06); }

/* NAV — ícones puros, sem caixas */
.wg-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 14px 0;
  background: transparent;
  border: 0;
}

.wg-nav-item {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-width: 26px;
  gap: 6px;
  cursor: pointer;
  opacity: var(--wg-nav-opacity-inactive, 0.45);
  transition: transform .2s ease, opacity .2s ease;
}

/* Hard reset: evitar estilos globais de <button> do tema (fundo/hover/active) */
.wg-nav-item,
.wg-nav-item:hover,
.wg-nav-item:active,
.wg-nav-item:focus,
.wg-nav-item:focus-visible,
.wg-nav-item.active{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* Mobile: reduzir dimensões e compactar (não depende do nº de tabs) */
@media (max-width: 767px){
  .wg-nav{
    gap: 18px;
    padding: 12px 0;
  }
  .wg-nav-item{
    min-width: 22px;
    gap: 4px;
  }
  .wg-nav-item img{
    width: 22px;
    height: 22px;
  }
  .wg-nav-label{
    width: 22px;
    font-size: 5px;
    letter-spacing: 0.12em;
  }
}

.wg-nav-item img {
  width: 26px;
  height: 26px;
  display: block;
  filter: grayscale(1);
}

/* Small text under icons (HTML, translatable) */
.wg-nav-label{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 26px;
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 8px;
  font-weight: var(--wg-nav-label-weight, 400);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wg-nav-label-color, #777);
  opacity: 0.9;
  pointer-events: none;
}

.wg-nav-item:hover,
.wg-nav-item.active {
  opacity: 1;
}

.wg-nav-item:hover img,
.wg-nav-item.active img {
  filter: grayscale(0) brightness(1.05);
}

/* Loading (overlay — no layout shift) */
.wg-loading{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 18px;
  opacity: .7;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Controlled navigation (subtle pager)
   - Editorial look, minimal UI
   - Uses existing chevrons (same as lightbox arrows)
------------------------------------------------------------ */
.wg-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 16px 0 10px;
  user-select: none;
}

.wg-pager-btn{
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px;
  cursor: pointer;
  opacity: 1;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
  color: var(--wg-pager-arrow-color, #111);
}

/* Ensure SVG inherits the button color (prevents "white" arrows on some themes/states) */
.wg-pager-icon, .wg-pager-icon *{
  stroke: currentColor !important;
  fill: none !important;
}

.wg-pager-icon{
  width: var(--wg-pager-arrow-size, 28px);
  height: var(--wg-pager-arrow-size, 28px);
  display: block;
}

/* If the user replaces the arrows with image URLs, keep them visible */
.wg-pager-btn .wg-pager-icon{ opacity: 1; }
.wg-pager-btn:hover .wg-pager-icon,
.wg-pager-btn:active .wg-pager-icon,
.wg-pager-btn:focus-visible .wg-pager-icon{
  opacity: .85;
  filter: none;
}

.wg-pager-btn:hover,
.wg-pager-btn:active,
.wg-pager-btn:focus-visible{
  opacity: 1;
  transform: scale(1.06);
  color: var(--wg-pager-arrow-hover, #bf9b30);
}

/* Robust overrides to avoid theme styles turning arrows white/invisible */
.wg-wrapper .wg-pager .wg-pager-btn{ 
  color: var(--wg-pager-arrow-color, #111) !important;
  opacity: 1 !important;
}
.wg-wrapper .wg-pager .wg-pager-btn:hover,
.wg-wrapper .wg-pager .wg-pager-btn:focus,
.wg-wrapper .wg-pager .wg-pager-btn:focus-visible{
  color: var(--wg-pager-arrow-hover, #bf9b30) !important;
}
.wg-wrapper .wg-pager .wg-pager-btn:active{
  color: var(--wg-pager-arrow-active, var(--wg-pager-arrow-hover, #bf9b30)) !important;
}
.wg-wrapper .wg-pager .wg-pager-btn svg,
.wg-wrapper .wg-pager .wg-pager-btn svg *{
  stroke: currentColor !important;
  fill: none !important;
}
.wg-pager-btn:disabled{ opacity: .25; cursor: default; transform: none; }

.wg-pager-indicator{
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .2px;
  opacity: .85;
}

@media (max-width: 767px){
  .wg-pager{ padding: 14px 0 8px; gap: 10px; }
  .wg-pager-indicator{ font-size: 15px; }
}

/* Play icon — grande, sem fundo (Instagram-ish) */
.wg-play-badge {
  position: absolute;
  top: var(--wg-play-top-use, var(--wg-play-top, 10px));
  right: var(--wg-play-right-use, var(--wg-play-right, 10px));
  background: none !important;
  box-shadow: none !important;
  border: 0;
  /* IMPORTANT: do NOT force z-index here.
     Some mobile headers/menus rely on their own z-index.
     If we set z-index on the badge, it can appear ABOVE the menu while scrolling. */
  z-index: auto;
  color: var(--wg-play-color, #fff);
  font-size: var(--wg-play-size-use, var(--wg-play-size, 22px));
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  pointer-events: none;
  display: block !important;
}

/* Fallback ultra-robusto: se o tema estiver a esconder o .wg-play-badge,
   mostramos o ícone via pseudo-elemento com base no data-type="v" */
.wg-item[data-type="v"]::after{
  content: "";
  position: absolute;
  top: var(--wg-play-top-use, var(--wg-play-top, 10px));
  right: var(--wg-play-right-use, var(--wg-play-right, 10px));
  width: var(--wg-play-size-use, var(--wg-play-size, 22px));
  height: var(--wg-play-size-use, var(--wg-play-size, 22px));
  z-index: auto;
  background-color: var(--wg-play-color, #fff);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.65));
  pointer-events: none;
}

/* Desktop/default: usa valores desktop */
.wg-wrapper{
  --wg-play-size-use: var(--wg-play-size-desktop, var(--wg-play-size, 22px));
  --wg-play-top-use:  var(--wg-play-top, 10px);
  --wg-play-right-use: var(--wg-play-right, 10px);
}

/* Mobile: Play deve respeitar os valores Mobile do backoffice.
   Se não houver valores Mobile definidos, usa 50% do desktop (automatico). */
@media (max-width: 768px){
  .wg-wrapper{
    --wg-play-size-use: var(--wg-play-size-mobile, calc(var(--wg-play-size-desktop, 22px) * 0.5));
    --wg-play-top-use:  var(--wg-play-top-mobile,  var(--wg-play-top, 10px));
    --wg-play-right-use: var(--wg-play-right-mobile, var(--wg-play-right, 10px));
  }
}

/* se o markup tiver <span class="wg-chevron"> (v3.5.1+), não o mostramos,
   porque as setas já são desenhadas via ::before nos botões */
.wg-chevron{ display:none !important; }

/* Lightbox base */
.wg-lightbox {
  position: fixed;
  inset: 0;
  /* IMPORTANT: On Android Chrome during orientation change, backdrop-filter + translucent
     backgrounds can produce visible "seams" (white/transparent bars) for a few frames.
     Keep the overlay background SOLID by default to guarantee full coverage.
     Desktop enhancements are re-enabled below (>=1024px). */
  background: #000;
  backdrop-filter: none;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent browser gestures (pinch-to-zoom, two-finger pan) from scaling
     the entire overlay on mobile. We'll handle zoom/pan ONLY on the image. */
  touch-action: none;
  overscroll-behavior: contain;
}

/* Extra hard-backdrop: overdraw beyond the viewport to eliminate any edge gaps
   during dynamic viewport transitions (Android Chrome UI bars / rotation). */
.wg-lb-backdrop{
  position: fixed;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  background: #000;
  z-index: 999998;
  display: none;
}

/* While open, ensure page background never shows through (theme html/body can be white). */
html.wg-lb-open,
body.wg-lb-open{
  background: #000 !important;
}

/* Desktop: keep the nicer translucent + blur look */
@media (min-width: 1024px){
  .wg-lightbox{
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
  }
}
.wg-lb-content {
  position: relative;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 1;
}

/* ------------------------------------------------------------
   Video UX (VaultVenus stream + direct video)
   Goal: avoid the "wrong" black loading box by showing the thumbnail
   in the correct aspect ratio until the first frame is ready.
   - No click required (autoplay remains)
   - No layout shift (overlay only)
------------------------------------------------------------ */
.wg-video-wrap{
  position: relative;
  /* Let aspect-ratio drive the box. We cap both axes to avoid crop and keep it centered. */
  width: min(95vw, 95vh);
  height: auto;
  max-width: 95vw;
  max-height: 90vh;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  /* default before thumb loads; JS will set the real AR as soon as the thumb is ready */
  aspect-ratio: 16 / 9;
}

/* Hard-center lightbox content (some themes override flex alignment) */
#wg-lightbox .wg-lb-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If wrapper is used, keep it centered even if parent has weird alignment */
.wg-video-wrap{ margin: 0 auto; }

/* Mobile: use 'svh' to avoid browser UI bars causing crop/misalignment */
@media (max-width: 820px){
  .wg-video-wrap{
    max-height: 100svh;
    max-width: 100vw;
    width: 100vw;
    border-radius: 0;
  }
  .wg-lb-media{ border-radius: 0; }
}

.wg-video-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Fill the container to avoid "half-thumb" on mismatched ratios.
     Cropping is acceptable here; the video itself remains contain. */
  object-fit: cover;
}

.wg-video-loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.wg-video-loader:after{
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  animation: wgSpin 0.9s linear infinite;
}

@keyframes wgSpin{ to{ transform: rotate(360deg); } }

/* Video starts hidden (thumb visible) until JS marks is-ready */
.wg-video-wrap video.wg-video-el{
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  opacity: 0;
}

.wg-video-wrap.is-ready video.wg-video-el{
  opacity: 1;
}

.wg-video-wrap.is-ready .wg-video-thumb,
.wg-video-wrap.is-ready .wg-video-loader{
  display: none;
}

/* Hard-center lightbox content (some themes inject rules that can shift media on mobile) */
#wg-lightbox .wg-lb-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

.wg-video-wrap{ margin: 0 auto; }

/* Media inside lightbox (img, video, iframe)
   IMPORTANT: disable transitions to keep pinch/zoom perfectly synced
   with the fingers on mobile (no lag / easing). */
.wg-lb-media {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 0 50px rgba(0,0,0,0.6);
  position: relative;
  z-index: 1;
  transition: none !important;
}

/* Videos/Embeds (desktop): show large while preserving aspect ratio */
.wg-lb-content video.wg-lb-media,
.wg-lb-content iframe.wg-lb-media{
  width: 90vw;
  height: 90vh;
  max-width: 95vw;
  max-height: 90vh;
  background: #000;
}
.wg-lb-content video.wg-lb-media{
  object-fit: contain;
}

/* Mobile: keep video/thumb contained (no fullscreen before ready) */
@media (max-width: 767px){
  /* Keep the wrapper constrained by viewport without forcing 100vh/100vw */
  .wg-video-wrap{
    width: min(95vw, 95vh);
    height: auto;
    max-width: 95vw;
    max-height: 90svh;
    border-radius: 0;
    /* Keep a stable box; JS updates the real AR once thumb metadata is known */
    aspect-ratio: 16 / 9;
  }

  .wg-lb-media{
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .wg-lb-content video.wg-lb-media,
  .wg-lb-content iframe.wg-lb-media{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Fallback for real mobile/touch devices even if viewport width is large
   (some themes/pages miss the correct <meta name="viewport">). */
@media (hover: none) and (pointer: coarse){
  .wg-video-wrap{
    width: 100vw;
    height: 100svh;
    max-width: 100vw;
    max-height: 100svh;
    border-radius: 0;
    aspect-ratio: auto;
  }

  .wg-lb-media{
    max-width: 100vw;

    border-radius: 0;
  }
  .wg-lb-content video.wg-lb-media,
  .wg-lb-content iframe.wg-lb-media{
    width: 100vw !important;

    max-width: 100vw !important;

  }
}

/* The image itself can be pinch-zoomed/panned (handled by JS) */
.wg-lb-content img.wg-lb-media,
.wg-lb-content video.wg-lb-media{
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

/* Lightbox controls — sem caixas, brancos, SEMPRE visíveis */
.wg-lb-nav,
.wg-lb-close {
  position: absolute;
  z-index: 1000001; /* above media */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.6);
}

.wg-lb-nav {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  /* trocamos o símbolo por chevron SVG fino */
  font-size: 0 !important;
  padding: 12px;
  width: var(--wg-arrow-size, 56px);
  height: var(--wg-arrow-size, 56px);
  color: var(--wg-arrow-color, #fff) !important;
}

.wg-lb-nav::before{
  content: "";
  display: block;
  width: calc(var(--wg-arrow-size, 56px) * 0.28);
  height: calc(var(--wg-arrow-size, 56px) * 0.28);
  border-right: calc(var(--wg-arrow-stroke, 2px)) solid currentColor;
  border-bottom: calc(var(--wg-arrow-stroke, 2px)) solid currentColor;
  opacity: 0.95;
  margin: auto;
}

/* chevrons finos (CSS), compatível com todos os browsers/temas */
.wg-lb-prev::before{ transform: rotate(135deg); }
.wg-lb-next::before{ transform: rotate(-45deg); }
.wg-lb-prev { left: var(--wg-arrow-side, 20px) !important; }
.wg-lb-next { right: var(--wg-arrow-side, 20px) !important; }

/* Mobile: keep arrows inside the visible viewport (avoid being cut at the bottom)
   Android/Chrome can report a taller 100vh during UI-bar transitions. */
@media (max-width: 820px){
  .wg-lb-nav{
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    transform: none !important;
  }
}

.wg-lb-close { top: var(--wg-close-top, 18px) !important; right: var(--wg-close-right, 18px) !important; font-size: var(--wg-close-size, 36px) !important; color: var(--wg-close-color, #fff) !important; padding: 10px; }

/* Ad block in grid — responsive, clean, centered */
.wg-ad-grid{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background: transparent;
  /* keep a nice breathing space but not huge */
  min-height: 110px;
}

.wg-ad-grid > *{
  max-width: 100%;
}

/* If the ad contains iframe/banner, keep it responsive */
.wg-ad-grid iframe,
.wg-ad-grid img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Optional: subtle separator feel (no box) */
.wg-ad-grid{
  margin: 2px 0;
}

/* Lightbox ad container — keeps layout safe */
.wg-lb-ad{
  max-width: 92vw;
  max-height: 88vh;
  overflow: auto;
  padding: 12px;
}
.wg-lb-ad iframe,
.wg-lb-ad img{
  max-width: 100%;
  height: auto;
}

/* Anti-download / crop top bars (optional) */
.wg-lb-media-container {
  position: relative;
  overflow: hidden;
}
.wg-lb-media-container iframe {
  margin-top: -45px;
}

/* VaultVenus — Video Lightbox FIX (v3.8.7)
   - Desktop: normal 16:9 player
   - Mobile: centered, no crop (svh aware)
   - Thumb: fills container (cover)
*/

/* 1) Base wrapper: center and avoid weird fixed sizing */
#wg-lightbox .wg-video-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:auto !important;
  max-height: 88vh !important;
  overflow:hidden !important;
  background:#000 !important;
  margin:0 auto !important;
}

/* 2) Video must NEVER be cover (it crops). Use contain. */
#wg-lightbox .wg-video-wrap video,
#wg-lightbox video.wg-video-el{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit: contain !important;
  display:block !important;
  margin:0 auto !important;
}

/* 3) Desktop: force a stable 16:9 player box */
 (min-width: 768px){
  #wg-lightbox .wg-video-wrap{
    width: min(1100px, 92vw) !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 85vh !important;
    border-radius: 12px !important;
  }
}

/* VaultVenus — Video Lightbox FIX (v3.8.7)
   - Desktop: normal 16:9 player
   - Mobile: centered, no crop (svh aware)
   - Thumb: fills container (cover)
   Notes:
   - We keep images with zoom/pan; for videos we only size/center.
*/

/* Base: lightbox content centers media */
#wg-lightbox .wg-lb-content{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Wrapper: centers video and constrains height */
#wg-lightbox .wg-video-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:0 auto;
  background:#000;
  overflow:hidden;
  max-height: 88vh;
  border-radius: 12px;
}

/* Video: NEVER crop */
#wg-lightbox video.wg-video-el{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit: contain;
  display:block;
}

/* Desktop: stable 16:9 player box */
@media (min-width: 768px){
  #wg-lightbox .wg-video-wrap{
    width: min(1100px, 92vw);
    aspect-ratio: 16 / 9;
    max-height: 85vh;
  }
}

/* Mobile: use svh to avoid browser-bar vh bugs */
@media (max-width: 767px){
  #wg-lightbox .wg-video-wrap{
    width: 100vw;
    max-width: 100vw;
    aspect-ratio: auto;               /* let video + contain decide */
    max-height: calc(100svh - 56px);  /* breathing room for X/gestures */
    border-radius: 0;
  }
}

/* Thumb: always fill wrapper while loading */
#wg-lightbox .wg-video-thumb{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* =========================
 * PERF (Instagram-like)
 * - Reveal thumbs only when decoded to avoid 'blurry/washed' thumbnails
 * ========================= */
#wg-app.wg-perf-reveal .wg-item{background:rgba(0,0,0,0.15);}
#wg-app.wg-perf-reveal img.wg-thumb{opacity:0; transition:opacity .18s ease; will-change:opacity;}
#wg-app.wg-perf-reveal img.wg-thumb.wg-ready{opacity:1;}
#wg-app.wg-perf-reveal .wg-item::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.07), rgba(255,255,255,0.02)); transform:translateX(-100%); animation:wg-shimmer 1.2s ease infinite; pointer-events:none; opacity:.25;}
#wg-app.wg-perf-reveal .wg-item img.wg-thumb.wg-ready + .wg-play-badge{opacity:1;}
@keyframes wg-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

#wg-app.wg-perf-reveal .wg-item.wg-item-ready::after{display:none;}

/* ------------------------------------------------------------
   LIGHTBOX: rotation stability (Android Chrome flicker fix)
------------------------------------------------------------ */
#wg-lightbox,
.wg-lightbox{
  contain: layout size style;
  backface-visibility: hidden;
  transform: translateZ(0);
}

html.wg-lb-open,
body.wg-lb-open{
  overflow: hidden !important;
}

html.wg-lb-rotating #wg-lightbox,
body.wg-lb-rotating #wg-lightbox{
  /* keep the overlay isolated while the viewport is recalculated */
  contain: layout size style;
}

html.wg-lb-rotating #wg-lightbox .wg-video-wrap,
body.wg-lb-rotating #wg-lightbox .wg-video-wrap{
  transition: none !important;
}

/* Força respiro nas extremidades mesmo com regras do tema (último ganha + !important) */
@media (max-width: 520px){
  .wg-nav{
    box-sizing: border-box !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    justify-content: flex-start !important; /* evita space-around encostar visualmente */
  }
  /* “spacers” no começo/fim do scroll para não colar na borda */
  .wg-nav::before,
  .wg-nav::after{
    content:"";
    flex: 0 0 10px;
  }
}

/* HV_WG_NO_PULO_LOADER
   Evita “pulo” no final: não muda display/altura ao carregar páginas.
   Loader ocupa espaço fixo; só alterna visibilidade.
*/
#wg-loading{
  display:block !important;
  height:56px;              /* reserva espaço para o loader (ajuste se quiser) */
  margin:0 !important;
  padding:0 !important;
  visibility:hidden;
}
#wg-loading.wg-loading-on{ visibility:visible; }

/* HV_WG_GRID_LOCK_CLASS — usado pelo JS (min-height lock) */
#wg-grid.wg-grid-lock{ }

/* HV_GRID_ASPECT_1_1
   Reserva espaço 1:1 para evitar layout shift (buraco/pulo) enquanto thumbs carregam.
*/
#wg-grid .wg-item{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  position:relative;
  background:transparent;
}
#wg-grid .wg-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#wg-app,
#wg-grid{
  height:auto !important;
}
@media (max-width: 768px){
  #wg-app{
    overflow-anchor:none;
  }
  #wg-grid{
    align-items:start;
    grid-auto-rows:1fr;
  }
}

/* Phase 3 hardening: keep mobile grid geometry stable during AJAX/pagination */
#wg-app,
.wg-wrapper,
.wg-grid{overflow-anchor:none;}

.wg-grid{align-items:start;}

.wg-thumb{display:block;width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;}

@media (max-width: 768px){
  #wg-app{contain:none !important;}
  .wg-grid{grid-auto-flow:row dense;}
}

/* --- VaultVenus mobile: restore original Gallery AI arrows --- */
@media (max-width: 1199px){
  #wg-lightbox .wg-lb-nav,
  #wg-lightbox .wg-lb-prev,
  #wg-lightbox .wg-lb-next{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10035 !important;
  }

  #wg-lightbox .wg-lb-prev{
    left:8px !important;
    right:auto !important;
  }

  #wg-lightbox .wg-lb-next{
    right:8px !important;
    left:auto !important;
  }
}

/* WG Infinite Loading Dots */
.wg-loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 20px 0;
}

.wg-loading-dots span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  display: inline-block;
  animation: wgDotPulse 1.2s infinite ease-in-out;
}

.wg-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.wg-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes wgDotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Hide classic pagination while we move to infinite loading */
#wg-pagination,
.wg-pagination,
.wg-pager,
.wg-page-nav {
  display: none !important;
}

/* Grid ads hardening */
.wg-ad-grid .grid-ad-inner{
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wg-ad-grid .grid-ad-inner > *{
  max-width: 100%;
}

.wg-ad-grid .grid-ad-inner iframe,
.wg-ad-grid .grid-ad-inner img,
.wg-ad-grid .grid-ad-inner ins,
.wg-ad-grid .grid-ad-inner div{
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wg-ad-grid .grid-ad-inner iframe,
.wg-ad-grid .grid-ad-inner img{
  height: auto;
}

/* Full row ad alignment + mobile safety */
.wg-ad-grid{
  width: 100%;
  display: block;
  clear: both;
  margin: 18px auto;
  text-align: center;
}

.wg-ad-grid .grid-ad-inner{
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.wg-ad-grid .grid-ad-inner > *{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wg-ad-grid script + div,
.wg-ad-grid iframe,
.wg-ad-grid img,
.wg-ad-grid ins{
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wg-ad-grid iframe,
.wg-ad-grid img{
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px){
  .wg-ad-grid{
    margin: 14px auto;
    padding-left: 8px;
    padding-right: 8px;
  }

  .wg-ad-grid .grid-ad-inner{
    min-width: 0;
  }
}




/* =========================================
   FINAL SINGLE CHEVRON (BIG TOUCH AREA)
   ========================================= */
@media (max-width: 1023px){

  #wg-lightbox .wg-lb-prev,
  #wg-lightbox .wg-lb-next{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 44px !important;   /* 👈 área de toque grande */
    height: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;

    z-index: 10040 !important;
  }

  #wg-lightbox .wg-lb-prev{
    left: 4px !important;
  }

  #wg-lightbox .wg-lb-next{
    right: 4px !important;
  }

  #wg-lightbox .wg-chevron{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 10px !important;
    height: 10px !important;

    transform-origin: center !important;

    border-right: 1.25px solid rgba(255,255,255,.92) !important;
    border-bottom: 1.25px solid rgba(255,255,255,.92) !important;

    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #wg-lightbox .wg-chevron-left{
    transform: translate(-50%, -50%) rotate(135deg) !important;
  }

  #wg-lightbox .wg-chevron-right{
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

}