.photo-crop-dialog {
  width: min(44rem, calc(100vw - 1.25rem));
  max-width: none;
  max-height: min(94vh, 58rem);
  padding: 0;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 1rem;
  color: inherit;
  background: var(--panel);
  box-shadow: 0 1.5rem 5rem #0007;
}
.photo-crop-dialog::backdrop { background: #101112dd; }
.photo-crop-shell { display: grid; gap: .8rem; padding: clamp(.8rem, 3vw, 1.25rem); }
.photo-crop-shell header, .photo-crop-shell footer { display: flex; align-items: center; gap: .65rem; }
.photo-crop-shell header h2 { margin: 0; flex: 1; font-size: 1.15rem; }
.photo-crop-shell button { min-height: 2.75rem; }
.photo-crop-close { width: 2.75rem; min-width: 2.75rem; font-size: 1.5rem; }
.photo-crop-help { margin: 0; color: var(--muted, #5e6b7c); }
.photo-crop-viewport {
  position: relative;
  width: 100%;
  height: min(60vh, 36rem);
  min-height: 15rem;
  overflow: hidden;
  border-radius: .65rem;
  background: #101112;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.photo-crop-viewport:active { cursor: grabbing; }
.photo-crop-image { position: absolute; max-width: none !important; object-fit: fill; pointer-events: none; -webkit-user-drag: none; }
.photo-crop-shade { position: absolute; z-index: 1; background: #101112c9; pointer-events: none; }
.photo-crop-frame { position: absolute; z-index: 2; box-sizing: border-box; border: 2px solid var(--electric); box-shadow: 0 0 0 1px #101112; pointer-events: none; }
.photo-crop-loading { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; padding: .5rem .75rem; color: white; background: #101112e8; border-radius: .4rem; }
.photo-crop-zoom-label { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.photo-crop-zoom-label input { width: 100%; accent-color: var(--electric); }
.photo-crop-shell footer { flex-wrap: wrap; }
.photo-crop-error { flex: 1 1 8rem; color: var(--danger, #a32323); font-size: .9rem; }
.photo-crop-cancel { margin-left: auto; }
.photo-preview-crop { position: relative; display: block; overflow: hidden; aspect-ratio: 1; }
.photo-preview-crop > img { position: absolute; max-width: none !important; object-fit: fill; }
.material-detail .photo-preview-crop.hero-photo { width: min(100%, 310px); height: auto !important; aspect-ratio: 1; object-fit: initial; margin-inline: auto; }
article.item-card .photo-preview-crop.card-photo { width: min(100%, 155px); height: auto !important; aspect-ratio: 1; object-fit: initial; }
@media (max-width: 34rem) {
  .photo-crop-dialog { width: calc(100vw - .75rem); max-height: 98vh; border-radius: .7rem; }
  .photo-crop-shell { gap: .55rem; padding: .65rem; }
  .photo-crop-viewport { height: min(57vh, 32rem); min-height: 13rem; }
  .photo-crop-shell footer { gap: .4rem; }
  .photo-crop-error { order: 5; flex-basis: 100%; }
}