/* Main Slider (Square) */





.embla {
  
  margin: auto;
  --slide-spacing: 1rem;
  --slide-size: 100%;
  position: relative;
  margin-bottom: 0;
  padding: 0;
  width: 100%;
  
}



.embla__viewport {
  overflow: hidden;
  line-height: 0;
  
}

@media (max-width: 768px) {

    
.single-product .main-wrapper  {

padding-top: 15px;

    }
    
}    


.embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
 
 
}

.embla__slide {
  flex:1 0 100%;
  min-width: 0;
  padding-left: var(--slide-spacing);
  aspect-ratio: 1 / 1;
 box-sizing: border-box;

  
}

.embla__slide img {
    
    object-fit: cover;
    
    width: 100% !important;
    height: 100% !important;
    display: block;
  
}

.embla__slide video {
    
    object-fit: contain;
    
    width: 100% ;
    height: auto
}

.video_slide {
    position: relative;
}



.embla-thumbs {
  --thumbs-slide-spacing: 8px; /* Spacing between slides */
  --thumbs-slides-per-view: 3.2; /* 3 full slides + 0.2 peek */
  --thumbs-slide-width: calc(
    (100% - (var(--thumbs-slide-spacing) * (var(--thumbs-slides-per-view) - 1))) / var(--thumbs-slides-per-view)
  );

  width: 100%;
  margin: 0 auto;
  padding: 0;
 
}

.embla-thumbs__viewport {
overflow: hidden;
 
}

@media (max-width: 768px) {

.embla-thumbs__viewport {
overflow: visible;
clip-path: inset(0 -50vw 0 0);
 
    }
    
}    

.embla-thumbs__container {
  display: grid;
  grid-auto-flow: column; /* Horizontal layout */
  grid-auto-columns: var(--thumbs-slide-width); /* Set slide width */
  gap: var(--thumbs-slide-spacing); /* Spacing between slides */
  width: 100%;
}

.embla-thumbs__slide {
  min-width: 0; /* Prevent grid items from overflowing */
  box-sizing: border-box;
  scroll-snap-align: start; /* Optional: Snap behavior */
   position: relative;
    aspect-ratio: 1/1;
    height: auto;
  

}




 .embla-thumbs__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Adjust as needed */
  filter: grayscale(10%) opacity(70%);
  transition: filter 0.5s ease-in-out;
  border-radius: 0.8rem; /* Optional: Rounded corners */

}


.woocommerce div.product div.images .embla-thumbs__slide--selected img {
  
  filter: opacity(100%);
}


.embla-thumbs__slide .video-icon {
    
position: absolute;
display: inline-flex;
flex-wrap: wrap;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
justify-content: center;
align-content: center;
left: 50%;
top: 50%;
color: white;
font-size: 3rem;
opacity: 1;
pointer-events: none;
    
    
}

@media (min-width: 768px) {
  .embla-thumbs {
    --thumbs-slides-per-view: 5.2; /* 5 full slides + 0.2 peek */
  }
}

  
  .embla-thumbs__slide:last-child {
  padding-right: var(--thumbs-slide-spacing) /* Ensures spacing at loop point */
}




.my-video-tag {
  width: 100%;
  height: auto;
  pointer-events: none; /* Förhindra att videon fångar touch/klick från början */
  position: relative;
}



.my-video-tag[poster]  {
    object-position: center;
    background: white;
    object-fit: cover;
    transition: opacity 0.2s ease-in-out;
    
  
    
}


.video-overlay {
  position: absolute; /* eller relativt till slide */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;

  /* ev. background: rgba(0,0,0,0.1); om du vill se overlayn visuellt */
}


/* Target the poster image */
.my-video-tag[poster] {
    object-position: center;
    background: white;
}



@media (max-width: 768px) {

.embla__prev,
.embla__next {
    
display: none !important;

    }
    
}    

.embla__prev,
.embla__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; /* Touch target */
  height: 48px; /* Touch target */
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  border: none;
  border-radius: 50%; /* Circular shape */
  padding: 0;
  margin-right: 16px;
  margin-left: 16px;
  cursor: pointer;
  z-index: 99;
   display: flex;
  align-items: center;
  justify-content: center;
 backdrop-filter: brightness(0.8);
  
}

.embla__prev img,
.embla__next img {
    
width: 36px !important;
height: 36px !important;
display: block;
}


.embla__prev {
  left: 4px;
}

.embla__next {
  right: 4px;
}

.embla__prev:focus-visible,
.embla__next:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
}

.single-product span.onsale {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1.5rem !important;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50%;
    background-color: #e63946; /* Adjust to match your theme */
    color: #ffffff;
    position: absolute;
    min-height: 3.236em;
    min-width: 3.236em;
    top: 16px;
    left: 16px;
    padding: 0;
    line-height: normal;
    z-index: 10;
    
}

@media (max-width: 768px) {
    
.single-product span.onsale  {

left: 8px;
top: 8px;

    
    }

}

.embla__progress {
  box-shadow: inset 0 0 0 0.2rem #ccc; /* Lighter grey */
  background-color: #fafafa; /* Very light grey */
  position: relative;
  height: 0.6rem;
  width: 100%; /* Full width of its container */
  max-width: none; /* Removing restriction */
  overflow: hidden;
  margin-bottom: 1rem;
}

.embla__progress__bar {
  background-color: #A9A9A9; /* Less dark grey */
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: -100%;
}