.preview-zoom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin: 8px 0;
}

.preview-zoom button {
  min-width: 38px;
  height: 32px;
  border: 1px solid var(--ink);
  background: #faf8f3;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.preview-zoom #zoomReset {
  min-width: 62px;
  font-size: 11px;
}

.preview-zoom button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.preview-viewport {
  position: relative;
  height: min(68vh, 670px);
  overflow: auto;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0,0,0,.035) 40px), repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,0,0,.035) 40px);
  scrollbar-width: none;
}

.preview-frame{position:relative;min-height:0}.preview-price{position:absolute;top:12px;right:12px;z-index:20;display:grid;place-items:center;gap:2px;width:max-content;min-width:76px;padding:7px 10px 6px;border-radius:6px;background:rgba(23,23,23,.94);color:#fff;text-align:center;box-shadow:0 4px 13px rgba(0,0,0,.16);pointer-events:none}.preview-price span{font-size:7px;font-weight:700;line-height:1;letter-spacing:.03em;opacity:.82}.preview-price b{font:800 16px/1.05 "Barlow Condensed",sans-serif;letter-spacing:.02em}

.preview-viewport::-webkit-scrollbar { display: none; }

.preview-viewport .shirt-stage {
  width: 100%;
  height: 100%;
  transition: transform .16s ease;
  background: transparent;
}

@media (max-width: 900px) {
  .preview-viewport { height: 520px; }
  .preview-viewport .shirt-stage { height: 100%; }
}

@media (max-width: 520px) {
  .preview-viewport { height: 400px; }
  .preview-viewport .shirt-stage { height: 100%; }
  .preview-price{top:8px;right:8px;min-width:70px;padding:6px 8px}.preview-price span{font-size:7px}.preview-price b{font-size:15px}
}