/* Compact circular colour controls in PLP filters only. */
.cfs2030-plp #filterAccor .filterColor.color-circle {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  padding: 4px 0 6px;
}
.cfs2030-plp #filterAccor .filterColor.color-circle > li,
.cfs2030-plp #filterAccor .accordion-body .filterColor.color-circle > li:has(.form-check-input) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  align-items: center !important;
  gap: 5px;
  background: transparent !important;
  box-shadow: none !important;
}
.cfs2030-plp #filterAccor .filterColor.color-circle .colorSwatch,
.cfs2030-plp #filterAccor .accordion-body .filterColor.color-circle > li > label.btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
}
.cfs2030-plp #filterAccor .filterColor.color-circle > li > span:not(.cfs-facet-count) {
  width: auto;
  min-height: 13px;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}
.cfs2030-plp #filterAccor .filterColor.color-circle .cfs-facet-count {
  display: none;
}
.cfs2030-plp #filterAccor .filterColor.color-circle .colorSwatch::after {
  top: 50%;
  right: auto;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) scale(.75);
}
.cfs2030-plp #filterAccor .filterColor.color-circle > li:has(input:checked) .colorSwatch {
  box-shadow: 0 0 0 2px #262626, inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.cfs2030-plp #filterAccor .filterColor.color-circle > li:has(input:checked) .colorSwatch::after {
  transform: translate(-50%, -50%) scale(1);
}