/* --- Prevent initial column flash before slider JS/CSS loads --- */
.fr-slider-wrap {
  overflow: hidden;
}

.fr-slider {
  position: relative;
}

.fr-track {
  display: flex;
}

.fr-slide {
  flex: 0 0 100%;
}


/* ============================================================
   FR Slider — FULL CSS (v1.0.3 base + forced dot colors)
   ============================================================ */

/* Wrapper */
.fr-slider-wrap { 
  position: relative; 
}

/* Slider frame: preserve 1170x780 ratio; no cropping */
.fr-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1170 / 780;
  max-height: 100dvh;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.fr-slider:active { cursor: grabbing; }

.fr-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform 600ms ease; /* keep in sync with JS TRANSITION_MS */
}

.fr-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.fr-slide img,
.fr-slide .fr-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;      /* no zoom/crop */
  pointer-events: none;
  user-select: none;
}

/* Progress bar */
.fr-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  z-index: 4;
}
.fr-progress-bar {
  width: 0%;
  height: 100%;
  background: #fff !important; /* fixed white */
  transform-origin: 0 50%;
}

/* ----- DOTS (robust visibility, forced) -----
   - Filled bullets
   - 50% larger than original (10px; 8px on mobile)
   - Active = dark (#222)
   - Inactive = light gray (#aaa)
   - Double spacing below slider (28px)
*/
.fr-dots {
  position: static;
  display: flex !important;
  justify-content: center;
  gap: 10px !important;
  margin-top: 28px !important; /* double space */
}

.fr-dots .fr-dot,
.fr-slider-wrap .fr-dots .fr-dot {
  appearance: none !important; 
  -webkit-appearance: none !important;
  display: inline-block !important;
  border: none !important;
  padding: 0 !important; 
  margin: 0 !important;
  width: 10px !important; 
  height: 10px !important;
  border-radius: 999px !important;
  background-color: #aaa !important;  /* inactive */
  opacity: 1 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.fr-dots .fr-dot[aria-selected="true"],
.fr-slider-wrap .fr-dots .fr-dot[aria-selected="true"] {
  background-color: #222 !important;  /* active */
  opacity: 1 !important;
}

/* --- Mobile: make dots more compact --- */
@media (max-width: 768px){
  .fr-dots { 
    gap: 6px !important;          /* was 10px */
    margin-top: 18px !important;  /* was 28px */
  }
  .fr-dots .fr-dot { 
    width: 7px !important;        
    height: 7px !important; 
  }
}

/* Mini sliders: double top margin on desktop only */
@media (min-width: 1025px){
  .fr-slider--mini + .fr-dots{
    margin-top: 22px !important;
  }
}

/* Mini sliders: increase dots spacing on mobile only */
@media (max-width: 768px){ 
  .fr-slider--mini + .fr-dots{ 
    margin-top: 22px !important; 
    margin-bottom: 0px !important; 
  } 
}

/* === FR SLIDER: tablet+ fill the frame (prevent letterboxing) === */
@media (min-width: 769px){
  .fr-slide img,
  .fr-slide .fr-slide-img{
    object-fit: cover;
  }
}

/* Keep minis uncropped */
.fr-slider--mini .fr-slide img,
.fr-slider--mini .fr-slide .fr-slide-img{
  object-fit: contain;
}

/* === FR SLIDER: Tablet+ fill frame (avoid blank bands) === */
@media (min-width: 769px){
  .fr-slider:not(.fr-slider--mini) .fr-slide img,
  .fr-slider:not(.fr-slider--mini) .fr-slide .fr-slide-img{
    object-fit: cover;
  }
}