:root #designCanvas {
  touch-action: pan-y;
}

:root .editor-a11y-instruction {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:root #designCanvas[data-touch-gesture="orbit"],
:root body.canvas-fullscreen-open #designCanvas {
  touch-action: none;
}

:root #designCanvas > .preview-item.touch-reorder-active {
  outline: 2px solid rgba(23, 63, 45, 0.42);
  outline-offset: 3px;
}

:root .canvas-photo-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-side-panel);
  display: inline-flex;
  align-items: center;
  max-width: min(88%, 360px);
  min-height: 40px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid rgba(23, 63, 45, 0.18);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.94);
  color: #264334;
  box-shadow: 0 8px 22px rgba(25, 43, 31, 0.12);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

:root .canvas-photo-loading[hidden] {
  display: none !important;
}

:root .canvas-photo-loading-spinner {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(23, 63, 45, 0.18);
  border-top-color: #2f744d;
  border-radius: 50%;
  animation: jewdiy-photo-loading-spin 0.8s linear infinite;
}

:root .canvas-photo-loading[data-state="error"] {
  flex-wrap: wrap;
  justify-content: center;
  border-color: rgba(139, 94, 28, 0.28);
  color: #755018;
  pointer-events: auto;
}

:root .canvas-photo-loading[data-state="error"] .canvas-photo-loading-spinner {
  display: none;
}

:root .canvas-photo-loading button {
  min-width: 58px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(23, 63, 45, 0.28);
  border-radius: 5px;
  background: #fffdf8;
  color: #173f2d;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

@keyframes jewdiy-photo-loading-spin {
  to { transform: rotate(360deg); }
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen,
:root #builder.builder-fullscreen:fullscreen,
:root #builder.builder-fullscreen:-webkit-full-screen {
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  grid-template-columns: minmax(188px, 232px) minmax(0, 1fr) minmax(208px, 260px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > .left-panel,
:root body.canvas-fullscreen-open #builder.builder-fullscreen > .right-panel,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .canvas-toolbar,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .designer-sign-panel,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .canvas-length-control,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .bottom-tray,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .quick-row,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .mobile-builder-inline-cta {
  display: none !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen .canvas-fit-badge.transient-notice,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .canvas-fit-badge {
  display: none !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > .center-stage,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .canvas-card,
:root body.canvas-fullscreen-open #builder.builder-fullscreen .preview-layout {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > .left-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > .center-stage {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > .right-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

:root body.canvas-fullscreen-open #builder.builder-fullscreen > :is(.left-panel, .right-panel) {
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 860px) {
  :root body.canvas-fullscreen-open #builder.builder-fullscreen {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  :root body.canvas-fullscreen-open #builder.builder-fullscreen > .center-stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  :root body.canvas-fullscreen-open #builder.builder-fullscreen > :is(.left-panel, .right-panel) {
    display: none !important;
  }
}

@media (max-width: 540px) {
  :root body.canvas-fullscreen-open #builder.builder-fullscreen {
    width: 100vw !important;
    padding: 0 !important;
  }

  :root body.canvas-fullscreen-open #builder.builder-fullscreen > .left-panel {
    display: none !important;
  }

  :root body.canvas-fullscreen-open #builder.builder-fullscreen > .center-stage {
    display: block !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  :root body.canvas-fullscreen-open #builder.builder-fullscreen .design-canvas,
  :root body.canvas-fullscreen-open #builder.builder-fullscreen .design-canvas.canvas-fullscreen {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  :root .canvas-photo-loading {
    max-width: calc(100% - 32px);
    min-height: 38px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root .canvas-photo-loading-spinner { animation-duration: 1.6s; }
}

/* Keep four source-photo beads per row without sacrificing material legibility. */
@media (max-width: 540px) {
  :root body.mobile-builder-active #builder.builder .bottom-tray .tray-scroll {
    grid-auto-rows: 130px !important;
  }

  :root body.mobile-builder-active #builder.builder .bottom-tray .tray-item {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    grid-template-rows: 18px 50px 26px 14px !important;
    padding: 5px 2px !important;
  }

  :root body.mobile-builder-active #builder.builder .bottom-tray .tray-item .mini-bead.realshot-library-single-bead {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
}