@media print {
  @page {
    size: 4in 6in;
    margin: 0;
  }

  html, body {
    width: 4in;
    height: 6in;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
  }

  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }

  #printArea {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4in;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-sheet {
    width: 4in;
    height: 6in;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
  }

  .print-sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .print-photo-canvas {
    display: block;
    width: 4in;
    height: 6in;
    /* Canvas is always an exact 2400x3600 (2:3) source, matching 4x6in
       exactly — so a straight width/height scale is all that's needed.
       No object-fit: it isn't reliably honored by Chromium's print/PDF
       pipeline for raster elements, which was the actual cause of the
       zoomed/cropped output. */
  }
}