/* ===========================
   KRS Slider — CLEAN + ORIGINAL NAV RESTORED
   =========================== */

/* ---------- SLIDES ---------- */

.krs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.krs-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.krs-thumb {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* ===========================
   NAV BUTTONS (YOUR ORIGINAL — UNTOUCHED)
   =========================== */

.krs-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}   

.krs-slider__nav:hover{
  cursor: pointer;
}

.krs-slider[data-arrows="0"] .krs-slider__nav {
  display: none;
}

/* ===========================
   DESKTOP (≥1250)
   =========================== */

@media (min-width: 1250px) {
    

.krs-slider__nav {
  width: 3%;
  background: none !important;
  border: none !important;
  font-size: 4rem!important;
  line-height: 1;
  color: #F57F04!important;
  text-shadow: 0 0 3px rgba(0,0,0,.6);
}    

  .krs-slider {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: stretch;
  }

  .krs-slider__viewport {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
  }

  .krs-slider__main {
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .krs-slider__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .krs-slider__thumbs {
    display: flex;
    flex-direction: column;
    width: 18%;
    gap: 8px;
  }

  .krs-thumb {
    flex: 0 0 calc((100% - 24px) / 4);
    aspect-ratio: 16 / 9;
    border-radius: 8px!important;
    overflow: hidden;
    opacity: 0.6;
  }

  .krs-thumb.is-active {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ===========================
   TABLET (768–1249)
   =========================== */

@media (max-width: 1249px) and (min-width: 768px) {

  .krs-slider {
    display: flex;
    gap: 8px;
  }
  
 .krs-slider__nav {
  flex: 0 0 40px;  
  max-width: 40px;
  background: none !important;
  border: none !important;
  font-size: 4rem!important;
  line-height: 1;
  color: #F57F04!important;
  text-shadow: 0 0 3px rgba(0,0,0,.6);
}     

  .krs-slider__viewport {
    flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;    
  }

  .krs-slider__main {
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    position: relative;
  }

  .krs-slider__thumbs {
    display: flex;
    flex-direction: column;
    width: 25%;
    gap: 6px;
  }

  .krs-thumb {
    flex: 0 0 calc((100% - 18px) / 4);
  border-radius: 8px;
  overflow: hidden;    
  }
}

/* ===========================
   MOBILE (≤767)
   =========================== */

@media (max-width: 767px) {

  .krs-slider {
    display: block;
    width: 100%;
  }

  .krs-slider__viewport {
    position: relative;
  }

  .krs-slider__main {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .krs-slider__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ONLY override width/position — keep your styling */
 .krs-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  padding: 10px 10px!important;
  font-size: 3rem !important;
  color: white!important;
  background-color: rgba(245, 127, 4, .6)!important;
  border: none!important;
    z-index: 10;
  }

  .krs-slider__nav--prev {
    left: 0;
    border-radius: 0 5px 5px 0;
  }

  .krs-slider__nav--next {
    right: 0;
    border-radius: 5px 0 0 5px;
  }

  .krs-slider__thumbs {
    display: none !important;
  }
}

/* ===========================
   LIGHTBOX (YOUR STYLE, FIXED POSITIONING ONLY)
   =========================== */

.krs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
}

.krs-lightbox[hidden] {
  display: none;
}

.krs-lightbox__stage {
  position: relative;
  width: min(90vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.krs-lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.krs-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 4rem;
  color: white!important;
  background-color: rgba(245, 127, 4, .5)!important;
}

/* KEEP YOUR STYLE — ONLY FIX POSITIONING LOGIC */
.krs-lightbox__nav--prev,
.krs-lightbox__nav--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 5px!important;
  font-size: 3rem !important;
  color: white!important;
  background-color: rgba(245, 127, 4, .5)!important;
  border: none!important;
  z-index: 10;
}

/* 👇 FIX: no more viewport math that breaks on mobile */
.krs-lightbox__nav--prev {
  left: 0;
 border-radius: 0 5px 5px 0; 
}

.krs-lightbox__nav--next {
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* DATA NODE */
.KRS-SE-DATA {
  display: none !important;
}