/* Keep the full-size profile photo and every control inside the viewport. */
.detail-gallery-lightbox {
  box-sizing: border-box;
  padding: max(56px, env(safe-area-inset-top)) 58px max(48px, env(safe-area-inset-bottom));
}

.detail-gallery-lightbox-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 112px);
  object-fit: contain;
}

.detail-gallery-lightbox-arrow {
  width: 44px;
  height: 44px;
}

.detail-gallery-lightbox-arrow svg {
  width: 22px;
  height: 22px;
}

/* The sticky collection bar uses the exact same glass surface as the header. */
@media (min-width: 768px) {
  body[data-member-page="catalog"] .catalog-shell .catalog-controls::before {
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@media (max-width: 767px) {
  .detail-gallery-lightbox {
    padding: max(52px, env(safe-area-inset-top)) 44px max(44px, env(safe-area-inset-bottom));
  }

  .detail-gallery-lightbox-image {
    max-height: calc(100dvh - 104px);
  }

  .detail-gallery-lightbox-close {
    width: 36px;
    height: 36px;
  }

  .detail-gallery-lightbox-close svg {
    width: 20px;
    height: 20px;
  }

  .detail-gallery-lightbox-arrow {
    width: 36px;
    height: 36px;
  }

  .detail-gallery-lightbox-arrow.previous { left: 6px; }
  .detail-gallery-lightbox-arrow.next { right: 6px; }

  .detail-gallery-lightbox-arrow svg {
    width: 18px;
    height: 18px;
  }

  .detail-gallery-lightbox-dots {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}