/* Journal 3 / OpenCart 3 - Master Slider thumbnails below + hover change

USAGE
- Put this into Journal > Custom Code > Custom CSS
- Replace 232 with your module id if different (module-master_slider-XXX)
*/

/* 232 = master slider module id */
.module-master_slider-232 {
  --ms-thumb-gap: 6px;
  position: relative;
}

/* Tüm overflow kısıtlamalarını kaldır ki thumb list dışarı çıkabilsin */
.module-master_slider-232 .master-slider,
.module-master_slider-232 .master-slider-parent,
.module-master_slider-232 .ms-view {
  overflow: visible !important;
}

/* MasterSlider thumb listesini slider içinde absolute yerine
   module container'ın altına sabitle — JS'e gerek yok */
.module-master_slider-232 .ms-thumb-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + var(--ms-thumb-gap)) !important;
  bottom: auto !important;
  display: flex !important;
  justify-content: center !important;
  /* Sayfa yüklendiği anda görünür — gecikme yok */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Thumb container inline style'larını sıfırla */
.module-master_slider-232 .ms-thumbs-cont {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Loading spinner'ı transparan yap — arkadaki background image (first_image) görünsün */
.module-master_slider-232 .journal-loading {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Mobil/tablet: thumbları gizle */
@media (max-width: 768px), (hover: none) {
  .module-master_slider-232 .ms-thumb-list {
    display: none !important;
  }
}