/* Studio Workspace Grid Responsiveness & Polish */
.studio-workspace-grid > *, .floating-tools-sidebar, .stage-main-wrapper { min-width: 0; }
.stage-top-bar, .stage-action-bar { flex-wrap: wrap; }
.qr-canvas-holder { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Enforce Portrait Standee Proportions (A4 & 4x6 inch) & Prevent Horizontal Stretching */
#qrStandeeMockup, .standee-acrylic-mockup {
  width: auto !important;
  max-width: 380px !important;
  height: calc(100vh - 250px) !important;
  max-height: 560px !important;
  min-height: 400px !important;
  aspect-ratio: 4 / 6 !important;
  margin: auto !important;
  align-self: center !important;
  box-sizing: border-box;
}

#qrStandeeMockup[data-size="4x6"], .standee-acrylic-mockup[data-size="4x6"] {
  aspect-ratio: 4 / 6 !important;
  max-width: 380px !important;
}

#qrStandeeMockup[data-size="a4"], .standee-acrylic-mockup[data-size="a4"] {
  aspect-ratio: 210 / 297 !important;
  max-width: 410px !important;
}

#qrStandeeMockup[data-size="5x7"], .standee-acrylic-mockup[data-size="5x7"] {
  aspect-ratio: 5 / 7 !important;
  max-width: 410px !important;
}

#qrStandeeMockup[data-size="a4-2up"], .standee-acrylic-mockup[data-size="a4-2up"] {
  aspect-ratio: 297 / 210 !important;
  max-width: 640px !important;
}

#qrCanvas { max-width: 100%; height: auto; }
button:disabled { opacity: .45; cursor: not-allowed; }

@media(max-width:760px) {
  .studio-workspace-grid { display: grid; grid-template-columns: minmax(0,1fr); padding: 8px 10px 24px; width: 100%; height: auto; overflow: visible; }
  .floating-tools-sidebar { width: 100%; max-height: none; overflow: visible; }
  .stage-main-wrapper { width: 100%; height: auto; }
  .stage-viewport-box { width: 100%; height: auto; min-height: 380px; padding: 12px; }
  #qrStandeeMockup, .standee-acrylic-mockup {
    height: auto !important;
    max-height: 500px !important;
    min-height: 360px !important;
    max-width: 92vw !important;
    width: auto !important;
  }
  .stage-top-bar { gap: 8px; }
  .stage-top-bar > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .stage-buttons-group { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .stage-buttons-group .btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .gov-footer-links { flex-wrap: wrap; }
}