/* Визуализатор леденца (/wizualizator/) — поверх shop.css */
.viz-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.viz-stage-wrap { position: sticky; top: 96px; }
.viz-stage { border-radius: var(--radius); overflow: hidden; background: #ece8e3; border: 1px solid var(--border); touch-action: none; }
.viz-stage svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 190px); min-height: 360px; user-select: none; -webkit-user-select: none; }
.viz-stage #viz-print-hit { cursor: grab; }
.viz-stage.dragging #viz-print-hit { cursor: grabbing; }
.viz-stage svg:focus-visible { outline: 3px solid rgba(255,61,127,0.5); outline-offset: -3px; }
.viz-caption { margin-top: 12px; font-weight: 700; font-size: 15px; text-align: center; }
.viz-drag-hint { text-align: center; margin-top: 2px; }

.viz-range { width: 100%; accent-color: var(--pink); height: 28px; }
.viz-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.drop.over { border-color: var(--pink); background: rgba(255,61,127,0.05); }
.viz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.viz-actions .btn { flex: 1 1 auto; justify-content: center; }
.viz-actions .btn:disabled { opacity: .55; cursor: wait; }
.form-msg.viz-ok { background: rgba(0,212,170,0.12); color: #00775f; }
.hint a { color: var(--pink); }
.viz-offline p { font-size: 15px; color: #374151; }
#viz-send .check .opt { color: var(--gray); }

@media (max-width: 1100px) { .viz-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 960px) {
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
  /* На телефоне превью остаётся сверху и прилипает, пока клиент крутит настройки */
  .viz-stage-wrap { top: 72px; z-index: 5; background: var(--white); padding-bottom: 8px; }
  .viz-stage svg { max-height: 46vh; min-height: 0; }
  .viz-drag-hint { display: none; }
  .viz-caption { margin-top: 8px; font-size: 14px; }
}