.tx-zoomable{cursor:zoom-in}
.tx-zoom-wrap{position:relative;display:inline-block;max-width:100%;line-height:0}
.tx-zoom-wrap .tx-zoomable{cursor:pointer}
.tx-zoom-btn{
position:absolute;right:.55rem;bottom:.55rem;z-index:1;
width:2.5rem;height:2.5rem;padding:0;margin:0;border:0;border-radius:999px;
appearance:none;-webkit-appearance:none;font:inherit;-webkit-tap-highlight-color:transparent;
background:rgba(20,16,17,.68);color:#fff;
display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(3px);
box-shadow:0 2px 10px rgba(0,0,0,.35);
transition:background .15s ease,transform .15s ease}
.tx-zoom-btn:hover{background:rgba(20,16,17,.86);transform:scale(1.06)}
.tx-zoom-btn:focus-visible{outline:2px solid #e8536b;outline-offset:2px}

dialog.tx-lb{padding:0;border:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:#0d0b0c;color:#f2ebec;overscroll-behavior:contain}
dialog.tx-lb::backdrop{background:#0d0b0c}

.tx-lb__stage{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom;padding:4.25rem 1rem 3.75rem}
.tx-lb__stage img{max-width:100%;max-height:100%;height:auto;width:auto;display:block;border-radius:2px}

.tx-lb__count{
position:absolute;top:1rem;left:1rem;z-index:2;
font:600 .8rem/1 system-ui,sans-serif;letter-spacing:.02em;
color:#f2ebec;background:rgba(20,16,17,.55);backdrop-filter:blur(3px);
padding:.4rem .7rem;border-radius:999px;font-variant-numeric:tabular-nums}

.tx-lb__cap{
position:absolute;left:0;right:0;bottom:0;padding:.7rem 1.2rem 1.1rem;z-index:2;
font:400 .85rem/1.5 system-ui,sans-serif;text-align:center;color:#f2ebec;
background:linear-gradient(#0d0b0c00,#0d0b0cd9 40%);text-wrap:pretty;margin:0}
.tx-lb__cap:empty{display:none}

/* Кнопки скидають дефолтний UA-padding кнопки (браузер додає асиметричний
   padding типу 10px 20px), інакше SVG-іконка центрується не в центрі кола,
   а в центрі цієї "подушки" - і візуально зʼїжджає вбік. */
.tx-lb__close{
position:absolute;top:.85rem;right:.85rem;z-index:3;
width:2.75rem;height:2.75rem;padding:0;margin:0;border:0;border-radius:999px;
appearance:none;-webkit-appearance:none;font:inherit;-webkit-tap-highlight-color:transparent;
background:rgba(30,24,26,.65);color:#f2ebec;
display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);
box-shadow:0 2px 12px rgba(0,0,0,.4);
transition:background .15s ease,transform .15s ease}
.tx-lb__close:hover{background:#e8536b;transform:scale(1.05)}
.tx-lb__close:focus-visible{outline:2px solid #e8536b;outline-offset:3px}
.tx-lb__close svg{display:block}

/* Бокові стрілки - без кола/фону, сама іконка трохи більша й контрастніша,
   щоб лишатись помітною і без візуальної "кнопки". */
.tx-lb__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:3rem;height:3rem;padding:0;margin:0;border:0;border-radius:999px;
appearance:none;-webkit-appearance:none;font:inherit;
background:none;box-shadow:none;color:#f2ebec;
display:grid;place-items:center;cursor:pointer;
-webkit-tap-highlight-color:transparent;outline:none;
filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));
transition:color .15s ease,transform .15s ease}
.tx-lb__nav svg{display:block;width:30px;height:30px}
.tx-lb__nav:hover{color:#e8536b;transform:translateY(-50%) scale(1.12)}
/* Тонка позначка лише для реальної навігації Tab-ом з клавіатури -
   на дотик/клік WebKit(iOS Safari) помилково теж підпадає під :focus-visible
   і показує це кільце, тому обводку робимо мінімальною, без "ореолу". */
.tx-lb__nav:focus-visible{outline:1.5px solid rgba(242,235,236,.9);outline-offset:3px;border-radius:6px}
.tx-lb__nav[hidden]{display:none}
.tx-lb__prev{left:.5rem}
.tx-lb__next{right:.5rem}

@media (max-width:560px){
.tx-lb__nav svg{width:26px;height:26px}
.tx-lb__close{width:2.5rem;height:2.5rem;top:1.6rem;right:1.6rem}
.tx-lb__stage{padding:3.75rem .4rem 3.5rem}
}

@media (prefers-reduced-motion:no-preference){
dialog.tx-lb[open]{animation:tx-fade .18s ease-out}
@keyframes tx-fade{from{opacity:0}to{opacity:1}}
}