.wall-3d {
  perspective: 760px;
  perspective-origin: 50% 45%;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.wall-3d.dragging { cursor: grabbing; }
.wall-3d::after { pointer-events: none; z-index: 4; }

.preview-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-18deg);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.wall-3d.dragging .preview-scene { transition: none; }

.sign-3d {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: calc(var(--letter-size, 48px) * .3);
  row-gap: 6px;
  padding: 28px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.sign-word {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  font: 900 var(--letter-size, 48px) / 1.05 Arial, sans-serif;
  transform-style: preserve-3d;
}

.sign-letter {
  display: grid;
  position: relative;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  z-index: 1;
}

.sign-layer {
  grid-area: 1 / 1;
  color: var(--side-color, #4a4f55);
  white-space: pre;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.sign-layer.side {
  text-shadow: var(--side-fill-shadow, none);
}

.sign-bridge {
  position: relative;
  flex: 0 0 .16em;
  height: 1.05em;
  transform-style: preserve-3d;
  z-index: 0;
}

.mount-plate {
  position: absolute;
  left: -.13em;
  right: -.13em;
  height: max(4px, .09em);
  border: 1px solid #ffffff55;
  border-radius: 2px;
  background: var(--mount-color, #92979d);
  box-shadow: 0 2px 3px #0009, inset 0 -1px 1px #0006;
  transform: translate3d(calc(var(--depth-x) * var(--bridge-offset, 14px)), calc(var(--depth-y) * var(--bridge-offset, 14px)), 0);
}

.mount-plate-top { top: 27%; }
.mount-plate-bottom { top: 67%; }

.mount-plate::before,
.mount-plate::after {
  content: "";
  position: absolute;
  top: 50%;
  width: max(2px, .045em);
  height: max(2px, .045em);
  border-radius: 50%;
  background: #252729;
  box-shadow: 0 0 0 1px #ffffff66;
  transform: translateY(-50%);
}

.mount-plate::before { left: .04em; }
.mount-plate::after { right: .04em; }

.sign-layer.face {
  color: var(--face-color, #f8f7f2);
  text-shadow: 0 2px 3px #0008;
}

.sign-layer.face.is-lit {
  text-shadow:
    0 0 5px var(--glow-color),
    0 0 13px var(--glow-color),
    0 0 28px var(--glow-color),
    0 3px 5px #000a;
}

.drag-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: #11140fcf;
  color: #d7d8d1;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.wall-3d.interacted .drag-hint { opacity: 0; }

.view-reset {
  border: 1px solid #3b4033;
  border-radius: 999px;
  background: #22261f;
  color: #d9ff4f;
  padding: 5px 9px;
  font: 700 11px system-ui, sans-serif;
  cursor: pointer;
}

@media (max-width: 480px) {
  .sign-3d { padding: 26px 14px 34px; }
  .preview-meta { gap: 8px; }
  .preview-meta > span:last-child { display: none; }
}

.check-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #3a3e34;
  border-radius: 14px;
  background: #11130f;
  padding: 14px;
  cursor: pointer;
}

.check-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-box {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 2px solid #59604e;
  border-radius: 9px;
  color: transparent;
  font-weight: 900;
}

.check-choice input:checked + .check-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.check-choice b,
.check-choice small { display: block; }
.check-choice small { margin-top: 3px; color: var(--muted); }
.height-price { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; }