/* ==========================================================
   Neo Product Video – frontend CSS v1.4.1
   ========================================================== */

/* ---- Bas (stora sliden / videon) ---- */
.npv-slide { box-sizing: border-box; }

.npv-video-wrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 8px;
}

.npv-video-wrap iframe,
.npv-video-wrap video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Döda JetWoo-zoomens bildlager när video visas i sliden */
.npv-slide .zoomImg{ display: none !important; }

/* Se till att videon ligger överst och tar klick */
.npv-slide .jet-woo-product-gallery__image-with-zoom{
  background:#000;
  pointer-events:auto;
}
.npv-slide .npv-video-wrap iframe,
.npv-slide .npv-video-wrap video{
  pointer-events:auto;
  z-index:1;
}

/* Säkerhetsnät för klick: låt iframen/video få klick före överliggande lager */
.jet-woo-product-gallery__image-with-zoom .npv-video-wrap{
  position:relative;
  z-index:3;
  pointer-events:auto;
}
/* Allt syskoninnehåll ovanför videon (t.ex. zoom-lager) ska inte få klick */
.jet-woo-product-gallery__image-with-zoom .npv-video-wrap ~ *{
  pointer-events:none;
}
/* Om något zoomImg ändå renderas – ta bort dess klick */
.jet-woo-product-gallery__image-with-zoom .zoomImg{
  pointer-events:none !important;
}

/* Guard-overlay för HTML5-video (play-knapp m.m. kan ligga över) */
.npv-guard{ pointer-events:none !important; }

/* ---- Tumnaglar: play-ikon på video-postern ---- */
.jet-woo-product-gallery-thumbnail .swiper-slide.npv-thumb-video,
.jet-gallery-swiper-thumb .swiper-slide.npv-thumb-video{ position:relative; }


/* Postern (mörk SVG/affisch) som tumnagel #1 */
.jet-woo-product-gallery-thumbnail img.npv-thumb-poster,
.jet-gallery-swiper-thumb img.npv-thumb-poster{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

/* “Intro”-badge vid behov */
.jet-woo-product-gallery-thumbnail .swiper-slide.npv-thumb-intro,
.jet-gallery-swiper-thumb .swiper-slide.npv-thumb-intro{ position:relative; }



/* WooCommerce standard-thumbs (flex-control) */
.woocommerce-product-gallery .flex-control-thumbs li img.npv-thumb-poster{
  display:block;
  width:100%;
  height:auto;
}

/* ---- Svart-lucka-skydd när Swiper loopar i stora sliden ---- */
html.npv-prehide .jet-gallery-swiper-slider .swiper-slide-duplicate{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ====== Thumbs – spacing & sizing (jet-gallery-swiper-thumb) ====== */

/* Nollställ oönskat gap/padding i wrappern */
.jet-gallery-swiper-thumb .swiper-wrapper{
  padding-left: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
}

/* Swiper gör spaceBetween via margin-right – styr den här */
.jet-gallery-swiper-thumb .swiper-slide{
  margin-right: 10px !important;   /* matcha ditt spaceBetween */
  padding: 0 !important;
  overflow: hidden;
}

/* Sista sliden ska inte ha extra gap */
.jet-gallery-swiper-thumb .swiper-slide:last-child{
  margin-right: 0 !important;
}

/* Se till att poster och första bild fyller hela sin slide (inga svarta kanter) */
.jet-gallery-swiper-thumb .swiper-slide img.npv-thumb-poster,
.jet-gallery-swiper-thumb .swiper-slide img.npv-thumb-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;
}

/* === Normalisering: vassa kanter + samma bildbeteende på ALLA tumnaglar === */

/* Inga rundade hörn på tumnaglarna */
.jet-gallery-swiper-thumb .swiper-slide,
.jet-woo-product-gallery-thumbnail .swiper-slide{
  border-radius:0 !important;
  overflow:hidden;
  padding:0 !important;
}

/* Alla thumb-bilder fyller sliden likadant */
.jet-gallery-swiper-thumb .swiper-slide img,
.jet-woo-product-gallery-thumbnail .swiper-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;
}

/* Sänk gapet mellan stora videon och thumbs-raden */
.jet-gallery-swiper-slider{
  margin-bottom: 10px !important;
}

/* Dölj ev. figcaption/caption under stora sliden om temat lägger den där */
.jet-gallery-swiper-slider figure,
.jet-gallery-swiper-slider .wp-caption,
.jet-gallery-swiper-slider figcaption{
  display: none !important;
}

/* Flytta in/ut pilarna om de råkar trycka på första/sista tumnageln (valfritt) */
.jet-gallery-swiper-thumb .swiper-button-prev{ left: -16px !important; }
.jet-gallery-swiper-thumb .swiper-button-next{ right: -16px !important; }
/* === NPV: Enhetlig storlek på ALLA tumnaglar === */
/* Lås höjden på slides och sträck barnen till samma höjd */

.jet-gallery-swiper-thumb .swiper-wrapper,
.jet-woo-product-gallery-thumbnail .swiper-wrapper{
  align-items: stretch !important;   /* alla slides lika höga */
}

.jet-gallery-swiper-thumb .swiper-slide,
.jet-woo-product-gallery-thumbnail .swiper-slide{
  height: 100px !important; 
width: 100px  !important;
  padding: 0 !important;
  margin-right: 10px !important;     /* matcha spaceBetween */
  overflow: hidden;
  border-radius: 0 !important;
}

/* responsivt (valfritt – justera nivåer vid behov) */
@media (max-width: 1024px){
  .jet-gallery-swiper-thumb .swiper-slide,
  .jet-woo-product-gallery-thumbnail .swiper-slide{
    height: 100px !important;
  }
}
@media (max-width: 767px){
  .jet-gallery-swiper-thumb .swiper-slide,
  .jet-woo-product-gallery-thumbnail .swiper-slide{
    height: 84px !important;
  }
}

/* Se till att ALLA bilder fyller sliden exakt */
.jet-gallery-swiper-thumb .swiper-slide img,
.jet-woo-product-gallery-thumbnail .swiper-slide img,
.jet-gallery-swiper-thumb .swiper-slide img.npv-thumb-poster,
.jet-gallery-swiper-thumb .swiper-slide img.npv-thumb-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* Kill overlay-play på videotumnageln */
.jet-woo-product-gallery-thumbnail .swiper-slide.npv-thumb-video::after,
.jet-gallery-swiper-thumb .swiper-slide.npv-thumb-video::after{
  content: none !important;
  display: none !important;
}