/* Shared gallery lightbox + image-loading shimmer. Self-contained: does not
   depend on any page's own CSS variables, so it looks the same everywhere. */
@keyframes ul-img-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
img[data-lightbox] {
  cursor: zoom-in;
  background: #e7e2d8 linear-gradient(90deg, #e7e2d8 0%, #f7f4ee 50%, #e7e2d8 100%);
  background-size: 800px 100%;
  animation: ul-img-shimmer 1.4s ease-in-out infinite;
}
img[data-lightbox].ul-loaded { animation: none; background: none; }

.ul-lightbox-backdrop {
  position: fixed; inset: 0; background: rgba(20,18,15,0.86);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ul-lightbox-backdrop.open { opacity: 1; pointer-events: auto; }
.ul-lightbox-backdrop img { max-width: 100%; max-height: 100%; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.ul-lightbox-close {
  position: fixed; top: 20px; right: 24px; z-index: 10000;
  background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 50%;
  width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer;
}
.ul-lightbox-close:hover { background: rgba(255,255,255,0.24); }