.lightbox {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #070707;
    color: #f4f2ec;
    overflow: hidden;
}
.lightbox::backdrop { background: #070707; }
.lightbox__header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; min-height: 72px; padding: 0 clamp(16px, 3vw, 46px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #292929; background: rgba(7,7,7,.9); }
.lightbox__header > div:first-child { min-width: 0; display: grid; padding-right: 16px; }
.lightbox__header strong { max-width: min(62vw, 760px); overflow: hidden; font-family: var(--font-display); font-size: clamp(1rem, 1.45vw, 1.45rem); text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__index { color: #918e88; font-size: .58rem; font-weight: 800; letter-spacing: .16em; }
.lightbox__tools { display: flex; align-items: center; }
.lightbox__related { min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid #303030; color: #f4f2ec; font-size: .58rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.lightbox__related:hover { color: var(--accent); border-color: var(--accent); }
.lightbox__tools button { width: 46px; height: 46px; border: 1px solid #303030; background: transparent; color: #f4f2ec; cursor: pointer; font-size: 1.3rem; }
.lightbox__tools button:hover { color: var(--accent); border-color: var(--accent); }
.lightbox__stage { position: absolute; inset: 72px 0 90px; padding: clamp(10px, 2vw, 28px); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; touch-action: pan-y; }
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__stage img { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; will-change: transform; transition: opacity .18s ease; }
.lightbox__nav { position: absolute; z-index: 4; top: 50%; width: 56px; height: 64px; border: 1px solid #333; background: rgba(7,7,7,.74); color: white; cursor: pointer; font-size: 1.25rem; }
.lightbox__nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__nav--previous { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__rail { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 90px; padding: 10px clamp(16px, 3vw, 46px); display: flex; justify-content: center; gap: 7px; overflow-x: auto; border-top: 1px solid #292929; background: #090909; }
.lightbox__rail button { flex: 0 0 92px; padding: 0; border: 1px solid #333; background: #111; cursor: pointer; }
.lightbox__rail button[aria-current="true"] { border: 3px solid var(--accent); }
.lightbox__rail img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) {
    .lightbox__header { min-height: 62px; padding-inline: 12px; }
    .lightbox__header strong { max-width: calc(100vw - 132px); font-size: 1rem; }
    .lightbox__tools button { width: 42px; height: 42px; }
    .lightbox__related { min-height: 42px; padding-inline: 10px; font-size: 0; }
    .lightbox__related::after { content: "PARTS ↗"; font-size: .55rem; }
    .lightbox__stage { inset: 62px 0 68px; padding: 8px; }
    .lightbox__rail { height: 72px; justify-content: flex-start; }
    .lightbox__rail button { flex-basis: 72px; }
    .lightbox__nav { top: auto; bottom: 82px; width: 46px; height: 50px; }
    .lightbox__nav--previous { left: 10px; }
    .lightbox__nav--next { right: 10px; }
}