.stack-popup-layout {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.stack-popup-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stack-preview-3d {
  flex: 0 0 220px;
  width: 220px;
  min-height: 280px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #e8ece9 0%, #d4ddd6 100%);
  border: 1px solid #c5cec7;
  position: relative;
}

.stack-preview-3d__canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 240px;
  cursor: grab;
  touch-action: none;
}

.stack-preview-3d__canvas:active {
  cursor: grabbing;
}

.stack-preview-3d--error::after {
  content: "3D preview unavailable";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
}

.stack-preview-3d__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.65rem;
  color: #4b5563;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85));
  pointer-events: none;
}