/* Bound the replaced image independently of CSS Grid's intrinsic auto-row sizing.
   Keep the existing cards/IDs intact so saved visual-editor selectors still work. */
@media (max-width: 900px) {
  .setup-pair .setup-card .setup-card-art {
    position: relative;
    display: block;
    flex: none;
    min-height: 0;
  }
  .setup-pair .setup-card .setup-card-art img,
  .setup-pair .setup-card:hover .setup-card-art img,
  .setup-pair .setup-card:focus-visible .setup-card-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 6px;
    object-fit: contain;
    object-position: center;
    clip-path: none;
    transform: none;
  }
  /* Both PNG canvases are 288×200, but Mini's visible body is 188px wide
     versus DC's 261px. 1.39 matches the photographed bodies, not blank canvas.
     The transformed subject still fits inside the original image bounds. */
  .setup-pair .setup-card .mini-fuser-card-art img,
  .setup-pair .setup-card:hover .mini-fuser-card-art img,
  .setup-pair .setup-card:focus-visible .mini-fuser-card-art img {
    transform: scale(1.39);
    transform-origin: center;
  }
}

@media (max-width: 600px) {
  /* Keep both floating controls on the bottom row, away from the product image.
     Reserve scroll space so the last footer content can be brought above them. */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .support-card { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body .support-card ~ .back-to-top {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}