/* Keep the entire item visible, including tall and wide uploads. */
.detail-photo-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #e7eee3;
  color: var(--dark);
  text-align: center;
  cursor: zoom-in;
}
.detail-photo-button .detail-photo {
  width: 100%;
  height: clamp(220px, 42vh, 420px);
  object-fit: contain;
  background: #e7eee3;
}
.photo-expand-label {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  background: #f2f6ee;
  font-size: 12px;
  font-weight: 750;
}
.photo-expand-label span { font-size: 20px; }
.photo-viewer {
  position: fixed;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: #15221a;
  color: #f5f8f1;
  overflow: hidden;
}
.photo-viewer[open] { display: flex; flex-direction: column; }
.photo-viewer::backdrop { background: #15221a; }
.photo-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(18px, env(safe-area-inset-top)) 24px 14px;
}
.photo-viewer-heading { min-width: 0; }
.photo-viewer-heading .eyebrow { color: #b1c8a8; font-size: 9px; }
.photo-viewer-heading h2 {
  margin-top: 5px;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.photo-viewer button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #6a7d6e;
  border-radius: 8px;
  background: #263b2d;
  color: #f5f8f1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}
.photo-viewer button:hover:not(:disabled) { background: #395340; }
.photo-viewer button:disabled { opacity: .4; cursor: default; }
.photo-viewer .photo-viewer-close { display: flex; align-items: center; gap: 12px; flex: none; }
.photo-viewer-close span { font-size: 23px; line-height: 1; }
.photo-viewer-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 14px;
  border-bottom: 1px solid #384c3d;
}
#photoZoomIn, #photoZoomOut { font-size: 21px; line-height: 1; }
#photoZoomLevel { min-width: 36px; text-align: center; font-size: 12px; }
#photoViewerHint { margin-left: 10px; font-size: 12px; line-height: 1.5; color: #bfcebc; }
.photo-viewer-viewport {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 16px;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}
.photo-viewer-stage {
  display: grid;
  place-items: center;
  min-width: 100%;
  min-height: 100%;
  width: max-content;
  height: max-content;
}
#photoViewerImage { display: block; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 600px) {
  .photo-viewer-header { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .photo-viewer-controls { padding-left: 16px; padding-right: 16px; }
  #photoViewerHint { flex-basis: 100%; margin: 3px 0 0; font-size: 11px; }
}