/* Editor-only controls: no customer layout dimensions, image outlines or themes change. */
.studio-canvas-viewport.is-canvas-reordering .studio-render,
.studio-canvas-viewport.is-canvas-reordering .studio-render * { -webkit-user-select: none; user-select: none; }
.studio-render--editor [data-canvas-text-movable]:not(.is-canvas-text-editing) { cursor: grab; }
.studio-render--editor [data-canvas-text-movable].is-canvas-text-editing { cursor: text; }
.studio-render--editor .studio-canvas-drag-target { position: relative; }
.studio-render--editor .studio-canvas-drag-handle {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 5px;
  border: 1px solid #78aacf;
  border-radius: 5px;
  appearance: none;
  background: #fff;
  color: #376f99;
  box-shadow: 0 1px 4px #163d591f;
  font: 12px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: normal;
  cursor: grab;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  scroll-margin-block: 12px 84px;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 100ms ease;
}
.studio-render--editor .studio-canvas-drag-handle--field { top: 0; right: 0; width: 24px; height: 24px; padding: 4px; border-radius: 4px; }
.studio-render--editor .studio-canvas-drag-handle__icon {
  display: block;
  width: 5px;
  height: 18px;
  flex: 0 0 5px;
  background: currentColor;
  -webkit-mask: var(--studio-canvas-drag-icon) center / contain no-repeat;
  mask: var(--studio-canvas-drag-icon) center / contain no-repeat;
  pointer-events: none;
}
.studio-render--editor .studio-canvas-drag-handle--field .studio-canvas-drag-handle__icon { height: 14px; }
.studio-render--editor .studio-canvas-drag-target:is(:hover, :focus-within, .is-selected, .is-canvas-dragging) > .studio-canvas-drag-handle,
.studio-render--editor .studio-canvas-drag-handle:focus-visible { opacity: 1; pointer-events: auto; }
.studio-render--editor .studio-canvas-drag-target > button.studio-canvas-drag-handle:hover:not(:disabled) { background: #e4f1fc; }
.studio-render--editor .studio-canvas-drag-handle:focus-visible { outline: 2px solid #4e92c3; outline-offset: 2px; }
.studio-render--editor .studio-canvas-drag-target.is-canvas-dragging { opacity: .55; cursor: grabbing; }
.studio-render--editor .studio-canvas-drag-target.is-canvas-dragging > .studio-canvas-drag-handle { cursor: grabbing; }
.studio-canvas-viewport .studio-canvas-drop-indicator {
  position: fixed;
  z-index: 45;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #5d9fcf;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}
.studio-canvas-viewport .studio-canvas-drop-indicator[hidden] { display: none; }
.studio-canvas-viewport .studio-canvas-drop-indicator[data-axis=horizontal] { min-height: 2px; }
.studio-canvas-viewport .studio-canvas-drop-indicator[data-axis=vertical] { min-width: 2px; }
.studio-canvas-viewport .studio-canvas-drag-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (hover: none) {
  .studio-render--editor .studio-canvas-drag-handle { opacity: 1; pointer-events: auto; }
}
@media (pointer: coarse) {
  .studio-render--editor .studio-canvas-drag-handle,
  .studio-render--editor .studio-canvas-drag-handle--field { width: 44px; height: 44px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-render--editor .studio-canvas-drag-handle { transition: none; }
}