/* === dta-lightbox — gallery lightbox overlay for g-media image-gallery === */ /* NOT scoped under .dta-storefront (the g-media sections it attaches to are native SSLA sections on plain WP pages, not inside a Simplitory shortcode mount) — scope on .dta-lightbox itself instead, appended to . */ .dta-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(15, 15, 15, .92); padding: 4vh 4vw; } .dta-lightbox.is-open { display: flex; } body.dta-lightbox-open { overflow: hidden; } .dta-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; } .dta-lightbox__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 8px 40px rgba(0,0,0,.5); } .dta-lightbox__caption { color: #f2f2f2; font-family: var(--shell-font-family-body, inherit); font-size: .9rem; text-align: center; max-width: 60ch; } .dta-lightbox__caption[hidden] { display: none; } .dta-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .8rem; letter-spacing: .04em; } .dta-lightbox__close, .dta-lightbox__nav { position: absolute; background: transparent; border: none; color: #fff; cursor: pointer; line-height: 1; transition: opacity .15s; } .dta-lightbox__close:hover, .dta-lightbox__nav:hover { opacity: .7; } .dta-lightbox__close { top: 18px; right: 22px; font-size: 2.4rem; font-weight: 300; padding: .25rem .5rem; } .dta-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3.5rem; font-weight: 300; padding: .5rem 1rem; } .dta-lightbox__prev { left: 6px; } .dta-lightbox__next { right: 6px; } @media (max-width: 640px) { .dta-lightbox { padding: 2vh 2vw; } .dta-lightbox__img { max-height: 74vh; } .dta-lightbox__nav { font-size: 2.4rem; padding: .5rem .6rem; } .dta-lightbox__close { top: 10px; right: 12px; font-size: 2rem; } .dta-lightbox__count { bottom: 10px; } }