.ok-asm-slider{position:relative;overflow:hidden;max-width:100%;touch-action:pan-y}
.ok-asm-track{position:relative;width:100%;height:100%}
.ok-asm-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.ok-asm-slide.is-active{opacity:1;pointer-events:auto}
.ok-asm-slide img{display:block;width:100%;height:100%;object-fit:contain}
.ok-asm-link{display:block;width:100%;height:100%}

.ok-asm-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:6;border:none;background:rgba(0,0,0,.45);color:#fff;
  width:clamp(30px, 5vw, 44px);
  height:clamp(30px, 5vw, 44px);
  border-radius:999px;cursor:pointer;
  font-size:clamp(18px, 3.5vw, 28px);
  display:flex;align-items:center;justify-content:center;
}
.ok-asm-prev{left:clamp(6px, 1.5vw, 12px)}
.ok-asm-next{right:clamp(6px, 1.5vw, 12px)}

/* TagDiv / theme builders compatibility (safe overrides) */
.ok-asm-slider{
  max-width:100%;
  box-sizing:border-box;
}

/* Prevent TagDiv forcing images to auto height/width unexpectedly */
.ok-asm-slide img{
  width:100% !important;
  height:100% !important;
  
}

/* If builder forces slider width:100%, keep inline style width by unsetting ONLY in TagDiv containers */
.td-post-content .ok-asm-slider,
.td_block_wrap .ok-asm-slider{
  width:auto !important; /* does NOT override inline width on element */
  max-width:100% !important;
}

/* TagDiv global img rules */
.td-post-content .ok-asm-slider img,
.td_block_wrap .ok-asm-slider img{
  max-width:none !important;
}


/* Image fit modes */
.ok-asm-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
}
.ok-asm-slider.ok-asm-fit-contain .ok-asm-slide img{
  object-fit:contain;
  background:#fff;
}

}


/* Strong mobile height override (TagDiv may force fixed height) */
@media (max-width: 768px){
  .ok-asm-slider{
    height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
    min-height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
    max-height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
  }
  .td-post-content .ok-asm-slider,
  .td_block_wrap .ok-asm-slider,
  .tdc-row .ok-asm-slider,
  .tdc-element .ok-asm-slider{
    height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
    min-height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
    max-height: var(--ok-asm-mobile-height, var(--ok-asm-desktop-height)) !important;
  }
  .ok-asm-track,
  .ok-asm-slide,
  .ok-asm-link,
  .ok-asm-slide img{
    height: 100% !important;
    max-height: 100% !important;
  }
}


/* Mobile centering: keep slider centered in responsive layouts/builders */
@media (max-width: 768px){
  .ok-asm-slider{
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
  }
  .td-post-content .ok-asm-slider,
  .td_block_wrap .ok-asm-slider,
  .tdc-row .ok-asm-slider,
  .tdc-element .ok-asm-slider{
    margin-left:auto !important;
    margin-right:auto !important;
    float:none !important;
  }
  }


/* Dots: always centered and stable (responsive-safe) */
.ok-asm-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  width:auto;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  z-index:5;
  pointer-events:auto;
}
.ok-asm-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  padding:0;
  margin:0;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.ok-asm-dot.is-active{
  background:rgba(255,255,255,.95);
}
@media (max-width: 480px){
  .ok-asm-dots{ bottom:10px; gap:7px; padding:6px 10px; }
  .ok-asm-dot{ width:9px; height:9px; }
}