/* Photo viewer of the intranet and the shop (assets/controllers/lightbox_controller.js); own colours, no theme tokens. */
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
dialog.lightbox[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
dialog.lightbox::backdrop { background: rgba(8, 8, 8, 0.88); opacity: 0; transition: opacity 0.22s ease; }
dialog.lightbox { opacity: 0; transition: opacity 0.22s ease; }
dialog.lightbox img { transform: scale(0.94); transition: transform 0.28s cubic-bezier(.2, .7, .3, 1); }
dialog.lightbox.visible, dialog.lightbox.visible::backdrop { opacity: 1; }
dialog.lightbox.visible img { transform: none; }
@media (prefers-reduced-motion: reduce) { dialog.lightbox, dialog.lightbox::backdrop, dialog.lightbox img { transition: none; } }
dialog.lightbox figure { grid-column: 2; grid-row: 1; width: 100%; box-sizing: border-box; margin: 0; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 24px 0 12px; }
dialog.lightbox img { max-width: 100%; max-height: calc(100dvh - 72px); object-fit: contain; border-radius: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-drag: none; }
dialog.lightbox figcaption { font-size: 0.85rem; color: #d6d6d0; min-height: 1.2em; padding-top: 8px; }
dialog.lightbox button { border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 0; }
dialog.lightbox button:hover { background: rgba(255, 255, 255, 0.24); }
dialog.lightbox button:focus-visible { outline: 2px solid #ffffff; }
dialog.lightbox .lb-prev { grid-column: 1; grid-row: 1; }
dialog.lightbox .lb-next { grid-column: 3; grid-row: 1; }
dialog.lightbox .lb-prev, dialog.lightbox .lb-next { width: 48px; height: 48px; font-size: 2rem; line-height: 1; justify-self: center; }
dialog.lightbox .lb-close { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; font-size: 1.8rem; z-index: 1; }
dialog.lightbox.single .lb-prev, dialog.lightbox.single .lb-next { visibility: hidden; }
.product-photo a, .detail-photo a, .shop-photo, .ribbon-photos a { cursor: zoom-in; }
@media (max-width: 620px) { dialog.lightbox[open] { grid-template-columns: 0 minmax(0, 1fr) 0; } dialog.lightbox .lb-prev, dialog.lightbox .lb-next { position: fixed; bottom: 18px; } dialog.lightbox .lb-prev { left: 18px; } dialog.lightbox .lb-next { right: 18px; } dialog.lightbox figure { padding: 64px 12px 84px; } dialog.lightbox img { max-height: calc(100dvh - 170px); } dialog.lightbox figcaption { position: fixed; bottom: 32px; left: 0; right: 0; text-align: center; pointer-events: none; } }