/* SVG / PNG to STL (svg-to-stl.html, png-to-stl.html): only what style.css and art.css don't have. */

.logo-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.logo-examples .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.logo-tool .options.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.logo-tool .options.five label { padding: 10px 2px; font-size: .78rem; }
.logo-tool .options.five svg { width: 26px; height: 26px; }
.logo-tool .logo-products label { padding: 10px 4px; font-size: .84rem; }
.logo-tool .logo-products label small { font-size: .74rem; }
@media (max-width: 520px) {
  .logo-tool .logo-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logo-tool .options.five label { font-size: .7rem; }
}

.logo-canvas-wrap { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.logo-canvas-wrap canvas { display: block; width: 100%; height: auto; max-height: min(420px, 60vh); object-fit: contain; }

.logo-colours { display: grid; gap: 10px; margin-bottom: 10px; }
.logo-colours:empty { display: none; }
.logo-col {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.logo-col.off { background: var(--surface); }
.logo-col.off .logo-swatch { opacity: .45; }
.logo-swatch {
  width: 30px; height: 30px; border-radius: 8px; background: var(--c);
  border: 1px solid rgba(16, 20, 24, .18);
}
.logo-col-main { min-width: 0; }
.logo-col-top { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; margin-bottom: 6px; }
.logo-col-top small { color: var(--muted); }
.logo-col-sel { display: grid; grid-template-columns: minmax(0, 9em) 22px minmax(0, 1fr); gap: 6px; align-items: center; }
.logo-col-sel select { padding: 7px 8px; min-width: 0; width: 100%; font-size: .86rem; }
.logo-col-sel .chip {
  width: 22px; height: 22px; border-radius: 50%; background: var(--c);
  border: 1px solid rgba(16, 20, 24, .18); box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .12);
}
.logo-col.off .logo-col-sel .chip { border-style: dashed; box-shadow: none; }
.logo-col-move { display: flex; flex-direction: column; gap: 4px; }
.logo-col-move[hidden] { display: none; }
.logo-col-move button {
  width: 30px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  cursor: pointer; font-size: .7rem; color: var(--ink); line-height: 1;
}
.logo-col-move button:hover { border-color: var(--accent); }
.logo-base { margin: 6px 0 16px; }
.logo-tool #order-note { margin: 0 0 12px; }
@media (max-width: 560px) {
  .logo-col-sel { grid-template-columns: 22px minmax(0, 1fr); }
  .logo-col-sel .role { grid-column: 1 / -1; }
}
.logo-col-move button:disabled { opacity: .3; cursor: default; }