html.tpl-open,
html.tpl-open body { overflow: hidden; }
.tpl-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-16, 16px);
padding: clamp(16px, 4vw, 48px);
background: rgba(10, 16, 29, 0.88);
backdrop-filter: blur(2px);
}
.tpl-lightbox[hidden] { display: none; }
.tpl-stage {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
max-width: min(1200px, 100%);
max-height: 100%;
}
.tpl-image {
display: block;
max-width: 100%;
max-height: calc(100vh - clamp(96px, 16vw, 160px));
width: auto;
height: auto;
object-fit: contain;
background: var(--color-white, #fff);
border-radius: var(--radius-md, 12px);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.tpl-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: var(--color-white, #fff);
cursor: pointer;
transition: background var(--duration-xs, 0.15s) var(--ease-smooth, ease),
border-color var(--duration-xs, 0.15s) var(--ease-smooth, ease);
}
.tpl-btn svg { width: 20px; height: 20px; min-width: 0; min-height: 0; }
.tpl-btn[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
.tpl-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); }
}
.tpl-btn:focus-visible { outline: 2px solid var(--color-white, #fff); outline-offset: 2px; } .tpl-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.tpl-counter {
position: absolute;
left: 0;
right: 0;
bottom: clamp(12px, 3vw, 28px);
margin: 0;
text-align: center;
font-family: var(--font-heading, inherit);
font-size: var(--text-12, 12px);
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.7);
} @media (max-width: 639px) {
.tpl-lightbox { flex-wrap: wrap; align-content: center; }
.tpl-stage { order: -1; flex-basis: 100%; }
}