.mkf-sort { margin: 0 0 14px; }

.mkf-sort__form{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* чтобы на узких экранах красиво переносилось */
}

.mkf-sort__label{
  font-size: 13px;
  opacity: .7;
  white-space: nowrap;
}

.mkf-sort__options{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mkf-sort__option{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border-radius: 999px;
}

.mkf-sort__option:hover{
  background: rgba(0,0,0,.04);
}

/* прячем нативный radio, рисуем свой */
.mkf-sort__option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mkf-sort__radio{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.mkf-sort__radio::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--mkf-accent); /* цвет активной точки */
}

/* активное состояние */
.mkf-sort__option input:checked + .mkf-sort__radio {
  border-color: var(--mkf-accent); /* цвет обводки */
}

.mkf-sort__option input:checked + .mkf-sort__radio::after{
  transform: scale(1);
}

.mkf-sort__text{
  font-size: 13px;
  white-space: nowrap;
}

.mkf-sort__option:hover .mkf-sort__radio {
  border-color: color-mix(in srgb, var(--mkf-accent) 60%, #000);
}