:root{
  /* Swiper core */
  --swiper-theme-color:#fff !important;
  --swiper-preloader-color: rgba(17,17,17,.55);
  --swiper-navigation-size:40px;
  --swiper-pagination-fraction-color:#333;

  /* Design tokens */
  --c-white: #fff;
  --c-text: #111;
  --c-border: #f2f2f2;
  --c-overlay: rgba(17,17,17,.75);
  --c-overlay-weak: rgba(0,0,0,.10);

  /* Motion */
  --trns-dur: .4s;
  --trns-ease: ease;
  --trns: var(--trns-dur) var(--trns-ease);

  /* Sizes / radii */
  --gallery-h: min(75vh, 680px);
  
  --r-img: var(--border-radius);
  --r-pill: 999px;

  /* Effects */
  --btn-shadow: 0 2px 8px rgba(0,0,0,0.12);
  --img-filter: contrast(1) brightness(99%);
}

/* =========================
   GALLERY (LAYOUT)
   ========================= */
.product-gallery{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* Main area */
.product-gallery .main-swiper{
  flex:1 1 auto;
  height:var(--gallery-h);
  min-width:0; min-height:0;
  overflow:hidden;
  border:2px solid var(--c-border);
  border-radius:var(--r-img);
  cursor:zoom-in;
}

.product-gallery .main-swiper:active{ cursor:zoom-in !important; }

.main-swiper .main-swiper-button-nav{
  position:absolute; inset:0;
  pointer-events:none;
}
.main-swiper .main-swiper-button-nav > *,
.main-swiper .swiper-pagination{ pointer-events:auto !important; }

.swiper-fade .swiper-slide {
  pointer-events: none !important;
  transition-property: opacity !important;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto !important;
}

/* Slides & media */
.product-gallery .main-swiper .swiper-wrapper,
.product-gallery .main-swiper .swiper-slide{ height:100%;background-color:var(--c-white);filter:var(--img-filter); }

.product-gallery .main-swiper:not(.swiper-initialized) {
  aspect-ratio: 1 / 1;     
  overflow: hidden;
}

.product-gallery .main-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center;
}

.product-gallery .main-swiper .swiper-slide img,
.product-gallery .main-swiper .swiper-slide video,
.product-gallery .main-swiper .swiper-slide iframe{
  width:auto; height:100%;
  max-width:100%; max-height:100%;
  min-width:0; min-height:0;
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y;
  /* filter:var(--img-filter); */
  background:var(--c-white);
  padding:5px;
}

@media (max-width:991px){
  .product-gallery .main-swiper .swiper-slide img,
  .product-gallery .main-swiper .swiper-slide video,
  .product-gallery .main-swiper .swiper-slide iframe{
      width: 100%;
      height: auto;          
      object-fit: contain;
  }
}

.product-gallery .swiper-slide-active img:hover{
  cursor:zoom-in !important;
}

/* Video-ikon  */
.product-gallery .video-icon-overlay{
  position:absolute; 
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.product-gallery .video-icon-overlay svg{
  width:40px; height:40px;
  border:2px solid var(--c-overlay);
  border-radius:var(--r-pill);
  background-color:var(--c-overlay);
}
@media(min-width:992px){
  .product-gallery .main-swiper .swiper-button-prev,
  .product-gallery .main-swiper .swiper-button-next {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--trns),
      transform var(--trns),
      background var(--trns),
      visibility 0s linear var(--trns-dur);
  }
  .product-gallery .main-swiper:hover .swiper-button-prev,
  .product-gallery .main-swiper:hover .swiper-button-next {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--trns),
      transform var(--trns),
      background var(--trns);
  }
}

/* Thumbnails-kolumn ? låt JS styra bredden (desktop) */
.product-gallery .thumbs-swiper{
  flex:0 0 auto;
  align-self:flex-start;
  height:auto;
  min-width:0; min-height:0;
  overflow:scroll;
}

.product-gallery .thumbs-swiper {
  overflow: auto;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.product-gallery .thumbs-swiper::-webkit-scrollbar {
  display: none; 
}

.thumbs-swiper .swiper-slide{ height:auto; }
.thumbs-swiper img{
  display:block; width:auto; height:auto; object-fit:cover;
  aspect-ratio:1/1;
  border:2px solid var(--c-border);
  border-radius:var(--r-img);
  filter:var(--img-filter);
  background:var(--c-white);
  cursor:pointer;
  padding:10px;
  max-width:100%;
  max-height:100%;
}
.thumbs-swiper .swiper-slide-thumb-active img{ border-color:#000; }


/* =========================
   MOBILE (stacka)
   ========================= */
@media (max-width: 991px){
  .product-gallery{ flex-direction:column-reverse; }
  .product-gallery .main-swiper,
  .product-gallery .thumbs-swiper{
    height:auto; width:100% !important; max-width:none;
  }
  .product-gallery .thumbs-swiper{ margin-top:10px; display:none; }
}

/* =========================
   DESKTOP (vertikala thumbs)
   ========================= */
@media (min-width: 992px){
  .product-gallery .thumbs-swiper{ height:var(--gallery-h); }
}

/* =========================
   SWIPER UI / ÖVRIGT
   ========================= */
.swiper-lazy-preloader{
  border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-top:2px solid #0000;
  border-radius:50%;
  box-sizing:border-box;
  width:20px !important; height:20px !important;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) !important;
  margin-left:0px !important; margin-top:0px !important;
  transform-origin:50%;
  z-index:10;
  pointer-events:none;
}

.swiper-button-next, .swiper-button-prev{
  padding:5px;
  background:var(--c-overlay);
  transition: transform .15s var(--trns-ease), background .15s var(--trns-ease), opacity .15s var(--trns-ease);
  box-shadow: var(--btn-shadow);
  border-radius: var(--r-pill); 
  border:2px solid transparent;
}
.swiper-button-disabled{ display:none !important; }
.swiper-button-next{ margin-right:12px !important; }
.swiper-button-prev{ margin-left:12px !important;}

/* Fullscreen-knapp */
.btn-fullscreen{
  font-size:14px; font-weight:600;
  position:absolute; bottom:12px; right:12px;
  display:flex; align-items:center; gap:5px;
  padding: 0.5rem 1rem;
  color:var(--swiper-theme-color);
  background:var(--c-overlay);
  border:0; border-radius:var(--r-pill);
  cursor:pointer; z-index:2;
  transition: transform .15s var(--trns-ease), background .15s var(--trns-ease), opacity .15s var(--trns-ease);
  box-shadow: var(--btn-shadow);
}
.btn-fullscreen:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
/*@media (max-width: 991px){ .btn-fullscreen{ display:none; } }*/

/* =========================
   FULLSCREEN
   ========================= */
#fullscreen-swiper-container{
  position:fixed; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .24s var(--trns-ease), visibility 0s linear .24s;
  z-index:2147483650 !important;
  will-change:opacity;
  background-color:var(--c-white);
  filter:var(--img-filter);
}
#fullscreen-swiper-container .fullscreen-swiper{
  width:100%; height:100vh;
  transform:scale(.985);
  transition: transform .24s var(--trns-ease);
  will-change:transform;
  cursor:zoom-in !important;
}

@supports (height: 100dvh) {
  #fullscreen-swiper-container .fullscreen-swiper { height: 100dvh; }
}

@supports (height: 100svh) {
  #fullscreen-swiper-container .fullscreen-swiper { height: 100svh; }
}

#fullscreen-swiper-container {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fullscreen-thumbs-wrap {
  bottom: calc(env(safe-area-inset-bottom, 0) + 0px);
}

/* If you position other UI at bottom, use the same calc(...) */
#fullscreen-swiper-container .swiper-pagination,
#fullscreen-swiper-container .swiper-button-next,
#fullscreen-swiper-container .swiper-button-prev {
  margin-bottom: env(safe-area-inset-bottom, 0);
}

#fullscreen-swiper-container.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .24s var(--trns-ease);
}
#fullscreen-swiper-container.is-open .fullscreen-swiper{ transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  #fullscreen-swiper-container,
  #fullscreen-swiper-container .fullscreen-swiper{ transition:none !important; }
}

#fullscreen-swiper-container{ --swiper-navigation-size:50px; }

/* Fullscreen media */
.fullscreen-swiper img{
  width:100%; height:100%; max-height:100vh; object-fit:contain;
  background:var(--c-white);
  filter:var(--img-filter);
  aspect-ratio:1/1;
  padding:10px;
}
.fullscreen-swiper video,
.fullscreen-swiper iframe{
  width:100%; height:auto; max-height:85vh; object-fit:contain;
  background:var(--c-white);
  filter:var(--img-filter);
  aspect-ratio:1/1;
}

/* Video-ikon  */
.fullscreen-swiper .video-icon-overlay{
  position:absolute; 
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.fullscreen-swiper .video-icon-overlay svg{
  width:30px; height:30px;
  border:2px solid var(--c-overlay);
  border-radius:var(--r-pill);
  background-color:var(--c-overlay);
}

/* Zoom-cursor i fullscreen */
.swiper-zoom-container{
  height:85vh !important;
  width: 100%;
  min-height: 100%;
}

.fullscreen-swiper .swiper-slide .swiper-zoom-container:hover, .fullscreen-swiper .swiper-slide .swiper-zoom-container img {cursor:zoom-in !important;}
.fullscreen-swiper .swiper-slide-zoomed .swiper-zoom-container img{cursor:zoom-out !important;}
.fullscreen-swiper .swiper-zoom-container img{ transition: transform 120ms var(--trns-ease); }


/* Close-knapp */
.close-fullscreen{
  position:absolute; top:20px; right:30px;
  font-size:32px; color:#000; background:none; border:none; cursor:pointer;
  z-index:10000;
}

/* =========================
   FULLSCREEN THUMBS (filmstrip)
   ========================= */
.fullscreen-thumbs-wrap{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  z-index:5;
  cursor:pointer;
}
.fullscreen-thumbs-swiper img{
  width:100%; height:100%; object-fit:cover !important;
  background:var(--c-white);
  border:2px solid var(--c-border);
  border-radius:var(--r-img);
  filter:var(--img-filter);
}
.fullscreen-thumbs-swiper .swiper-slide-thumb-active img{
  border:2px solid #000;
}
.fullscreen-thumbs-wrap:has(.swiper-slide:only-child){ display:none; }



/* =========================
   PAGINATION (mobil)
   ========================= */
@media (max-width: 991px){
  .main-swiper .swiper-pagination,
  #fullscreen-swiper-container .swiper-pagination{
    display:block !important;
    position:absolute; left:0; right:0; bottom:12px;
    z-index:6; text-align:center; pointer-events:auto;
  }
  #fullscreen-swiper-container .swiper-button-next,
  #fullscreen-swiper-container .swiper-button-prev{
    display:none !important;
  }
  .main-swiper .swiper-pagination-bullet,
  #fullscreen-swiper-container .swiper-pagination-bullet{
    background: rgba(0,0,0,.35); opacity:1;
  }
  .main-swiper .swiper-pagination-bullet-active,
  #fullscreen-swiper-container .swiper-pagination-bullet-active{
    background:#000;
  }
}

/* Desktop ? valfritt: dölj bullets, visa thumbs */
@media (min-width: 992px){
  .main-swiper .swiper-pagination,
  #fullscreen-swiper-container .swiper-pagination{ display:none !important; }
}

.product-gallery .thumbs-swiper,
#fullscreen-swiper-container .fullscreen-thumbs-wrap{ display:block; }

/* 1. Disable pointers for all slides to prevent overlapping blocks */
.main-swiper-active .swiper-slide {
    pointer-events: none !important;
    z-index: 1;
}

/* 2. ONLY the active slide (the one you see) gets its click power back */
.main-swiper-active .swiper-slide-active {
    pointer-events: auto !important;
    z-index: 100 !important; /* Higher than the '99' of other images */
}

/* 3. Re-enable internal elements for the active slide */
.main-swiper-active .swiper-slide-active .open-fullscreen,
.main-swiper-active .swiper-slide-active .pointer-events-auto {
    pointer-events: auto !important;
    position: relative;
    z-index: 101;
}