/* конструктор мерча */
#constructor [hidden]{display:none !important}
.ctor{display:grid;grid-template-columns:340px 1fr;gap:34px;background:var(--card);border:1px solid #E7EDF6;border-radius:28px;padding:34px}
.ctor-3col{grid-template-columns:260px 1fr 280px}
.ctor-side{display:flex;flex-direction:column;min-width:0}
.ctor-preview{text-align:center;min-width:0}
.ctor-preview .canvas-container{margin:0 auto !important;filter:drop-shadow(0 12px 24px rgba(24,39,64,.12));border-radius:14px;overflow:hidden}
.pv-note{font-size:.78rem;color:var(--muted);margin-top:10px}
.ctor-block{margin-bottom:20px}
.ctor-block label{display:block;font-weight:700;font-size:.88rem;margin-bottom:9px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'Manrope';font-size:.88rem;font-weight:600;padding:9px 15px;border-radius:999px;border:1.5px solid #D8E1EF;background:#fff;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;background:var(--c);border:2px solid #D8E1EF;cursor:pointer;transition:.15s}
.sw.on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,123,32,.25)}
#c-note{width:100%;padding:12px 16px;border:1.5px solid #D8E1EF;border-radius:14px;font-family:'Manrope';font-size:.95rem;color:var(--ink)}
#c-note:focus{outline:none;border-color:var(--blue)}
.ctor-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn-ghost2{border:2px solid var(--blue);color:var(--blue);background:none;cursor:pointer;font-family:'Manrope'}
.btn-ghost2:hover{background:var(--blue);color:#fff}
.ctor-hint{font-size:.85rem;color:var(--green);font-weight:600;margin-top:10px;min-height:1.2em}
.upload-note{font-size:.78rem;color:var(--muted);margin-top:8px}
.dl-btn{margin-top:14px;font-size:.9rem;padding:11px 22px}
#c-canvas{touch-action:none;user-select:none}

/* вкладки левой/правой панели */
.ctor-tabs{display:flex;gap:6px;margin-bottom:16px;background:#F0F3F9;border-radius:14px;padding:4px}
.ctor-tab{flex:1;font-family:'Manrope';font-size:.82rem;font-weight:700;padding:9px 8px;border:none;border-radius:11px;background:none;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.ctor-tab.on{background:#fff;color:var(--blue);box-shadow:0 2px 6px rgba(24,39,64,.08)}
.ctor-panel{display:flex;flex-direction:column;min-height:0}

/* слои */
.layer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.layers-label{display:block;font-weight:700;font-size:.85rem;margin:6px 0 9px}
.layer-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:220px;overflow-y:auto}
.layer-item{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1.5px solid #D8E1EF;border-radius:12px;cursor:pointer;transition:.15s;background:#fff}
.layer-item:hover{border-color:var(--blue)}
.layer-item.on{border-color:var(--blue);background:#F0F5FC}
.layer-ico{font-size:1rem}
.layer-label{flex:1;font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-dup,.layer-del{border:none;background:none;color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;padding:3px 5px;border-radius:8px}
.layer-dup:hover{background:#E9EEF7;color:var(--blue)}
.layer-del:hover{background:#FBE7E0;color:#C24A2C}
.layer-empty{font-size:.82rem;color:var(--muted);padding:4px 2px}
.clear-btn{margin-top:auto;font-size:.82rem;padding:9px 16px;align-self:flex-start}

/* шаблоны: буквы/надписи/фигуры */
.tpl-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tpl-btn{flex:1;min-width:0;font-family:'Manrope';font-size:.72rem;font-weight:700;padding:9px 6px;border-radius:12px;border:1.5px solid #D8E1EF;background:#fff;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-btn:hover,.tpl-btn.on{border-color:var(--blue);color:var(--blue)}
.tpl-flyout{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:#F7F9FD;border:1px solid #E7EDF6;border-radius:14px;padding:10px;margin-bottom:14px;max-height:150px;overflow-y:auto}
.tpl-flyout.list{grid-template-columns:1fr}
.tpl-cell{font-family:'Manrope';font-size:.85rem;font-weight:700;padding:8px 4px;border-radius:9px;border:1px solid #E7EDF6;background:#fff;cursor:pointer;transition:.15s;text-align:center}
.tpl-cell:hover{border-color:var(--blue);color:var(--blue)}
.tpl-cell.tpl-caption{text-align:left;font-weight:600;font-size:.82rem;padding:9px 12px}

/* файлы (загруженные изображения) */
.files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.file-thumb{border:1.5px solid #D8E1EF;border-radius:12px;padding:0;cursor:pointer;overflow:hidden;background:#fff;height:76px;transition:.15s}
.file-thumb:hover{border-color:var(--blue)}
.file-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* превью видов товара */
.view-thumbs{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.view-thumb{border:1.5px solid #D8E1EF;border-radius:12px;padding:4px;background:#fff;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:2px}
.view-thumb:hover{border-color:var(--blue)}
.view-thumb.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,78,155,.15)}
.view-thumb canvas{width:52px;height:52px;border-radius:8px;display:block}
.view-thumb span{font-size:.68rem;font-weight:700;color:var(--muted)}

/* объект: фильтры */
.filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.filter-thumb{border:1.5px solid #D8E1EF;border-radius:12px;padding:6px 4px;background:#fff;cursor:pointer;transition:.15s;text-align:center}
.filter-thumb:hover,.filter-thumb.on{border-color:var(--blue)}
.filter-thumb .filter-swatch{width:100%;height:56px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:5px;background-color:#D8E1EF}
.filter-thumb span{font-size:.68rem;font-weight:700;color:var(--muted)}

input[type=range]{width:100%;accent-color:var(--blue)}

@media(max-width:980px){.ctor-3col{grid-template-columns:1fr}}
@media(max-width:760px){.ctor{padding:24px}}