#detail-image-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
}
#detail-image-open #di { display: block; cursor: zoom-in; }
#detail-image-open:focus-visible { outline: 3px solid #a9472c; outline-offset: 4px; }

#image-zoom {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #211c1a;
  color: #fff;
  overscroll-behavior: contain;
}
#image-zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.zoom-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: #faf6f2;
  color: #351b0f;
}
#zoom-title { margin: 0; font: 600 18px/1.35 system-ui; overflow-wrap: anywhere; }
.zoom-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#image-zoom button { min-width: 44px; min-height: 44px; padding: 8px 14px; border-radius: 8px; }
#image-zoom button:focus-visible { outline: 3px solid #351b0f; outline-offset: 3px; }
#zoom-less, #zoom-more { font-size: 25px; line-height: 1; }
#zoom-level { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
#zoom-close { grid-column: 2; grid-row: 1; }
.zoom-controls { grid-column: 1 / -1; }
#zoom-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#zoom-stage.can-pan { cursor: grab; }
#zoom-stage.is-dragging { cursor: grabbing; }
#zoom-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  margin: 0;
  transform-origin: center;
  pointer-events: none;
  -webkit-user-drag: none;
  visibility: hidden;
}
#zoom-stage.is-ready #zoom-photo { visibility: visible; }
#zoom-feedback { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 24px; text-align: center; }
#zoom-help { margin: 0; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: #211c1a; color: #fff; text-align: center; font-size: 13px; line-height: 1.4; }
@media (max-width: 550px) {
  .zoom-bar { gap: 8px; padding-right: 12px; padding-left: 12px; }
  #zoom-title { font-size: 15px; }
  #image-zoom button { padding-right: 11px; padding-left: 11px; }
  #zoom-help { font-size: 12px; }
}