.ch-lightbox-backdrop {
  position: fixed;
  inset: 0;                 /* фиксируем по краям */
  display: none;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
  /* 1) безопасная минимальная высота, без жёсткой завязки на dvh */
  min-height: 100svh;
  /* 2) расширяем фон под safe-area */
  margin-top:    calc(-1 * env(safe-area-inset-top, 0px));
  margin-right:  calc(-1 * env(safe-area-inset-right, 0px));
  margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  margin-left:   calc(-1 * env(safe-area-inset-left, 0px));
}
@supports (height: 100dvh) {
  .ch-lightbox-backdrop { min-height: clamp(100svh, 100dvh, 100lvh); }
}
/* JS var fallback for очень старых iOS */
@supports not (height: 100dvh) {
  .ch-lightbox-backdrop { min-height: calc(var(--vh, 1vh) * 100); }
}

/* Motion preference: soften or disable transitions */
@media (prefers-reduced-motion: reduce){
  .ch-lightbox-img{ transition: opacity .12s linear, transform .12s linear; }
}
.ch-lightbox-backdrop.active {
  display: flex;
}
.ch-lightbox-panel{ position:relative; max-width:90vw; max-height:90vh; display:flex; align-items:center; justify-content:center; }
.ch-lightbox-img {
  display:block;
  max-width: 90vw;
  max-height: 90dvh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  transition: opacity .36s ease-in-out, transform .36s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  z-index: 1;
  will-change: opacity, transform;
}
@supports not (height: 100dvh) {
  .ch-lightbox-img { max-height: 90vh; }
}
.ch-lightbox-prev,.ch-lightbox-next{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2; }
.ch-lightbox-close{ position:absolute; top:12px; right:12px; width:50px; height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2; font-size:22px; line-height:1; }
.ch-lightbox-prev{ left: calc(12px + env(safe-area-inset-left, 0px)); }
.ch-lightbox-next{ right: calc(12px + env(safe-area-inset-right, 0px)); }
.ch-lightbox-close{ top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
.ch-lightbox-dots{ position:absolute; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.ch-lightbox-dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.8); }
.ch-lightbox-dot.is-active{ background:#fff; }