/* =========================================================
   PRODUCT GALLERY – CLEAN VERSION
========================================================= */

/* Layout: thumbnails left, main slider right */
.custom-gallery.side-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

/* ---------------------------------------------------------
   THUMBNAILS (vertical on desktop)
--------------------------------------------------------- */

.thumbnail-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.thumbnail-gallery::-webkit-scrollbar {
  display: none;
}

.thumb-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #222;
  border-radius: 10px;
  transition: 0.25s ease;
}

.thumb-img:hover {
  border-color: #666;
  transform: scale(1.03);
}

.thumb-img.active-thumb {
  border: 3px solid #222;
}

/* ---------------------------------------------------------
   MAIN IMAGE AREA
--------------------------------------------------------- */

.main-image-wrapper {
  flex: 1;
  max-width: 650px;
  position: relative;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 650px;
  max-height: 700px;
  background: #f9f9f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.slide-img {
  width: 100%;
  height: auto;
  max-height: 620px;
  flex: 0 0 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------
   VIDEO SLIDES
   A video slide is a <div class="slide-img slide-video">.
   It must match img-slide dimensions exactly so the track
   stays in sync.
--------------------------------------------------------- */

.slide-video {
  /* Give the div the same height as the tallest img slide */
  height: 620px;
  max-height: 620px;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Poster (thumbnail before play) */
.slide-video-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.slide-video-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: none;
  font-size: 26px;
  color: #0b6b6a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.slide-video-play:hover {
  transform: scale(1.1);
  background: #fff;
}

/* Actual video element (direct MP4 upload) */
.slide-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* YouTube / Vimeo iframe */
.slide-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Thumbnail for video slides */
.thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  background-size: cover;
  background-position: center;
  font-size: 18px;
}

.thumb-video-icon {
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------
   NAVIGATION ARROWS
--------------------------------------------------------- */

#main-prev,
#main-next {
  position: absolute;
  border: 0.6px solid #0b6b6929;
  top: 0;
  bottom: 0;
  width: 60px;
  max-width: 60px;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  cursor: pointer;
  transition: 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}

#main-prev:hover,
#main-next:hover {
  background: transparent;
}

#main-prev:active,
#main-next:active {
  transform: scale(0.96);
}

#main-prev {
  left: 0;
}
#main-next {
  right: 0;
}

/* =========================================================
   RESPONSIVE  — everything ≤ 1400px (tablet + mobile, all orientations)
   Desktop (> 1400px) is untouched above.
========================================================= */

@media (max-width: 1400px) {

  /* Stack: slider on top, thumbnails below — all at full viewport width */
  .custom-gallery.side-layout {
    flex-direction: column;
    align-items: stretch;   /* stretch, never center — keeps full width */
    gap: 0;
    width: 100%;
  }

  .main-image-wrapper {
    order: 1;
    width: 100%;
    max-width: 100%;
    position: relative;     /* buttons anchor here — NEVER set to static */
  }

  .thumbnail-gallery {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    width: 100%;
    justify-content: center;
    padding: 8px 0;
    scrollbar-width: none;
  }
  .thumbnail-gallery::-webkit-scrollbar { display: none; }

  .thumb-img {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
  }

  /* Slider: full width, clips any overflow, fixed height cap */
  .slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    border-radius: 0;
    overflow: hidden;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease;
  }

  /* Images never overflow — contain inside the fixed-height wrapper */
  .slide-img {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: #f9f9f9;
  }

  /* Video slides: match capped height so track stays in sync */
  .slide-video {
    height: 75vh;
    max-height: 75vh;
  }

  /* ── Buttons: always at left / right edge of the slider, on top ── */
  #main-prev,
  #main-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    max-width: 56px;
    z-index: 20;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border: 0.6px solid rgba(11, 107, 105, 0.28);
    color: rgba(0, 0, 0, 0.65);
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s, background 0.2s;
  }

  #main-prev { left: 0; border-left: none; }
  #main-next { right: 0; border-right: none; }

  #main-prev:active,
  #main-next:active { transform: scale(0.92); }
}

/* ── Mobile portrait: taller image area ──────────────── */
@media (max-width: 600px) and (orientation: portrait) {
  .slider-wrapper,
  .slide-img {
    max-height: 82vh;
  }

  .slide-video {
    height: 82vh;
    max-height: 82vh;
  }

  #main-prev,
  #main-next {
    width: 52px;
    font-size: 30px;
  }

  .thumbnail-gallery {
    justify-content: flex-start;
  }
}

/* ── Mobile landscape: short screen — subtract header + padding so nothing overflows ─ */
@media (max-height: 520px) and (orientation: landscape) {
  .slider-wrapper {
    /* 100vh minus ~80px for header + product-page top padding */
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
  }

  .slide-img {
    max-height: calc(100vh - 80px);
  }

  .slide-video {
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
  }

  .thumb-img {
    width: 40px;
    height: 40px;
  }

  /* Thumbnails on landscape: smaller and scrollable below slider */
  .thumbnail-gallery {
    justify-content: flex-start;
    padding: 4px 0;
  }
}