/* ============ Конструктор ============ */
.step-hint{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:14px;margin:26px 0 10px;text-align:center}
.step-hint a{color:var(--gold-bright)}

/* Выбор заготовки */
.products-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;margin-top:40px;
}
.product-card{
  border:1px solid rgba(201,162,39,.35);background:rgba(244,234,210,.03);
  padding:14px;cursor:pointer;text-align:center;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.product-card:hover{transform:translateY(-6px);border-color:var(--gold-bright);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.product-card .ph{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3a2413,#2a180b 55%,#38220f);
  background-size:cover;background-position:center;
  color:rgba(232,201,106,.6);font-family:var(--serif);font-size:17px;padding:12px;
}
.product-card .name{font-family:var(--serif);font-size:19px;margin-top:12px;color:var(--parchment)}
.product-card .price{color:var(--gold-bright);font-size:21px;margin-top:4px;font-weight:600}
.loading-note{grid-column:1/-1;text-align:center;color:var(--parchment-dark);padding:40px}

/* Редактор */
.editor-layout{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,420px);
  gap:36px;margin-top:34px;align-items:start;
}
.canvas-frame{
  border:1px solid rgba(201,162,39,.4);padding:10px;
  background:rgba(0,0,0,.3);box-shadow:0 10px 40px rgba(0,0,0,.5);
}
#editor-canvas{width:100%;height:auto;display:block;touch-action:none;cursor:grab}
.canvas-caption{text-align:center;color:var(--parchment-dark);margin-top:12px;font-size:17px}

.tools-panel{
  border:1px solid rgba(201,162,39,.3);padding:26px;
  background:linear-gradient(170deg,rgba(244,234,210,.05),transparent);
  display:flex;flex-direction:column;gap:22px;
}
.tool-block h3{
  font-family:var(--serif);color:var(--gold-bright);font-size:19px;margin-bottom:10px;
  letter-spacing:.05em;
}
.tool-note{font-size:16px;color:var(--parchment-dark);margin-bottom:12px}
.file-btn{display:inline-block;cursor:pointer}
.slider-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.slider-row label{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--parchment-dark)}
.slider-row input[type=range]{accent-color:var(--gold);width:150px}
.mini-btn{
  background:none;border:1px solid rgba(201,162,39,.5);color:var(--gold-bright);
  padding:4px 14px;cursor:pointer;font-family:var(--body);font-size:15px;
}
.mini-btn:hover{background:rgba(201,162,39,.12)}
.text-input{
  width:100%;padding:10px 14px;background:rgba(0,0,0,.35);
  border:1px solid rgba(201,162,39,.35);color:var(--parchment);
  font-family:var(--body);font-size:18px;
}
.add-text-row .text-input{flex:1;min-width:0}
.text-input:focus{outline:none;border-color:var(--gold-bright)}
/* Выпадающий список шрифтов */
.font-row-label{
  display:flex;flex-direction:column;gap:5px;margin-top:12px;
  font-size:15px;color:var(--parchment-dark);
}
.font-select{
  padding:9px 12px;background:rgba(0,0,0,.4);border:1px solid rgba(201,162,39,.4);
  color:var(--parchment);font-size:16px;width:100%;
}
.font-select option{background:#1a0e08;color:var(--parchment);padding:8px}
.font-file-input{color:var(--parchment-dark);font-size:14px}
.font-file-input::file-selector-button{
  background:none;border:1px solid rgba(201,162,39,.5);color:var(--gold-bright);
  padding:6px 14px;cursor:pointer;font-family:var(--body);font-size:14px;margin-right:10px;
}

/* Список слоёв */
.layers-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.layers-empty{color:var(--parchment-dark);opacity:.6;font-size:15px}
.layer-row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border:1px solid rgba(201,162,39,.25);padding:8px 10px;
  background:rgba(244,234,210,.03);cursor:pointer;transition:border-color .2s;
}
.layer-row:hover{border-color:rgba(201,162,39,.5)}
.layer-row.selected{border-color:var(--gold-bright);background:rgba(201,162,39,.08)}
.layer-label{font-size:15px;color:var(--parchment);min-width:110px;flex:1}
.layer-btn{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--parchment-dark);
}
.layer-btn input[type=range]{width:70px;accent-color:var(--gold)}
.mini-btn.danger{border-color:rgba(224,128,128,.5);color:#e08080}
.mini-btn.danger:hover{background:rgba(224,128,128,.1)}
.add-text-row{display:flex;gap:8px}
.add-text-row .text-input{flex:1}
.canvas-tip{text-align:center;color:var(--parchment-dark);opacity:.65;font-size:15px;margin-top:8px}

.order-summary{
  border-top:1px solid rgba(201,162,39,.25);border-bottom:1px solid rgba(201,162,39,.25);
  padding:14px 0;font-size:18px;color:var(--parchment-dark);
}
.order-summary b{color:var(--gold-bright);font-size:22px}
.btn-wide{width:100%;text-align:center}

/* Оформление заказа */
.order-preview{
  display:flex;gap:30px;align-items:flex-start;margin:40px 0;
  border:1px solid rgba(201,162,39,.3);padding:24px;background:rgba(244,234,210,.03);
  flex-wrap:wrap;
}
.order-preview img{
  width:280px;height:280px;object-fit:contain;border:1px solid rgba(201,162,39,.35);
  background:#111;
}
.order-preview-info{font-size:20px;line-height:1.7}
.order-preview-info b{color:var(--gold-bright)}
.order-form{display:flex;flex-direction:column;gap:18px}
.order-form label{display:flex;flex-direction:column;gap:6px;font-size:17px;color:var(--parchment-dark)}
.order-form input,.order-form textarea{
  padding:12px 14px;background:rgba(0,0,0,.35);border:1px solid rgba(201,162,39,.35);
  color:var(--parchment);font-family:var(--body);font-size:18px;
}
.order-form input:focus,.order-form textarea:focus{outline:none;border-color:var(--gold-bright)}
.order-note{text-align:center;color:var(--parchment-dark);font-size:16px;opacity:.8}

/* Успех */
.center{text-align:center}
.success-emblem{font-size:64px;margin-bottom:10px}
.success-text{font-size:21px;margin-bottom:34px}
.success-text strong{color:var(--gold-bright);font-size:26px}

@media(max-width:960px){
  .editor-layout{grid-template-columns:1fr}
  .order-preview img{width:100%;max-width:340px;height:auto}
}