/* Compact multi-colour picker used by both catalog creation and catalog editing. */
.sc-select-field[data-sc-colour-field] .sc-select-options,
.sc-select-field[data-editor-key="color"] .sc-select-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 6px;
  max-height: 230px;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
}

.sc-select-field[data-sc-colour-field] .sc-select-option,
.sc-select-field[data-editor-key="color"] .sc-select-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0;
  min-height: 34px;
  margin: 0 !important;
  padding: 7px 9px !important;
  border-radius: 6px;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 18px;
  text-align: left !important;
}

.sc-select-field[data-sc-colour-field] .sc-select-option:hover,
.sc-select-field[data-editor-key="color"] .sc-select-option:hover,
.sc-select-field[data-sc-colour-field] .sc-select-option.selected,
.sc-select-field[data-editor-key="color"] .sc-select-option.selected {
  background: #fff7ed;
  color: #9a3412 !important;
}

.sc-select-field[data-sc-colour-field] .sc-select-option input[type="checkbox"],
.sc-select-field[data-editor-key="color"] .sc-select-option input[type="checkbox"] {
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px;
  accent-color: #f59e0b;
  box-shadow: none !important;
}

.sc-select-field[data-sc-colour-field] .sc-select-option span,
.sc-select-field[data-editor-key="color"] .sc-select-option span {
  min-width: 0;
  overflow: hidden;
  color: inherit !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-select-field[data-sc-colour-field] .sc-select-picker summary,
.sc-select-field[data-editor-key="color"] .sc-select-picker summary {
  overflow: hidden;
  padding-right: 38px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-select-field[data-sc-colour-field] .sc-colour-other,
.sc-select-field[data-editor-key="color"] .sc-colour-other {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fffaf3;
}

.sc-select-field[data-sc-colour-field] .sc-colour-other[hidden],
.sc-select-field[data-editor-key="color"] .sc-colour-other[hidden] {
  display: none !important;
}

.sc-select-field[data-sc-colour-field] .sc-colour-other label,
.sc-select-field[data-editor-key="color"] .sc-colour-other label {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.sc-select-field[data-sc-colour-field] .sc-colour-other input,
.sc-select-field[data-editor-key="color"] .sc-colour-other input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
}

@media (max-width: 720px) {
  .sc-select-field[data-sc-colour-field] .sc-select-options,
  .sc-select-field[data-editor-key="color"] .sc-select-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 220px;
  }
}