#pwg-photo-payload { max-width: 100%; text-align: center; }
#pwg-photo-payload nav { display: flex; justify-content: center; gap: 1.5rem; padding: 1rem; }
#pwg-photo-payload img { display: block; max-width: 100%; max-height: 82vh; margin: auto; object-fit: contain; }
#pwg-photo-payload h1, #pwg-photo-payload .pwg-photo-description { text-align: center; }
#pwg-photo-payload .pwg-photo-exif { max-width: 40rem; margin: 2rem auto; text-align: left; }
body.pwg-immersive-active { overflow: hidden; }
body.pwg-immersive-active #the_page,
body.pwg-immersive-active > .navbar { visibility: hidden; }
body.pwg-immersive-active #pwg-immersive-viewer { visibility: visible; }
#pwg-immersive-viewer[hidden], #pwg-immersive-viewer [hidden] { display: none !important; }
#pwg-immersive-viewer {
  position: fixed; z-index: 2147483647; inset: 0; width: 100vw; height: 100vh;
  height: 100dvh; background: #050505; color: #fff; overflow: hidden;
  margin: 0; padding: 0; border: 0; touch-action: pan-y;
}
#pwg-immersive-viewer:fullscreen { width: 100%; height: 100%; }
#pwg-immersive-viewer .pwg-viewer-image {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
#pwg-immersive-viewer .pwg-viewer-control {
  position: absolute; z-index: 2; color: #fff; background: rgba(20,20,20,.65);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  cursor: pointer; font-size: 2.1rem; line-height: 1; padding: 0;
}
#pwg-immersive-viewer.pwg-viewer-ui-visible .pwg-viewer-control,
#pwg-immersive-viewer .pwg-viewer-control:focus-visible,
#pwg-immersive-viewer:focus-within .pwg-viewer-control {
  opacity: .82; pointer-events: auto;
}
#pwg-immersive-viewer .pwg-viewer-control:hover { opacity: 1; background: rgba(35,35,35,.9); }
#pwg-immersive-viewer .pwg-viewer-control:disabled { display: none; }
#pwg-immersive-viewer .pwg-viewer-up { top: max(1rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
#pwg-immersive-viewer .pwg-viewer-prev { left: max(1rem, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
#pwg-immersive-viewer .pwg-viewer-next { right: max(1rem, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
#pwg-immersive-viewer .pwg-viewer-info-button,
#pwg-immersive-viewer .pwg-viewer-settings-button { top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; font-size: 1.35rem; }
#pwg-immersive-viewer .pwg-viewer-info-button { right: max(7.6rem, calc(6.6rem + env(safe-area-inset-right))); }
#pwg-immersive-viewer .pwg-viewer-settings-button { right: max(4.4rem, calc(3.4rem + env(safe-area-inset-right))); }
#pwg-immersive-viewer .pwg-viewer-info {
  position: absolute; z-index: 3; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(30rem, calc(100% - 2rem)); max-height: 38vh;
  overflow: auto; padding: .65rem .9rem; box-sizing: border-box;
  background: rgba(10,10,10,.87); border: 1px solid rgba(255,255,255,.2);
  border-radius: .6rem; text-align: left; color: #fff; font-size: .85rem;
}
#pwg-immersive-viewer .pwg-viewer-info h2 { color: #fff; font-size: 1rem; margin: 0 0 .3rem; line-height: 1.25; }
#pwg-immersive-viewer .pwg-viewer-info > * { margin-top: .2rem; }
#pwg-immersive-viewer .pwg-info-description { white-space: pre-wrap; }
#pwg-immersive-viewer .pwg-info-filename { display: block; color: #ccc; font-size: .75rem; overflow-wrap: anywhere; }
#pwg-immersive-viewer .pwg-info-metadata { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .6rem; margin: .35rem 0 0; }
#pwg-immersive-viewer .pwg-info-metadata dt { color: #bbb; }
#pwg-immersive-viewer .pwg-info-metadata dd { margin: 0; overflow-wrap: anywhere; }
#pwg-immersive-viewer .pwg-viewer-settings {
  position: absolute; z-index: 4; right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom)); width: min(23rem, calc(100% - 2rem));
  max-height: min(78vh, 78dvh); overflow: auto; box-sizing: border-box;
  padding: .85rem 1rem; background: rgba(10,10,10,.94);
  border: 1px solid rgba(255,255,255,.3); border-radius: .6rem; color: #fff;
  text-align: left; font-size: .85rem;
}
#pwg-immersive-viewer .pwg-viewer-settings header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#pwg-immersive-viewer .pwg-viewer-settings h2 { color: #fff; font-size: 1rem; margin: 0; }
#pwg-immersive-viewer .pwg-settings-close { color: #fff; background: transparent; border: 0; font-size: 1.6rem; cursor: pointer; }
#pwg-immersive-viewer .pwg-viewer-settings fieldset { margin: .7rem 0; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.3); }
#pwg-immersive-viewer .pwg-viewer-settings legend { color: #ddd; padding: 0 .25rem; }
#pwg-immersive-viewer .pwg-viewer-settings label { display: block; margin: .2rem 0; cursor: pointer; }
#pwg-immersive-viewer .pwg-viewer-settings input { margin-right: .3rem; accent-color: #eee; }
#pwg-immersive-viewer .pwg-viewer-settings small { color: #ccc; }
#pwg-immersive-viewer .pwg-settings-metadata { max-height: 8rem; overflow: auto; }
@media (hover: none) {
  #pwg-immersive-viewer .pwg-viewer-control { width: 2.75rem; height: 2.75rem; opacity: .78; pointer-events: auto; }
  #pwg-immersive-viewer .pwg-viewer-info-button { right: max(7rem, calc(6rem + env(safe-area-inset-right))); }
  #pwg-immersive-viewer .pwg-viewer-settings-button { right: max(4rem, calc(3rem + env(safe-area-inset-right))); }
}

/* Compact album browsing on phones; desktop keeps SimpleNG's layout. */
@media (max-width: 767px) {
  body#theCategoryPage #theHeader,
  body#theCategoryPage #gallery_title,
  body#theCategoryPage .search-in-set-button { display: none !important; }

  body#theCategoryPage #the_page.container { padding-top: .35rem; }
  body#theCategoryPage .titrePage { margin: 0 0 .65rem; min-height: 2.6rem; }
  body#theCategoryPage .titrePage h2 {
    display: flex; align-items: center; gap: .6rem;
    min-height: 2.6rem; margin: 0; font-size: 1.2rem; line-height: 1.25;
  }
  body#theCategoryPage .titrePage .pwg-album-up {
    flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem;
    display: grid; place-items: center; margin: 0 !important;
    color: #fff; background: #353535; border-radius: .45rem;
    font-size: 1.8rem; line-height: 1; text-decoration: none;
  }
  body#theCategoryPage .titrePage .pwg-album-current {
    min-width: 0; overflow-wrap: anywhere;
  }
  body#theCategoryPage .titrePage .categoryActions { display: none; }

  body#theCategoryPage ul.thumbnails {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem; margin: 0 0 1rem !important; padding: 0;
    list-style: none;
  }
  body#theCategoryPage ul.thumbnails::before,
  body#theCategoryPage ul.thumbnails::after { display: none !important; content: none !important; }
  body#theCategoryPage ul.thumbnails > li.span3 {
    display: block; float: none !important; width: auto !important;
    min-width: 0; margin: 0 !important;
  }
  body#theCategoryPage ul.thumbnails .thumbnail { display: block; margin: 0; }
  body#theCategoryPage ul.thumbnails .thumbnail img {
    display: block; width: 100% !important; height: auto !important;
    aspect-ratio: 4 / 3; object-fit: cover;
  }
  body#theCategoryPage ul.thumbnails figcaption { padding: .3rem .15rem .45rem; }
  body#theCategoryPage ul.thumbnails figcaption h3 {
    height: auto !important; min-height: 2.2rem; margin: 0;
    font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere;
  }
  body#theCategoryPage ul.thumbnails figcaption .dates { display: none; }
}

@media (min-width: 560px) and (max-width: 767px) {
  body#theCategoryPage ul.thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}