/* Manage: show Ready-made Designs at full workspace width above Content Studio. */
.qcs-ready-designs + .qcs-shell { margin-top: 12px; }
.qcs-ready-designs {
  margin: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}
.qcs-ready-designs > .qcs-ready-toggle { padding: 12px 14px; }
.qcs-ready-designs > .qcs-ready-toggle span { font-size: 15px; }
.qcs-ready-designs > .qcs-ready-toggle small,
.qcs-ready-designs .qcs-ready-status { font-size: 11px; }
.qcs-ready-designs > .qcs-ready-panel { padding: 12px; }
.qcs-ready-designs .qcs-ready-grid {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
}
.qcs-ready-designs .qcs-ready-item { min-height: 116px; padding: 12px 8px; }
.qcs-ready-designs .qcs-ready-item span { font-size: 30px; }
.qcs-ready-designs .qcs-ready-item strong { font-size: 12px; }
.qcs-ready-designs .qcs-ready-item small { font-size: 9px; white-space: normal; }
@media (max-width: 1100px) {
  .qcs-ready-designs .qcs-ready-grid {
    grid-template-columns: repeat(4, minmax(125px, 1fr));
    overflow: visible;
  }
}
@media (max-width: 700px) {
  .qcs-ready-designs .qcs-ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Crop viewport follows the image area of the selected page template. */
.qcs-shell:has(.qcs-layout-hero) + .qcs-crop-modal .qcs-crop-stage {
  width: min(100%, 488px);
  height: auto;
  aspect-ratio: 238 / 201;
  margin-inline: auto;
}
.qcs-shell:has(.qcs-layout-poster) + .qcs-crop-modal .qcs-crop-stage {
  width: min(58vw, 225px);
  height: auto;
  aspect-ratio: 224 / 415;
  margin-inline: auto;
}
.qcs-shell:has(.qcs-layout-split) + .qcs-crop-modal .qcs-crop-stage {
  width: min(34vw, 150px);
  height: auto;
  aspect-ratio: 103 / 415;
  margin-inline: auto;
}
.qcs-shell:has(.qcs-layout-card) + .qcs-crop-modal .qcs-crop-stage {
  width: min(72vw, 360px);
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
}
.qcs-shell + .qcs-crop-modal .qcs-crop-dialog {
  max-height: 94vh;
  overflow-y: auto;
}