.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,8,9,.94);display:none;align-items:center;justify-content:center;padding:34px}
.lightbox.open{display:flex}
.lightbox-stage{position:relative;display:flex;align-items:center;justify-content:center;width:max-content;height:max-content;max-width:min(1400px,calc(100vw - 190px));max-height:88vh}
.lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.34)}
.lightbox-close{position:absolute;z-index:3;top:18px;right:22px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:38px;line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);display:block;width:52px;height:52px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background-color:rgba(0,0,0,.48);background-repeat:no-repeat;background-position:50% 50%;background-size:18px 18px;color:#fff;font-size:0;line-height:0;cursor:pointer;user-select:none;visibility:visible;transition:background-color .18s ease,border-color .18s ease}
.lightbox-nav::before{content:none}


.lightbox-nav:hover{background-color:rgba(0,0,0,.72);border-color:rgba(255,255,255,.5)}
.lightbox-prev{left:-68px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 3.5 6 8l4.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lightbox-next{right:-68px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5 10 8l-4.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lightbox-counter{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);min-width:64px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.48);color:#fff;text-align:center;font-size:14px;line-height:1.2}
.lightbox-counter:empty{display:none}
@media(max-width:680px){
  .lightbox{padding:12px}
  .lightbox-stage{width:max-content;height:max-content;max-width:calc(100vw - 24px);max-height:84vh}
  .lightbox-stage img{max-width:calc(100vw - 24px);max-height:84vh}
  .lightbox-nav{width:44px;height:44px;border-radius:12px;background-color:rgba(0,0,0,.5);background-size:18px 18px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-close{top:10px;right:10px;width:44px;height:44px;font-size:32px}
  .lightbox-counter{bottom:10px}
}